修改

package-lock.json

@@ -24,6 +24,7 @@
         "echarts": "^5.4.2",
         "eventemitter3": "^5.0.1",
         "file-saver": "^2.0.5",
+        "hammerjs": "^2.0.8",
         "html2canvas": "^1.4.1",
         "jszip": "^3.10.1",
         "lib-flexible": "^0.3.2",
@@ -54,6 +55,7 @@
         "@babel/core": "^7.21.4",
         "@babel/preset-env": "^7.21.4",
         "@types/crypto-js": "^4.1.1",
+        "@types/hammerjs": "^2.0.46",
         "@types/node": "^16.18.23",
         "@types/numeral": "^2.0.2",
         "@typescript-eslint/eslint-plugin": "^5.57.1",
@@ -2305,6 +2307,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/hammerjs": {
+      "version": "2.0.46",
+      "resolved": "https://registry.npmmirror.com/@types/hammerjs/-/hammerjs-2.0.46.tgz",
+      "integrity": "sha512-ynRvcq6wvqexJ9brDMS4BnBLzmr0e14d6ZJTEShTBWKymQiHwlAyGu0ZPEFI2Fh1U53F7tN9ufClWM5KvqkKOw==",
+      "dev": true
+    },
     "node_modules/@types/inquirer": {
       "version": "8.2.6",
       "dev": true,
@@ -5273,6 +5281,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmmirror.com/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/handlebars": {
       "version": "4.7.8",
       "dev": true,

package.json

@@ -38,6 +38,7 @@
     "echarts": "^5.4.2",
     "eventemitter3": "^5.0.1",
     "file-saver": "^2.0.5",
+    "hammerjs": "^2.0.8",
     "html2canvas": "^1.4.1",
     "jszip": "^3.10.1",
     "lib-flexible": "^0.3.2",
@@ -68,6 +69,7 @@
     "@babel/core": "^7.21.4",
     "@babel/preset-env": "^7.21.4",
     "@types/crypto-js": "^4.1.1",
+    "@types/hammerjs": "^2.0.46",
     "@types/node": "^16.18.23",
     "@types/numeral": "^2.0.2",
     "@typescript-eslint/eslint-plugin": "^5.57.1",

src/components/CBreadcrumb/index.tsx

@@ -1,18 +1,10 @@
 import { defineComponent, ref, watch } from 'vue';
 import styles from './index.module.less';
-import {
-  NIcon,
-  NImage,
-  NDatePicker,
-  NSelect,
-  NSpace,
-  NBreadcrumb,
-  NBreadcrumbItem
-} from 'naive-ui';
+import { NSpace, NBreadcrumb, NBreadcrumbItem } from 'naive-ui';
 import icon_back from './images/icon_back.png';
 import icon_separator from './images/icon_separator.png';
-import activeArrow from './images/activeArrow.png';
-import arrow from './images/arrow.png';
+// import activeArrow from './images/activeArrow.png';
+// import arrow from './images/arrow.png';
 import { useRoute, useRouter } from 'vue-router';
 export default defineComponent({
   props: {
@@ -22,6 +14,7 @@ export default defineComponent({
       default: [] as any
     }
   },
+  emits: ['back'],
   name: 'CBreadcrumb',
   setup(props, { emit, attrs }) {
     const router = useRouter();
@@ -36,37 +29,38 @@ export default defineComponent({
       { deep: true, immediate: true }
     );
     return () => (
-      <>
-        <div class={styles.CBreadcrumb}>
-          <NSpace align="center" wrapItem={false} size={16}>
-            <img
-              style={{ cursor: 'pointer' }}
-              src={icon_back}
-              class={styles.icon_back}
-              onClick={() => router.go(-1)}
-            />
-            <NBreadcrumb separator="">
-              {list.value &&
-                list.value.map((item: any, index: number) => (
-                  <>
-                    <NBreadcrumbItem
-                      onClick={() =>
-                        router.push({
-                          path: item.path,
-                          query: { ...route.query }
-                        })
-                      }>
-                      {item.name}
-                    </NBreadcrumbItem>
-                    {index != lastNum.value - 1 ? (
-                      <img class={styles.separator} src={icon_separator} />
-                    ) : null}
-                  </>
-                ))}
-            </NBreadcrumb>
-          </NSpace>
-        </div>
-      </>
+      <div class={styles.CBreadcrumb}>
+        <NSpace align="center" wrapItem={false} size={16}>
+          <img
+            style={{ cursor: 'pointer' }}
+            src={icon_back}
+            class={styles.icon_back}
+            onClick={() => {
+              emit('back');
+              router.go(-1)
+            }}
+          />
+          <NBreadcrumb separator="">
+            {list.value &&
+              list.value.map((item: any, index: number) => (
+                <>
+                  <NBreadcrumbItem
+                    onClick={() =>
+                      router.push({
+                        path: item.path,
+                        query: { ...route.query }
+                      })
+                    }>
+                    {item.name}
+                  </NBreadcrumbItem>
+                  {index != lastNum.value - 1 ? (
+                    <img class={styles.separator} src={icon_separator} />
+                  ) : null}
+                </>
+              ))}
+          </NBreadcrumb>
+        </NSpace>
+      </div>
     );
   }
 });

src/components/layout/layoutTop.tsx

@@ -187,31 +187,6 @@ export default defineComponent({
     };
     loadImg(imgList);
 
-    // 功能引导
-    // const route = useRoute();
-    // const helpNoteList = reactive({
-    //   baseListTab: ''
-    // });
-    // const helpNoteStatus = computed(() => {
-    //   const routePath = route.path;
-    //   const hidePath = [
-    //     '/classDetail',
-    //     '/classStudentDetail',
-    //     '/notation',
-    //     '/xiaoku-ai',
-    //     '/xiaoku-list',
-    //     '/studentDetail',
-    //     '/xiaoku-detail',
-    //     '/classStudentRecode',
-    //     '/afterWorkDetail'
-    //   ];
-    //   // 单独判断个人信息页面[学校设置]有引导
-    //   if (route.path === '/setting') {
-    //     return helpNoteList.baseListTab === 'school' ? true : false;
-    //   } else {
-    //     return hidePath.includes(routePath) ? false : true;
-    //   }
-    // });
     return () => (
       <div class={[styles.layoutTop, 'layoutTop']}>
         <div class={styles.layoutLeft}>
@@ -431,7 +406,10 @@ export default defineComponent({
                 class={styles.logoutInfo}
                 onClick={() => {
                   users.logout();
-                  router.replace('/login');
+                  router.replace('/login')
+                  // .then(() => {
+                  //   window.location.reload();
+                  // });
                 }}>
                 <div class={styles.propWrapItem}>
                   <NImage

src/store/modules/users.ts

@@ -1,145 +1,147 @@
-import { defineStore } from 'pinia';
-import { store } from '@/store';
-import {
-  ACCESS_TOKEN,
-  ACCESS_TOKEN_ADMIN,
-  CURRENT_USER,
-  IM_TOKEN
-} from '@/store/mutation-types';
-import { storage } from '@/utils/storage';
-import { userLogin, getUserInfo } from '@/api/user';
-import { getAuthForAdmin } from '/src/utils';
-
-export interface IUserState {
-  token: string;
-  imToken: string;
-  username: string;
-  readCoursewareOpenAgreement: boolean;
-  avatar: string;
-  info: any;
-  imUserInfo: any;
-  noReadCount: number;
-}
-
-export const useUserStore = defineStore('user-store', {
-  state: (): IUserState => ({
-    token: storage.get(ACCESS_TOKEN, ''),
-    imToken: storage.get(IM_TOKEN, ''),
-    username: '',
-    avatar: '',
-    readCoursewareOpenAgreement: true, // 是否阅读协议 备课
-    noReadCount: 0, // 未读数量
-    info: storage.get(CURRENT_USER, {}),
-    imUserInfo: {} // IM
-  }),
-  getters: {
-    getNoReadCount(): number {
-      return this.noReadCount;
-    },
-    getToken(): string {
-      // 为了处理课堂乐器后台预览课件的功能
-      let Authorization = this.token;
-      // 为了处理课堂乐器后台预览课件的功能
-      const userAuth = getAuthForAdmin();
-      if (userAuth.authSource === 'admin') {
-        Authorization = userAuth.Authorization;
-      } else {
-        Authorization = this.token || '';
-      }
-      return Authorization;
-    },
-    getImToken(): string {
-      return this.imToken;
-    },
-    getAvatar(): string {
-      return this.avatar;
-    },
-    getNickname(): string {
-      return this.username;
-    },
-    getUserInfo(): any {
-      return this.info;
-    },
-    getImUserInfo(): any {
-      return this.imUserInfo;
-    },
-    getReadCoursewareOpenAgreement(): boolean {
-      return this.readCoursewareOpenAgreement;
-    }
-  },
-  actions: {
-    setNoReadCount(count: number) {
-      this.noReadCount = count;
-    },
-    setToken(token: string) {
-      this.token = token;
-    },
-    setImToken(token: string) {
-      this.imToken = token;
-    },
-    setAvatar(avatar: string) {
-      this.avatar = avatar;
-    },
-    setUsername(username: string) {
-      this.username = username;
-    },
-    setUserInfo(info: any) {
-      this.info = info;
-    },
-    setImUserInfo(info: any) {
-      this.imUserInfo = info;
-    },
-    setReadCoursewareOpenAgreement(info: any) {
-      this.readCoursewareOpenAgreement = info;
-    },
-    // 登录
-    async login(userInfo: any) {
-      try {
-        const { data } = await userLogin(userInfo);
-        const userToken = data.token_type + ' ' + data.access_token;
-        const ex = 7 * 24 * 60 * 60 * 1000;
-        storage.set(ACCESS_TOKEN, userToken, ex);
-        // storage.get(IM_TOKEN, data.imToken);
-
-        this.setToken(userToken);
-        // this.setImToken(data.imToken);
-        return Promise.resolve();
-      } catch (e) {
-        return Promise.reject(e);
-      }
-    },
-
-    // 获取用户信息
-    async getInfo() {
-      return new Promise((resolve, reject) => {
-        getUserInfo()
-          .then((res: any) => {
-            const result = res.data;
-            this.setUserInfo(result);
-            this.setAvatar(result.account.avatar);
-            this.setUsername(result.nickname);
-            this.setReadCoursewareOpenAgreement(
-              result.readCoursewareOpenAgreement
-            );
-            resolve(true);
-          })
-          .catch((error: any) => {
-            reject(error);
-          });
-      });
-    },
-
-    // 登出
-    async logout() {
-      this.setUserInfo('');
-      storage.remove(ACCESS_TOKEN);
-      storage.remove(CURRENT_USER);
-      return Promise.resolve('');
-    }
-  }
-});
-
-// Need to be used outside the setup
-export function useUserStoreWidthOut() {
-  return useUserStore(store);
-}
+import { defineStore } from 'pinia';
+import { store } from '@/store';
+import {
+  ACCESS_TOKEN,
+  ACCESS_TOKEN_ADMIN,
+  CURRENT_USER,
+  IM_TOKEN
+} from '@/store/mutation-types';
+import { storage } from '@/utils/storage';
+import { userLogin, getUserInfo } from '@/api/user';
+import { getAuthForAdmin } from '/src/utils';
+
+export interface IUserState {
+  token: string;
+  imToken: string;
+  username: string;
+  readCoursewareOpenAgreement: boolean;
+  avatar: string;
+  info: any;
+  imUserInfo: any;
+  noReadCount: number;
+}
+
+export const useUserStore = defineStore('user-store', {
+  state: (): IUserState => ({
+    token: storage.get(ACCESS_TOKEN, ''),
+    imToken: storage.get(IM_TOKEN, ''),
+    username: '',
+    avatar: '',
+    readCoursewareOpenAgreement: true, // 是否阅读协议 备课
+    noReadCount: 0, // 未读数量
+    info: storage.get(CURRENT_USER, {}),
+    imUserInfo: {} // IM
+  }),
+  getters: {
+    getNoReadCount(): number {
+      return this.noReadCount;
+    },
+    getToken(): string {
+      // 为了处理课堂乐器后台预览课件的功能
+      let Authorization = this.token;
+      // 为了处理课堂乐器后台预览课件的功能
+      const userAuth = getAuthForAdmin();
+      if (userAuth.authSource === 'admin') {
+        Authorization = userAuth.Authorization;
+      } else {
+        Authorization = this.token || '';
+      }
+      return Authorization;
+    },
+    getImToken(): string {
+      return this.imToken;
+    },
+    getAvatar(): string {
+      return this.avatar;
+    },
+    getNickname(): string {
+      return this.username;
+    },
+    getUserInfo(): any {
+      return this.info;
+    },
+    getImUserInfo(): any {
+      return this.imUserInfo;
+    },
+    getReadCoursewareOpenAgreement(): boolean {
+      return this.readCoursewareOpenAgreement;
+    }
+  },
+  actions: {
+    setNoReadCount(count: number) {
+      this.noReadCount = count;
+    },
+    setToken(token: string) {
+      this.token = token;
+    },
+    setImToken(token: string) {
+      this.imToken = token;
+    },
+    setAvatar(avatar: string) {
+      this.avatar = avatar;
+    },
+    setUsername(username: string) {
+      this.username = username;
+    },
+    setUserInfo(info: any) {
+      this.info = info;
+    },
+    setImUserInfo(info: any) {
+      this.imUserInfo = info;
+    },
+    setReadCoursewareOpenAgreement(info: any) {
+      this.readCoursewareOpenAgreement = info;
+    },
+    // 登录
+    async login(userInfo: any) {
+      try {
+        const { data } = await userLogin(userInfo);
+        const userToken = data.token_type + ' ' + data.access_token;
+        const ex = 7 * 24 * 60 * 60 * 1000;
+        storage.set(ACCESS_TOKEN, userToken, ex);
+        // storage.get(IM_TOKEN, data.imToken);
+
+        this.setToken(userToken);
+        // this.setImToken(data.imToken);
+        return Promise.resolve();
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+
+    // 获取用户信息
+    async getInfo() {
+      return new Promise((resolve, reject) => {
+        getUserInfo()
+          .then((res: any) => {
+            const result = res.data;
+            this.setUserInfo(result);
+            this.setAvatar(result.account.avatar);
+            this.setUsername(result.nickname);
+            this.setReadCoursewareOpenAgreement(
+              result.readCoursewareOpenAgreement
+            );
+            resolve(true);
+          })
+          .catch((error: any) => {
+            reject(error);
+          });
+      });
+    },
+
+    // 登出
+    async logout() {
+      this.setUserInfo('');
+      this.setUsername('');
+      this.setNoReadCount(0);
+      storage.remove(ACCESS_TOKEN);
+      storage.remove(CURRENT_USER);
+      return Promise.resolve('');
+    }
+  }
+});
+
+// Need to be used outside the setup
+export function useUserStoreWidthOut() {
+  return useUserStore(store);
+}

src/styles/index.less

@@ -264,6 +264,34 @@ body > .n-drawer-container-relative {
   }
 }
 
+.modalTitleNew {
+  border-radius: 12Px;
+  .n-card-header {
+    border-radius: 12Px 12Px 0 0;
+    position: relative;
+    padding: 24Px 30Px;
+    text-align: center;
+    background: #fff;
+    font-weight: 600;
+    font-size: 16Px;
+    color: #131415;
+    line-height: 22Px;
+    .n-card-header__main {
+      text-align: left;
+    }
+  }
+
+  .n-card-header__close {
+    position: absolute;
+    right: 30Px;
+    z-index: 99;
+  }
+
+  .n-card__content {
+    padding: 0;
+  }
+}
+
 .favitor-enter-active,
 .favitor-leave-active {
   // transition: all 0.5s cubic-bezier(0.18, 0.89, 0, 1.29);

src/utils/unique.ts

@@ -0,0 +1,12 @@
+let id = 0;
+
+export default function uniqueId() {
+  const num = 370 + ++id;
+  return (
+    'C' +
+    Math.random().toString(36).substr(3, 3) +
+    Number(`${Date.now()}`).toString(36) +
+    num.toString(36) +
+    'r'
+  );
+}

src/views/attend-class/component/image-modal/index.module.less

@@ -0,0 +1,28 @@
+.image-modal {
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  overflow: hidden;
+
+  .fingeringContainer {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+  }
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    // object-fit: contain;
+
+    -webkit-touch-callout: none;
+    -webkit-user-drag: none;
+    -moz-user-drag: none;
+    -ms-user-drag: none;
+    user-drag: none;
+  }
+}

src/views/attend-class/component/image-modal/index.tsx

@@ -0,0 +1,146 @@
+import {
+  defineComponent,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  watch
+} from 'vue';
+import Hammer from 'hammerjs';
+import styles from './index.module.less';
+import uniqueId from '/src/utils/unique';
+
+export default defineComponent({
+  name: 'ImageModal',
+  props: {
+    activeStatus: {
+      type: Boolean,
+      default: false
+    },
+    src: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['reset'],
+  setup(props, { expose }) {
+    const domId = uniqueId();
+    const transform = reactive({
+      scale: 1,
+      x: 0,
+      y: 0,
+      startScale: 1,
+      startX: 0,
+      startY: 0,
+      transition: ''
+    });
+
+    watch(
+      () => props.activeStatus,
+      () => {
+        if (!props.activeStatus) {
+          resetElement();
+        }
+      }
+    );
+
+    // 是否在拖拽
+    const isDragging = ref(false);
+    const loadElement = () => {
+      const fingeringContainer = document.getElementById(domId);
+      const mc = new Hammer.Manager(fingeringContainer as HTMLElement);
+      mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
+      mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([mc.get('pan')]);
+
+      let dragTimeout: any;
+
+      mc.on('panstart pinchstart', function () {
+        isDragging.value = true;
+        clearTimeout(dragTimeout);
+        transform.transition = '';
+
+        console.log('start drag')
+      });
+      mc.on('panmove pinchmove', function (ev) {
+        if (ev.type === 'pinchmove') {
+          transform.scale = ev.scale * transform.startScale;
+          transform.x = transform.startX + ev.deltaX;
+          transform.y = transform.startY + ev.deltaY;
+        }
+        if (ev.type === 'panmove') {
+          transform.x = transform.startX + ev.deltaX;
+          transform.y = transform.startY + ev.deltaY;
+        }
+      });
+      mc.on('panend pinchend', function () {
+        dragTimeout = setTimeout(() => {
+          isDragging.value = false;
+        }, 100); // 设置一个短暂的延迟以确保拖拽操作结束
+      });
+      //
+      mc.on('hammer.input', function (ev) {
+        if (ev.isFinal) {
+          // isDragging.value = false;
+          transform.startScale = transform.scale;
+          transform.startX = transform.x;
+          transform.startY = transform.y;
+        }
+      });
+    };
+    const resetElement = () => {
+      transform.transition = 'all 0.3s';
+      nextTick(() => {
+        transform.scale = 1;
+        transform.x = 0;
+        transform.y = 0;
+        transform.startScale = 1;
+        transform.startX = 0;
+        transform.startY = 0;
+      });
+    };
+
+    /** 滚轮缩放 */
+    const handleWheel = (e: WheelEvent) => {
+      e.preventDefault();
+      if (e.deltaY > 0) {
+        transform.scale -= 0.1;
+        if (transform.scale <= 1) {
+          transform.scale = 1;
+        }
+      } else {
+        transform.scale += 0.1;
+        if (transform.scale >= 3) {
+          transform.scale = 3;
+        }
+      }
+    };
+
+    onMounted(() => {
+      loadElement();
+      const fingeringContainer = document.getElementById(domId);
+      fingeringContainer?.addEventListener('wheel', handleWheel);
+    });
+
+    onUnmounted(() => {
+      const fingeringContainer = document.getElementById(domId);
+      fingeringContainer?.removeEventListener('wheel', handleWheel);
+    });
+
+    expose({
+      resetElement
+    });
+    return () => (
+      <div class={styles['image-modal']} id={domId}>
+        <img
+          src={props.src}
+          class={styles.fingeringContainer}
+          style={{
+            transform: `translate3d(${transform.x}px,${transform.y}px,0px) scale(${transform.scale})`,
+            transition: transform.transition
+          }}
+        />
+      </div>
+    );
+  }
+});

src/views/attend-class/index.tsx

@@ -94,6 +94,7 @@ import useDrag from '@/hooks/useDrag';
 import { getGuidanceShow } from '@/hooks/useDrag/useDragGuidance';
 import Dragbom from '@/hooks/useDrag/dragbom';
 import { api_cousseScheduleDetail } from '/src/api/user';
+import ImageModal from './component/image-modal';
 
 export type ToolType = 'init' | 'pen' | 'whiteboard' | 'call';
 export type ToolItem = {
@@ -624,7 +625,6 @@ export default defineComponent({
         if (activeItem.type === 'SONG' && activeItem.audioEle) {
           activeItem.audioEle?.stop();
         }
-        // console.log('🚀 ~ activeItem:', activeItem)
         // 停止曲谱的播放
         if (activeItem.type === 'MUSIC') {
           activeItem.iframeRef?.contentWindow?.postMessage(
@@ -1864,7 +1864,7 @@ export default defineComponent({
                           </Transition>
                         </>
                       ) : m.type === 'IMG' ? (
-                        <img src={m.content} />
+                        <ImageModal src={m.content} activeStatus={popupData.activeIndex === mIndex} />
                       ) : m.type === 'SONG' ? (
                         <AudioPay
                           imagePos={columnPos.value}

src/views/attend-class/model/train-settings/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, reactive } from 'vue';
+import { defineComponent, onMounted, reactive, ref } from 'vue';
 import styles from './index.module.less';
 import {
   NButton,
@@ -23,6 +23,7 @@ import requestOrigin from 'umi-request';
 import { modalClickMask } from '/src/state';
 import TheTipDialog from "@/components/TheTipDialog"
 import router from '/src/router';
+import ResetSubjectList from '/src/views/classList/modals/resetSubjectList';
 
 export default defineComponent({
   name: 'train-settings',
@@ -62,6 +63,8 @@ export default defineComponent({
       currentTime: dayjs(dayjs().format('YYYY-MM-DD')).valueOf(),
       expireDate: dayjs().add(7, 'day').format('YYYY-MM-DD') as any // 默认7天
     });
+    const showResetClass = ref(false);
+    const setClassSubjects = ref<any[]>([]);
     const getList = async () => {
       trainForms.loadingStatus = true;
       try {
@@ -161,23 +164,33 @@ export default defineComponent({
     function handleLessonAddErr(data:any){
       const { type, errList } = data
       tipDialog.type = type
-      if(type === "CLASS"){
-        // 班级乐器没有设置
-        tipDialog.cancelBtn = true
-        tipDialog.confirmButtonText = "去设置"
-        const msg = errList.map((item:any)=>{
-          return `<div><span style="color:#F44541">【${item.classGroupName}】</span>未设置乐器，请设置乐器后布置作业${errList.length>1?"；":""}</div>`
-        })
-        tipDialog.msg = msg.join("")
-      }else if(type === "PERSON"){
-        // 学生乐器没有设置
-        tipDialog.cancelBtn = true
-        tipDialog.confirmButtonText = "去设置"
-        const msg = errList.map((item:any)=>{
-          return `<div><span style="color:#F44541">【${item.studentName}】</span>所在<span style="color:#F44541">【${item.classGroupName}】</span>未设置乐器，请设置乐器后布置作业${errList.length>1?"；":""}</div>`
-        })
-        tipDialog.msg = msg.join("")
-      }else if(type === "MUSIC"){
+      // if(type === "CLASS"){
+      //   // 班级乐器没有设置
+      //   tipDialog.cancelBtn = true
+      //   tipDialog.confirmButtonText = "去设置"
+      //   const msg = errList.map((item:any)=>{
+      //     return `<div><span style="color:#F44541">【${item.classGroupName}】</span>未设置乐器，请设置乐器后布置作业${errList.length>1?"；":""}</div>`
+      //   })
+      //   tipDialog.msg = msg.join("")
+      // }else if(type === "PERSON"){
+      //   // 学生乐器没有设置
+      //   tipDialog.cancelBtn = true
+      //   tipDialog.confirmButtonText = "去设置"
+      //   const msg = errList.map((item:any)=>{
+      //     return `<div><span style="color:#F44541">【${item.studentName}】</span>所在<span style="color:#F44541">【${item.classGroupName}】</span>未设置乐器，请设置乐器后布置作业${errList.length>1?"；":""}</div>`
+      //   })
+      //   tipDialog.msg = msg.join("")
+      // }
+      if (type === 'CLASS' || type === 'PERSON') {
+        showResetClass.value = true;
+        const msgList = errList.map((item: any) => {
+          return {
+            classGroupId: item.classGroupId,
+            classGroupName: item.classGroupName
+          };
+        });
+        setClassSubjects.value = msgList;
+      } else if(type === "MUSIC"){
         // 曲目和当前选择学生的乐器对不上的时候
         tipDialog.cancelBtn = false
         tipDialog.confirmButtonText = "我知道了"
@@ -396,6 +409,20 @@ export default defineComponent({
           cancelBtn={tipDialog.cancelBtn}
           confirmButtonText={tipDialog.confirmButtonText}
         ></TheTipDialog>
+
+        <NModal
+          maskClosable={modalClickMask}
+          v-model:show={showResetClass.value}
+          style={{ width: '392px' }}
+          display-directive="if"
+          preset="card"
+          class={['modalTitleNew']}
+          title={'选择乐器'}>
+          <ResetSubjectList
+            activeRow={setClassSubjects.value}
+            onClose={() => (showResetClass.value = false)}
+          />
+        </NModal>
       </div>
     );
   }

src/views/classList/api.ts

@@ -1,240 +1,265 @@
-import request from '@/utils/request';
-/**
- * 班级管理 - 班级列表
- */
-export const classGroupList = (params: any) => {
-  return request.post('/edu-app/classGroup/page', {
-    data: params
-    // requestType: 'form'
-  });
-};
-
-/**
- * 获取班级里的学生
- */
-export const getCLassStudent = (params: any) => {
-  return request.post('/edu-app/student/page', {
-    data: params
-    // requestType: 'form'
-  });
-};
-
-/**
- * 学员调整
- */
-export const adjustStudent = (params: any) => {
-  return request.post('/edu-app/classGroup/adjustStudent', {
-    data: params
-    // requestType: 'form'
-  });
-};
-
-/**
- * 删除
- *
- */
-export const deleteClass = (params: any) => {
-  return request.post('/edu-app/classGroup/delete', {
-    data: params,
-    requestType: 'form'
-  });
-};
-
-/**
- * 新建班级
- */
-export const addClass = (params: any) => {
-  return request.post('/edu-app/classGroup/save', {
-    data: params
-  });
-};
-
-/**
- * 班级学员
- */
-export const getStudentList = (params: any) => {
-  return request.post('/edu-app/student/page', {
-    data: params
-  });
-};
-
-/**
- * 获取训练列表
- */
-export const getTrainingList = (params: any) => {
-  return request.post('/edu-app/lessonTraining/trainingList', {
-    data: params
-  });
-};
-
-/**
- * 获取作业信息
- */
-export const getWorkDetail = (params: any) => {
-  return request.get('/edu-app/lessonTraining/trainingDetail', {
-    data: params,
-    params
-  });
-};
-
-/***
- * 作业详情 列表
- */
-export const getTrainingStudentList = (params: any) => {
-  return request.post('/edu-app/lessonTraining/trainingStudentList', {
-    data: params
-  });
-};
-
-/**
- * 练习排行
- */
-export const getTestList = (params: any) => {
-  return request.post('/edu-app/musicPracticeRecordStat/trainingRanking', {
-    data: params
-  });
-};
-
-/**
- * 练习记录
- */
-export const getTestreCodeList = (params: any) => {
-  return request.post('/edu-app/musicPracticeRecordStat/trainingStat', {
-    data: params
-  });
-};
-
-/**
- * 获取学生详情
- */
-export const getStudentDetail = (params: any) => {
-  return request.get('/edu-app/student/detail', {
-    data: params,
-    params,
-    requestType: 'form'
-  });
-};
-/*
- * 上课记录
- */
-export const courseSchedulePage = (params: any) => {
-  return request.post('/edu-app/courseSchedule/page', {
-    data: params
-  });
-};
-
-/**
- * 开始上课 获取章节
- */
-export const getCourseChapter = (params: any) => {
-  return request.get(`/edu-app/lessonCourseware/detail/${params}`);
-};
-
-/**
- * 获取学生作业详情
- */
-
-export const getTrainingStudentDetail = (params: any) => {
-  return request.get(`/edu-app/lessonTraining/trainingStudentDetail`, {
-    params,
-    requestType: 'form'
-  });
-};
-
-/**
- * 获取练习统计
- */
-export const getTrainingStat = (params: any) => {
-  return request.post(`/edu-app/musicPracticeRecordStat/trainingStat`, {
-    data: params
-  });
-};
-
-/**
- * 获取班级作业详情
- */
-export const getTrainingClassDetail = (params: any) => {
-  return request.get(`/edu-app/lessonTraining/trainingDetail`, {
-    params,
-    requestType: 'form'
-  });
-};
-
-/**
- * 学生练习记录
- */
-export const getTrainingStatList = (params: any) => {
-  return request.post(`/edu-app/musicPracticeRecordStat/trainingList`, {
-    data: params
-  });
-};
-
-/**
- * @description: 后台练习统计列表
- */
-export const api_practiceStatPage = (params: object) => {
-  return request.post('/edu-app/musicPracticeRecordStat/practiceStatPage', {
-      data: params
-    })
-}
-
-/***
- * 创建班级群聊
- */
-export const addGroup = (params: any) => {
-  return request.post(`/edu-app/classGroup/addImGroup`, {
-    data: params,
-    requestType: 'form'
-  });
-};
-/**
- * 获取班级列表
- */
-export const getSubject = (params: any) => {
-  return request.post(`/edu-app/subject/page`, {
-    data: params
-  });
-};
-
-/**
- * 修改班级
- */
-export const resetClass = (params: any) => {
-  return request.post('/edu-app/classGroup/update', {
-    data: params
-  });
-};
-/**
- * 修改声部
- */
-export const updateSubject = (params: any) => {
-  return request.post('/edu-app/classGroup/updateSubject', {
-    data: params
-  });
-};
-
-/**
- * 修改乐器
- */
-export const updateInstrument = (params: any) => {
-  return request.post('/edu-app/classGroup/updateInstrument', {
-    data: params
-  });
-};
-/**
- * 班级详情
- */
-export const classGroupDetail = (params?: any) => {
-  return request.get('/edu-app/classGroup/detail/' + params.id, {
-    params
-  });
-};
-
-/**
- * 获取年级，班级 声部
- */
-export const getConfiguredSubjects = (params?: any) => {
-  return request.post('/edu-app/classGroup/getConfiguredSubjects', {
-    data: params
-  });
-};
+import request from '@/utils/request';
+/**
+ * 班级管理 - 班级列表
+ */
+export const classGroupList = (params: any) => {
+  return request.post('/edu-app/classGroup/page', {
+    data: params
+    // requestType: 'form'
+  });
+};
+
+/**
+ * 获取班级里的学生
+ */
+export const getCLassStudent = (params: any) => {
+  return request.post('/edu-app/student/page', {
+    data: params
+    // requestType: 'form'
+  });
+};
+
+/**
+ * 学员调整
+ */
+export const adjustStudent = (params: any) => {
+  return request.post('/edu-app/classGroup/adjustStudent', {
+    data: params
+    // requestType: 'form'
+  });
+};
+
+/**
+ * 删除
+ *
+ */
+export const deleteClass = (params: any) => {
+  return request.post('/edu-app/classGroup/delete', {
+    data: params,
+    requestType: 'form'
+  });
+};
+
+/**
+ * 新建班级
+ */
+export const addClass = (params: any) => {
+  return request.post('/edu-app/classGroup/save', {
+    data: params
+  });
+};
+
+/**
+ * 班级学员
+ */
+export const getStudentList = (params: any) => {
+  return request.post('/edu-app/student/page', {
+    data: params
+  });
+};
+
+/**
+ * 获取训练列表
+ */
+export const getTrainingList = (params: any) => {
+  return request.post('/edu-app/lessonTraining/trainingList', {
+    data: params
+  });
+};
+
+/**
+ * 获取作业信息
+ */
+export const getWorkDetail = (params: any) => {
+  return request.get('/edu-app/lessonTraining/trainingDetail', {
+    data: params,
+    params
+  });
+};
+
+/***
+ * 作业详情 列表
+ */
+export const getTrainingStudentList = (params: any) => {
+  return request.post('/edu-app/lessonTraining/trainingStudentList', {
+    data: params
+  });
+};
+
+/**
+ * 练习排行
+ */
+export const getTestList = (params: any) => {
+  return request.post('/edu-app/musicPracticeRecordStat/trainingRanking', {
+    data: params
+  });
+};
+
+/**
+ * 练习记录
+ */
+export const getTestreCodeList = (params: any) => {
+  return request.post('/edu-app/musicPracticeRecordStat/trainingStat', {
+    data: params
+  });
+};
+
+/**
+ * 获取学生详情
+ */
+export const getStudentDetail = (params: any) => {
+  return request.get('/edu-app/student/detail', {
+    data: params,
+    params,
+    requestType: 'form'
+  });
+};
+/*
+ * 上课记录
+ */
+export const courseSchedulePage = (params: any) => {
+  return request.post('/edu-app/courseSchedule/page', {
+    data: params
+  });
+};
+
+/**
+ * 开始上课 获取章节
+ */
+export const getCourseChapter = (params: any) => {
+  return request.get(`/edu-app/lessonCourseware/detail/${params}`);
+};
+
+/**
+ * 获取学生作业详情
+ */
+
+export const getTrainingStudentDetail = (params: any) => {
+  return request.get(`/edu-app/lessonTraining/trainingStudentDetail`, {
+    params,
+    requestType: 'form'
+  });
+};
+
+/**
+ * 获取练习统计
+ */
+export const getTrainingStat = (params: any) => {
+  return request.post(`/edu-app/musicPracticeRecordStat/trainingStat`, {
+    data: params
+  });
+};
+
+/**
+ * 获取班级作业详情
+ */
+export const getTrainingClassDetail = (params: any) => {
+  return request.get(`/edu-app/lessonTraining/trainingDetail`, {
+    params,
+    requestType: 'form'
+  });
+};
+
+/**
+ * 学生练习记录
+ */
+export const getTrainingStatList = (params: any) => {
+  return request.post(`/edu-app/musicPracticeRecordStat/trainingList`, {
+    data: params
+  });
+};
+
+/**
+ * @description: 后台练习统计列表
+ */
+export const api_practiceStatPage = (params: object) => {
+  return request.post('/edu-app/musicPracticeRecordStat/practiceStatPage', {
+    data: params
+  });
+};
+
+/***
+ * 创建班级群聊
+ */
+export const addGroup = (params: any) => {
+  return request.post(`/edu-app/classGroup/addImGroup`, {
+    data: params,
+    requestType: 'form'
+  });
+};
+/**
+ * 获取班级列表
+ */
+export const getSubject = (params: any) => {
+  return request.post(`/edu-app/subject/page`, {
+    data: params
+  });
+};
+
+/**
+ * 修改班级
+ */
+export const resetClass = (params: any) => {
+  return request.post('/edu-app/classGroup/update', {
+    data: params
+  });
+};
+/**
+ * 修改声部
+ */
+export const updateSubject = (params: any) => {
+  return request.post('/edu-app/classGroup/updateSubject', {
+    data: params
+  });
+};
+
+/**
+ * 修改乐器
+ */
+export const updateInstrument = (params: any) => {
+  return request.post('/edu-app/classGroup/updateInstrument', {
+    data: params
+  });
+};
+/**
+ * 班级详情
+ */
+export const classGroupDetail = (params?: any) => {
+  return request.get('/edu-app/classGroup/detail/' + params.id, {
+    params
+  });
+};
+
+/**
+ * 获取年级，班级 声部
+ */
+export const getConfiguredSubjects = (params?: any) => {
+  return request.post('/edu-app/classGroup/getConfiguredSubjects', {
+    data: params
+  });
+};
+
+/**
+ * 获取班级声部
+ */
+export const getClassSubjects = (params?: any) => {
+  return request.post('/edu-app/classGroup/getClassSubjects', {
+    data: params
+  });
+};
+
+/**
+ * 批量班级声部
+ */
+export const updateBatchInstrument = (params?: any) => {
+  return request.post('/edu-app/classGroup/updateBatchInstrument', {
+    data: params
+  });
+};
+
+/**
+ * 班级学生名单 统计
+ */
+export const api_studentStat = (classGroupId: string) => {
+  return request.get(`/edu-app/classGroup/studentStat/${classGroupId}`);
+};

src/views/classList/classDetail.tsx

@@ -13,7 +13,7 @@ export default defineComponent({
   name: 'base-setting',
   setup() {
     const classDetailTabs = sessionStorage.getItem('classDetailTabs');
-    const activeTab = ref(classDetailTabs || 'student');
+    const activeTab = ref(classDetailTabs || 'afterWork');
     sessionStorage.removeItem('classDetailTabs');
     const route = useRoute();
     const routerList = ref([
@@ -64,18 +64,18 @@ export default defineComponent({
             animated={false}
             pane-wrapper-style="margin: 0 -4px"
             pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;">
-            <NTabPane name="student" tab="学员名单">
-              <ClassStudent upgradeFlag={upgradeFlag.value}></ClassStudent>
-            </NTabPane>
             <NTabPane name="afterWork" tab="课后作业">
               <AfterWork upgradeFlag={upgradeFlag.value}></AfterWork>
             </NTabPane>
-            <NTabPane name="practice" tab="练习记录">
+            <NTabPane name="practice" tab="学练记录">
               <TestRecode></TestRecode>
             </NTabPane>
             <NTabPane name="attendclass" tab="上课记录">
               <ClassRecord />
             </NTabPane>
+            <NTabPane name="student" tab="学员名单">
+              <ClassStudent upgradeFlag={upgradeFlag.value}></ClassStudent>
+            </NTabPane>
           </NTabs>
         </div>
       </div>

src/views/classList/components/classStudent.tsx

@@ -6,6 +6,7 @@ import {
   NForm,
   NFormItem,
   NModal,
+  NNumberAnimation,
   NSpace,
   NTooltip,
   useMessage
@@ -13,7 +14,7 @@ import {
 import SearchInput from '@/components/searchInput';
 import CSelect from '@/components/CSelect';
 import Pagination from '@/components/pagination';
-import { getStudentList } from '../api';
+import { api_studentStat, getStudentList } from '../api';
 import { useRoute, useRouter } from 'vue-router';
 import TheEmpty from '/src/components/TheEmpty';
 import UpdateStudent from '../../studentList/modals/update-student';
@@ -30,7 +31,10 @@ export default defineComponent({
     const message = useMessage();
     const route = useRoute();
     const router = useRouter();
-
+    const payForm = reactive({
+      vipStudentNum: 0,
+      studentNum: 0
+    });
     const state = reactive({
       upgradeFlag: props.upgradeFlag == 0 ? true : false, // 是否为历史班
       searchForm: { keyword: '', gender: '' as any, membership: '' as any },
@@ -63,6 +67,7 @@ export default defineComponent({
         gender: '' as any,
         membership: '' as any
       };
+      getInfo();
       search();
       setCache({ current: state.searchForm, saveKey: 'classDetailStudent' });
     };
@@ -92,7 +97,19 @@ export default defineComponent({
         state.searchForm = active;
       }
     });
+
+    const getInfo = async () => {
+      try {
+        const { data } = await api_studentStat(route.query.id as any);
+        payForm.studentNum = data.studentNum || 0;
+        payForm.vipStudentNum = data.vipStudentNum || 0;
+      } catch (e) {
+        console.log(e);
+      }
+    };
+
     onMounted(() => {
+      getInfo();
       getList();
     });
 
@@ -285,18 +302,39 @@ export default defineComponent({
             </NFormItem>
           </NForm>
         </div>
-        {/* <NButton
-          class={styles.addBtn}
-          type="primary"
-          v-slots={{
-            icon: () => (
-              <>
-                <NImage class={styles.addBtnIcon} src={add}></NImage>
-              </>
-            )
-          }}>
-          新增学生
-        </NButton> */}
+        <div class={['section-container']}>
+          <div class={styles.TrainDataTop}>
+            <div class={styles.TrainDataTopLeft}>
+              <div class={styles.TrainDataItem}>
+                <p class={styles.TrainDataItemTitle}>
+                  <div>
+                    <span>
+                      <NNumberAnimation
+                        from={0}
+                        to={payForm.studentNum}></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.vipStudentNum}></NNumberAnimation>
+                    </span>
+                    人
+                  </div>
+                </p>
+                <p class={styles.TrainDataItemsubTitle}>会员人数</p>
+              </div>
+            </div>
+            <div class={styles.TrainDataTopRight}></div>
+          </div>
+        </div>
         <div class={styles.tableWrap}>
           <NDataTable
             v-slots={{

src/views/classList/components/testRecode.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, nextTick, onMounted, reactive, ref } from 'vue';
+import { defineComponent, onMounted, reactive, ref } from 'vue';
 import styles from '../index.module.less';
 import {
   NButton,
@@ -7,28 +7,24 @@ import {
   NFormItem,
   NGi,
   NGrid,
-  NImage,
-  NModal,
   NNumberAnimation,
-  NSelect,
   NSpace,
-  NTooltip
+  NTooltip,
+  useMessage
 } from 'naive-ui';
 import SearchInput from '@/components/searchInput';
 import CSelect from '@/components/CSelect';
 import Pagination from '@/components/pagination';
-import add from './images/add.png';
+// import add from './images/add.png';
 import {
   getNowDateAndMonday,
   getNowDateAndSunday,
   getTimes,
-  getMinutes,
   getSecend,
   formateSeconds,
   getHours,
   getLastMinutes
 } from '/src/utils/dateFormat';
-import { getTestList, getTrainingStat } from '../api';
 import CDatePicker from '/src/components/CDatePicker';
 import { useRoute, useRouter } from 'vue-router';
 import TheEmpty from '/src/components/TheEmpty';
@@ -36,38 +32,42 @@ import { initCache, setCache } from '/src/hooks/use-async';
 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 iconQuestion from '/src/common/images/icon-question.png';
+import { getPracticePageStat } from '../../data-module/api';
+import { api_practiceStatPage } from '../api';
 
 export default defineComponent({
   name: 'student-studentList',
-  setup(props, { emit }) {
+  setup() {
+    const message = useMessage();
     const state = reactive({
       searchForm: {
-        ase: 0,
-        sortType: 1,
+        orderBy: null as any,
+        sort: null as any,
         keyword: '',
-        trainingStatus: null as any,
         vipFlag: '' as any
       },
-      searchWord: '',
-      orchestraType: null,
-      courseTypeCode: null,
-      subjectId: null,
-      classId: null,
-      studentType: null,
       loading: false,
       pagination: {
         page: 1,
         rows: 10,
         pageTotal: 4
       },
-      tableList: [] as any,
-      memberNumber: 0,
-      testInfo: {
-        practiceDurationAvg: 0,
-        vipUserCount: 0,
-        practiceUserCount: 0
-      },
-      activeRow: null
+      tableList: [] as any
+    });
+
+    const payForm = reactive({
+      practiceDuration: 0,
+      evaluateUserCount: 0,
+      evaluateFrequency: 0,
+      publishUserCount: 0,
+      publishCount: 0,
+      practiceUserCount: 0,
+      paymentAmount: 0,
+      practiceDurationAvg: 0,
+      practiceDays: 0,
+      practiceDurationTotal: 0
     });
     const route = useRoute();
     const router = useRouter();
@@ -90,11 +90,10 @@ export default defineComponent({
         getNowDateAndSunday(new Date().getTime())
       ];
       state.searchForm = {
-        ase: 0,
-        sortType: 1,
+        orderBy: null as any,
+        sort: null as any,
         keyword: '',
-        trainingStatus: null as any,
-        vipFlag: ''
+        vipFlag: '' as any
       };
       search();
       setCache({
@@ -114,13 +113,16 @@ export default defineComponent({
     const getList = async () => {
       state.loading = true;
       try {
-        const res = await getTestList({
+        const { keyword, ...more } = state.searchForm;
+        const res = await api_practiceStatPage({
           classGroupId: route.query.id,
-          ...state.searchForm,
+          ...more,
+          studentName: keyword,
           ...state.pagination,
           ...getTimes(timer.value, ['startTime', 'endTime'], 'YYYY-MM-DD')
         });
 
+        console.log(res, 'res')
         state.tableList = res.data.rows;
 
         state.pagination.pageTotal = res.data.total;
@@ -133,13 +135,20 @@ export default defineComponent({
 
     const getInfo = async () => {
       try {
-        const res = await getTrainingStat({
+        const { data } = await getPracticePageStat({
+          page: 1,
+          rows: 999,
+          studentName: state.searchForm.keyword,
           classGroupId: route.query.id,
           ...getTimes(timer.value, ['startTime', 'endTime'], 'YYYY-MM-DD')
         });
-        state.testInfo.practiceDurationAvg = res.data.practiceDurationAvg;
-        state.testInfo.practiceUserCount = res.data.practiceUserCount;
-        state.testInfo.vipUserCount = res.data.vipUserCount;
+        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 (e) {
         console.log(e);
       }
@@ -147,14 +156,6 @@ export default defineComponent({
     onMounted(() => {
       getInfo();
       getList();
-
-      // nextTick(() => {
-      //   // 把默认的排序删除
-      //   const dom = document.querySelectorAll('.n-data-table-sorter');
-      //   dom.forEach((item: any) => {
-      //     item.style.display = 'none';
-      //   });
-      // });
     });
     const gotoStudentDetail = (row: any) => {
       router.push({
@@ -166,187 +167,272 @@ export default defineComponent({
         }
       });
     };
+    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 (
-          <NTooltip showArrow={false} placement="top-start">
-            {{
-              trigger: () => (
-                <div class={styles.cell}>
-                  练习天数
-                  <img
-                    class={styles.sortIcon}
-                    src={
-                      practiceDaysRef.sortOrder === 'descend'
-                        ? iconSortDesc
-                        : practiceDaysRef.sortOrder === 'ascend'
-                        ? iconSortAsc
-                        : iconSortDefault
-                    }
-                  />
-                </div>
-              ),
-              default:
-                practiceDaysRef.sortOrder === 'descend'
-                  ? '点击升序'
-                  : practiceDaysRef.sortOrder === 'ascend'
-                  ? '取消排序'
-                  : '点击降序'
-            }}
-          </NTooltip>
-        );
+        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 <>{row.practiceDays ? row.practiceDays : 0}天</>;
+        return formateSeconds((row.practiceDurationAvg as any) || 0);
       }
     });
 
-    const practiceDurationRef = reactive({
+    const evaluateFrequencyRef = reactive({
       title() {
-        return (
-          <NTooltip showArrow={false} placement="top-start">
-            {{
-              trigger: () => (
-                <div class={styles.cell}>
-                  学练时长
-                  <img
-                    class={styles.sortIcon}
-                    src={
-                      practiceDurationRef.sortOrder === 'descend'
-                        ? iconSortDesc
-                        : practiceDurationRef.sortOrder === 'ascend'
-                        ? iconSortAsc
-                        : iconSortDefault
-                    }
-                  />
-                </div>
-              ),
-              default:
-                practiceDurationRef.sortOrder === 'descend'
-                  ? '点击升序'
-                  : practiceDurationRef.sortOrder === 'ascend'
-                  ? '取消排序'
-                  : '点击降序'
-            }}
-          </NTooltip>
-        );
+        return toolTitleTips('评测次数', evaluateFrequencyRef);
       },
-      key: 'practiceDuration',
+      key: 'evaluateFrequency',
+      sorter: true,
+      sortOrder: false as any
+    });
+
+    const publishCountRef = reactive({
+      title() {
+        return toolTitleTips('作品数量', publishCountRef);
+      },
+      key: 'publishCount',
+      sorter: true,
+      sortOrder: false as any,
+      render(row: any) {
+        return row.publishCount || 0;
+      }
+    });
+
+    const publishScoreRef = reactive({
+      title() {
+        return toolTitleTips('最新作品分数', publishScoreRef);
+      },
+      key: 'publishScore',
       sorter: true,
       sortOrder: false as any,
       render(row: any) {
-        return (
-          <>
-            {row.practiceDuration
-              ? formateSeconds(row.practiceDuration, 1)
-              : 0 + '秒'}
-          </>
-        );
+        return row.publishScore === null ? '--' : row.publishScore;
       }
     });
+
+    const publishTimeRef = reactive({
+      title() {
+        return toolTitleTips('最新作品时间', publishTimeRef);
+      },
+      key: 'publishTime',
+      sorter: true,
+      sortOrder: false as any,
+      render(row: any) {
+        return row.publishTime || '--';
+      }
+    });
+
+    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'
-        },
-        {
-          title: '手机号',
-          key: 'studentPhone'
+          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: 'sex',
           render(row: any) {
-            return (
-              <>
-                {row.gender + '' != 'null'
-                  ? row.gender == '0'
-                    ? '女'
-                    : '男'
-                  : '--'}
-              </>
-            );
+            return row.gender + '' != 'null'
+              ? row.gender == '0'
+                ? '女'
+                : '男'
+              : '--';
           }
         },
         {
           title: '学生类型',
-          key: 'studentType',
+          key: 'vipFlag',
           render(row: any) {
-            return <>{row.vipFlag ? '会员' : '普通'}</>;
+            return row.vipFlag ? '会员' : '普通';
           }
         },
-        practiceDaysRef,
-        practiceDurationRef,
-        // {
-        //   title: '练习天数',
-        //   key: 'practiceDays',
-        //   render(row: any) {
-        //     return <>{row.practiceDays ? row.practiceDays : 0}天</>;
-        //   }
-        // },
-        // {
-        //   title: '学练时长',
-        //   key: 'studentType',
-        //   render(row: any) {
-        //     return (
-        //       <>
-        //         {row.practiceDuration
-        //           ? getMinutes(row.practiceDuration) > 0
-        //             ? getMinutes(row.practiceDuration) +
-        //               '分' +
-        //               getSecend(row.practiceDuration) +
-        //               '秒'
-        //             : getSecend(row.practiceDuration) + '秒'
-        //           : 0 + '秒'}
-        //       </>
-        //     );
-        //   }
-        // },
         {
-          title: '操作',
-          key: 'id',
+          title: '乐器',
+          key: 'instrumentName',
           render(row: any) {
-            return (
-              <NButton
-                text
-                type="primary"
-                onClick={() => {
-                  gotoStudentDetail(row);
-                }}>
-                详情
-              </NButton>
-            );
+            return row.instrumentName || '--';
           }
+        },
+        practiceDurationRef,
+        practiceDaysRef,
+        practiceDurationAvgRef,
+        evaluateFrequencyRef,
+        {
+          title: () => (
+            <span style={{ display: 'flex', alignItems: 'center' }}>
+              发布作品{' '}
+              <NTooltip showArrow={false}>
+                {{
+                  trigger: () => (
+                    <img src={iconQuestion} class={styles.tipImg} />
+                  ),
+                  default: () => '筛选时间段内评测是否发布作品'
+                }}
+              </NTooltip>
+            </span>
+          ),
+          key: 'publishFlag',
+          render: (row: any) => (row.publishFlag ? '是' : '否')
+        },
+        publishCountRef,
+        publishScoreRef,
+        publishTimeRef,
+        {
+          title: '操作',
+          key: 'titleImg',
+          render: (row: any) => (
+            <NButton
+              type="primary"
+              text
+              onClick={() => {
+                gotoStudentDetail(row);
+                // setTabsCaches('evaluatingRcode', 'tabName', {
+                //   path: '/studentDetail'
+                // });
+                // router.push({
+                //   path: '/studentDetail',
+                //   query: {
+                //     studentId: row.studentId,
+                //     studentName: row.studentName,
+                //     times: JSON.stringify(currentTimer.value)
+                //   }
+                // });
+              }}>
+              详情
+            </NButton>
+          )
         }
       ];
     };
 
-    const handleSorterChange = (sroter: any) => {
-      if (!sroter) {
-        state.searchForm.ase = 0;
-        state.searchForm.sortType = 1;
-        practiceDaysRef.sortOrder = false;
+    // 统计排序
+    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 {
-        const list = {
-          practiceDuration: 1,
-          practiceDays: 2
-        };
-        state.searchForm.sortType =
-          list[sroter.columnKey as 'practiceDuration' | 'practiceDays'];
-        if (sroter.columnKey == 'practiceDuration') {
-          practiceDurationRef.sortOrder = sroter.order;
-          practiceDaysRef.sortOrder = false;
+        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 (sroter.columnKey == 'practiceDays') {
-          practiceDaysRef.sortOrder = sroter.order;
-          practiceDurationRef.sortOrder = false;
+        if (sorter.columnKey == 'practiceDays') {
+          practiceDaysRef.sortOrder = sorter.order;
         }
-        state.searchForm.ase = sroter.order == 'ascend' ? 1 : 0;
+
+        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';
       }
       getList();
     };
@@ -411,67 +497,87 @@ export default defineComponent({
           </NForm>
         </div>
         <div class={['section-container']}>
-          <NGrid x-gap="12" cols={8}>
-            <NGi>
+          <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}>
-                <div>
-                  <p class={styles.TrainDataItemTitle}>
+                <p class={styles.TrainDataItemTitle}>
+                  {getHours(payForm.practiceDurationAvg) > 0 ? (
                     <div>
                       <span>
                         <NNumberAnimation
                           from={0}
-                          to={
-                            state.testInfo.practiceUserCount
-                          }></NNumberAnimation>
-                      </span>{' '}
-                      人
+                          to={getHours(
+                            payForm.practiceDurationAvg
+                          )}></NNumberAnimation>
+                      </span>
+                      时
                     </div>
-                  </p>
-                </div>
-                <p class={styles.TrainDataItemsubTitle}>练习人数</p>
-              </div>
-            </NGi>
-            <NGi>
-              <div class={styles.TrainDataItem}>
-                <p class={styles.TrainDataItemTitle}>
+                  ) : 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={state.testInfo.vipUserCount}></NNumberAnimation>
-                    </span>{' '}
-                    人
+                        to={getSecend(
+                          payForm.practiceDurationAvg
+                        )}></NNumberAnimation>
+                    </span>
+                    秒
                   </div>
                 </p>
-                <p class={styles.TrainDataItemsubTitle}>会员人数</p>
+                <p class={styles.TrainDataItemsubTitle}>平均每天练习时长</p>
               </div>
-            </NGi>
-            <NGi>
+
               <div class={styles.TrainDataItem}>
                 <p class={styles.TrainDataItemTitle}>
-                  {getHours(state.testInfo.practiceDurationAvg) > 0 ? (
+                  {getHours(payForm.practiceDuration) > 0 ? (
                     <div>
                       <span>
                         <NNumberAnimation
                           from={0}
                           to={getHours(
-                            state.testInfo.practiceDurationAvg
+                            payForm.practiceDuration
                           )}></NNumberAnimation>
                       </span>
-                      <i style={{ width: '4px', display: 'inline-block' }}></i>
                       时
-                      <i style={{ width: '4px', display: 'inline-block' }}></i>
                     </div>
                   ) : null}
-                  {getHours(state.testInfo.practiceDurationAvg) > 0 || getLastMinutes(state.testInfo.practiceDurationAvg) > 0 ? (
+                  {getHours(payForm.practiceDuration) > 0 ||
+                  getLastMinutes(payForm.practiceDuration) > 0 ? (
                     <div>
                       <span>
                         <NNumberAnimation
                           from={0}
                           to={getLastMinutes(
-                            state.testInfo.practiceDurationAvg
+                            payForm.practiceDuration
                           )}></NNumberAnimation>
-                      </span>{' '}
+                      </span>
                       分
                     </div>
                   ) : null}
@@ -480,16 +586,51 @@ export default defineComponent({
                       <NNumberAnimation
                         from={0}
                         to={getSecend(
-                          state.testInfo.practiceDurationAvg
+                          payForm.practiceDuration
                         )}></NNumberAnimation>
-                    </span>{' '}
+                    </span>
                     秒
                   </div>
                 </p>
-                <p class={styles.TrainDataItemsubTitle}>平均每天练习时长</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>
-            </NGi>
-          </NGrid>
+            </div>
+            <div class={styles.TrainDataTopRight}></div>
+          </div>
         </div>
         <div class={[styles.tableWrap, styles.noSort]}>
           <NDataTable

src/views/classList/index.module.less

@@ -718,11 +718,11 @@
   }
 
   .commentBtnGroup {
-    background-color: #E8F4FF !important;
-    margin-left: 32px;
-    margin-bottom: 20px;
+    // background-color: #E8F4FF !important;
+    // margin-left: 32px;
+    // margin-bottom: 20px;
     --n-border: 1px solid #198CFE !important;
-    --n-height: max(38px, 32Px) !important;
+    --n-height: 22Px !important;
     border-radius: 8px !important;
     --n-opacity-disabled: 0.6 !important;
     --n-border-disabled: 1px solid #198CFE !important;
@@ -732,7 +732,7 @@
     .text {
       display: flex;
       align-items: center;
-      color: #198cfe;
+      color: #198CFE;
 
       i {
         width: 18px;
@@ -819,6 +819,12 @@
     background: #E8F4FF;
     border-radius: 10px;
 
+    .commentTitle {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
     .iconComment {
       width: 22px;
       height: 22px;
@@ -847,6 +853,13 @@
       font-weight: 500;
       color: #333333;
       line-height: 26px;
+      min-height: 60px;
+    }
+
+    .commentTip {
+      font-weight: 400;
+      text-align: center;
+      color: rgba(0,0,0,0.4);
     }
   }
 
@@ -923,4 +936,58 @@
     width: 13px;
     height: 13px;
   }
+}
+
+.tipImg {
+  width: max(14px, 12Px);
+  height: max(14px, 12Px);
+  margin-left: 4px;
+  cursor: pointer;
+}
+
+.TrainDataTop {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+
+  .TrainDataTopLeft {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .TrainDataItem {
+      margin-right: 40px;
+
+      .TrainDataItemTitle {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        font-size: max(13px, 11Px);
+        font-weight: 400;
+        color: #131415;
+        line-height: 18px;
+        width: 100%;
+        justify-content: flex-start;
+
+        span {
+          font-family: 'DINA';
+          font-size: max(26px, 18Px);
+          font-weight: 600;
+          color: #131415;
+          line-height: 28px;
+        }
+      }
+
+      .TrainDataItemsubTitle {
+        margin-top: 4px;
+        text-align: center;
+        font-size: max(14px, 11Px);
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #777777;
+        line-height: 18px;
+      }
+    }
+  }
 }

src/views/classList/index.tsx

@@ -14,7 +14,7 @@ import {
 import SearchInput from '@/components/searchInput';
 import CSelect from '@/components/CSelect';
 import Pagination from '@/components/pagination';
-import { classGroupList, deleteClass, getSubject, addGroup } from './api';
+import { classGroupList, deleteClass, addGroup } from './api';
 import CreateClass from './modals/createClass';
 import RestStudentBox from './modals/restStudentBox';
 import { getgradeNumList, classArray } from './contants';
@@ -715,7 +715,7 @@ export default defineComponent({
         {state.addStudentVisible ? (
           <div
             v-model:show={state.addStudentVisible}
-            class={['n-modal-mask', styles.popBox]}>
+            class={['n-modal-mask', styles.popBox]} style={{ zIndex: '100001' }}>
             <AddStudentModel
               activeRow={state.activeRow}
               onClose={() => {

src/views/classList/modals/TrainingDetails.tsx

@@ -1,21 +1,21 @@
 import {
   NButton,
   NSpace,
-  useMessage,
   NImage,
   NScrollbar,
   NSpin,
   NModal,
   NTooltip
 } from 'naive-ui';
-import { defineComponent, onMounted, reactive, ref } from 'vue';
+import { defineComponent, onMounted, ref } from 'vue';
 import { getTrainingStudentDetail } from '../api';
 import styles from '../index.module.less';
-// import TrainType from '@/views/attend-class/model/train-type';
 import defultHeade from '@/components/layout/images/teacherIcon.png';
 import noSub from '../images/nosub.png';
 import qualified from '../images/qualified.png';
 import unqualified from '../images/unqualified.png';
+import iconComment from '../images/icon-comment.png';
+import commentTitle from '../images/comment-title.png';
 import { evaluateDifficult } from '/src/utils/contants';
 import dayjs from 'dayjs';
 import CommentWork from '../../studentList/modals/comment-work';
@@ -49,15 +49,15 @@ export default defineComponent({
       studentLessonTrainingDetails: [] as any
     } as any);
     const showModalMask = ref(false);
-    // const message = useMessage();
-    // const foemsRef = ref();
     const typeFormat = (trainingType: string, configJson: any) => {
       let tList: string[] = [];
 
       if (trainingType === 'EVALUATION') {
         tList = [
           `${evaluateDifficult[configJson.evaluateDifficult]}`,
-          `${configJson.practiceChapterBegin || 0}-${configJson.practiceChapterEnd || 0}小节`,
+          `${configJson.practiceChapterBegin || 0}-${
+            configJson.practiceChapterEnd || 0
+          }小节`,
           `速度${configJson.evaluateSpeed || 0}`,
           `${configJson.trainingTimes}分达标`
         ];
@@ -139,56 +139,25 @@ export default defineComponent({
                     : '--'}
                 </p>
               </div>
-
-              {studnetInfo.value.trainingStatus == 'UNSUBMITTED' ? (
-                <NImage
-                  previewDisabled
-                  class={styles.workStatus}
-                  src={noSub}></NImage>
-              ) : null}
-              {studnetInfo.value.trainingStatus == 'SUBMITTED' ? (
-                <NImage
-                  previewDisabled
-                  class={styles.workStatus}
-                  src={unqualified}></NImage>
-              ) : null}
-              {studnetInfo.value.trainingStatus == 'TARGET' ? (
-                <NImage
-                  previewDisabled
-                  class={styles.workStatus}
-                  src={qualified}></NImage>
-              ) : null}
             </div>
-
-            {studnetInfo.value.expireFlag ? (
-              <NButton
-                onClick={() => (showModalMask.value = true)}
-                class={styles.commentBtnGroup}>
-                <div class={styles.text}>
-                  <i></i>
-
-                  {studnetInfo.value.comment ? '修改点评' : '点评作业'}
-                </div>
-              </NButton>
-            ) : (
-              <NTooltip showArrow={false}>
-                {{
-                  trigger: () => (
-                    <NButton
-                      disabled
-                      onClick={() => (showModalMask.value = true)}
-                      class={styles.commentBtnGroup}>
-                      <div class={styles.text}>
-                        <i></i>
-
-                        {studnetInfo.value.comment ? '修改点评' : '点评作业'}
-                      </div>
-                    </NButton>
-                  ),
-                  default: '作业截止后可点评作业'
-                }}
-              </NTooltip>
-            )}
+            {studnetInfo.value.trainingStatus == 'UNSUBMITTED' ? (
+              <NImage
+                previewDisabled
+                class={styles.workStatus}
+                src={noSub}></NImage>
+            ) : null}
+            {studnetInfo.value.trainingStatus == 'SUBMITTED' ? (
+              <NImage
+                previewDisabled
+                class={styles.workStatus}
+                src={unqualified}></NImage>
+            ) : null}
+            {studnetInfo.value.trainingStatus == 'TARGET' ? (
+              <NImage
+                previewDisabled
+                class={styles.workStatus}
+                src={qualified}></NImage>
+            ) : null}
           </div>
 
           {(studnetInfo.value.fileExpireDay || 0 > 0) && (
@@ -214,19 +183,59 @@ export default defineComponent({
                 )
               )}
             </div>
+          </NScrollbar>
 
-            {studnetInfo.value.comment && (
-              <div class={styles.commentSection}>
+          {studnetInfo.value.expireFlag ? (
+            <div class={styles.commentSection}>
+              <div class={styles.commentTitle}>
                 <h3>
                   <i class={styles.iconComment}></i>
                   <i class={styles.myText}></i>
                 </h3>
+                {/* {studnetInfo.value.expireFlag ? ( */}
+                <NButton
+                  text
+                  onClick={() => (showModalMask.value = true)}
+                  class={styles.commentBtnGroup}>
+                  <div class={styles.text}>
+                    <i></i>
+
+                    {studnetInfo.value.comment ? '修改点评' : '点评作业'}
+                  </div>
+                </NButton>
+                {/* ) : (
+                <NTooltip showArrow={false}>
+                  {{
+                    trigger: () => (
+                      <NButton
+                        disabled
+                        text
+                        onClick={() => (showModalMask.value = true)}
+                        class={styles.commentBtnGroup}>
+                        <div class={styles.text}>
+                          <i></i>
+
+                          {studnetInfo.value.comment ? '修改点评' : '点评作业'}
+                        </div>
+                      </NButton>
+                    ),
+                    default: '作业截止后可点评作业'
+                  }}
+                </NTooltip>
+              )} */}
+              </div>
+              {studnetInfo.value.comment ? (
                 <div class={styles.commentContent}>
                   {studnetInfo.value.comment}
                 </div>
-              </div>
-            )}
-          </NScrollbar>
+              ) : (
+                <div class={[styles.commentContent, styles.commentTip]}>
+                  您目前还没有点评该作业喔，快来写评语吧～
+                </div>
+              )}
+            </div>
+          ) : null}
+
           <NSpace
             class={[styles.btnGroups, styles.nextWrap]}
             justify="space-between">

src/views/classList/modals/resetSubjectList.module.less

@@ -0,0 +1,39 @@
+.addClass {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  // padding-top: 50px;
+  // padding: 0 30Px;
+
+  :global {
+    .n-form-item-label__text {
+      font-weight: 400;
+      font-size: 14Px;
+      color: #666666;
+    }
+    .n-base-selection, .n-input, .n-input-group-label {
+      --n-height: 34Px!important;
+      --n-border-radius: 6Px !important;
+      font-size: 14Px !important;
+    }
+  }
+}
+.btnGroup {
+  padding: 0 30Px 24Px;
+  width: 100%;
+
+
+  :global {
+    .n-button {
+      border-radius: 6Px;
+      height: 32Px;
+      min-width: 68Px;
+      font-size: 14Px;
+      font-weight: bold !important;
+      --n-border: 0px solid !important;
+    }
+    .n-button--primary-type {
+      background: linear-gradient( 312deg, #1B7AF8 0%, #3CBBFF 100%) !important;
+    }
+  }
+}

src/views/classList/modals/resetSubjectList.tsx

@@ -0,0 +1,153 @@
+import {
+  NButton,
+  NSpace,
+  useMessage,
+  NForm,
+  NFormItem,
+  NCascader,
+  NScrollbar
+} from 'naive-ui';
+import { defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from './resetSubjectList.module.less';
+import { getClassSubjects, updateBatchInstrument } from '../api';
+export default defineComponent({
+  props: {
+    activeRow: {
+      type: Array,
+      default: () => []
+    }
+  },
+  name: 'resetSubjectList',
+  emits: ['close', 'getList'],
+  setup(props, { emit }) {
+    const data = reactive({
+      uploading: false
+    });
+    const message = useMessage();
+    const formsRef = ref();
+    // const subjectList = ref(toRef(props.activeRow));
+    const createClassForm = reactive({
+      classList: props.activeRow
+      // currentGradeNum: null,
+      // gradeYear: null,
+      // currentClass: null,
+      // instrumentId: null,
+      // id: null
+    });
+    onMounted(() => {
+      // createClassForm.currentGradeNum = props.activeRow.currentGradeNum;
+      // createClassForm.gradeYear = props.activeRow.gradeYear;
+      // createClassForm.currentClass = props.activeRow.currentClass;
+      // createClassForm.instrumentId = props.activeRow.instrumentId;
+      // createClassForm.id = props.activeRow.id;
+
+      getConfigSubject();
+    });
+    const submitForms = () => {
+      formsRef.value.validate(async (error: any) => {
+        if (error) {
+          return;
+        }
+
+        console.log(createClassForm.classList);
+        data.uploading = true;
+        // [{
+        //   "id": "1901469499486425089",
+        //   "instrumentId": "1002"
+        // }]
+
+        try {
+          const params: any[] = [];
+          createClassForm.classList.forEach((item: any) => {
+            params.push({
+              id: item.classGroupId,
+              instrumentId: item.instrumentId
+            });
+          });
+          console.log(params, 'params');
+          await updateBatchInstrument(params);
+          message.success('修改成功');
+          emit('close');
+          emit('getList');
+          data.uploading = false;
+        } catch (e) {
+          console.log(e);
+        }
+        data.uploading = false;
+      });
+    };
+
+    const getConfigSubject = async () => {
+      try {
+        const ids = props.activeRow.map((item: any) => {
+          return item.classGroupId;
+        });
+        const { data } = await getClassSubjects(ids);
+        // const temp = data || [];
+        if (Array.isArray(data)) {
+          createClassForm.classList.forEach((item: any) => {
+            const classSubject = data.find(
+              (subject: any) => subject.classGroupId === item.classGroupId
+            );
+            if (classSubject) {
+              item.subjectList = classSubject.subjectList || [];
+            }
+          });
+        }
+
+        console.log(data, 'data', createClassForm.classList);
+        // subjectList.value = temp;
+      } catch {
+        //
+      }
+    };
+
+    return () => (
+      <div class={[styles.addClass]}>
+        <NForm label-placement="top" model={createClassForm} ref={formsRef}>
+          <NScrollbar style="max-height: 360px; padding: 0 30px">
+            {createClassForm.classList.map((item: any, index: number) => (
+              <NFormItem
+                path={`classList[${index}].instrumentId`}
+                label={item.classGroupName}
+                showRequireMark={false}
+                rule={[
+                  {
+                    required: true,
+                    message: '请选择乐器',
+                    trigger: 'change'
+                  }
+                ]}>
+                <NCascader
+                  placeholder="请选择乐器"
+                  v-model:value={item.instrumentId}
+                  options={item.subjectList}
+                  checkStrategy="child"
+                  showPath={false}
+                  childrenField="instruments"
+                  expandTrigger="hover"
+                  labelField="name"
+                  valueField="id"
+                  clearable
+                  filterable
+                  style={{ width: '400px' }}
+                />
+              </NFormItem>
+            ))}
+          </NScrollbar>
+        </NForm>
+        <NSpace class={styles.btnGroup} justify="end">
+          <NButton secondary onClick={() => emit('close')}>
+            取消
+          </NButton>
+          <NButton
+            loading={data.uploading}
+            onClick={() => submitForms()}
+            type="primary">
+            确认
+          </NButton>
+        </NSpace>
+      </div>
+    );
+  }
+});

src/views/data-module/index.tsx

@@ -1,137 +1,141 @@
-import { defineComponent, ref, watch, nextTick, onMounted } from 'vue';
-import styles from './index.module.less';
-import { NTabs, NTabPane, NSpace, NButton } from 'naive-ui';
-import { useRoute } from 'vue-router';
-import { getTabsCache, setTabsCaches } from '@/hooks/use-async';
-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 DataGuide from '@/custom-plugins/guide-page/data-guide';
-import {
-  getNowDateAndMonday,
-  getNowDateAndSunday
-} from '/src/utils/dateFormat';
-export default defineComponent({
-  name: 'data-module',
-  setup() {
-    const activeTab = ref('training');
-    const route = useRoute();
-    getTabsCache((val: any) => {
-      if (val.form.tabName) {
-        activeTab.value = val.form.tabName;
-      }
-    });
-    const TrainDataRef = ref();
-    const PracticeDataRef = ref();
-    const PracticeRankingRef = ref();
-    const setTabs = (val: any) => {
-      setTabsCaches(val, 'tabName', route);
-    };
-    // const showGuide = ref(false);
-    const timer = ref<[number, number]>([
-      getNowDateAndMonday(new Date().getTime()),
-      getNowDateAndSunday(new Date().getTime())
-    ]);
-
-    const updaeTimer = (value: any) => {
-      console.log('监听改变', value);
-    };
-
-    const onSearch = () => {
-      console.log(timer.value);
-      if (TrainDataRef.value) {
-        TrainDataRef.value.getList();
-      }
-      if (PracticeDataRef.value) {
-        PracticeDataRef.value.getList();
-      }
-      if (PracticeRankingRef.value) {
-        PracticeRankingRef.value.getList();
-      }
-    };
-    const onReset = () => {
-      console.log('点击重置');
-      timer.value = [
-        getNowDateAndMonday(new Date().getTime()),
-        getNowDateAndSunday(new Date().getTime())
-      ];
-      nextTick(() => {
-        onSearch();
-      });
-    };
-
-    // onMounted(() => {
-      // setTimeout(() => {
-      //   showGuide.value = true;
-      // }, 800);
-    // });
-    return () => (
-      <div>
-        <div class={styles.listWrap}>
-          <NTabs
-            onUpdate:value={(val: any) => setTabs(val)}
-            class={styles.customTabs}
-            v-model:value={activeTab.value}
-            size="large"
-            animated={false}
-            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>
-                      <CDatePicker
-                        {...{ clearable: false }}
-                        v-model:value={timer.value}
-                        separator={'-'}
-                        type="daterange"
-                        timerValue={timer.value}></CDatePicker>
-                      <NButton
-                        type="primary"
-                        class={styles.searchBtn}
-                        onClick={() => onSearch()}>
-                        搜索
-                      </NButton>
-                      <NButton
-                        type="primary"
-                        onClick={() => onReset()}
-                        ghost
-                        class={styles.resetBtn}>
-                        重置
-                      </NButton>
-                    </NSpace>
-                  </div>
-                </>
-              )
-            }}>
-            <NTabPane
-              name="training"
-              tab="作业统计"
-              v-slots={{ tab: () => <span id="data-0">作业统计</span> }}>
-              <TrainData ref={TrainDataRef} timer={timer.value}></TrainData>
-            </NTabPane>
-            <NTabPane
-              name="practice"
-              tab="学练数据"
-              v-slots={{ tab: () => <span id="data-1">学练数据</span> }}>
-              <PracticeData
-                ref={PracticeDataRef}
-                timer={timer.value}></PracticeData>
-            </NTabPane>
-            <NTabPane
-              name="ranking"
-              tab="学练排行"
-              v-slots={{ tab: () => <span id="data-2">学练排行</span> }}>
-              <PracticeRanking
-                ref={PracticeRankingRef}
-                timer={timer.value}></PracticeRanking>
-            </NTabPane>
-          </NTabs>
-          {/* {showGuide.value ? <DataGuide></DataGuide> : null} */}
-        </div>
-      </div>
-    );
-  }
-});
+import { defineComponent, ref, nextTick } from 'vue';
+import styles from './index.module.less';
+import { NTabs, NTabPane, NSpace, NButton } from 'naive-ui';
+import { useRoute } from 'vue-router';
+import { getTabsCache, setTabsCaches } from '@/hooks/use-async';
+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 deepClone from '/src/helpers/deep-clone';
+export default defineComponent({
+  name: 'data-module',
+  setup() {
+    const activeTab = ref('training');
+    const route = useRoute();
+    getTabsCache((val: any) => {
+      if (val.form.tabName) {
+        activeTab.value = val.form.tabName;
+      }
+    });
+    const TrainDataRef = ref();
+    const PracticeDataRef = ref();
+    const PracticeRankingRef = ref();
+    const setTabs = (val: any) => {
+      setTabsCaches(val, 'tabName', route);
+    };
+    // const showGuide = ref(false);
+    const timer = ref<[number, number]>([
+      getNowDateAndMonday(new Date().getTime()),
+      getNowDateAndSunday(new Date().getTime())
+    ]);
+    // 搜索之后的时间
+    const searchAfterTimer = ref<[number, number]>([
+      getNowDateAndMonday(new Date().getTime()),
+      getNowDateAndSunday(new Date().getTime())
+    ]);
+
+    if (route.query.times) {
+      timer.value = JSON.parse(route.query.times as any);
+      searchAfterTimer.value = JSON.parse(route.query.times as any);
+    }
+
+
+    const onSearch = () => {
+      searchAfterTimer.value = deepClone(timer.value);
+      if (TrainDataRef.value) {
+        TrainDataRef.value.getList();
+      }
+      if (PracticeDataRef.value) {
+        PracticeDataRef.value.getList();
+      }
+      if (PracticeRankingRef.value) {
+        PracticeRankingRef.value.getList();
+      }
+    };
+    const onReset = () => {
+      timer.value = [
+        getNowDateAndMonday(new Date().getTime()),
+        getNowDateAndSunday(new Date().getTime())
+      ];
+      searchAfterTimer.value = [
+        getNowDateAndMonday(new Date().getTime()),
+        getNowDateAndSunday(new Date().getTime())
+      ];
+      nextTick(() => {
+        onSearch();
+      });
+    };
+
+    return () => (
+      <div>
+        <div class={styles.listWrap}>
+          <NTabs
+            onUpdate:value={(val: any) => setTabs(val)}
+            class={styles.customTabs}
+            v-model:value={activeTab.value}
+            size="large"
+            animated={false}
+            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>
+                    <CDatePicker
+                      {...{ clearable: false }}
+                      v-model:value={timer.value}
+                      separator={'-'}
+                      type="daterange"
+                      timerValue={timer.value}></CDatePicker>
+                    <NButton
+                      type="primary"
+                      class={styles.searchBtn}
+                      onClick={() => onSearch()}>
+                      搜索
+                    </NButton>
+                    <NButton
+                      type="primary"
+                      onClick={() => onReset()}
+                      ghost
+                      class={styles.resetBtn}>
+                      重置
+                    </NButton>
+                  </NSpace>
+                </div>
+              )
+            }}>
+            <NTabPane
+              name="training"
+              tab="作业统计"
+              v-slots={{ tab: () => <span id="data-0">作业统计</span> }}>
+              <TrainData
+                ref={TrainDataRef}
+                timer={searchAfterTimer.value}></TrainData>
+            </NTabPane>
+            <NTabPane
+              name="practice"
+              tab="学练数据"
+              v-slots={{ tab: () => <span id="data-1">学练数据</span> }}>
+              <PracticeData
+                ref={PracticeDataRef}
+                timer={searchAfterTimer.value}></PracticeData>
+            </NTabPane>
+            <NTabPane
+              name="ranking"
+              tab="学练排行"
+              v-slots={{ tab: () => <span id="data-2">学练排行</span> }}>
+              <PracticeRanking
+                ref={PracticeRankingRef}
+                timer={searchAfterTimer.value}></PracticeRanking>
+            </NTabPane>
+          </NTabs>
+        </div>
+      </div>
+    );
+  }
+});

src/views/home/components/practiceData.tsx

@@ -1,687 +1,701 @@
-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,
-      render(row: any) {
-        return row.publishCount || 0
-      }
-    });
-
-    const publishScoreRef = reactive({
-      title() {
-        return (
-          toolTitleTips('最新作品分数', publishScoreRef)
-        );
-      },
-      key: 'publishScore',
-      sorter: true,
-      sortOrder: false as any,
-      render(row: any) {
-        return row.publishScore === null ? '--' : row.publishScore
-      }
-    });
-
-    const publishTimeRef = reactive({
-      title() {
-        return (
-          toolTitleTips('最新作品时间', publishTimeRef)
-        );
-      },
-      key: 'publishTime',
-      sorter: true,
-      sortOrder: false as any,
-      render(row: any) {
-        return row.publishTime || '--'
-      }
-    });
-
-    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',
-          render(row: any) {
-            return (
-              <>
-                {row.instrumentName || '--'}
-              </>
-            )
-          }
-        },
-        practiceDurationRef,
-        practiceDaysRef,
-        practiceDurationAvgRef,
-        evaluateFrequencyRef,
-        {
-          title: () => <span style={{ display: 'flex', alignItems: 'center' }}>发布作品 <NTooltip showArrow={false}>
-          {{
-            trigger: () => (
-                <img src={iconQuestion} class={styles.tipImg}   />
-            ),
-            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>
-      </>
-    );
-  }
-});
+import { Ref, computed, defineComponent, reactive, ref } from 'vue';
+import styles from '../index2.module.less';
+import {
+  c,
+  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,
+      render(row: any) {
+        return row.publishCount || 0;
+      }
+    });
+
+    const publishScoreRef = reactive({
+      title() {
+        return toolTitleTips('最新作品分数', publishScoreRef);
+      },
+      key: 'publishScore',
+      sorter: true,
+      sortOrder: false as any,
+      render(row: any) {
+        return row.publishScore === null ? '--' : row.publishScore;
+      }
+    });
+
+    const publishTimeRef = reactive({
+      title() {
+        return toolTitleTips('最新作品时间', publishTimeRef);
+      },
+      key: 'publishTime',
+      sorter: true,
+      sortOrder: false as any,
+      render(row: any) {
+        return row.publishTime || '--';
+      }
+    });
+
+    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',
+          render(row: any) {
+            return <>{row.instrumentName || '--'}</>;
+          }
+        },
+        practiceDurationRef,
+        practiceDaysRef,
+        practiceDurationAvgRef,
+        evaluateFrequencyRef,
+        {
+          title: () => (
+            <span style={{ display: 'flex', alignItems: 'center' }}>
+              发布作品{' '}
+              <NTooltip showArrow={false}>
+                {{
+                  trigger: () => (
+                    <img src={iconQuestion} class={styles.tipImg} />
+                  ),
+                  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>
+      </>
+    );
+  }
+});

src/views/home/components/trainData.tsx

@@ -1,539 +1,540 @@
-import { Ref, computed, defineComponent, onMounted, reactive, ref } from 'vue';
-import styles from '../index2.module.less';
-import { NButton, NDataTable, NNumberAnimation, NSpace } from 'naive-ui';
-import { useECharts } from '@/hooks/web/useECharts';
-import Pagination from '/src/components/pagination';
-import { getTimes } from '/src/utils/dateFormat';
-import { getTrainingStat } from '../../data-module/api';
-import { useRoute, useRouter } from 'vue-router';
-import { getTrainingList } from '../../classList/api';
-import TheEmpty from '/src/components/TheEmpty';
-
-export default defineComponent({
-  name: 'home-trainData',
-  props: {
-    timer: {
-      type: Array,
-      defaut: () => []
-    }
-  },
-  setup(props, { expose }) {
-    const chartRef = ref<HTMLDivElement | null>(null);
-    const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-    const qualifiedFlag = ref(true);
-    const unqualifiedFlag = ref(true);
-    const router = useRouter();
-    const route = useRoute();
-    const payForm = reactive({
-      height: '360px',
-      width: '100%',
-      studentNum: 0,
-      paymentAmount: 0,
-      dateList: [],
-      studentList: [],
-      payInfoList: []
-    });
-    const totalDateRef = ref({
-      qualifiedRate: 0,
-      qualifiedStudentCount: 0,
-      submitStudentCount: 0,
-      totalStudentCount: 0,
-      trainingCount: 0,
-      trainingRate: 0 //
-    } as any);
-    const state = reactive({
-      loading: false,
-      pagination: {
-        page: 1,
-        rows: 10,
-        pageTotal: 4
-      },
-      tableList: [] as any,
-      goCourseVisiable: false
-    });
-
-    const currentTimer = computed(() => {
-      return props.timer;
-    });
-    const columns = () => {
-      return [
-        {
-          title: '布置老师',
-          key: 'teacherName'
-        },
-        {
-          title: '布置时间',
-          key: 'createTime',
-          render(row: any) {
-            return <>{row.createTime}</>;
-          }
-        },
-        {
-          title: '截止时间',
-          key: 'expireDate',
-          render(row: any) {
-            return <>{row.expireDate}</>;
-          }
-        },
-        {
-          title: '训练状态',
-          key: 'status',
-          render(row: any) {
-            return row.status == 0 ? (
-              <div class={styles.indDot}>
-                {' '}
-                <span></span> 进行中
-              </div>
-            ) : (
-              <div class={styles.endDot}>
-                <span></span>已结束
-              </div>
-            );
-          }
-        },
-        {
-          title: '布置人数',
-          key: 'expectNum'
-        },
-        {
-          title: '提交人数',
-          key: 'trainingNum'
-        },
-        {
-          title: '达标人数',
-          key: 'standardNum'
-        },
-        {
-          title: '提交率',
-          key: 'trainingRate',
-          render(row: any) {
-            return <>{row.trainingRate}%</>;
-          }
-        },
-        {
-          title: '达标率',
-          key: 'qualifiedRate',
-          render(row: any) {
-            return <>{row.qualifiedRate}%</>;
-          }
-        },
-        // {
-        //   title: '',
-        //   key: 'sex',
-        //   render(row: any) {
-        //     return <>{row.sex == '0' ? '女' : '男'}</>;
-        //   }
-        // },
-        {
-          title: '操作',
-          key: 'id',
-          render(row: any) {
-            return (
-              <NSpace>
-                <NButton
-                  text
-                  type="primary"
-                  onClick={() => gotoWorkDetail(row)}>
-                  详情
-                </NButton>
-              </NSpace>
-            );
-          }
-        }
-      ];
-    };
-    const gotoWorkDetail = (row: any) => {
-      console.log(row);
-      // router.push({
-      //   path: '/afterWorkDetail',
-      //   query: {
-      //     ...route.query,
-      //     teacherName: row.teacherName,
-      //     trainingId: row.id,
-      //     id: row.classGroupId,
-      //     name: row.classGroupName
-      //   }
-      // });
-
-      router.push({
-        path: '/homework-record-detail',
-        query: {
-          id: row.id,
-          name: row.name
-        }
-      });
-    };
-    const getList = async () => {
-      state.loading = true
-      try {
-        const res = await getTrainingStat({
-          ...getTimes(
-            currentTimer.value,
-            ['startTime', 'endTime'],
-            'YYYY-MM-DD'
-          )
-        });
-        totalDateRef.value = { ...res.data };
-        payForm.dateList = res.data.trainingStatDetails.map((item: any) => {
-          return item.date;
-        });
-        payForm.payInfoList = res.data.trainingStatDetails.map((item: any) => {
-          return item.qualifiedStudentCount;
-        });
-        payForm.studentList = res.data.trainingStatDetails.map((item: any) => {
-          return item.unqualifiedStudentCount;
-        });
-
-        setChart();
-      } catch (e) {
-        console.log(e);
-      }
-
-      try {
-        const res = await getTrainingList({
-          ...state.pagination,
-          ...getTimes(
-            currentTimer.value,
-            ['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);
-      }
-      state.loading = false
-    };
-    expose({ getList });
-    const setChart = () => {
-      setOptions({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            lineStyle: {
-              width: 2,
-              color: '#A9C7FF'
-            }
-          }
-        },
-        legend: {
-          show: false,
-          selected: {
-            //在这里设置默认展示就ok了
-            达标人数: qualifiedFlag.value,
-            未达标人数: unqualifiedFlag.value
-          }
-        },
-        xAxis: {
-          type: 'category',
-          boundaryGap: true,
-          axisLabel: {
-            show: true
-            // interval: 0
-          },
-          data: payForm.dateList
-          // splitLine: {
-          //   show: true,
-          //   lineStyle: {
-          //     width: 2,
-          //     type: 'solid',
-          //     color: 'rgba(226,226,226,0.5)'
-          //   }
-          // }
-          // axisTick: {
-          //   show: false
-          // }
-        },
-        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: [
-          {
-            // smooth: true,
-            data: payForm.studentList,
-            symbolSize: 10,
-            type: 'line',
-            name: '未达标人数',
-            symbol: 'circle',
-            smooth: true,
-            itemStyle: {
-              color: '#FF7AA7',
-              borderColor: '#fff',
-              borderWidth: 3
-            },
-            lineStyle: {
-              width: 3 //设置线条粗细
-            },
-            areaStyle: {
-              color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: 'rgba(255, 243, 246, 1)'
-                    // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    // 100% 处的颜色
-                    color: 'rgba(255, 246, 248, 0)'
-                  }
-                ]
-              }
-            },
-            emphasis: {
-              disabled: true
-            }
-          },
-          {
-            data: payForm.payInfoList,
-            type: 'line',
-            name: '达标人数',
-            symbolSize: 10,
-            symbol: 'circle',
-            smooth: true,
-            itemStyle: {
-              color: '#198CFE',
-              borderColor: '#fff',
-              borderWidth: 3
-            },
-            lineStyle: {
-              width: 2 //设置线条粗细
-            },
-            areaStyle: {
-              color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: 'rgba(212, 231, 255, 1)'
-                    // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(221, 235, 254, 0)' // 100% 处的颜色
-                  }
-                ]
-              }
-            },
-            emphasis: {
-              disabled: true
-            }
-          }
-        ],
-
-        formatter: (item: any) => {
-          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;
-                  color: #333333;
-                  line-height: 18px;">${d.seriesName}: ${
-                    d.value
-                  }${'人'} </span>`
-              )
-            ].join('');
-          } else {
-            return item;
-          }
-        }
-        // dataZoom: [
-        //   {
-        //     type: 'slider',
-        //     start: 5,
-        //     end: 100,
-        //     filterMode: 'empty'
-        //   }
-        // ]
-      });
-    };
-    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={
-                          totalDateRef.value.trainingCount
-                        }></NNumberAnimation>
-                    </span>
-                    次
-                  </div>
-                </p>
-                <p class={styles.TrainDataItemsubTitle}>作业次数</p>
-              </div>
-              <div class={styles.TrainDataItem}>
-                <p class={styles.TrainDataItemTitle}>
-                  <div>
-                    <span>
-                      <NNumberAnimation
-                        from={0}
-                        to={
-                          totalDateRef.value.totalStudentCount
-                        }></NNumberAnimation>
-                    </span>
-                    人次
-                  </div>
-                </p>
-                <p class={styles.TrainDataItemsubTitle}>应交总人次</p>
-              </div>
-              <div class={styles.TrainDataItem}>
-                <p class={styles.TrainDataItemTitle}>
-                  <div>
-                    <span>
-                      <NNumberAnimation
-                        from={0}
-                        to={
-                          totalDateRef.value.submitStudentCount
-                        }></NNumberAnimation>
-                    </span>
-                    人次
-                  </div>
-                </p>
-                <p class={styles.TrainDataItemsubTitle}>提交总人次</p>
-              </div>
-              <div class={styles.TrainDataItem}>
-                <p class={styles.TrainDataItemTitle}>
-                  <div>
-                    <span>
-                      <NNumberAnimation
-                        from={0}
-                        to={
-                          totalDateRef.value.qualifiedStudentCount
-                        }></NNumberAnimation>
-                    </span>
-                    人次
-                  </div>
-                </p>
-                <p class={styles.TrainDataItemsubTitle}>达标总人次</p>
-              </div>
-              <div class={styles.TrainDataItem}>
-                <p class={styles.TrainDataItemTitle}>
-                  <div>
-                    <span>
-                      <NNumberAnimation
-                        from={0}
-                        to={totalDateRef.value.trainingRate}></NNumberAnimation>
-                    </span>
-                    %
-                  </div>
-                </p>
-                <p class={styles.TrainDataItemsubTitle}>作业提交率</p>
-              </div>
-              <div class={styles.TrainDataItem}>
-                <p class={styles.TrainDataItemTitle}>
-                  <div>
-                    <span>
-                      <NNumberAnimation
-                        from={0}
-                        to={
-                          totalDateRef.value.qualifiedRate
-                        }></NNumberAnimation>
-                    </span>
-                    %
-                  </div>
-                </p>
-                <p class={styles.TrainDataItemsubTitle}>作业达标率</p>
-              </div>
-            </div>
-            <div class={styles.TrainDataTopRight}>
-              <div
-                onClick={() => {
-                  qualifiedFlag.value = !qualifiedFlag.value;
-                  setChart();
-                }}
-                class={[
-                  styles.DataTopRightItem,
-                  qualifiedFlag.value ? '' : styles.DataTopRightItemDis
-                ]}>
-                <div class={styles.DataTopRightDot}></div>
-                <p>达标人数</p>
-              </div>
-              <div
-                onClick={() => {
-                  unqualifiedFlag.value = !unqualifiedFlag.value;
-                  setChart();
-                }}
-                class={[
-                  styles.DataTopRightItem,
-                  unqualifiedFlag.value ? '' : styles.DataTopRightItemDis
-                ]}>
-                <div class={[styles.DataTopRightDot, styles.red]}></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}>
-            <NDataTable
-              v-slots={{
-                empty: () => <TheEmpty></TheEmpty>
-              }}
-              class={styles.classTable}
-              loading={state.loading}
-              columns={columns()}
-              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
-            />
-          </div>
-        </div>
-      </>
-    );
-  }
-});
+import { Ref, computed, defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from '../index2.module.less';
+import { NButton, NDataTable, NNumberAnimation, NSpace } from 'naive-ui';
+import { useECharts } from '@/hooks/web/useECharts';
+import Pagination from '/src/components/pagination';
+import { getTimes } from '/src/utils/dateFormat';
+import { getTrainingStat } from '../../data-module/api';
+import { useRoute, useRouter } from 'vue-router';
+import { getTrainingList } from '../../classList/api';
+import TheEmpty from '/src/components/TheEmpty';
+
+export default defineComponent({
+  name: 'home-trainData',
+  props: {
+    timer: {
+      type: Array,
+      defaut: () => []
+    }
+  },
+  setup(props, { expose }) {
+    const chartRef = ref<HTMLDivElement | null>(null);
+    const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+    const qualifiedFlag = ref(true);
+    const unqualifiedFlag = ref(true);
+    const router = useRouter();
+    const route = useRoute();
+    const payForm = reactive({
+      height: '360px',
+      width: '100%',
+      studentNum: 0,
+      paymentAmount: 0,
+      dateList: [],
+      studentList: [],
+      payInfoList: []
+    });
+    const totalDateRef = ref({
+      qualifiedRate: 0,
+      qualifiedStudentCount: 0,
+      submitStudentCount: 0,
+      totalStudentCount: 0,
+      trainingCount: 0,
+      trainingRate: 0 //
+    } as any);
+    const state = reactive({
+      loading: false,
+      pagination: {
+        page: 1,
+        rows: 10,
+        pageTotal: 4
+      },
+      tableList: [] as any,
+      goCourseVisiable: false
+    });
+
+    const currentTimer = computed(() => {
+      return props.timer;
+    });
+    const columns = () => {
+      return [
+        {
+          title: '布置老师',
+          key: 'teacherName'
+        },
+        {
+          title: '布置时间',
+          key: 'createTime',
+          render(row: any) {
+            return <>{row.createTime}</>;
+          }
+        },
+        {
+          title: '截止时间',
+          key: 'expireDate',
+          render(row: any) {
+            return <>{row.expireDate}</>;
+          }
+        },
+        {
+          title: '训练状态',
+          key: 'status',
+          render(row: any) {
+            return row.status == 0 ? (
+              <div class={styles.indDot}>
+                {' '}
+                <span></span> 进行中
+              </div>
+            ) : (
+              <div class={styles.endDot}>
+                <span></span>已结束
+              </div>
+            );
+          }
+        },
+        {
+          title: '布置人数',
+          key: 'expectNum'
+        },
+        {
+          title: '提交人数',
+          key: 'trainingNum'
+        },
+        {
+          title: '达标人数',
+          key: 'standardNum'
+        },
+        {
+          title: '提交率',
+          key: 'trainingRate',
+          render(row: any) {
+            return <>{row.trainingRate}%</>;
+          }
+        },
+        {
+          title: '达标率',
+          key: 'qualifiedRate',
+          render(row: any) {
+            return <>{row.qualifiedRate}%</>;
+          }
+        },
+        // {
+        //   title: '',
+        //   key: 'sex',
+        //   render(row: any) {
+        //     return <>{row.sex == '0' ? '女' : '男'}</>;
+        //   }
+        // },
+        {
+          title: '操作',
+          key: 'id',
+          render(row: any) {
+            return (
+              <NSpace>
+                <NButton
+                  text
+                  type="primary"
+                  onClick={() => gotoWorkDetail(row)}>
+                  详情
+                </NButton>
+              </NSpace>
+            );
+          }
+        }
+      ];
+    };
+    const gotoWorkDetail = (row: any) => {
+      console.log(row);
+      // router.push({
+      //   path: '/afterWorkDetail',
+      //   query: {
+      //     ...route.query,
+      //     teacherName: row.teacherName,
+      //     trainingId: row.id,
+      //     id: row.classGroupId,
+      //     name: row.classGroupName
+      //   }
+      // });
+
+      router.push({
+        path: '/homework-record-detail',
+        query: {
+          id: row.id,
+          name: row.name,
+          times: JSON.stringify(currentTimer.value)
+        }
+      });
+    };
+    const getList = async () => {
+      state.loading = true;
+      try {
+        const res = await getTrainingStat({
+          ...getTimes(
+            currentTimer.value,
+            ['startTime', 'endTime'],
+            'YYYY-MM-DD'
+          )
+        });
+        totalDateRef.value = { ...res.data };
+        payForm.dateList = res.data.trainingStatDetails.map((item: any) => {
+          return item.date;
+        });
+        payForm.payInfoList = res.data.trainingStatDetails.map((item: any) => {
+          return item.qualifiedStudentCount;
+        });
+        payForm.studentList = res.data.trainingStatDetails.map((item: any) => {
+          return item.unqualifiedStudentCount;
+        });
+
+        setChart();
+      } catch (e) {
+        console.log(e);
+      }
+
+      try {
+        const res = await getTrainingList({
+          ...state.pagination,
+          ...getTimes(
+            currentTimer.value,
+            ['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);
+      }
+      state.loading = false;
+    };
+    expose({ getList });
+    const setChart = () => {
+      setOptions({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            lineStyle: {
+              width: 2,
+              color: '#A9C7FF'
+            }
+          }
+        },
+        legend: {
+          show: false,
+          selected: {
+            //在这里设置默认展示就ok了
+            达标人数: qualifiedFlag.value,
+            未达标人数: unqualifiedFlag.value
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: true,
+          axisLabel: {
+            show: true
+            // interval: 0
+          },
+          data: payForm.dateList
+          // splitLine: {
+          //   show: true,
+          //   lineStyle: {
+          //     width: 2,
+          //     type: 'solid',
+          //     color: 'rgba(226,226,226,0.5)'
+          //   }
+          // }
+          // axisTick: {
+          //   show: false
+          // }
+        },
+        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: [
+          {
+            // smooth: true,
+            data: payForm.studentList,
+            symbolSize: 10,
+            type: 'line',
+            name: '未达标人数',
+            symbol: 'circle',
+            smooth: true,
+            itemStyle: {
+              color: '#FF7AA7',
+              borderColor: '#fff',
+              borderWidth: 3
+            },
+            lineStyle: {
+              width: 3 //设置线条粗细
+            },
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(255, 243, 246, 1)'
+                    // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    // 100% 处的颜色
+                    color: 'rgba(255, 246, 248, 0)'
+                  }
+                ]
+              }
+            },
+            emphasis: {
+              disabled: true
+            }
+          },
+          {
+            data: payForm.payInfoList,
+            type: 'line',
+            name: '达标人数',
+            symbolSize: 10,
+            symbol: 'circle',
+            smooth: true,
+            itemStyle: {
+              color: '#198CFE',
+              borderColor: '#fff',
+              borderWidth: 3
+            },
+            lineStyle: {
+              width: 2 //设置线条粗细
+            },
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(212, 231, 255, 1)'
+                    // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(221, 235, 254, 0)' // 100% 处的颜色
+                  }
+                ]
+              }
+            },
+            emphasis: {
+              disabled: true
+            }
+          }
+        ],
+
+        formatter: (item: any) => {
+          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;
+                  color: #333333;
+                  line-height: 18px;">${d.seriesName}: ${
+                    d.value
+                  }${'人'} </span>`
+              )
+            ].join('');
+          } else {
+            return item;
+          }
+        }
+        // dataZoom: [
+        //   {
+        //     type: 'slider',
+        //     start: 5,
+        //     end: 100,
+        //     filterMode: 'empty'
+        //   }
+        // ]
+      });
+    };
+    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={
+                          totalDateRef.value.trainingCount
+                        }></NNumberAnimation>
+                    </span>
+                    次
+                  </div>
+                </p>
+                <p class={styles.TrainDataItemsubTitle}>作业次数</p>
+              </div>
+              <div class={styles.TrainDataItem}>
+                <p class={styles.TrainDataItemTitle}>
+                  <div>
+                    <span>
+                      <NNumberAnimation
+                        from={0}
+                        to={
+                          totalDateRef.value.totalStudentCount
+                        }></NNumberAnimation>
+                    </span>
+                    人次
+                  </div>
+                </p>
+                <p class={styles.TrainDataItemsubTitle}>应交总人次</p>
+              </div>
+              <div class={styles.TrainDataItem}>
+                <p class={styles.TrainDataItemTitle}>
+                  <div>
+                    <span>
+                      <NNumberAnimation
+                        from={0}
+                        to={
+                          totalDateRef.value.submitStudentCount
+                        }></NNumberAnimation>
+                    </span>
+                    人次
+                  </div>
+                </p>
+                <p class={styles.TrainDataItemsubTitle}>提交总人次</p>
+              </div>
+              <div class={styles.TrainDataItem}>
+                <p class={styles.TrainDataItemTitle}>
+                  <div>
+                    <span>
+                      <NNumberAnimation
+                        from={0}
+                        to={
+                          totalDateRef.value.qualifiedStudentCount
+                        }></NNumberAnimation>
+                    </span>
+                    人次
+                  </div>
+                </p>
+                <p class={styles.TrainDataItemsubTitle}>达标总人次</p>
+              </div>
+              <div class={styles.TrainDataItem}>
+                <p class={styles.TrainDataItemTitle}>
+                  <div>
+                    <span>
+                      <NNumberAnimation
+                        from={0}
+                        to={totalDateRef.value.trainingRate}></NNumberAnimation>
+                    </span>
+                    %
+                  </div>
+                </p>
+                <p class={styles.TrainDataItemsubTitle}>作业提交率</p>
+              </div>
+              <div class={styles.TrainDataItem}>
+                <p class={styles.TrainDataItemTitle}>
+                  <div>
+                    <span>
+                      <NNumberAnimation
+                        from={0}
+                        to={
+                          totalDateRef.value.qualifiedRate
+                        }></NNumberAnimation>
+                    </span>
+                    %
+                  </div>
+                </p>
+                <p class={styles.TrainDataItemsubTitle}>作业达标率</p>
+              </div>
+            </div>
+            <div class={styles.TrainDataTopRight}>
+              <div
+                onClick={() => {
+                  qualifiedFlag.value = !qualifiedFlag.value;
+                  setChart();
+                }}
+                class={[
+                  styles.DataTopRightItem,
+                  qualifiedFlag.value ? '' : styles.DataTopRightItemDis
+                ]}>
+                <div class={styles.DataTopRightDot}></div>
+                <p>达标人数</p>
+              </div>
+              <div
+                onClick={() => {
+                  unqualifiedFlag.value = !unqualifiedFlag.value;
+                  setChart();
+                }}
+                class={[
+                  styles.DataTopRightItem,
+                  unqualifiedFlag.value ? '' : styles.DataTopRightItemDis
+                ]}>
+                <div class={[styles.DataTopRightDot, styles.red]}></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}>
+            <NDataTable
+              v-slots={{
+                empty: () => <TheEmpty></TheEmpty>
+              }}
+              class={styles.classTable}
+              loading={state.loading}
+              columns={columns()}
+              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
+            />
+          </div>
+        </div>
+      </>
+    );
+  }
+});

src/views/homework-record/detail/index.tsx

@@ -14,7 +14,7 @@ import SearchInput from '@/components/searchInput';
 import CSelect from '@/components/CSelect';
 import Pagination from '@/components/pagination';
 import { api_trainingDetail, api_trainingStudentList } from '../api';
-import { useRoute } from 'vue-router';
+import { onBeforeRouteLeave, useRoute } from 'vue-router';
 import CBreadcrumb from '/src/components/CBreadcrumb';
 import defultHeade from '@/components/layout/images/teacherIcon.png';
 import { trainingStatusArray } from '@/utils/searchArray';
@@ -131,7 +131,9 @@ export default defineComponent({
               if (trainingContent) {
                 const tempList = [
                   `${evaluateDifficult[trainingContent.evaluateDifficult]}`,
-                  `${trainingContent.practiceChapterBegin || 0}-${trainingContent.practiceChapterEnd || 0}小节`,
+                  `${trainingContent.practiceChapterBegin || 0}-${
+                    trainingContent.practiceChapterEnd || 0
+                  }小节`,
                   `速度${trainingContent.evaluateSpeed || 0}`,
                   `${trainingContent.trainingTimes}分达标`
                 ];
@@ -258,9 +260,28 @@ export default defineComponent({
       return state.index + (state.pagination.page - 1) * state.pagination.rows;
     });
 
+    // 定义一个变量来控制守卫是否生效
+    const isBeforeEachActive = ref(false);
+    onBeforeRouteLeave((to, from, next) => {
+      if (
+        isBeforeEachActive.value &&
+        route.query.times &&
+        to.path === '/data-module'
+      ) {
+        to.query = {
+          times: route.query.times
+        };
+      }
+
+      next();
+    });
+
+    const onBack = () => {
+      isBeforeEachActive.value = true;
+    };
     return () => (
       <div>
-        <CBreadcrumb list={routerList.value}></CBreadcrumb>
+        <CBreadcrumb list={routerList.value} onBack={onBack}></CBreadcrumb>
         <div class={styles.listWrap}>
           <div class={styles.teacherSection}>
             <div class={styles.teacherList}>
@@ -286,9 +307,7 @@ export default defineComponent({
                       <span>
                         截止时间：
                         {state.workInfo.expireDate &&
-                          dayjs(state.workInfo.expireDate).format(
-                            'YYYY-MM-DD HH:mm'
-                          )}
+                          dayjs(state.workInfo.expireDate).format('YYYY-MM-DD')}
                       </span>
                     </p>
                   )}

src/views/homework-record/index.tsx

@@ -174,7 +174,9 @@ export default defineComponent({
                 if (trainingContent) {
                   const tempList = [
                     `${evaluateDifficult[trainingContent.evaluateDifficult]}`,
-                    `${trainingContent.practiceChapterBegin || 0}-${trainingContent.practiceChapterEnd || 0}小节`,
+                    `${trainingContent.practiceChapterBegin || 0}-${
+                      trainingContent.practiceChapterEnd || 0
+                    }小节`,
                     `速度${trainingContent.evaluateSpeed || 0}`,
                     `${trainingContent.trainingTimes}分达标`
                   ];
@@ -423,6 +425,8 @@ export default defineComponent({
                 class={styles.CDatePickerItem}
                 separator={'-'}
                 type="daterange"
+                startPlaceholder="布置开始时间"
+                endPlaceholder="布置结束时间"
                 v-model:value={state.searchForm.timer}
                 timerValue={state.searchForm.timer}></CDatePicker>
             </NFormItem>
@@ -453,12 +457,10 @@ export default defineComponent({
           }}
           v-slots={{
             icon: () => (
-              <>
-                <NImage
-                  class={styles.addBtnIcon}
-                  previewDisabled
-                  src={add}></NImage>
-              </>
+              <NImage
+                class={styles.addBtnIcon}
+                previewDisabled
+                src={add}></NImage>
             )
           }}>
           布置作业
@@ -493,7 +495,7 @@ export default defineComponent({
                           <span> | </span>
                           <span>
                             截止时间：
-                            {dayjs(item.expireDate).format('YYYY-MM-DD HH:mm')}
+                            {dayjs(item.expireDate).format('YYYY-MM-DD')}
                           </span>
                         </p>
                       </div>

src/views/prepare-lessons/components/lesson-main/train/assign-homework.tsx

@@ -31,8 +31,9 @@ import { useUserStore } from '@/store/modules/users';
 import { api_getCurrentGradeYear } from '/src/views/studentList/api';
 import request from '/src/utils/request';
 import { modalClickMask } from '/src/state';
-import TheTipDialog from "@/components/TheTipDialog"
+import TheTipDialog from '@/components/TheTipDialog';
 import router from '/src/router';
+import ResetSubjectList from '/src/views/classList/modals/resetSubjectList';
 
 export default defineComponent({
   name: 'assign-homework',
@@ -88,11 +89,15 @@ export default defineComponent({
       classList: [] as any,
       currentGradeNum: null as any,
       currentClassList: [], // 当前选择的年级
-      expireDate: dayjs().add(7, 'day').format('YYYY-MM-DD HH:mm') as any, // 默认7天
+      expireDate: dayjs().add(7, 'day').format('YYYY-MM-DD') as any, // 默认7天
       classGroupId: null as any,
       studentList: [] as any,
       selectIds: [] as any
     });
+
+    const showResetClass = ref(false);
+    const setClassSubjects = ref<any[]>([]);
+
     const formsRef = ref();
     const maxDeadlineTime = ref(0);
     const maxExpireTime = ref(0);
@@ -155,48 +160,74 @@ export default defineComponent({
 
     const tipDialog = reactive({
       show: false,
-      msg:"",
-      confirmButtonText:"",
+      msg: '',
+      confirmButtonText: '',
       cancelBtn: false,
-      type: "CLASS" as "CLASS"|"PERSON"|"MUSIC"
-    })
-    function handleLessonAddErr(data:any){
-      const { type, errList } = data
-      tipDialog.type = type
-      if(type === "CLASS"){
-        // 班级乐器没有设置
-        tipDialog.cancelBtn = true
-        tipDialog.confirmButtonText = "去设置"
-        const msg = errList.map((item:any)=>{
-          return `<div><span style="color:#F44541">【${item.classGroupName}】</span>未设置乐器，请设置乐器后布置作业${errList.length>1?"；":""}</div>`
-        })
-        tipDialog.msg = msg.join("")
-      }else if(type === "PERSON"){
-        // 学生乐器没有设置
-        tipDialog.cancelBtn = true
-        tipDialog.confirmButtonText = "去设置"
-        const msg = errList.map((item:any)=>{
-          return `<div><span style="color:#F44541">【${item.studentName}】</span>所在<span style="color:#F44541">【${item.classGroupName}】</span>未设置乐器，请设置乐器后布置作业${errList.length>1?"；":""}</div>`
-        })
-        tipDialog.msg = msg.join("")
-      }else if(type === "MUSIC"){
+      type: 'CLASS' as 'CLASS' | 'PERSON' | 'MUSIC'
+    });
+    function handleLessonAddErr(data: any) {
+      const { type, errList } = data;
+      // if (type === 'CLASS') {
+      // 班级乐器没有设置
+      // tipDialog.cancelBtn = true;
+      // tipDialog.confirmButtonText = '去设置';
+      // const msg = errList.map((item: any) => {
+      //   return `<div><span style="color:#F44541">【${
+      //     item.classGroupName
+      //   }】</span>未设置乐器，请设置乐器后布置作业${
+      //     errList.length > 1 ? '；' : ''
+      //   }</div>`;
+      // });
+      // tipDialog.msg = msg.join('');
+      // } else if (type === 'PERSON') {
+      // 学生乐器没有设置
+      // tipDialog.cancelBtn = true;
+      // tipDialog.confirmButtonText = '去设置';
+      // const msg = errList.map((item: any) => {
+      //   return `<div><span style="color:#F44541">【${
+      //     item.studentName
+      //   }】</span>所在<span style="color:#F44541">【${
+      //     item.classGroupName
+      //   }】</span>未设置乐器，请设置乐器后布置作业${
+      //     errList.length > 1 ? '；' : ''
+      //   }</div>`;
+      // });
+      // tipDialog.msg = msg.join('');
+      // } else
+      if (type === 'CLASS' || type === 'PERSON') {
+        showResetClass.value = true;
+        const msgList = errList.map((item: any) => {
+          return {
+            classGroupId: item.classGroupId,
+            classGroupName: item.classGroupName
+          };
+        });
+        setClassSubjects.value = msgList;
+      } else if (type === 'MUSIC') {
+        tipDialog.type = type;
         // 曲目和当前选择学生的乐器对不上的时候
-        tipDialog.cancelBtn = false
-        tipDialog.confirmButtonText = "我知道了"
-        const msg = errList.map((item:any)=>{
-          return `<div>曲目<span style="color:#F44541">【${item.musicSheetName}】</span>不支持<span style="color:#F44541">【${item.instrumentName}】</span>练习，请更换曲目或取消<span style="color:#F44541">【${item.instrumentName}】</span>的学生${errList.length>1?"；":""}</div>`
-        })
-        tipDialog.msg = msg.join("")
+        tipDialog.cancelBtn = false;
+        tipDialog.confirmButtonText = '我知道了';
+        const msg = errList.map((item: any) => {
+          return `<div>曲目<span style="color:#F44541">【${
+            item.musicSheetName
+          }】</span>不支持<span style="color:#F44541">【${
+            item.instrumentName
+          }】</span>练习，请更换曲目或取消<span style="color:#F44541">【${
+            item.instrumentName
+          }】</span>的学生${errList.length > 1 ? '；' : ''}</div>`;
+        });
+        tipDialog.msg = msg.join('');
+        tipDialog.show = true;
       }
-      tipDialog.show = true
     }
-    function handleTipConfirm(){
-      if(["CLASS", "PERSON"].includes(tipDialog.type)){
+    function handleTipConfirm() {
+      if (['CLASS', 'PERSON'].includes(tipDialog.type)) {
         router.push({
-          path: "/classList"
-        })
-      }else if(tipDialog.type === "MUSIC"){
-        tipDialog.show = false
+          path: '/classList'
+        });
+      } else if (tipDialog.type === 'MUSIC') {
+        tipDialog.show = false;
       }
     }
     const onSubmit = async () => {
@@ -220,7 +251,8 @@ export default defineComponent({
             homeworkObj: forms.homeworkObj,
             homeworkType: forms.homeworkType,
             lessonTrainingDetails: details,
-            expireDate: dayjs(forms.expireDate).format('YYYY-MM-DD HH:mm:ss'),
+            expireDate:
+              dayjs(forms.expireDate).format('YYYY-MM-DD') + ' 23:59:59',
             classGroupId: forms.classGroupId
               ? forms.classGroupId.join(',')
               : null,
@@ -236,14 +268,14 @@ export default defineComponent({
             });
             params.studentIds = ids.join(',');
           }
-          const lessonRes =  await lessonTrainingAdd(params);
-          if(lessonRes.code === 200){
-            if(lessonRes.data.status){
+          const lessonRes = await lessonTrainingAdd(params);
+          if (lessonRes.code === 200) {
+            if (lessonRes.data.status) {
               message.success('布置成功');
               emit('close');
               emit('confirm');
-            }else{
-              handleLessonAddErr(lessonRes.data)
+            } else {
+              handleLessonAddErr(lessonRes.data);
             }
           }
         } catch {
@@ -337,12 +369,12 @@ export default defineComponent({
     };
 
     const changeHomeWork = (type: any) => {
-      forms.homeworkObj = type
-      if(!props.classGroupId) {
-        forms.currentGradeNum = null
-        forms.classGroupId = null
+      forms.homeworkObj = type;
+      if (!props.classGroupId) {
+        forms.currentGradeNum = null;
+        forms.classGroupId = null;
       }
-    }
+    };
 
     onMounted(async () => {
       await getDefaultParamConfig();
@@ -384,7 +416,7 @@ export default defineComponent({
                   styles.switch,
                   forms.homeworkObj === 'CLASS' ? styles.active : ''
                 ]}
-                onClick={() => changeHomeWork("CLASS")}>
+                onClick={() => changeHomeWork('CLASS')}>
                 按班级布置
               </NButton>
               <NButton
@@ -393,7 +425,7 @@ export default defineComponent({
                   styles.switch,
                   forms.homeworkObj === 'PERSON' ? styles.active : ''
                 ]}
-                onClick={() => changeHomeWork("PERSON")}>
+                onClick={() => changeHomeWork('PERSON')}>
                 按学生布置
               </NButton>
             </NSpace>
@@ -423,19 +455,26 @@ export default defineComponent({
                 required: true,
                 message: '请选择年级',
                 trigger: 'change',
-                type: forms.homeworkObj === 'CLASS' || props.classGroupId ? 'number' : 'array'
+                type:
+                  forms.homeworkObj === 'CLASS' || props.classGroupId
+                    ? 'number'
+                    : 'array'
               }
             ]}>
             <NSelect
               disabled={props.classGroupId ? true : false}
               v-model:value={forms.currentGradeNum}
               placeholder="请选择年级"
-              multiple={forms.homeworkObj === 'CLASS' || props.classGroupId ? false : true}
+              multiple={
+                forms.homeworkObj === 'CLASS' || props.classGroupId
+                  ? false
+                  : true
+              }
               options={forms.gradeList}
               clearable
               onUpdate:value={() => {
                 forms.classGroupId = null;
-                forms.studentList = []
+                forms.studentList = [];
                 getClassList();
               }}
             />
@@ -483,26 +522,23 @@ export default defineComponent({
                   if (forms.currentGradeNum.length <= 0) {
                     return;
                   }
-
-                  console.log(forms.currentGradeNum, 'currentGradeNum', forms.gradeList)
-
-                  const tempClass: any = []
+                  const tempClass: any = [];
                   forms.gradeList.forEach((item: any) => {
                     // 为了区分上课页面和作业页面
-                    if(Array.isArray(forms.currentGradeNum)) {
-                      if(forms.currentGradeNum.includes(item.value)) {
-                        const child = item.childrens || []
-                        tempClass.push(...child)
+                    if (Array.isArray(forms.currentGradeNum)) {
+                      if (forms.currentGradeNum.includes(item.value)) {
+                        const child = item.childrens || [];
+                        tempClass.push(...child);
                       }
                     } else {
-                      if(forms.currentGradeNum === item.value) {
-                        const child = item.childrens || []
-                        tempClass.push(...child)
+                      if (forms.currentGradeNum === item.value) {
+                        const child = item.childrens || [];
+                        tempClass.push(...child);
                       }
                     }
-                  })
+                  });
 
-                  forms.currentClassList = tempClass
+                  forms.currentClassList = tempClass;
 
                   const tempIds: any = [];
                   forms.studentList.forEach((item: any) => {
@@ -541,10 +577,10 @@ export default defineComponent({
             ]}>
             <NDatePicker
               v-model:formatted-value={forms.expireDate}
-              type="datetime"
+              type="date"
               clearable
               // valueFormat="yyyy-MM-dd HH:mm"
-              format="yyyy-MM-dd HH:mm"
+              format="yyyy-MM-dd"
               style={{ width: '100%' }}
               isDateDisabled={dateDisabled}
             />
@@ -614,13 +650,27 @@ export default defineComponent({
           show={tipDialog.show}
           content={tipDialog.msg}
           onClose={() => {
-            tipDialog.show = false
+            tipDialog.show = false;
           }}
           onConfirm={handleTipConfirm}
-          cancelButtonText={"暂不设置"}
+          cancelButtonText={'暂不设置'}
           cancelBtn={tipDialog.cancelBtn}
-          confirmButtonText={tipDialog.confirmButtonText}
-        ></TheTipDialog>
+          confirmButtonText={tipDialog.confirmButtonText}></TheTipDialog>
+
+        <NModal
+          maskClosable={modalClickMask}
+          v-model:show={showResetClass.value}
+          style={{ width: '392px' }}
+          display-directive="if"
+          preset="card"
+          class={['modalTitleNew']}
+          title={'选择乐器'}>
+          <ResetSubjectList
+            activeRow={setClassSubjects.value}
+            // onGetList={() => {}}
+            onClose={() => (showResetClass.value = false)}
+          />
+        </NModal>
       </div>
     );
   }

src/views/prepare-lessons/components/lesson-main/train/index.tsx

@@ -3,7 +3,6 @@ import {
   onMounted,
   reactive,
   watch,
-  ref,
   PropType,
   onUnmounted,
   toRef
@@ -14,7 +13,6 @@ import {
   NInput,
   NModal,
   NScrollbar,
-  NSelect,
   NSpace,
   NSpin,
   useDialog,
@@ -78,7 +76,7 @@ export default defineComponent({
   emits: ['change'],
   setup(props, { emit }) {
     console.log(props.courseScheduleId, 'courseScheduleId');
-    const catchStore = useCatchStore();
+    // const catchStore = useCatchStore();
     const prepareStore = usePrepareStore();
     const dialog = useDialog();
     const message = useMessage();
@@ -445,54 +443,52 @@ export default defineComponent({
                 }
               }}>
               {forms.trainList.length > 0 && (
-                <>
-                  <Draggable
-                    v-model:modelValue={forms.trainList}
-                    itemKey="id"
-                    componentData={{
-                      itemKey: 'id',
-                      tag: 'div',
-                      animation: 200,
-                      group: 'description',
-                      disabled: false
-                    }}
-                    class={styles.list}>
-                    {{
-                      item: (element: any) => {
-                        const item = element.element;
-                        return (
-                          <div data-id={item.musicId} class={styles.itemBlock}>
-                            <TrainType
-                              from={props.from}
-                              item={item}
-                              isDelete
-                              type="prepare"
-                              onDelete={(child: any) => onDelete(child)}
-                              offShelf={item.removeFlag ? true : false}
-                              onOffShelf={() => onRemove(item)}
-                              onEdit={(child: any) => {
-                                // console.log(forms.trainList);
-                                const {
-                                  trainingConfigJson,
-                                  id,
-                                  musicId,
-                                  ...res
-                                } = child;
-                                forms.editItem = {
-                                  ...res,
-                                  id: musicId,
-                                  trainId: id,
-                                  ...trainingConfigJson
-                                };
-                                forms.editStatus = true;
-                              }}
-                            />
-                          </div>
-                        );
-                      }
-                    }}
-                  </Draggable>
-                </>
+                <Draggable
+                  v-model:modelValue={forms.trainList}
+                  itemKey="id"
+                  componentData={{
+                    itemKey: 'id',
+                    tag: 'div',
+                    animation: 200,
+                    group: 'description',
+                    disabled: false
+                  }}
+                  class={styles.list}>
+                  {{
+                    item: (element: any) => {
+                      const item = element.element;
+                      return (
+                        <div data-id={item.musicId} class={styles.itemBlock}>
+                          <TrainType
+                            from={props.from}
+                            item={item}
+                            isDelete
+                            type="prepare"
+                            onDelete={(child: any) => onDelete(child)}
+                            offShelf={item.removeFlag ? true : false}
+                            onOffShelf={() => onRemove(item)}
+                            onEdit={(child: any) => {
+                              // console.log(forms.trainList);
+                              const {
+                                trainingConfigJson,
+                                id,
+                                musicId,
+                                ...res
+                              } = child;
+                              forms.editItem = {
+                                ...res,
+                                id: musicId,
+                                trainId: id,
+                                ...trainingConfigJson
+                              };
+                              forms.editStatus = true;
+                            }}
+                          />
+                        </div>
+                      );
+                    }
+                  }}
+                </Draggable>
               )}
 
               {!forms.loadingStatus &&

src/views/studentList/modals/studentTraomomhDetails.tsx

@@ -56,7 +56,9 @@ export default defineComponent({
       if (trainingType === 'EVALUATION') {
         tList = [
           `${evaluateDifficult[configJson.evaluateDifficult]}`,
-          `${configJson.practiceChapterBegin || 0}-${configJson.practiceChapterEnd || 0}小节`,
+          `${configJson.practiceChapterBegin || 0}-${
+            configJson.practiceChapterEnd || 0
+          }小节`,
           `速度${configJson.evaluateSpeed || 0}`,
           `${configJson.trainingTimes}分达标`
         ];
@@ -151,28 +153,28 @@ export default defineComponent({
                     : '--'}
                 </p>
               </div>
-
-              {teacherInfo.value.trainingStatus == 'UNSUBMITTED' ? (
-                <NImage
-                  previewDisabled
-                  class={styles.workStatus}
-                  src={noSub}></NImage>
-              ) : null}
-              {teacherInfo.value.trainingStatus == 'SUBMITTED' ? (
-                <NImage
-                  previewDisabled
-                  class={styles.workStatus}
-                  src={unqualified}></NImage>
-              ) : null}
-              {teacherInfo.value.trainingStatus == 'TARGET' ? (
-                <NImage
-                  previewDisabled
-                  class={styles.workStatus}
-                  src={qualified}></NImage>
-              ) : null}
             </div>
 
-            {teacherInfo.value.expireFlag && (
+            {teacherInfo.value.trainingStatus == 'UNSUBMITTED' ? (
+              <NImage
+                previewDisabled
+                class={styles.workStatus}
+                src={noSub}></NImage>
+            ) : null}
+            {teacherInfo.value.trainingStatus == 'SUBMITTED' ? (
+              <NImage
+                previewDisabled
+                class={styles.workStatus}
+                src={unqualified}></NImage>
+            ) : null}
+            {teacherInfo.value.trainingStatus == 'TARGET' ? (
+              <NImage
+                previewDisabled
+                class={styles.workStatus}
+                src={qualified}></NImage>
+            ) : null}
+
+            {/* {teacherInfo.value.expireFlag && (
               <NButton
                 onClick={() => (showModalMask.value = true)}
                 class={styles.commentBtnGroup}>
@@ -182,7 +184,7 @@ export default defineComponent({
                   {teacherInfo.value.comment ? '修改点评' : '点评作业'}
                 </div>
               </NButton>
-            )}
+            )} */}
           </div>
           {(teacherInfo.value.fileExpireDay || 0) > 0 && (
             <div class={styles.expireDateTip}>
@@ -211,7 +213,7 @@ export default defineComponent({
                 )
               )}
             </div>
-            {teacherInfo.value.comment && (
+            {/* {teacherInfo.value.comment && (
               <div class={styles.commentSection}>
                 <h3>
                   <i class={styles.iconComment}></i>
@@ -221,7 +223,37 @@ export default defineComponent({
                   {teacherInfo.value.comment}
                 </div>
               </div>
-            )}
+            )} */}
+
+            {teacherInfo.value.expireFlag ? (
+              <div class={styles.commentSection}>
+                <div class={styles.commentTitle}>
+                  <h3>
+                    <i class={styles.iconComment}></i>
+                    <i class={styles.myText}></i>
+                  </h3>
+                  <NButton
+                    text
+                    onClick={() => (showModalMask.value = true)}
+                    class={styles.commentBtnGroup}>
+                    <div class={styles.text}>
+                      <i></i>
+
+                      {teacherInfo.value.comment ? '修改点评' : '点评作业'}
+                    </div>
+                  </NButton>
+                </div>
+                {teacherInfo.value.comment ? (
+                  <div class={styles.commentContent}>
+                    {teacherInfo.value.comment}
+                  </div>
+                ) : (
+                  <div class={[styles.commentContent, styles.commentTip]}>
+                    您目前还没有点评该作业喔，快来写评语吧～
+                  </div>
+                )}
+              </div>
+            ) : null}
           </NScrollbar>
         </NSpin>
 

src/views/studentList/studentDetail.tsx

@@ -1,141 +1,147 @@
-import { defineComponent, onMounted, reactive, ref } from 'vue';
-import styles from '@/views/classList/index.module.less';
-import {
-  NButton,
-  NDataTable,
-  NForm,
-  NFormItem,
-  NImage,
-  NSelect,
-  NSpace,
-  NTabPane,
-  NTabs
-} from 'naive-ui';
-import {
-  getStudentDetail,
-  getTrainingStudentList
-} from '@/views/classList/api';
-import { useRoute } from 'vue-router';
-import CBreadcrumb from '/src/components/CBreadcrumb';
-import defultHeade from '@/components/layout/images/teacherIcon.png';
-import femaleIcon from '@/views/setting/images/femaleIcon.png';
-import maleIcon from '@/views/setting/images/maleIcon.png';
-import PracticeData from '@/views/studentList/components/practiceData';
-import EvaluationRecords from '@/views/studentList/components/evaluationRecords';
-import BaseInfo from '@/views/studentList/components/baseInfo';
-import StudentAfterWork from './components/studentAfterWork';
-import { getTabsCache, setTabsCaches } from '@/hooks/use-async';
-import dayjs from 'dayjs';
-export default defineComponent({
-  name: 'studentDetail',
-  setup(props, { emit }) {
-    const state = reactive({
-      studentInfo: {
-        avatar: '',
-        nickname: '',
-        gender: null,
-        subjectNames: '',
-        classInstrumentName: '',
-        classGroupName: ''
-      }
-    });
-    const activeStudentTab = ref('baseInfo');
-    const route = useRoute();
-    console.log(route.meta.isClass);
-    const routerList = ref(
-      route.meta.isClass
-        ? [
-            { name: '班级管理', path: '/classList' },
-            { name: route.query.name, path: '/classDetail' },
-            { name: route.query.studentName, path: '/classStudentRecode' }
-          ]
-        : ([
-            { name: '学生管理', path: '/studentList' },
-            { name: route.query.studentName, path: '/classStudentRecode' }
-          ] as any)
-    );
-
-    const getWorkInfo = async () => {
-      console.log(route.query.studentId);
-      try {
-        const res = await getStudentDetail({
-          id: route.query.studentId
-        });
-        state.studentInfo = { ...res.data };
-      } catch (e) {
-        console.log(e);
-      }
-    };
-    onMounted(() => {
-      getWorkInfo();
-    });
-    getTabsCache((val: any) => {
-      if (val.form.tabName) {
-        activeStudentTab.value = val.form.tabName;
-      }
-    });
-    const setTabs = (val: any) => {
-      setTabsCaches(val, 'tabName', route);
-    };
-    return () => (
-      <div>
-        <CBreadcrumb list={routerList.value}></CBreadcrumb>
-        <div class={[styles.listWrap, styles.infoListWrap]}>
-          <div class={styles.teacherList}>
-            <div class={styles.teacherHeader}>
-              <div class={styles.teacherHeaderBorder}>
-                <NImage
-                  class={styles.teacherHeaderImg}
-                  src={
-                    state.studentInfo.avatar
-                      ? state.studentInfo.avatar
-                      : defultHeade
-                  }
-                  previewDisabled></NImage>
-              </div>
-            </div>
-            <div class={styles.workafterInfo}>
-              <h4 class={styles.studentGender}>
-                {state.studentInfo.nickname}{' '}
-                <NImage
-                  previewDisabled
-                  src={
-                    state.studentInfo.gender ? maleIcon : femaleIcon
-                  }></NImage>
-              </h4>
-              <p>
-                {state.studentInfo.classGroupName}{' '}
-                {state.studentInfo.classInstrumentName
-                  ? '| ' + state.studentInfo.classInstrumentName
-                  : ' '}
-              </p>
-            </div>
-          </div>
-          <NTabs
-            onUpdate:value={(val: any) => setTabs(val)}
-            class={styles.customTabs}
-            v-model:value={activeStudentTab.value}
-            size="large"
-            animated={false}
-            pane-wrapper-style="margin: 0 -4px"
-            pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;">
-            <NTabPane name="baseInfo" tab="基本信息">
-              <BaseInfo studentInfo={state.studentInfo}></BaseInfo>
-            </NTabPane>
-            <NTabPane name="afterWork" tab="课后作业">
-              <StudentAfterWork></StudentAfterWork>
-            </NTabPane>
-            <NTabPane name="textRcode" tab="练习记录">
-              <PracticeData
-                studentId={route.query.studentId as string}></PracticeData>
-            </NTabPane>
-            <NTabPane name="evaluatingRcode" tab="评测记录">
-              <EvaluationRecords
-                studentId={route.query.studentId as string}></EvaluationRecords>
-            </NTabPane>
-          </NTabs>
-        </div>
-      </div>
-    );
-  }
-});
+import { defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from '@/views/classList/index.module.less';
+import { NImage, NTabPane, NTabs } from 'naive-ui';
+import { getStudentDetail } from '@/views/classList/api';
+import { onBeforeRouteLeave, useRoute } from 'vue-router';
+import CBreadcrumb from '/src/components/CBreadcrumb';
+import defultHeade from '@/components/layout/images/teacherIcon.png';
+import femaleIcon from '@/views/setting/images/femaleIcon.png';
+import maleIcon from '@/views/setting/images/maleIcon.png';
+import PracticeData from '@/views/studentList/components/practiceData';
+import EvaluationRecords from '@/views/studentList/components/evaluationRecords';
+import BaseInfo from '@/views/studentList/components/baseInfo';
+import StudentAfterWork from './components/studentAfterWork';
+import { getTabsCache, setTabsCaches } from '@/hooks/use-async';
+export default defineComponent({
+  name: 'studentDetail',
+  setup(props, { emit }) {
+    const state = reactive({
+      studentInfo: {
+        avatar: '',
+        nickname: '',
+        gender: null,
+        subjectNames: '',
+        classInstrumentName: '',
+        classGroupName: ''
+      }
+    });
+    const activeStudentTab = ref('baseInfo');
+    const route = useRoute();
+    console.log(route.meta.isClass);
+    const routerList = ref(
+      route.meta.isClass
+        ? [
+            { name: '班级管理', path: '/classList' },
+            { name: route.query.name, path: '/classDetail' },
+            { name: route.query.studentName, path: '/classStudentRecode' }
+          ]
+        : ([
+            { name: '学生管理', path: '/studentList' },
+            { name: route.query.studentName, path: '/classStudentRecode' }
+          ] as any)
+    );
+
+    const getWorkInfo = async () => {
+      console.log(route.query, route.query.studentId, 'route.query');
+      try {
+        const res = await getStudentDetail({
+          id: route.query.studentId
+        });
+        state.studentInfo = { ...res.data };
+      } catch (e) {
+        console.log(e);
+      }
+    };
+    onMounted(() => {
+      getWorkInfo();
+    });
+    getTabsCache((val: any) => {
+      if (val.form.tabName) {
+        activeStudentTab.value = val.form.tabName;
+      }
+    });
+    const setTabs = (val: any) => {
+      setTabsCaches(val, 'tabName', route);
+    };
+
+    // 定义一个变量来控制守卫是否生效
+    const isBeforeEachActive = ref(false);
+    onBeforeRouteLeave((to, from, next) => {
+      if (
+        isBeforeEachActive.value &&
+        route.query.times &&
+        to.path === '/data-module'
+      ) {
+        to.query = {
+          times: route.query.times
+        };
+      }
+
+      next();
+    });
+
+    const onBack = () => {
+      isBeforeEachActive.value = true;
+    };
+    return () => (
+      <div>
+        <CBreadcrumb list={routerList.value} onBack={onBack}></CBreadcrumb>
+        <div class={[styles.listWrap, styles.infoListWrap]}>
+          <div class={styles.teacherList}>
+            <div class={styles.teacherHeader}>
+              <div class={styles.teacherHeaderBorder}>
+                <NImage
+                  class={styles.teacherHeaderImg}
+                  src={
+                    state.studentInfo.avatar
+                      ? state.studentInfo.avatar
+                      : defultHeade
+                  }
+                  previewDisabled></NImage>
+              </div>
+            </div>
+            <div class={styles.workafterInfo}>
+              <h4 class={styles.studentGender}>
+                {state.studentInfo.nickname}{' '}
+                <NImage
+                  previewDisabled
+                  src={
+                    state.studentInfo.gender ? maleIcon : femaleIcon
+                  }></NImage>
+              </h4>
+              <p>
+                {state.studentInfo.classGroupName}{' '}
+                {state.studentInfo.classInstrumentName
+                  ? '| ' + state.studentInfo.classInstrumentName
+                  : ' '}
+              </p>
+            </div>
+          </div>
+          <NTabs
+            onUpdate:value={(val: any) => setTabs(val)}
+            class={styles.customTabs}
+            v-model:value={activeStudentTab.value}
+            size="large"
+            animated={false}
+            pane-wrapper-style="margin: 0 -4px"
+            pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;">
+            <NTabPane name="baseInfo" tab="基本信息">
+              <BaseInfo studentInfo={state.studentInfo}></BaseInfo>
+            </NTabPane>
+            <NTabPane name="afterWork" tab="课后作业">
+              <StudentAfterWork></StudentAfterWork>
+            </NTabPane>
+            <NTabPane name="textRcode" tab="练习记录">
+              <PracticeData
+                studentId={route.query.studentId as string}></PracticeData>
+            </NTabPane>
+            <NTabPane name="evaluatingRcode" tab="评测记录">
+              <EvaluationRecords
+                studentId={route.query.studentId as string}></EvaluationRecords>
+            </NTabPane>
+          </NTabs>
+        </div>
+      </div>
+    );
+  }
+});

vite.config.ts

@@ -23,7 +23,7 @@ function resolve(dir: string) {
 }
 // https://vitejs.dev/config/
 // https://github.com/vitejs/vite/issues/1930 .env
-const proxyUrl = 'https://test.kt.colexiu.com/';
+const proxyUrl = 'https://dev.kt.colexiu.com/';
 // const proxyUrl = 'https://test.kt.colexiu.com';
 // const proxyUrl = 'http://192.168.3.14:7989';
 const now = new Date().getTime();