classroom-instruments/src/views/home/components/practiceData.tsx

import { Ref, computed, defineComponent,  reactive, ref } from 'vue';
import styles from '../index2.module.less';
import { NButton, NDataTable, NIcon, NNumberAnimation, NTooltip, useMessage } from 'naive-ui';
import { useECharts } from '@/hooks/web/useECharts';
// import Pagination from '/src/components/pagination';
import { getPracticePageStat, getTestStat } from '@/views/data-module/api';
import { formateSeconds, getHours, getLastMinutes, getMinutes, getSecend, getTimes } from '/src/utils/dateFormat';
import { api_practiceStatPage } from '../../classList/api';
import TheEmpty from '/src/components/TheEmpty';
import iconSortDefault from '@/common/images/icon-sort-default.png';
import iconSortDesc from '@/common/images/icon-sort-desc.png';
import iconSortAsc from '@/common/images/icon-sort-asc.png';
import { convertToChineseNumeral } from '/src/utils';
import { useRouter } from 'vue-router';
import { setTabsCaches } from '/src/hooks/use-async';
import iconQuestion from '/src/common/images/icon-question.png'
export default defineComponent({
  name: 'home-practiceData',
  props: {
    timer: {
      type: Array,
      defaut: () => []
    }
  },
  setup(props, { expose }) {
    const router = useRouter()
    const message = useMessage()
    const chartRef = ref<HTMLDivElement | null>(null);
    const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
    const practiceFlag = ref(true);
    const payForm = reactive({
      height: '360px',
      width: '100%',
      practiceDuration: 0,
      evaluateUserCount: 0,
      evaluateFrequency: 0,
      publishUserCount: 0,
      publishCount: 0,
      practiceUserCount: 0,
      paymentAmount: 0,
      practiceDurationAvg: 0,
      practiceDays: 0,
      practiceDurationTotal: 0,
      dateList: [],
      timeList: []
    });

    const state = reactive({
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 4
      },
      searchForm: {
        orderBy: null as any,
        sort: null as any,
      },
      tableList: [] as any,
      goCourseVisiable: false
    });
    const currentTimer = computed(() => {
      return props.timer;
    });

    const toolTitleTips = (title: string, item: any) => {
      return <NTooltip showArrow={false} placement="top-start">
      {{
        trigger: () => (
          <div class={styles.cell}>
            {title}
            <img
              class={styles.sortIcon}
              src={
                item.sortOrder === 'descend'
                  ? iconSortDesc
                  : item.sortOrder === 'ascend'
                  ? iconSortAsc
                  : iconSortDefault
              }
            />
          </div>
        ),
        default:
          item.sortOrder === 'descend'
            ? '点击升序'
            : item.sortOrder === 'ascend'
            ? '取消排序'
            : '点击降序'
      }}
    </NTooltip>
    }

    const practiceDurationRef = reactive({
      title() {
        return (
          toolTitleTips('练习总时长', practiceDurationRef)
        );
      },
      key: 'practiceDuration',
      sorter: true,
      sortOrder: false as any,
      render(row: any) {
        return <>{formateSeconds((row.practiceDuration as any) || 0)}</>
      }
    });

    const practiceDaysRef = reactive({
      title() {
        return (
          toolTitleTips('练习天数', practiceDaysRef)
        );
      },
      key: 'practiceDays',
      sorter: true,
      sortOrder: false as any
    });

    const practiceDurationAvgRef = reactive({
      title() {
        return (
          toolTitleTips('平均练习时长', practiceDurationAvgRef)
        );
      },
      key: 'practiceDurationAvg',
      sorter: true,
      sortOrder: false as any,
      render(row: any) {
        return <>{formateSeconds((row.practiceDurationAvg as any) || 0)}</>
      }
    });

    const evaluateFrequencyRef = reactive({
      title() {
        return (
          toolTitleTips('评测次数', evaluateFrequencyRef)
        );
      },
      key: 'evaluateFrequency',
      sorter: true,
      sortOrder: false as any
    });

    const publishCountRef = reactive({
      title() {
        return (
          toolTitleTips('作品数量', publishCountRef)
        );
      },
      key: 'publishCount',
      sorter: true,
      sortOrder: false as any
    });

    const publishScoreRef = reactive({
      title() {
        return (
          toolTitleTips('最新作品分数', publishScoreRef)
        );
      },
      key: 'publishScore',
      sorter: true,
      sortOrder: false as any
    });

    const publishTimeRef = reactive({
      title() {
        return (
          toolTitleTips('最新作品时间', publishTimeRef)
        );
      },
      key: 'publishTime',
      sorter: true,
      sortOrder: false as any
    });

    const copyTo = (text: string) => {
      const input = document.createElement('input');
      input.value = text;
      document.body.appendChild(input);
      input.select();
      input.setSelectionRange(0, input.value.length);
      document.execCommand('Copy');
      document.body.removeChild(input);
      message.success('复制成功');
    };
    const columns = () => {
      return [
        {
          title: '学生姓名',
          key: 'studentName',
          render: (row: any) => {
            return (
              <NTooltip showArrow={false} placement="top-start">
                {{
                  trigger: () => (
                    <div
                      style={{ userSelect: 'all', cursor: 'pointer' }}
                      onClick={() => copyTo(row.studentName)}>
                      {row.studentName}
                    </div>
                  ),
                  default: '点击复制'
                }}
              </NTooltip>
            );
          }
        },
        {
          title: '年级班级',
          key: 'date',
          render(row: any) {
            return (
              <>
                {row.currentGradeNum && row.currentClass
                  ? convertToChineseNumeral(row.currentGradeNum) + '年级' + row.currentClass + '班'
                  : ''}
              </>
            )
          }
        },
        {
          title: '乐器',
          key: 'instrumentName'
        },
        practiceDurationRef,
        practiceDaysRef,
        practiceDurationAvgRef,
        evaluateFrequencyRef,
        {
          title: () => <span style={{ display: 'flex', alignItems: 'center' }}>发布作品 <NTooltip showArrow={false}>
          {{
            trigger: () => (
                <img src={iconQuestion} style={{ width: '16px', height: '16px', marginLeft: '4px', cursor: 'pointer' }}  />
            ),
            default: () => '筛选时间段内评测是否发布作品'
          }}
        </NTooltip></span>,
          key: 'publishFlag',
          render: (row: any) => row.publishFlag ? '是' : '否'
        },
        publishCountRef,
        publishScoreRef,
        publishTimeRef,
        {
          title: '操作',
          key: 'titleImg',
          render: (row: any) => (
            <NButton
              type="primary"
              text
              onClick={() => {
                setTabsCaches('evaluatingRcode', 'tabName', {
                  path: '/studentDetail'
                });
                router.push({
                  path: '/studentDetail',
                  query: { studentId: row.studentId, studentName: row.studentName, times: JSON.stringify(currentTimer.value) }
                });
              }}
            >
              详情
            </NButton>
          )
        }
      ];
    };

    // 统计排序
    const handleSorterChange = (sorter: any) => {
      if (!sorter.order) {
        state.searchForm.orderBy = '' as string
        state.searchForm.sort = '' as string
        practiceDurationRef.sortOrder = false
        practiceDaysRef.sortOrder = false
        practiceDurationAvgRef.sortOrder = false
        evaluateFrequencyRef.sortOrder = false
        publishCountRef.sortOrder = false
        publishScoreRef.sortOrder = false
        publishTimeRef.sortOrder = false
      } else {
        state.searchForm.orderBy = sorter.columnKey
        practiceDurationRef.sortOrder = false
        practiceDaysRef.sortOrder = false
        practiceDurationAvgRef.sortOrder = false
        evaluateFrequencyRef.sortOrder = false
        publishCountRef.sortOrder = false
        publishScoreRef.sortOrder = false
        publishTimeRef.sortOrder = false
        if (sorter.columnKey == 'practiceDuration') {
          practiceDurationRef.sortOrder = sorter.order
        }
        if (sorter.columnKey == 'practiceDays') {
          practiceDaysRef.sortOrder = sorter.order
        }

        if (sorter.columnKey == 'practiceDurationAvg') {
          practiceDurationAvgRef.sortOrder = sorter.order
        }

        if (sorter.columnKey == 'evaluateFrequency') {
          evaluateFrequencyRef.sortOrder = sorter.order
        }

        if (sorter.columnKey == 'publishCount') {
          publishCountRef.sortOrder = sorter.order
        }

        if (sorter.columnKey == 'publishScore') {
          publishScoreRef.sortOrder = sorter.order
        }

        if (sorter.columnKey == 'publishTime') {
          publishTimeRef.sortOrder = sorter.order
        }

        state.searchForm.sort = sorter.order == 'ascend' ? 'asc' : 'desc'
      }
      getList2()
    }

    const getList2 = async () => {
      state.loading = true
      try {
        const res = await api_practiceStatPage({
          page: 1,
          rows: 999,
          ...state.searchForm,
          ...getTimes(
            currentTimer.value,
            ['startTime', 'endTime'],
            'YYYY-MM-DD'
          )
        });

        state.tableList = res.data.rows;
      } catch (e) {
        console.log(e);
      }
      state.loading = false
    };

    const getTestStatList = async () => {
      state.loading = true
      try {
        const res2 = await getTestStat({
          page: 1,
          rows: 999,
          ...getTimes(
            currentTimer.value,
            ['startTime', 'endTime'],
            'YYYY-MM-DD'
          )
        });

        payForm.dateList = res2.data.trainingStatDetailList.map((item: any) => {
          return item.date;
        });

        payForm.timeList = res2.data.trainingStatDetailList.map((item: any) => {
          return item.practiceUserCount;
        });

        setChart();
      } catch {
        // 
      }
      state.loading = false
    }

    const getPracticePageStatList = async () => {
      state.loading = true
      try {
        const {data} = await getPracticePageStat({
          page: 1,
          rows: 999,
          ...getTimes(
            currentTimer.value,
            ['startTime', 'endTime'],
            'YYYY-MM-DD'
          )
        });
        payForm.practiceDuration = data.practiceDuration;
        payForm.practiceDurationAvg = data.practiceDurationAvg;
        payForm.practiceUserCount = data.practiceUserCount;
        payForm.evaluateUserCount = data.evaluateUserCount
        payForm.evaluateFrequency = data.evaluateFrequency
        payForm.publishUserCount = data.publishUserCount
        payForm.publishCount = data.publishCount
      } catch {
        // 
      }
      state.loading = false
    }

    const getList = async () => {
      await getPracticePageStatList()
      await getTestStatList()
      await getList2()
    }

    expose({ getList });
    const setChart = () => {
      setOptions({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          show: false,
          selected: {
            //在这里设置默认展示就ok了
            练习人数: practiceFlag.value
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          axisLabel: {
            show: true
            // interval: 0
          },
          data: payForm.dateList
        },
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: '{value}人'
            },
            axisTick: {
              show: false
            },
            splitArea: {
              show: false,
              areaStyle: {
                color: ['rgba(255,255,255,0.2)']
              }
            },
            minInterval: 1,
            splitNumber: 5
          }
        ],
        grid: {
          left: '1%',
          right: '1%',
          top: '2%',
          bottom: 0,
          containLabel: true
        },
        series: [
          {
            data: payForm.timeList,
            type: 'bar',
            barWidth: '48px',

            itemStyle: {
              normal: {
                //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                barBorderRadius: [8, 8, 0, 0],
                color: '#CDE5FF'
              },
              emphasis: {
                focus: 'series',
                color: '#3583FA' //hover时改变柱子颜色
              }
            } as any
          }
        ],

        formatter: (item: any) => {
          if (Array.isArray(item)) {
            return [
              item[0].axisValueLabel,
              ...item.map((d: any) => {
                return `<br/>${d.marker}<span style="margin-top:10px;margin-left:5px;font-size: 13px;font-weight: 500;
                  color: #131415;font-weight: 600;
                  margin-top:12px
                  line-height: 18px;">练习人数: ${d.value}人 </span>`;
              })
            ].join('');
          } else {
            return item;
          }
        }
      });
    };

    getList();

    return () => (
      <>
        <div class={styles.homeTrainData}>
          <div class={styles.TrainDataTop}>
            <div class={styles.TrainDataTopLeft}>
              <div class={styles.TrainDataItem}>
                <p class={styles.TrainDataItemTitle}>
                  <div>
                    <span>
                      <NNumberAnimation
                        from={0}
                        to={payForm.practiceUserCount}></NNumberAnimation>
                    </span>
                    人
                  </div>
                </p>
                <p class={styles.TrainDataItemsubTitle}>练习人数</p>
              </div>
              <div class={styles.TrainDataItem}>
                <p class={styles.TrainDataItemTitle}>
                  {getHours(payForm.practiceDurationAvg) > 0 ? (
                      <div>
                        <span>
                          <NNumberAnimation
                            from={0}
                            to={getHours(
                              payForm.practiceDurationAvg
                            )}></NNumberAnimation>
                        </span>
                        时
                      </div>
                    ) : null}
                    
                  {getHours(payForm.practiceDurationAvg) > 0 || getLastMinutes(payForm.practiceDurationAvg) > 0 ? (
                    <div>
                      <span>
                        <NNumberAnimation
                          from={0}
                          to={getLastMinutes(
                            payForm.practiceDurationAvg
                          )}></NNumberAnimation>
                      </span>
                      分
                    </div>
                  ) : null}
                  <div>
                    <span>
                      <NNumberAnimation
                        from={0}
                        to={getSecend(
                          payForm.practiceDurationAvg
                        )}></NNumberAnimation>
                    </span>
                    秒
                  </div>
                </p>
                <p class={styles.TrainDataItemsubTitle}>平均每天练习时长</p>
              </div>

              <div class={styles.TrainDataItem}>
                <p class={styles.TrainDataItemTitle}>
                  {getHours(payForm.practiceDuration) > 0 ? (
                      <div>
                        <span>
                          <NNumberAnimation
                            from={0}
                            to={getHours(
                              payForm.practiceDuration
                            )}></NNumberAnimation>
                        </span>
                        时
                      </div>
                    ) : null}
                  {getHours(payForm.practiceDuration) > 0 || getLastMinutes(payForm.practiceDuration) > 0 ? (
                    <div>
                      <span>
                        <NNumberAnimation
                          from={0}
                          to={getLastMinutes(
                            payForm.practiceDuration
                          )}></NNumberAnimation>
                      </span>
                      分
                    </div>
                  ) : null}
                  <div>
                    <span>
                      <NNumberAnimation
                        from={0}
                        to={getSecend(
                          payForm.practiceDuration
                        )}></NNumberAnimation>
                    </span>
                    秒
                  </div>
                </p>
                <p class={styles.TrainDataItemsubTitle}>练习总时长</p>
              </div>

              <div class={styles.TrainDataItem}>
                <p class={styles.TrainDataItemTitle}>
                  <div>
                    <span>
                      <NNumberAnimation
                        from={0}
                        to={payForm.evaluateUserCount}></NNumberAnimation>/
                        <NNumberAnimation
                        from={0}
                        to={payForm.evaluateFrequency}></NNumberAnimation>
                    </span>
                  </div>
                </p>
                <p class={styles.TrainDataItemsubTitle}>评测人数/次数</p>
              </div>

              <div class={styles.TrainDataItem}>
                <p class={styles.TrainDataItemTitle}>
                  <div>
                    <span>
                      <NNumberAnimation
                        from={0}
                        to={payForm.publishUserCount}></NNumberAnimation>/
                        <NNumberAnimation
                        from={0}
                        to={payForm.publishCount}></NNumberAnimation>
                    </span>
                  </div>
                </p>
                <p class={styles.TrainDataItemsubTitle}>作品人数/数量</p>
              </div>
            </div>
            <div class={styles.TrainDataTopRight}>
              {/* <div
                onClick={() => {
                  practiceFlag.value = !practiceFlag.value;
                  setChart();
                }}
                class={[
                  styles.DataTopRightItem,
                  practiceFlag.value ? '' : styles.DataTopRightItemDis
                ]}>
                <div
                  class={[
                    styles.DataTopRightDot,
                    styles.DataTopRightDotBlue
                  ]}></div>
                <p>练习人数</p>
              </div> */}
            </div>
          </div>
          <div class={styles.chatrs}>
            <div
              ref={chartRef}
              style={{ height: payForm.height, width: payForm.width }}></div>
          </div>
          <div class={[styles.tableWrap, styles.noSort]}>
            <NDataTable
              v-slots={{
                empty: () => <TheEmpty></TheEmpty>
              }}
              class={styles.classTable}
              loading={state.loading}
              columns={columns()}
              onUpdate:sorter={handleSorterChange}
              data={state.tableList}></NDataTable>
            {/* <Pagination
              v-model:page={state.pagination.page}
              v-model:pageSize={state.pagination.rows}
              v-model:pageTotal={state.pagination.pageTotal}
              onList={getList}
              sync
              saveKey="orchestraRegistration-key"
            /> */}
          </div>
        </div>
      </>
    );
  }
});