1

src/views/data-module/api.tsx

@@ -8,3 +8,26 @@ export const getTrainingStat = (params: any) => {
     // requestType: 'form'
   });
 };
+
+
+export const getTrainingStatList = (params: any) => {
+  return request.post(`/edu-app/musicPracticeRecordStat/trainingList`, {
+    data: params
+  });
+};
+
+
+export const getTestStat = (params: any) => {
+  return request.post('/edu-app/musicPracticeRecordStat/trainingStat', {
+    data: params
+    // requestType: 'form'
+  });
+};
+
+
+export const getTrainingRanking = (params: any) => {
+  return request.post('/edu-app/musicPracticeRecordStat/trainingRanking', {
+    data: params
+    // requestType: 'form'
+  });
+}

src/views/data-module/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, ref,watch } from 'vue';
+import { defineComponent, ref, watch } from 'vue';
 import styles from './index.module.less';
 import { NTabs, NTabPane, NSpace, NButton } from 'naive-ui';
 import { useRoute } from 'vue-router';
@@ -7,7 +7,10 @@ import CDatePicker from '/src/components/CDatePicker';
 import TrainData from '@/views/home/components/trainData';
 import PracticeData from '@/views/home/components/practiceData';
 import PracticeRanking from '@/views/home/components/practiceRanking';
-import { getNowDateAndMonday, getNowDateAndSunday } from '/src/utils/dateFormat';
+import {
+  getNowDateAndMonday,
+  getNowDateAndSunday
+} from '/src/utils/dateFormat';
 export default defineComponent({
   name: 'data-module',
   setup() {
@@ -18,9 +21,9 @@ export default defineComponent({
         activeTab.value = val.form.tabName;
       }
     });
-    const TrainDataRef = ref()
-    const PracticeDataRef = ref()
-    const PracticeRankingRef = ref()
+    const TrainDataRef = ref();
+    const PracticeDataRef = ref();
+    const PracticeRankingRef = ref();
     const setTabs = (val: any) => {
       setTabsCaches(val, 'tabName', route);
     };
@@ -28,19 +31,18 @@ export default defineComponent({
       getNowDateAndMonday(new Date().getTime()),
       getNowDateAndSunday(new Date().getTime())
     ]);
-    const onSearch = ()=>{
-      console.log(TrainDataRef.value)
-      if(TrainDataRef.value){
-        TrainDataRef.value.getList()
+    const onSearch = () => {
+      console.log(timer.value);
+      if (TrainDataRef.value) {
+        TrainDataRef.value.getList();
       }
-      if(PracticeDataRef.value){
-        PracticeDataRef.value.getList()
+      if (PracticeDataRef.value) {
+        PracticeDataRef.value.getList();
       }
-      if(PracticeRankingRef.value){
-        PracticeRankingRef.value.getList()
+      if (PracticeRankingRef.value) {
+        PracticeRankingRef.value.getList();
       }
-
-    }
+    };
     return () => (
       <div>
         <div class={styles.listWrap}>
@@ -53,34 +55,43 @@ export default defineComponent({
             pane-wrapper-style="margin: 0 -4px"
             pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
             v-Slots={{
-              suffix:()=><>
-                        <div class={styles.homeStudyInfoDate}>
-              <NSpace>
+              suffix: () => (
+                <>
+                  <div class={styles.homeStudyInfoDate}>
+                    <NSpace>
                       <CDatePicker
+                         v-model:value={timer.value}
                         separator={'-'}
                         type="daterange"
-                         timerValue={timer.value} ></CDatePicker>
-                <NButton type="primary" class={styles.searchBtn} onClick={()=>onSearch()}>
-                  搜索
-                </NButton>
-                <NButton type="primary" ghost class={styles.resetBtn}>
-                  重置
-                </NButton>
-              </NSpace>
-            </div>
-              </>
+                        timerValue={timer.value}></CDatePicker>
+                      <NButton
+                        type="primary"
+                        class={styles.searchBtn}
+                        onClick={() => onSearch()}>
+                        搜索
+                      </NButton>
+                      <NButton type="primary" ghost class={styles.resetBtn}>
+                        重置
+                      </NButton>
+                    </NSpace>
+                  </div>
+                </>
+              )
             }}>
             <NTabPane name="training " tab="训练统计">
-             <TrainData ref={TrainDataRef} timer={timer.value}></TrainData>
+              <TrainData ref={TrainDataRef} timer={timer.value}></TrainData>
             </NTabPane>
             <NTabPane name="practice" tab="练习数据">
-              <PracticeData ref={PracticeDataRef}  timer={timer.value}></PracticeData>
+              <PracticeData
+                ref={PracticeDataRef}
+                timer={timer.value}></PracticeData>
             </NTabPane>
             <NTabPane name="ranking" tab="练习排行">
-              <PracticeRanking ref={PracticeRankingRef}  timer={timer.value}></PracticeRanking>
+              <PracticeRanking
+                ref={PracticeRankingRef}
+                timer={timer.value}></PracticeRanking>
             </NTabPane>
           </NTabs>
-
         </div>
       </div>
     );

src/views/home/components/practiceData.tsx

@@ -1,39 +1,35 @@
-import { Ref, defineComponent, onMounted, reactive, ref } from 'vue';
+import { Ref, computed, defineComponent, onMounted, reactive, ref } from 'vue';
 import styles from '../index.module.less';
 import { NButton, NDataTable, NNumberAnimation } from 'naive-ui';
 import numeral from 'numeral';
 import { useECharts } from '@/hooks/web/useECharts';
 import Pagination from '/src/components/pagination';
-import { getTrainingStat } from '@/views/data-module/api'
-import { getTimes } from '/src/utils/dateFormat';
+import { getTestStat } from '@/views/data-module/api';
+import { getMinutes, getSecend, getTimes } from '/src/utils/dateFormat';
 import { useRoute, useRouter } from 'vue-router';
+import { getTrainingStatList } from '../../classList/api';
 export default defineComponent({
   name: 'home-practiceData',
-  props:{
-    timer:{
-      type:Array,
-      defaut:()=>[]
+  props: {
+    timer: {
+      type: Array,
+      defaut: () => []
     }
   },
-  setup(props,{expose}) {
+  setup(props, { expose }) {
     const chartRef = ref<HTMLDivElement | null>(null);
     const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
     const practiceFlag = ref(true);
     const payForm = reactive({
       height: '360px',
       width: '100%',
-      studentNum: 0,
+      practiceUserCount: 0,
       paymentAmount: 0,
-      dateList: [
-        '2022-10-10',
-        '2022-10-11',
-        '2022-10-12',
-        '2022-10-13',
-        '2022-10-14',
-        '2022-10-15',
-        '2022-10-16'
-      ],
-      timeList: [90, 128, 242, 120, 186, 77, 148]
+      practiceDurationAvg: 0,
+      practiceDays: 0,
+      practiceDurationTotal: 0,
+      dateList: [],
+      timeList: []
     });
 
     const state = reactive({
@@ -91,51 +87,92 @@ export default defineComponent({
       ] as any,
       goCourseVisiable: false
     });
+    const currentTimer = computed(() => {
+      return props.timer;
+    });
     const columns = () => {
       return [
         {
           title: '日期',
-          key: 'createTime'
+          key: 'date'
         },
         {
-          title: '练习人数',
-          key: 'quantityNum',
-          render(row: any) {
-            return <span>{row.quantityNum}人</span>;
-          }
-        },
-
-        {
           title: '平均练习时长(分钟)',
-          key: 'submitNum',
+          key: 'practiceDuration',
           render(row: any) {
-            return <span>{row.submitNum}分钟</span>;
+            return (
+              <>
+                {' '}
+                <>
+                  {row.practiceDuration
+                    ? getMinutes(row.practiceDuration) > 0
+                      ? getMinutes(row.practiceDuration) +
+                      '分' +
+                      getSecend(row.practiceDuration) +
+                      '秒'
+                      : getSecend(row.practiceDuration) + '秒'
+                    : 0 + '分钟'}
+                </>
+              </>
+            );
           }
         }
       ];
     };
     const getList = async () => {
-      try{
-        const res = await getTrainingStat({  ...getTimes(props.timer, ['startTime', 'endTime'], 'YYYY-MM-DD')})
+      try {
+        const res = await getTrainingStatList({
+          page: 1,
+          rows: 999,
+          ...getTimes(
+            currentTimer.value,
+            ['startTime', 'endTime'],
+            'YYYY-MM-DD'
+          )
+        });
+
+        const res2 = await getTestStat({
+          page: 1,
+          rows: 999,
+          ...getTimes(
+            currentTimer.value,
+            ['startTime', 'endTime'],
+            'YYYY-MM-DD'
+          )
+        });
+        state.tableList = res.data.rows;
 
-      }catch(e){
-        console.log(e)
+        payForm.practiceDurationAvg = res2.data.practiceDurationAvg;
+        payForm.practiceUserCount = res2.data.practiceUserCount;
+        payForm.dateList = res2.data.trainingStatDetailList.map((item: any) => {
+          return item.date;
+        });
+
+        payForm.timeList = res2.data.trainingStatDetailList.map((item: any) => {
+          return item.practiceDuration;
+        });
+
+        console.log('trainingStatDetailList', payForm.timeList);
+
+        setChart();
+      } catch (e) {
+        console.log(e);
       }
     };
-    expose({getList})
+    expose({ getList });
     const setChart = () => {
       setOptions({
         tooltip: {
           trigger: 'axis',
           axisPointer: {
-            type: 'none'
+            type: 'shadow'
           }
         },
         legend: {
           show: false,
           selected: {
             //在这里设置默认展示就ok了
-            '练习时长(分钟)': practiceFlag.value
+            '平均练习时长(分钟)': practiceFlag.value
           }
         },
         xAxis: {
@@ -177,14 +214,14 @@ export default defineComponent({
             data: payForm.timeList,
             type: 'bar',
             barWidth: '48px',
-            label: {
-              // 柱图头部显示值
-              show: true,
-              position: 'top',
-              color: '#333',
-              fontSize: '12px',
-              fontWeight: 600
-            },
+            // label: {
+            //   // 柱图头部显示值
+            //   show: true,
+            //   position: 'top',
+            //   color: '#333',
+            //   fontSize: '12px',
+            //   fontWeight: 600
+            // },
 
             itemStyle: {
               normal: {
@@ -206,15 +243,17 @@ export default defineComponent({
           if (Array.isArray(item)) {
             return [
               item[0].axisValueLabel,
-              ...item.map(
-                (d: any) =>
-                  `<br/>${
-                    d.marker
-                  }<span style="margin-top:10px;margin-left:5px;font-size: 13px;font-weight: 500;
+              ...item.map((d: any) => {
+                let str;
+                getMinutes(d.value) > 0
+                  ? (str =
+                    getMinutes(d.value) + '分' + getSecend(d.value) + '秒')
+                  : (str = getSecend(d.value) + '秒');
+                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>`
-              )
+                  line-height: 18px;">平均练习时长: ${str} </span>`;
+              })
             ].join('');
           } else {
             return item;
@@ -231,10 +270,9 @@ export default defineComponent({
       });
     };
 
-    onMounted(()=>{
-      getList()
-      setChart();
-    })
+    onMounted(() => {
+      getList();
+    });
 
     return () => (
       <>
@@ -244,7 +282,9 @@ export default defineComponent({
               <div class={styles.TrainDataItem}>
                 <p class={styles.TrainDataItemTitle}>
                   <span>
-                    <NNumberAnimation from={0} to={32}></NNumberAnimation>
+                    <NNumberAnimation
+                      from={0}
+                      to={payForm.practiceUserCount}></NNumberAnimation>
                   </span>
                   人
                 </p>
@@ -252,10 +292,28 @@ export default defineComponent({
               </div>
               <div class={styles.TrainDataItem}>
                 <p class={styles.TrainDataItemTitle}>
-                  <span>
-                    <NNumberAnimation from={0} to={32}></NNumberAnimation>
-                  </span>
-                  分钟
+                  {getMinutes(payForm.practiceDurationAvg) > 0 ? (
+                    <div>
+                      <span>
+                        <NNumberAnimation
+                          from={0}
+                          to={getMinutes(
+                            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>
@@ -290,14 +348,14 @@ export default defineComponent({
               loading={state.loading}
               columns={columns()}
               data={state.tableList}></NDataTable>
-            <Pagination
+            {/* <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>
       </>

src/views/home/components/practiceRanking.tsx

@@ -13,15 +13,17 @@ import SearchInput from '@/components/searchInput';
 import CSelect from '@/components/CSelect';
 import Pagination from '@/components/pagination';
 import add from './images/add.png';
+import { getMinutes, getSecend, getTimes } from '/src/utils/dateFormat';
+import { getTestList } from '../../classList/api';
 export default defineComponent({
   name: 'student-studentList',
-  props:{
-    timer:{
-      type:Array,
-      defaut:()=>[]
+  props: {
+    timer: {
+      type: Array,
+      defaut: () => []
     }
   },
-  setup(props, { emit,expose }) {
+  setup(props, { emit, expose }) {
     const state = reactive({
       searchWord: '',
       orchestraType: null,
@@ -35,36 +37,7 @@ export default defineComponent({
         rows: 10,
         pageTotal: 4
       },
-      tableList: [
-        {
-          studentName: '胡小小',
-          phone: '17625367893',
-          trainNum: '49',
-          trainDay: '9',
-          averageNum: '35'
-        },
-        {
-          studentName: '丁曼蓉',
-          phone: '14677789334',
-          trainNum: '49',
-          trainDay: '9',
-          averageNum: '35'
-        },
-        {
-          studentName: '李书意',
-          phone: '13467857893',
-          trainNum: '49',
-          trainDay: '9',
-          averageNum: '35'
-        },
-        {
-          studentName: '夏小满',
-          phone: '13925367893',
-          trainNum: '49',
-          trainDay: '9',
-          averageNum: '35'
-        }
-      ] as any
+      tableList: [] as any
     });
     const search = () => {
       console.log('search', state);
@@ -73,10 +46,84 @@ export default defineComponent({
     const onReset = () => {
       console.log('search');
     };
-    const getList = () => {
-      console.log('getList');
+    const getList = async () => {
+      state.loading = true;
+      try {
+        const res = await getTestList({
+          ...state.pagination,
+          ...getTimes(props.timer, ['startTime', 'endTime'], 'YYYY-MM-DD')
+        });
+
+        state.tableList = res.data.rows;
+
+        state.pagination.pageTotal = res.data.total;
+        state.loading = false;
+      } catch (e) {
+        state.loading = false;
+        console.log(e);
+      }
+    };
+    expose({ getList });
+    const handleSorterChange = (sroter: any) => {
+      if(!sroter){
+        practiceDaysRef.sortOrder = false
+        practiceDurationRef.sortOrder = false
+        practiceDurationAvgRef.sortOrder = false
+      }
+      console.log(sroter, 'sroter');
+      // getList()
     };
-    expose({getList})
+
+    const practiceDaysRef = reactive({
+      title: '练习天数',
+      key: 'practiceDays',
+      sorter: true,
+      sortOrder: false,
+      render(row: any) {
+        return <>{row.practiceDays ? row.practiceDays : 0}天</>;
+      }
+    });
+    const practiceDurationRef = reactive({
+      title: '练习总时长',
+      key: 'practiceDuration',
+      sorter: true,
+      sortOrder: false,
+      render(row: any) {
+        return (
+          <>
+            {row.practiceDuration
+              ? getMinutes(row.practiceDuration) > 0
+                ? getMinutes(row.practiceDuration) +
+                  '分' +
+                  getSecend(row.practiceDuration) +
+                  '秒'
+                : getSecend(row.practiceDuration) + '秒'
+              : 0}
+          </>
+        );
+      }
+    });
+    const practiceDurationAvgRef = reactive({
+      title: '平均练习时长',
+      key: 'practiceDurationAvg',
+      sorter: true,
+      sortOrder: false,
+      render(row: any) {
+        return (
+          <>
+            {row.practiceDurationAvg
+              ? getMinutes(row.practiceDurationAvg) > 0
+                ? getMinutes(row.practiceDurationAvg) +
+                  '分' +
+                  getSecend(row.practiceDurationAvg) +
+                  '秒'
+                : getSecend(row.practiceDurationAvg) + '秒'
+              : 0}
+          </>
+        );
+      }
+    });
+
     const columns = () => {
       return [
         {
@@ -84,27 +131,12 @@ export default defineComponent({
           key: 'studentName'
         },
         {
-          title: '练习天数',
-          key: 'trainDay',
-          render(row: any) {
-            return <span>{row.trainDay}天</span>;
-          }
+          title: '手机号',
+          key: 'studentPhone'
         },
-        {
-          title: '练习总时长',
-          key: 'trainNum',
-          render(row: any) {
-            return <span>{row.trainNum}分钟</span>;
-          }
-        },
-
-        {
-          title: '平均练习时长',
-          key: 'averageNum',
-          render(row: any) {
-            return <span>{row.averageNum}分钟</span>;
-          }
-        }
+        practiceDaysRef,
+        practiceDurationRef,
+        practiceDurationAvgRef
       ];
     };
     return () => (
@@ -114,7 +146,8 @@ export default defineComponent({
             class={styles.classTable}
             loading={state.loading}
             columns={columns()}
-            data={state.tableList}></NDataTable>
+            data={state.tableList}
+            onUpdate:sorter={handleSorterChange}></NDataTable>
           <Pagination
             v-model:page={state.pagination.page}
             v-model:pageSize={state.pagination.rows}

src/views/home/components/trainData.tsx

@@ -8,6 +8,7 @@ import { getTimes } from '/src/utils/dateFormat';
 import { getTrainingStat } from '../../data-module/api';
 import { useRoute, useRouter } from 'vue-router';
 import { getTrainingList } from '../../classList/api';
+import dayjs from 'dayjs';
 
 export default defineComponent({
   name: 'home-trainData',
@@ -104,8 +105,10 @@ export default defineComponent({
       ] as any,
       goCourseVisiable: false
     });
+
+
     const currentTimer = computed(()=>{
-      console.log('改变值')
+
       return props.timer
     })
     const columns = () => {
@@ -209,7 +212,6 @@ export default defineComponent({
       });
     };
     const getList = async () => {
-      console.log(currentTimer.value,'currentTimer.value')
       try {
         const res = await getTrainingStat({
           ...getTimes(currentTimer.value, ['startTime', 'endTime'], 'YYYY-MM-DD')
@@ -233,7 +235,11 @@ export default defineComponent({
       try {
         const res = await getTrainingList({
           ...state.pagination,
-          ...getTimes(currentTimer.value, ['startTime', 'endTime'], 'YYYY-MM-DD')
+          ...getTimes(
+            currentTimer.value,
+            ['startTime', 'endTime'],
+            'YYYY-MM-DD'
+          )
         });
 
         state.tableList = res.data.rows;

src/views/home/index.module.less

@@ -453,6 +453,9 @@
         margin-right: 40px;
 
         .TrainDataItemTitle {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
           text-align: center;
           font-size: 13px;
           font-weight: 400;
@@ -787,4 +790,8 @@
       }
     }
   }
+}
+
+.tableWrap {
+  margin-top: 40px;
 }