修改问题

src/api/user.ts

@@ -77,3 +77,11 @@ export const api_musicalInstrumentList = (data: any) => {
     data
   });
 };
+
+/**
+ * @description: 上课记录详情
+ * @param params
+ */
+export const api_cousseScheduleDetail = (id: string) => {
+  return request.post('/edu-app/courseSchedule/detail/' + id);
+};

src/store/modules/catchData.ts

@@ -1,218 +1,220 @@
-import { defineStore } from 'pinia';
-import { store } from '@/store';
-import {
-  getSubjectList,
-  getSubjectList2,
-  getCategories,
-  api_musicalInstrumentList
-} from '@/api/user';
-
-export const useCatchStore = defineStore('catch-store', {
-  state: () => ({
-    bookVersionList: [] as any[], // 其它类型
-    musicTypeList: [] as any[], // 乐谱分类
-    subjectList: [] as any[], // 声部列表,
-    musicInstrumentList: [] as any[], // 乐器列表,
-    subjectInstruemnts: [] as any[] // 乐器列表，
-  }),
-  getters: {
-    getBookVersion(): any[] {
-      return this.bookVersionList;
-    },
-    getMusicCategories(): any[] {
-      return this.musicTypeList;
-    },
-    getMusicInstruments(): any[] {
-      return this.musicInstrumentList;
-    },
-    getAllMusicCategories(): any[] {
-      return [
-        {
-          name: '全部',
-          id: null
-        },
-        ...this.musicTypeList
-      ];
-    },
-    getSubjectList(): any[] {
-      return this.subjectList;
-    },
-    getSubjectAllList(): any[] {
-      return [
-        {
-          name: '全部',
-          id: null
-        },
-        ...this.subjectList
-      ];
-    },
-    /**
-     * 获取所有启用的声部
-     */
-    getEnableSubjects(): any[] {
-      const temp: any[] = [];
-      this.subjectList.forEach((subject: any) => {
-        if (subject.enableFlag) {
-          const { instruments, ...r } = subject;
-
-          if (instruments && instruments.length > 0) {
-            const tempChild: any[] = [];
-            instruments?.forEach((instrument: any) => {
-              if (instrument.enableFlag) {
-                tempChild.push(instrument);
-              }
-            });
-
-            temp.push({ ...r, instruments: tempChild });
-          }
-        }
-      });
-      return temp;
-    },
-    getSubjectInstruments(): any[] {
-      return [
-        {
-          name: '全部',
-          id: null,
-          label: '全部',
-          value: null
-        },
-        ...this.subjectInstruemnts
-      ];
-    }
-  },
-  actions: {
-    setBookVersion(books: any[]) {
-      this.bookVersionList = books;
-    },
-    setMusicCategories(musics: any[]) {
-      this.musicTypeList = musics;
-    },
-    setSubjects(subjects: any[]) {
-      this.subjectList = subjects;
-    },
-    setSubjectInstruemnts(subjects: any[]) {
-      this.subjectInstruemnts = subjects;
-    },
-    setMusicInstruments(instruments: any[]) {
-      this.musicInstrumentList = instruments;
-    },
-    /**
-     * 判断是否有声部数据，如不存在则获取声部列表
-     * @returns Promise
-     */
-    async getSubjects() {
-      try {
-        // 判断是否存在声部数据
-        if (this.getSubjectList && this.getSubjectList.length > 0) {
-          return Promise.resolve();
-        }
-        const { data } = await getSubjectList2({
-          // enableFlag: true,
-          delFlag: 0,
-          page: 1,
-          rows: 999
-        });
-
-        const tempSubjectList = data || [];
-
-        const tempSubjectInstruments: any = [];
-        tempSubjectList.forEach((item: any) => {
-          if (item.instruments && item.instruments.length > 0) {
-            item.value = item.id;
-            item.label = item.name;
-            item.instruments.forEach((child: any) => {
-              child.label = child.name;
-              child.value = child.id;
-            });
-
-            const tempSi = {
-              value: item.id,
-              label: item.name,
-              id: item.id,
-              name: item.name,
-              instruments: [] as any
-            };
-            if (item.instruments) {
-              if (item.instruments.length == 1) {
-                tempSi.value = item.instruments[0].id;
-                tempSi.label = item.instruments[0].name;
-                tempSi.id = item.id;
-                tempSi.name = item.name;
-              } else if (item.instruments.length > 1) {
-                item.instruments.forEach((child: any) => {
-                  child.label = child.name;
-                  child.value = child.id;
-                  tempSi.instruments.push({
-                    label: child.name,
-                    value: child.id,
-                    id: child.id,
-                    name: child.name
-                  });
-                });
-              }
-            }
-            tempSubjectInstruments.push(tempSi);
-          }
-        });
-
-        this.setSubjects(
-          tempSubjectList.filter(
-            (item: any) => item.instruments && item.instruments.length > 0
-          ) || 0
-        );
-        this.setSubjectInstruemnts(tempSubjectInstruments || []);
-
-        return Promise.resolve();
-      } catch (e) {
-        return Promise.reject(e);
-      }
-    },
-    /**
-     * 判断是否有教材分类数据，如不存在则获取教材分类列表
-     * @returns Promise
-     */
-    async getMusicSheetCategory() {
-      try {
-        // 判断是否存在声部数据
-        if (this.getMusicCategories && this.getMusicCategories.length > 0) {
-          return Promise.resolve();
-        }
-        const { data } = await getCategories({
-          enable: true,
-          page: 1,
-          rows: 999
-        });
-        this.setMusicCategories(data.rows || []);
-        return Promise.resolve();
-      } catch (e) {
-        return Promise.reject(e);
-      }
-    },
-    /**
-     * 获取乐器列表
-     * @returns Promise
-     */
-    async getMusicInstrument() {
-      try {
-        // 判断是否存在声部数据
-        if (this.getMusicInstruments && this.getMusicInstruments.length > 0) {
-          return Promise.resolve();
-        }
-        const { data } = await api_musicalInstrumentList({
-          enableFlag: true
-        });
-        console.log(data, 'data');
-        this.setMusicInstruments(data || []);
-        return Promise.resolve();
-      } catch (e) {
-        return Promise.reject(e);
-      }
-    }
-  }
-});
-
-// Need to be used outside the setup
-export function useCatchStoreWidthOut() {
-  return useCatchStore(store);
-}
+import { defineStore } from 'pinia';
+import { store } from '@/store';
+import {
+  getSubjectList,
+  getSubjectList2,
+  getCategories,
+  api_musicalInstrumentList
+} from '@/api/user';
+
+export const useCatchStore = defineStore('catch-store', {
+  state: () => ({
+    bookVersionList: [] as any[], // 其它类型
+    musicTypeList: [] as any[], // 乐谱分类
+    subjectList: [] as any[], // 声部列表,
+    musicInstrumentList: [] as any[], // 乐器列表,
+    subjectInstruemnts: [] as any[] // 乐器列表，
+  }),
+  getters: {
+    getBookVersion(): any[] {
+      return this.bookVersionList;
+    },
+    getMusicCategories(): any[] {
+      return this.musicTypeList;
+    },
+    getMusicInstruments(): any[] {
+      return this.musicInstrumentList;
+    },
+    getAllMusicCategories(): any[] {
+      return [
+        {
+          name: '全部',
+          id: null
+        },
+        ...this.musicTypeList
+      ];
+    },
+    getSubjectList(): any[] {
+      return this.subjectList;
+    },
+    getSubjectAllList(): any[] {
+      return [
+        {
+          name: '全部',
+          id: null
+        },
+        ...this.subjectList
+      ];
+    },
+    /**
+     * 获取所有启用的声部
+     */
+    getEnableSubjects(): any[] {
+      const temp: any[] = [];
+      this.subjectList.forEach((subject: any) => {
+        if (subject.enableFlag) {
+          const { instruments, ...r } = subject;
+
+          if (instruments && instruments.length > 0) {
+            const tempChild: any[] = [];
+            instruments?.forEach((instrument: any) => {
+              if (instrument.enableFlag) {
+                tempChild.push(instrument);
+              }
+            });
+
+            if (tempChild.length > 0)
+              temp.push({ ...r, instruments: tempChild });
+          }
+        }
+      });
+
+      return temp;
+    },
+    getSubjectInstruments(): any[] {
+      return [
+        {
+          name: '全部',
+          id: null,
+          label: '全部',
+          value: null
+        },
+        ...this.subjectInstruemnts
+      ];
+    }
+  },
+  actions: {
+    setBookVersion(books: any[]) {
+      this.bookVersionList = books;
+    },
+    setMusicCategories(musics: any[]) {
+      this.musicTypeList = musics;
+    },
+    setSubjects(subjects: any[]) {
+      this.subjectList = subjects;
+    },
+    setSubjectInstruemnts(subjects: any[]) {
+      this.subjectInstruemnts = subjects;
+    },
+    setMusicInstruments(instruments: any[]) {
+      this.musicInstrumentList = instruments;
+    },
+    /**
+     * 判断是否有声部数据，如不存在则获取声部列表
+     * @returns Promise
+     */
+    async getSubjects() {
+      try {
+        // 判断是否存在声部数据
+        if (this.getSubjectList && this.getSubjectList.length > 0) {
+          return Promise.resolve();
+        }
+        const { data } = await getSubjectList2({
+          // enableFlag: true,
+          delFlag: 0,
+          page: 1,
+          rows: 999
+        });
+
+        const tempSubjectList = data || [];
+
+        const tempSubjectInstruments: any = [];
+        tempSubjectList.forEach((item: any) => {
+          if (item.instruments && item.instruments.length > 0) {
+            item.value = item.id;
+            item.label = item.name;
+            item.instruments.forEach((child: any) => {
+              child.label = child.name;
+              child.value = child.id;
+            });
+
+            const tempSi = {
+              value: item.id,
+              label: item.name,
+              id: item.id,
+              name: item.name,
+              instruments: [] as any
+            };
+            if (item.instruments) {
+              if (item.instruments.length == 1) {
+                tempSi.value = item.instruments[0].id;
+                tempSi.label = item.instruments[0].name;
+                tempSi.id = item.id;
+                tempSi.name = item.name;
+              } else if (item.instruments.length > 1) {
+                item.instruments.forEach((child: any) => {
+                  child.label = child.name;
+                  child.value = child.id;
+                  tempSi.instruments.push({
+                    label: child.name,
+                    value: child.id,
+                    id: child.id,
+                    name: child.name
+                  });
+                });
+              }
+            }
+            tempSubjectInstruments.push(tempSi);
+          }
+        });
+
+        this.setSubjects(
+          tempSubjectList.filter(
+            (item: any) => item.instruments && item.instruments.length > 0
+          ) || 0
+        );
+        this.setSubjectInstruemnts(tempSubjectInstruments || []);
+
+        return Promise.resolve();
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    /**
+     * 判断是否有教材分类数据，如不存在则获取教材分类列表
+     * @returns Promise
+     */
+    async getMusicSheetCategory() {
+      try {
+        // 判断是否存在声部数据
+        if (this.getMusicCategories && this.getMusicCategories.length > 0) {
+          return Promise.resolve();
+        }
+        const { data } = await getCategories({
+          enable: true,
+          page: 1,
+          rows: 999
+        });
+        this.setMusicCategories(data.rows || []);
+        return Promise.resolve();
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    /**
+     * 获取乐器列表
+     * @returns Promise
+     */
+    async getMusicInstrument() {
+      try {
+        // 判断是否存在声部数据
+        if (this.getMusicInstruments && this.getMusicInstruments.length > 0) {
+          return Promise.resolve();
+        }
+        const { data } = await api_musicalInstrumentList({
+          enableFlag: true
+        });
+        console.log(data, 'data');
+        this.setMusicInstruments(data || []);
+        return Promise.resolve();
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    }
+  }
+});
+
+// Need to be used outside the setup
+export function useCatchStoreWidthOut() {
+  return useCatchStore(store);
+}

src/views/attend-class/index.tsx

@@ -1,4 +1,3 @@
-<<<<<<< Updated upstream
 import {
   defineComponent,
   onMounted,
@@ -91,6 +90,7 @@ import ResourceMain from '../prepare-lessons/components/resource-main';
 import { useResizeObserver } from '@vueuse/core';
 import { storage } from '/src/utils/storage';
 import { ACCESS_TOKEN_ADMIN } from '/src/store/mutation-types';
+import { api_cousseScheduleDetail } from '/src/api/user';
 
 export type ToolType = 'init' | 'pen' | 'whiteboard' | 'call';
 export type ToolItem = {
@@ -334,7 +334,7 @@ export default defineComponent({
       }
     };
 
-    onMounted(() => {
+    onMounted(async () => {
       // initMoveable();
       const query = route.query;
       // console.log(query, props.preStudentNum, '学生人数');
@@ -348,6 +348,12 @@ export default defineComponent({
       data.classId = props.classId || query.classId;
       data.preStudentNum = props.preStudentNum || query.preStudentNum;
       window.addEventListener('message', iframeHandle);
+
+      if (data.classId) {
+        const res = await api_cousseScheduleDetail(data.classId);
+        data.courseId = res.data.useChapterLessonCoursewareId;
+      }
+
       getDetail();
       getLessonCoursewareDetail();
       if (data.type === 'preview') {
@@ -1949,17 +1955,8 @@ export default defineComponent({
                 onChange={async (val: any) => {
                   data.modelTrainStatus = val.status;
                   // getCoursewareList();
-                  if (val.saveWork) {
-                    try {
-                      const res =
-                        await api_teacherChapterLessonCoursewareDetail(
-                          data.courseId
-                        );
-
-                      data.lessonPreTrainingId = res.data.lessonPreTrainingId;
-                    } catch {
-                      //
-                    }
+                  if (val.saveWork && data.classId) {
+                    data.lessonPreTrainingId = val.lessonPreTrainingId;
                   }
                 }}
               />
@@ -2097,2404 +2094,3 @@ export default defineComponent({
     );
   }
 });
-=======
-import {
-  defineComponent,
-  onMounted,
-  reactive,
-  onUnmounted,
-  ref,
-  Transition,
-  computed,
-  nextTick,
-  watch,
-  toRef
-} from 'vue';
-import styles from './index.module.less';
-import 'plyr/dist/plyr.css';
-import MusicScore from './component/musicScore';
-// import iconChange from './image/icon-change.png';
-// import iconMenu from './image/icon-menu.png';
-// import iconUp from './image/icon-up.png';
-// import iconDown from './image/icon-down.png';
-// import iconNote from './image/icon-note.png';
-// import iconWhiteboard from './image/icon-whiteboard.png';
-// import iconAssignHomework from './image/icon-assignHomework.png';
-// import iconClose from './image/icon-close.png';
-// import iconOverPreivew from './image/icon-over-preview.png';
-import { Vue3Lottie } from 'vue3-lottie';
-import playLoadData from './datas/data.json';
-// import Moveable from 'moveable';
-import VideoPlay from './component/video-play';
-import {
-  useMessage,
-  NDrawer,
-  NDrawerContent,
-  NModal,
-  NSpace,
-  NButton,
-  NCollapse,
-  NCollapseItem,
-  NTooltip
-} from 'naive-ui';
-import CardType from '@/components/card-type';
-import Pen from './component/tools/pen';
-import AudioPay from './component/audio-pay';
-import TrainSettings from './model/train-settings';
-import { useRoute } from 'vue-router';
-import {
-  api_teacherChapterLessonCoursewareDetail,
-  courseScheduleUpdate,
-  lessonCoursewareDetail,
-  lessonPreTrainingPage,
-  queryCourseware
-} from '../prepare-lessons/api';
-import { vaildUrl } from '/src/utils/urlUtils';
-import TimerMeter from '/src/components/timerMeter';
-import { iframeDislableKeyboard, px2vw } from '/src/utils';
-import PlaceholderTone from '/src/components/layout/modals/placeholderTone';
-import { state as globalState } from '/src/state';
-import Chapter from './model/chapter';
-import { useRouter } from 'vue-router';
-import { useUserStore } from '@/store/modules/users';
-import iconNote from './new-image/icon-note.png';
-import iconWhite from './new-image/icon-white.png';
-
-import rightIconEnd from './image/right_icon1.png';
-import rightIconArrange from './image/right_icon2.png';
-import rightIconPostil from './image/right_icon3.png';
-import rightIconWhiteboard from './image/right_icon4.png';
-import rightIconMetronome from './image/right_icon5.png';
-import rightIconTuner from './image/right_icon6.png';
-import rightIconTimer from './image/right_icon7.png';
-import rightIconCall from './image/right_icon10.png';
-import rightIconPackUp from './image/right_icon11.png';
-import leftIconPackUp from './image/right_icon8.png';
-import rightIconMusic from './image/right_icon9.png';
-import bottomIconSwitch from './image/bottom_icon1.png';
-import bottomIconResource from './image/bottom_icon2.png';
-import bottomIconPre from './image/bottom_icon3.png';
-import bottomIconNext from './image/bottom_icon4.png';
-import rightIconTool from './image/right_icon12.png';
-import rightHideIcon from './image/right_hide_icon.png';
-import leftHideIcon from './image/left_hide_icon.png';
-import SelectResources from '../prepare-lessons/model/select-resources';
-import { getStudentAfterWork, getStudentList } from '../studentList/api';
-import TheNoticeBar from '/src/components/TheNoticeBar';
-import ClassWork from './model/class-work';
-import SelectClass from './model/select-class';
-import SourceList from './model/source-list';
-import RhythmModal from './component/rhythm-modal';
-import InstruemntDetail from '/src/views/prepare-lessons/model/source-instrument/detail';
-import TheotyDetail from '/src/views/prepare-lessons/model/source-knowledge/detail';
-import MusicDetail from '/src/views/prepare-lessons/model/source-music/detail';
-import ListenModal from '/src/components/card-preview/listen-modal';
-import Train from '../prepare-lessons/components/lesson-main/train';
-import ResourceMain from '../prepare-lessons/components/resource-main';
-import { useResizeObserver } from '@vueuse/core';
-import { storage } from '/src/utils/storage';
-import { ACCESS_TOKEN_ADMIN } from '/src/store/mutation-types';
-import useDrag from '@/hooks/useDrag';
-import Dragbom from '@/hooks/useDrag/dragbom';
-
-export type ToolType = 'init' | 'pen' | 'whiteboard' | 'call';
-export type ToolItem = {
-  type: ToolType;
-  name: string;
-  icon: string;
-};
-
-export default defineComponent({
-  name: 'CoursewarePlay',
-  props: {
-    type: {
-      type: String,
-      default: ''
-    },
-    courseId: {
-      type: String,
-      default: ''
-    },
-    instrumentId: {
-      type: [String, Number],
-      default: ''
-    },
-    // 教材编号
-    lessonCourseId: {
-      type: [String, Number],
-      default: ''
-    },
-    detailId: {
-      type: String,
-      default: ''
-    },
-    // 班级编号
-    classGroupId: {
-      type: String,
-      default: ''
-    },
-    // 上课记录编号
-    classId: {
-      type: String,
-      defaault: ''
-    },
-    preStudentNum: {
-      type: [String, Number],
-      default: ''
-    }
-  },
-  emits: ['close'],
-  setup(props, { emit }) {
-    const message = useMessage();
-    const route = useRoute();
-    const router = useRouter();
-    const users = useUserStore();
-    /** 设置播放容器 16:9 */
-    const parentContainer = reactive({
-      width: '100vw'
-    });
-    // const NPopoverRef = ref();
-    // const setContainer = () => {
-    //   const min = Math.min(screen.width, screen.height);
-    //   const max = Math.max(screen.width, screen.height);
-    //   const width = min * (16 / 9);
-    //   if (width > max) {
-    //     parentContainer.width = '100vw';
-    //     return;
-    //   } else {
-    //     parentContainer.width = width + 'px';
-    //   }
-    // };
-    const handleInit = (type = 0) => {
-      //设置容器16:9
-      // setContainer();
-    };
-    handleInit();
-    onUnmounted(() => {
-      handleInit(1);
-    });
-
-    const data = reactive({
-      type: 'class' as '' | 'preview' | 'class', // 预览类型
-      courseId: '' as any, // 课件编号
-      instrumentId: '' as any, // 声部编号
-      lessonCourseId: '' as any, // 教材编号
-      lessonCoursewareDetailId: '' as any, // 章节
-      lessonCoursewareSubjectList: [] as any, // 教材上的声部
-      detailId: '' as any, // 编号 - 课程编号
-      classGroupId: '' as any, // 上课时需要 班级编号
-      classId: '' as any, // 上课编号
-      preStudentNum: '' as any, // 班上学生
-      // detail: null,
-      knowledgePointList: [] as any,
-      itemList: [] as any,
-      // showHead: true,
-      // isCourse: false,
-      // isRecordPlay: false,
-      videoRefs: {} as any[],
-      audioRefs: {} as any[],
-      modelAttendStatus: false, // 布置作业提示弹窗
-      modalAttendMessage: '本节课未设置课后作业，是否继续？',
-      modelTrainStatus: false, // 训练设置
-      selectClassStatus: false, // 选择课件
-      homeworkStatus: true, // 布置作业完成时
-      removeVisiable: false,
-      nextEndShow: false,
-      removeTitle: '',
-      removeContent: '',
-      removeCourseStatus: false, // 是否布置作业
-
-      teacherChapterName: '',
-      lessonPreTrainingId: null,
-      selectResourceStatus: false,
-      videoState: 'init' as 'init' | 'play',
-      videoItemRef: null as any,
-      animationState: 'start' as 'start' | 'end'
-    });
-    const activeData = reactive({
-      isAutoPlay: false, // 是否自动播放
-      nowTime: 0,
-      model: true, // 遮罩
-      isAnimation: true, // 是否动画
-      // videoBtns: true, // 视频
-      // currentTime: 0,
-      // duration: 0,
-      timer: null as any,
-      item: null as any
-    });
-
-    // 键盘事件监听状态
-    const listenerKeyUpState = ref(false);
-
-    const getDetail = async () => {
-      try {
-        const res = await api_teacherChapterLessonCoursewareDetail(
-          data.courseId
-        );
-
-        data.teacherChapterName = res.data.name || '';
-        // 布置的作业编号
-        data.lessonPreTrainingId = res.data.lessonPreTrainingId;
-        // activeData.isAutoPlay = res.data.autoPlay || false; // 自动播放
-        const tempRows = res.data.chapterKnowledgeList || [];
-        const temp: any = [];
-        const allItem: any = [];
-        tempRows.forEach((row: any, index: number) => {
-          if (!Array.isArray(row.chapterKnowledgeMaterialList)) {
-            return;
-          }
-          const childList: any[] = [];
-          row.chapterKnowledgeMaterialList.forEach((child: any) => {
-            if (!child.removeFlag) {
-              childList.push({
-                id: child.id,
-                materialId: child.bizId,
-                coverImg: child.bizInfo.coverImg,
-                type: child.type,
-                title: child.bizInfo.name,
-                dataJson: child.dataJson,
-                isCollect: !!child.favoriteFlag,
-                isSelected: child.source === 'PLATFORM' ? true : false,
-                content: child.bizInfo.content,
-                parentIndex: index
-              });
-            }
-          });
-          temp.push({
-            title: row.name,
-            list: childList
-          });
-          allItem.push(...childList);
-        });
-
-        console.log(temp, 'temp', tempRows);
-        data.knowledgePointList = temp;
-        data.itemList = allItem?.map((m: any) => {
-          return {
-            ...m,
-            iframeRef: null,
-            videoEle: null,
-            audioEle: null,
-            autoPlay: res.data.autoPlay || false, //加载完成是否自动播放
-            isprepare: false, // 视频是否加载完成
-            isRender: false // 是否渲染了
-          };
-        });
-        setTimeout(() => {
-          data.animationState = 'end';
-        }, 500);
-      } catch (e) {
-        //
-        console.log(e);
-      }
-    };
-
-    const showModalBeat = ref(false);
-    const showModalTone = ref(false);
-    const showModalTime = ref(false);
-    // ifram事件处理
-    const iframeHandle = (ev: MessageEvent) => {
-      // console.log(ev.data?.api, ev.data, 'ev.data');
-      if (ev.data?.api === 'headerTogge') {
-        activeData.model =
-          ev.data.show || (ev.data.playState == 'play' ? false : true);
-      }
-
-      //
-      if (ev.data?.api === 'onAttendToggleMenu') {
-        activeData.model = !activeData.model;
-      }
-
-      if (ev.data?.api === 'api_fingerPreView') {
-        clearInterval(activeData.timer);
-        activeData.model = !ev.data.state;
-      }
-      //
-      if (ev.data?.api === 'documentBodyKeyup') {
-        if (ev.data?.code === 'ArrowLeft') {
-          setModalOpen();
-          handlePreAndNext('up');
-        }
-
-        if (ev.data?.code === 'ArrowRight') {
-          setModalOpen();
-          handlePreAndNext('down');
-        }
-      }
-
-      // 点名返回
-      if (ev.data?.api === 'callBack') {
-        closeStudyTool();
-      }
-
-      if (ev.data?.api === 'onLogin') {
-        const documentDom: any = document;
-        documentDom.exitFullscreen
-          ? documentDom.exitFullscreen()
-          : documentDom.mozCancelFullScreen
-          ? documentDom.mozCancelFullScreen()
-          : documentDom.webkitExitFullscreen
-          ? documentDom.webkitExitFullscreen()
-          : '';
-        users.logout();
-        router.replace('/login');
-      }
-    };
-
-    onMounted(() => {
-      // initMoveable();
-      const query = route.query;
-      console.log(query, props.preStudentNum, '学生人数');
-      // 先取参数，
-      data.type = props.type || (query.type as any);
-      data.courseId = props.courseId || query.courseId;
-      data.instrumentId = props.instrumentId || query.instrumentId;
-      data.detailId = props.detailId || query.detailId;
-      data.lessonCourseId = props.lessonCourseId || query.lessonCourseId;
-      data.classGroupId = props.classGroupId || query.classGroupId;
-      data.classId = props.classId || query.classId;
-      data.preStudentNum = props.preStudentNum || query.preStudentNum;
-      window.addEventListener('message', iframeHandle);
-      getDetail();
-      getLessonCoursewareDetail();
-      if (data.type === 'preview') {
-        // 预览隐藏点名和布置作业
-        const hideListIds = [2, 10];
-        let index = rightList.length - 1;
-        while (index >= 0) {
-          if (hideListIds.includes(rightList[index].id)) {
-            console.log(index);
-            rightList.splice(index, 1);
-          }
-          index--;
-        }
-      }
-      rollCallStudentList();
-    });
-
-    // const onFullScreen = () => {
-    //   if (data.type === 'preview') {
-    //     const el: any = document.querySelector('#app');
-
-    //     if (el.mozRequestFullScreen) {
-    //       el.mozRequestFullScreen();
-    //     } else if (el.webkitRequestFullscreen) {
-    //       el.webkitRequestFullscreen();
-    //     } else if (el.requestFullScreen) {
-    //       el.requestFullscreen();
-    //     }
-    //   }
-    // };
-
-    const popupData = reactive({
-      open: false,
-      activeIndex: 0,
-      courseActiveIndex: 0, // 课件选择的第几个
-      toolOpen: false, // 工具弹窗控制
-      chapterOpen: false, // 切换章节
-      chapterDetails: [] as any,
-      courseId: null as any, // 章节编号
-      chapterLoading: false // 加载数据
-    });
-
-    watch(
-      () => [popupData.open, popupData.chapterOpen],
-      val => {
-        // 为了处理window电脑滑动时的问题 - pointr-events
-        setTimeout(() => {
-          const drawers = document.querySelectorAll('.n-drawer-container');
-          if (val[0] || val[1]) {
-            drawers?.forEach(drawer => {
-              drawer.classList.remove('n-drawer-container-relative');
-            });
-          } else {
-            drawers?.forEach(drawer => {
-              drawer.classList.add('n-drawer-container-relative');
-            });
-          }
-        }, 200);
-      }
-    );
-    const formatParentId = (id: any, list: any, ids = [] as any) => {
-      for (const item of list) {
-        if (item.knowledgeList && item.knowledgeList.length > 0) {
-          const cIds: any = formatParentId(id, item.knowledgeList, [
-            ...ids,
-            item.id
-          ]);
-          if (cIds.includes(id)) {
-            return cIds;
-          }
-        }
-        if (item.id === id) {
-          return [...ids, id];
-        }
-      }
-      return ids;
-    };
-
-    /** 获取章节 */
-    const getLessonCoursewareDetail = async () => {
-      try {
-        const res = await lessonCoursewareDetail({
-          id: data.lessonCourseId,
-          instrumentId: data.instrumentId
-        });
-
-        popupData.chapterDetails = res.data.lessonList || [];
-
-        const ids = formatParentId(data.detailId, popupData.chapterDetails);
-        data.lessonCoursewareDetailId = ids[0];
-        console.log(res.data, 'data');
-        data.lessonCoursewareSubjectList = res.data.instrumentList || [];
-      } catch {
-        //
-      }
-    };
-    /** 更新上课记录 */
-    const classCourseScheduleUpdate = async () => {
-      try {
-        if (!data.classId) return;
-        await courseScheduleUpdate({
-          lessonCoursewareKnowledgeDetailId: data.detailId,
-          id: data.classId
-        });
-      } catch {
-        //
-      }
-    };
-
-    const activeName = computed(() => {
-      let name = '';
-      popupData.chapterDetails.forEach((chapter: any) => {
-        if (chapter.id === data.lessonCoursewareDetailId) {
-          // name = chapter.name;
-          chapter.knowledgeList?.forEach((know: any) => {
-            if (know.id === data.detailId) {
-              name = know.name;
-            }
-          });
-        }
-      });
-      return name;
-    });
-
-    /**停止所有的播放 */
-    const handleStop = (isStop = true) => {
-      // console.log(isStop, 'stop');
-      for (let i = 0; i < data.itemList.length; i++) {
-        const activeItem = data.itemList[i];
-        if (activeItem.type === 'VIDEO' && activeItem.videoEle) {
-          try {
-            if (isStop) {
-              activeItem.videoEle?.currentTime(0);
-            }
-            activeItem.videoEle?.pause();
-          } catch (e: any) {
-            // console.log(e, 'e');
-          }
-        }
-        if (activeItem.type === 'SONG' && activeItem.audioEle) {
-          activeItem.audioEle?.stop();
-        }
-        // console.log('🚀 ~ activeItem:', activeItem)
-        // 停止曲谱的播放
-        if (activeItem.type === 'MUSIC') {
-          activeItem.iframeRef?.contentWindow?.postMessage(
-            { api: 'setPlayState' },
-            '*'
-          );
-        }
-
-        if (
-          activeItem.type === 'INSTRUMENT' ||
-          activeItem.type === 'MUSICIAN' ||
-          activeItem.type === 'MUSIC_WIKI'
-        ) {
-          activeItem.iframeRef?.handleChangeAudio('pause');
-        }
-
-        // console.log(activeItem.type, 'activeItem.type');
-        if (activeItem.type === 'RHYTHM') {
-          activeItem.iframeRef?.contentWindow?.postMessage(
-            { api: 'setPlayState', data: false },
-            '*'
-          );
-        }
-
-        if (activeItem.type === 'LISTEN') {
-          activeItem.iframeRef?.contentWindow?.postMessage(
-            { api: 'setPlayState' },
-            '*'
-          );
-        }
-      }
-    };
-    // 切换素材
-    const toggleMaterial = (itemActive: any) => {
-      const index = data.itemList.findIndex((n: any) => n.id == itemActive);
-      if (index > -1) {
-        handleSwipeChange(index);
-      }
-    };
-    /** 延迟收起模态框 */
-    const setModelOpen = () => {
-      clearTimeout(activeData.timer);
-      message.destroyAll();
-      activeData.timer = setTimeout(() => {
-        activeData.model = false;
-        Object.values(data.videoRefs).map((n: any) =>
-          n?.toggleHideControl(false)
-        );
-
-        Object.values(data.audioRefs).map((n: any) =>
-          n?.toggleHideControl(false)
-        );
-      }, 4000);
-    };
-
-    /** 立即收起所有的模态框 */
-    const clearModel = () => {
-      clearTimeout(activeData.timer);
-      message.destroyAll();
-      activeData.model = false;
-      Object.values(data.videoRefs).map((n: any) =>
-        n?.toggleHideControl(false)
-      );
-      Object.values(data.audioRefs).map((n: any) =>
-        n?.toggleHideControl(false)
-      );
-    };
-    const toggleModel = (type = true) => {
-      activeData.model = type;
-      Object.values(data.videoRefs).map((n: any) => n?.toggleHideControl(type));
-      Object.values(data.audioRefs).map((n: any) => n?.toggleHideControl(type));
-    };
-
-    // 双击
-    const handleDbClick = (item: any) => {
-      if (item && item.type === 'VIDEO') {
-        const videoEle: HTMLVideoElement = item.videoEle;
-        if (videoEle) {
-          if (videoEle.paused) {
-            message.destroyAll();
-            videoEle.play();
-          } else {
-            message.warning('已暂停');
-            videoEle.pause();
-          }
-        }
-      }
-    };
-
-    // ppt iframe 点击事件
-    // const iframeClick = () => {
-    // 	if(document.all) {
-    // 		document.getElementById("iframe-ppt")?.attachEvent("click", () => {
-    //       activeData.model = !activeData.model
-    //     });
-    // 	} else {
-    // 		document.getElementById("iframe-ppt")?.contentWindow?.postMessage({
-    //       api: 'onAttendToggleMenu'
-    //     }, '*');
-    // 	}
-    // }
-
-    // 切换播放
-    // const togglePlay = (m: any, isPlay: boolean) => {
-    //   if (isPlay) {
-    //     m.videoEle?.play();
-    //   } else {
-    //     m.videoEle?.pause();
-    //   }
-    // };
-
-    // const showIndex = ref(-4);
-    const effectIndex = ref(3);
-    const effects = [
-      {
-        prev: {
-          transform: 'translate3d(0, 0, -800px) rotateX(180deg)'
-        },
-        next: {
-          transform: 'translate3d(0, 0, -800px) rotateX(-180deg)'
-        }
-      },
-      {
-        prev: {
-          transform: 'translate3d(-100%, 0, -800px)'
-        },
-        next: {
-          transform: 'translate3d(100%, 0, -800px)'
-        }
-      },
-      {
-        prev: {
-          transform: 'translate3d(-50%, 0, -800px) rotateY(80deg)'
-        },
-        next: {
-          transform: 'translate3d(50%, 0, -800px) rotateY(-80deg)'
-        }
-      },
-      {
-        prev: {
-          transform: 'translate3d(-100%, 0, -800px) rotateY(-120deg)'
-        },
-        next: {
-          transform: 'translate3d(100%, 0, -800px) rotateY(120deg)'
-        }
-      },
-      // 风车4
-      {
-        prev: {
-          transform: 'translate3d(-50%, 50%, -800px) rotateZ(-14deg)',
-          opacity: 0
-        },
-        next: {
-          transform: 'translate3d(50%, 50%, -800px) rotateZ(14deg)',
-          opacity: 0
-        }
-      },
-      // 翻页5
-      {
-        prev: {
-          transform: 'translateZ(-800px) rotate3d(0, -1, 0, 90deg)',
-          opacity: 0
-        },
-        next: {
-          transform: 'translateZ(-800px) rotate3d(0, 1, 0, 90deg)',
-          opacity: 0
-        },
-        current: { transitionDelay: '700ms' }
-      }
-    ];
-
-    const acitveTimer = ref();
-    // 轮播切换
-    const handleSwipeChange = (index: number) => {
-      // 如果是当前正在播放 或者是视频最后一个
-      if (popupData.activeIndex == index) return;
-      data.animationState = 'start';
-      data.videoState = 'init';
-      handleStop();
-      clearTimeout(acitveTimer.value);
-      activeData.model = true;
-      checkedAnimation(popupData.activeIndex, index);
-      popupData.activeIndex = index;
-
-      // 处理资源列表滚动
-      nextTick(() => {
-        scrollResourceSection();
-      });
-
-      acitveTimer.value = setTimeout(
-        () => {
-          const item = data.itemList[index];
-
-          if (item) {
-            if (item.type == 'MUSIC') {
-              activeData.model = true;
-            }
-            if (item.type === 'SONG') {
-              // 自动播放下一个音频
-              clearTimeout(activeData.timer);
-              message.destroyAll();
-              // item.autoPlay = false;
-              // nextTick(() => {
-              //   item.audioEle?.onPlay();
-              // });
-            }
-            if (item.type === 'VIDEO') {
-              // 自动播放下一个视频
-              clearTimeout(activeData.timer);
-              message.destroyAll();
-              nextTick(() => {
-                if (item.error) {
-                  // console.log(item, 'item error');
-                  item.videoEle?.src(item.content);
-                  item.error = false;
-                  //   item.videoEle?.onPlay();
-                }
-                data.animationState = 'end';
-              });
-            }
-            if (item.type === 'PPT') {
-              //
-            }
-          }
-        },
-        activeData.isAnimation ? 800 : 0
-      );
-    };
-
-    /** 是否有转场动画 */
-    const checkedAnimation = (index: number, nextIndex?: number) => {
-      const item = data.itemList[index];
-      const nextItem = data.itemList[nextIndex!];
-      if (nextItem) {
-        if (nextItem.knowledgePointId != item.knowledgePointId) {
-          activeData.isAnimation = true;
-          return;
-        }
-        const videoEle = item.videoEle;
-        const nextVideo = nextItem.videoEle;
-        if (videoEle && videoEle.duration < 8 && index < nextIndex!) {
-          activeData.isAnimation = false;
-        } else if (nextVideo && nextVideo.duration < 8 && index > nextIndex!) {
-          activeData.isAnimation = false;
-        } else {
-          activeData.isAnimation = true;
-        }
-      } else {
-        activeData.isAnimation = item?.adviseStudyTimeSecond < 8 ? false : true;
-      }
-    };
-
-    // 上一个知识点, 下一个知识点
-    const handlePreAndNext = async (type: string) => {
-      if (type === 'up') {
-        // 判断上面是否还有章节
-        if (popupData.activeIndex > 0) {
-          handleSwipeChange(popupData.activeIndex - 1);
-          return;
-        }
-
-        // 获取当前是哪个章节
-        let detailIndex = popupData.chapterDetails.findIndex(
-          (item: any) => item.id == data.lessonCoursewareDetailId
-        );
-        const detailItem =
-          popupData.chapterDetails[detailIndex]?.knowledgeList || [];
-        let lessonIndex = detailItem.findIndex(
-          (item: any) => item.id == data.detailId
-        );
-
-        let lessonStatus = false; // 当前章节上面是否有内容
-        let lessonCoursewareDetailId = '';
-        let coursewareDetailKnowledgeId = '';
-        while (lessonIndex >= 0) {
-          lessonIndex--;
-
-          if (lessonIndex >= 0) {
-            if (detailItem[lessonIndex].coursewareNum > 0) {
-              lessonStatus = true;
-              lessonCoursewareDetailId =
-                detailItem[lessonIndex].lessonCoursewareDetailId;
-              coursewareDetailKnowledgeId = detailItem[lessonIndex].id;
-            }
-          }
-
-          if (lessonStatus) {
-            break;
-          }
-        }
-        // 判断当前章节下面课程是否有内容，否则往上一个章节走
-        if (lessonStatus) {
-          popupData.courseId = coursewareDetailKnowledgeId;
-          data.selectClassStatus = true;
-          return;
-        }
-
-        let prevLessonStatus = false;
-        while (detailIndex >= 0) {
-          detailIndex--;
-          const tempDetail =
-            popupData.chapterDetails[detailIndex]?.knowledgeList || [];
-          let tempLessonLength = tempDetail.length;
-          while (tempLessonLength > 0) {
-            if (tempDetail[tempLessonLength - 1].coursewareNum > 0) {
-              prevLessonStatus = true;
-              lessonCoursewareDetailId =
-                tempDetail[tempLessonLength - 1].lessonCoursewareDetailId;
-              coursewareDetailKnowledgeId = tempDetail[tempLessonLength - 1].id;
-            }
-            tempLessonLength--;
-            if (prevLessonStatus) {
-              break;
-            }
-          }
-
-          if (prevLessonStatus) {
-            break;
-          }
-        }
-
-        // 判断当前章节下面课程是否有内容，否则往上一个章节走
-        if (prevLessonStatus) {
-          popupData.courseId = coursewareDetailKnowledgeId;
-          data.selectClassStatus = true;
-          return;
-        }
-      } else {
-        if (popupData.activeIndex < data.itemList.length - 1) {
-          handleSwipeChange(popupData.activeIndex + 1);
-          return;
-        }
-        data.nextEndShow = true;
-      }
-    };
-    // 当前课件结束之后选择下一个课件
-    function handleNextEnd() {
-      // 获取当前是哪个章节
-      let detailIndex = popupData.chapterDetails.findIndex(
-        (item: any) => item.id == data.lessonCoursewareDetailId
-      );
-      const detailItem =
-        popupData.chapterDetails[detailIndex]?.knowledgeList || [];
-      let lessonIndex = detailItem.findIndex(
-        (item: any) => item.id == data.detailId
-      );
-
-      let lessonStatus = false; // 当前章节下面是否有内容
-      let lessonCoursewareDetailId = '';
-      let coursewareDetailKnowledgeId = '';
-      while (lessonIndex < detailItem.length - 1) {
-        lessonIndex++;
-        if (lessonIndex >= 0) {
-          if (detailItem[lessonIndex].coursewareNum > 0) {
-            lessonStatus = true;
-            lessonCoursewareDetailId =
-              detailItem[lessonIndex].lessonCoursewareDetailId;
-            coursewareDetailKnowledgeId = detailItem[lessonIndex].id;
-          }
-        }
-        if (lessonStatus) {
-          break;
-        }
-      }
-      // 判断当前章节下面课程是否有内容，否则往下一个章节走
-      if (lessonStatus) {
-        popupData.courseId = coursewareDetailKnowledgeId;
-        data.selectClassStatus = true;
-        return;
-      }
-
-      let nextLessonStatus = false;
-      while (detailIndex <= popupData.chapterDetails.length - 1) {
-        detailIndex++;
-        const tempDetail =
-          popupData.chapterDetails[detailIndex]?.knowledgeList || [];
-        let tempLessonLength = 0;
-        while (tempLessonLength <= tempDetail.length - 1) {
-          if (tempDetail[tempLessonLength].coursewareNum > 0) {
-            nextLessonStatus = true;
-            lessonCoursewareDetailId =
-              tempDetail[tempLessonLength].lessonCoursewareDetailId;
-            coursewareDetailKnowledgeId = tempDetail[tempLessonLength].id;
-          }
-          tempLessonLength++;
-          if (nextLessonStatus) {
-            break;
-          }
-        }
-
-        if (nextLessonStatus) {
-          break;
-        }
-      }
-
-      // 判断当前章节下面课程是否有内容，否则往上一个章节走
-      if (nextLessonStatus) {
-        popupData.courseId = coursewareDetailKnowledgeId;
-        data.selectClassStatus = true;
-        return;
-      }
-    }
-    /** 弹窗关闭 */
-    const handleClosePopup = () => {
-      const item = data.itemList[popupData.activeIndex];
-      if (item?.type == 'VIDEO' && !item.videoEle?.paused) {
-        setModelOpen();
-      }
-
-      if (item?.type == 'SONG' && !item.audioEle?.paused) {
-        setModelOpen();
-      }
-    };
-    document.body.addEventListener('keyup', (e: KeyboardEvent) => {
-      if (e.code === 'ArrowUp') {
-        // if (popupData.activeIndex === 0) return;
-        setModalOpen();
-        handlePreAndNext('up');
-      } else if (e.code === 'ArrowDown') {
-        // if (popupData.activeIndex === data.itemList.length - 1) return;
-        setModalOpen();
-        handlePreAndNext('down');
-      } else if (e.code === 'Space') {
-        // const activeItem = data.itemList[popupData.activeIndex];
-        // console.log(activeItem, activeItem.videoEle);
-        // // 暂停视频和曲谱的播放
-        // if (activeItem.type === 'VIDEO' && activeItem.videoEle) {
-        //   activeItem.videoEle?.play();
-        // }
-        // if (activeItem.type === 'SONG' && activeItem.audioEle) {
-        //   activeItem.audioEle?.play();
-        // }
-        // if (activeItem.type === 'MUSIC') {
-        //   activeItem.iframeRef?.contentWindow?.postMessage(
-        //     { api: 'setPlayState' },
-        //     '*'
-        //   );
-        // }
-      }
-    });
-
-    // const toggleListenerKeyUp = (type: string) => {
-    //   if (type === 'remove') {
-    //     document.body.removeEventListener('keyup', () => {
-    //       listenerKeyUpState.value = false;
-    //     });
-    //   } else {
-    //     // 监听页面键盘事件 - 上下切换
-    //     document.body.addEventListener('keyup', (e: KeyboardEvent) => {
-    //       // console.log(e, 'e');
-    //       if (e.code === 'ArrowLeft') {
-    //         // if (popupData.activeIndex === 0) return;
-    //         setModalOpen();
-    //         handlePreAndNext('up');
-    //       } else if (e.code === 'ArrowRight') {
-    //         // if (popupData.activeIndex === data.itemList.length - 1) return;
-    //         setModalOpen();
-    //         handlePreAndNext('down');
-    //       }
-    //     });
-    //     listenerKeyUpState.value = true;
-    //   }
-    // };
-
-    // 监听切换到ppt课件时，手动移除键盘监听器
-    // watch(() => popupData.activeIndex, () => {
-    //   const activeItem = data.itemList[popupData.activeIndex];
-    //   if (activeItem?.type === 'PPT') {
-    //     toggleListenerKeyUp('remove')
-    //   } else {
-    //     !listenerKeyUpState.value && toggleListenerKeyUp('add')
-    //   }
-    // })
-    watch(
-      () => popupData.activeIndex,
-      () => {
-        const item = data.itemList[popupData.activeIndex];
-        popupData.courseActiveIndex = item.parentIndex;
-      }
-    );
-
-    const setModalOpen = (status = true) => {
-      clearTimeout(activeData.timer);
-      activeData.model = status;
-      Object.values(data.videoRefs).map((n: any) =>
-        n?.toggleHideControl(status)
-      );
-      Object.values(data.audioRefs).map((n: any) =>
-        n?.toggleHideControl(status)
-      );
-    };
-
-    /** 教学数据 */
-    const studyData = reactive({
-      type: '' as ToolType,
-      penShow: false,
-      whiteboardShow: false,
-      callShow: false,
-      callStudentList: [] as any // 学生列表
-    });
-
-    /** 打开教学工具 */
-    const openStudyTool = (item: ToolItem) => {
-      handleStop(false);
-      clearModel();
-      popupData.toolOpen = false;
-      studyData.type = item.type;
-
-      switch (item.type) {
-        case 'pen':
-          studyData.penShow = true;
-          break;
-        case 'whiteboard':
-          studyData.whiteboardShow = true;
-          break;
-        case 'call':
-          studyData.callShow = true;
-          break;
-      }
-    };
-
-    /** 关闭教学工具 */
-    const closeStudyTool = () => {
-      studyData.type = 'init';
-      toggleModel();
-      setModelOpen();
-    };
-
-    const startShowModal = (
-      val: 'setTimeIcon' | 'beatIcon' | 'toneIcon' | 'iconNote2'
-    ) => {
-      if (val == 'setTimeIcon') {
-        showModalTime.value = true;
-      }
-      if (val == 'beatIcon') {
-        showModalBeat.value = true;
-      }
-      if (val == 'toneIcon') {
-        showModalTone.value = true;
-      }
-    };
-
-    // 是否允许上一页
-    const isUpArrow = computed(() => {
-      /**
-       * 1，判断当前课程中是否处在第一个资源；
-       * 2，判断当前课程是否在当前章节的第一个；
-       * 3，判断当前章节，当前课程上面还没有其它课程，是否有资源；
-       * 4，判断当前章节上面还没有其它章节；
-       * 5，判断上面章节里面课程是否有资源；
-       */
-      if (popupData.activeIndex > 0) {
-        return true;
-      }
-
-      // 获取当前是哪个章节
-      let detailIndex = popupData.chapterDetails.findIndex(
-        (item: any) => item.id == data.lessonCoursewareDetailId
-      );
-      const detailItem =
-        popupData.chapterDetails[detailIndex]?.knowledgeList || [];
-      let lessonIndex = detailItem.findIndex(
-        (item: any) => item.id == data.detailId
-      );
-
-      // 说明已经是第一单元，第一课
-      if (detailIndex <= 0 && lessonIndex <= 0) {
-        return false;
-      }
-
-      let lessonStatus = false; // 当前章节上面是否有内容
-      while (lessonIndex >= 0) {
-        lessonIndex--;
-
-        if (lessonIndex >= 0) {
-          if (detailItem[lessonIndex].coursewareNum > 0) {
-            lessonStatus = true;
-          }
-        }
-      }
-      // 判断当前章节下面课程是否有内容，否则往上一个章节走
-      if (lessonStatus) {
-        return true;
-      }
-
-      // 已经是第一个章节了
-      if (detailIndex <= 0) {
-        return false;
-      }
-
-      let prevLessonStatus = false;
-      while (detailIndex >= 0) {
-        detailIndex--;
-        const tempDetail =
-          popupData.chapterDetails[detailIndex]?.knowledgeList || [];
-        let tempLessonLength = tempDetail.length;
-        while (tempLessonLength > 0) {
-          if (tempDetail[tempLessonLength - 1].coursewareNum > 0) {
-            prevLessonStatus = true;
-          }
-          tempLessonLength--;
-        }
-
-        if (prevLessonStatus) {
-          return true;
-        }
-      }
-
-      return false;
-    });
-
-    // 是否允许下一页
-    const isDownArrow = computed(() => {
-      if (popupData.activeIndex < data.itemList.length - 1) {
-        return true;
-      }
-
-      // 获取当前是哪个章节
-      let detailIndex = popupData.chapterDetails.findIndex(
-        (item: any) => item.id == data.lessonCoursewareDetailId
-      );
-
-      const detailItem =
-        popupData.chapterDetails[detailIndex]?.knowledgeList || [];
-      let lessonIndex = detailItem.findIndex(
-        (item: any) => item.id == data.detailId
-      );
-
-      // 说明已经是最后-单元，最后一课
-      if (
-        detailIndex >= popupData.chapterDetails.length - 1 &&
-        lessonIndex >= detailItem.length - 1
-      ) {
-        return false;
-      }
-
-      let lessonStatus = false; // 当前章节下面是否有内容
-      while (lessonIndex < detailItem.length - 1) {
-        lessonIndex++;
-        if (lessonIndex >= 0) {
-          if (detailItem[lessonIndex].coursewareNum > 0) {
-            lessonStatus = true;
-          }
-        }
-      }
-      // 判断当前章节下面课程是否有内容，否则往下一个章节走
-      if (lessonStatus) {
-        return true;
-      }
-
-      // 已经是最后一个章节了
-      if (detailIndex >= popupData.chapterDetails.length - 1) {
-        return false;
-      }
-
-      let nextLessonStatus = false;
-      while (detailIndex < popupData.chapterDetails.length - 1) {
-        detailIndex++;
-        const tempDetail =
-          popupData.chapterDetails[detailIndex]?.knowledgeList || [];
-        let tempLessonLength = 0;
-        while (tempLessonLength <= tempDetail.length - 1) {
-          if (tempDetail[tempLessonLength].coursewareNum > 0) {
-            nextLessonStatus = true;
-          }
-          tempLessonLength++;
-        }
-
-        if (nextLessonStatus) {
-          return true;
-        }
-      }
-
-      return false;
-    });
-    const activeVideoItem = computed(() => {
-      const item = data.itemList[popupData.activeIndex];
-      if (item && item.type && item.type.toLocaleUpperCase() === 'VIDEO') {
-        return item;
-      }
-      return {};
-    });
-
-    // 右侧菜单栏
-    const rightList = reactive([
-      {
-        name: '上一张',
-        icon: bottomIconPre,
-        id: 11
-      },
-      {
-        name: '下一张',
-        icon: bottomIconNext,
-        id: 12
-      },
-      {
-        name: '切换章节',
-        icon: bottomIconSwitch,
-        id: 13
-      },
-      {
-        name: '资源列表',
-        icon: bottomIconResource,
-        id: 14
-      },
-      {
-        name: '曲目资源',
-        icon: rightIconMusic,
-        id: 9
-      },
-      {
-        name: '点名',
-        icon: rightIconCall,
-        id: 10
-      },
-      {
-        name: '布置作业',
-        icon: rightIconArrange,
-        id: 2
-      },
-      {
-        name: '工具箱',
-        icon: rightIconTool,
-        id: 15
-      },
-      {
-        name: '结束课程',
-        name2: '结束预览',
-        icon: rightIconEnd,
-        id: 1
-      },
-      {
-        name: '收起',
-        icon: leftIconPackUp,
-        id: 8
-      }
-    ]);
-    const tooltipList = [
-      {
-        name: '节拍器',
-        icon: rightIconMetronome,
-        id: 5
-      },
-      {
-        name: '计时器',
-        icon: rightIconTimer,
-        id: 7
-      },
-      {
-        name: '批注',
-        icon: rightIconPostil,
-        id: 3
-      },
-      {
-        name: '白板',
-        icon: rightIconWhiteboard,
-        id: 4
-      }
-      // {
-      //   name: '调音器',
-      //   icon: rightIconTuner,
-      //   id: 6
-      // }
-    ];
-    // 默认收起菜单
-    const columnShow = ref(true);
-    // 菜单位置
-    const columnPos = ref<'left' | 'right'>('left');
-    watch(columnPos, () => {
-      for (let i = 0; i < data.itemList.length; i++) {
-        const activeItem = data.itemList[i];
-        if (['RHYTHM', 'MUSIC'].includes(activeItem.type)) {
-          activeItem.iframeRef?.contentWindow?.postMessage(
-            { api: 'imagePos', data: columnPos.value },
-            '*'
-          );
-        }
-      }
-    });
-    // 右边栏操作
-    const operateRightBtn = async (id: number) => {
-      if (![8, 11, 12, 13, 14].includes(id)) {
-        handleStop(false);
-      }
-
-      switch (id) {
-        case 1:
-          if (data.type === 'preview') {
-            data.removeVisiable = true;
-            data.removeTitle = '结束预览';
-            data.removeContent = '请确认是否结束预览？';
-          } else {
-            const res = await getStudentAfterWork({
-              courseScheduleId: data.classId,
-              page: 1,
-              rows: 99
-            });
-            if (res.data.rows && res.data.rows.length) {
-              data.removeContent = '请确认是否结束课程？';
-              data.removeCourseStatus = false;
-            } else {
-              data.removeContent = '本次课堂尚未布置作业，是否结束课程？';
-              data.removeCourseStatus = true;
-            }
-            data.removeVisiable = true;
-            data.removeTitle = '结束课程';
-          }
-          break;
-        case 2:
-          // 学生人数必须大于0，才可以布置作业
-          if (data.preStudentNum <= 0) return;
-          // const res = await lessonPreTrainingPage({
-          //   coursewareKnowledgeDetailId: data.detailId,
-          //   instrumentId: data.instrumentId,
-          //   page: 1,
-          //   rows: 99
-          // });
-          // if (res.data.rows && res.data.rows.length) {
-          //   data.modalAttendMessage = '本节课已设置课后作业，是否布置？';
-          // }
-          // data.modelAttendStatus = true;
-          const res = await getStudentAfterWork({
-            courseScheduleId: data.classId,
-            page: 1,
-            rows: 99
-          });
-          if (res.data.rows && res.data.rows.length) {
-            // data.modalAttendMessage = '请确认是否结束课程？';
-            data.modalAttendMessage = '本次课程已布置作业，是否继续？';
-            data.modelAttendStatus = true;
-          } else {
-            data.modelTrainStatus = true;
-            nextTick(() => {
-              getModalHeight();
-            });
-            data.modelAttendStatus = false;
-          }
-          break;
-        case 3:
-          openStudyTool({
-            type: 'pen',
-            icon: iconNote,
-            name: '批注'
-          });
-          break;
-        case 4:
-          openStudyTool({
-            type: 'whiteboard',
-            icon: iconWhite,
-            name: '白板'
-          });
-          break;
-        case 5:
-          startShowModal('beatIcon');
-          break;
-        case 6:
-          startShowModal('toneIcon');
-          break;
-        case 7:
-          startShowModal('setTimeIcon');
-          break;
-        case 8:
-          columnShow.value = false;
-          break;
-        case 9:
-          // 选择曲目时需要暂停所有播放
-          handleStop(false);
-          data.selectResourceStatus = true;
-          break;
-        case 10:
-          //  点名
-          // await rollCallStudentList();
-          if (studyData.callStudentList.length > 0) {
-            openStudyTool({
-              type: 'call',
-              icon: iconWhite,
-              name: '点名'
-            });
-            return;
-          }
-          break;
-        case 11:
-          if (!isUpArrow.value) return;
-          handlePreAndNext('up');
-          break;
-        case 12:
-          if (!isDownArrow.value) return;
-          handlePreAndNext('down');
-          break;
-        case 13:
-          popupData.chapterOpen = true;
-          break;
-        case 14:
-          popupData.open = true;
-          nextTick(() => {
-            scrollResourceSection();
-          });
-          break;
-        default:
-          break;
-      }
-    };
-
-    // 点名学生列表
-    const rollCallStudentList = async () => {
-      //
-      if (!data.classId) return;
-      try {
-        const res = await getStudentList({
-          classGroupId: data.classGroupId,
-          page: 1,
-          rows: 999
-        });
-        const result = res.data || {};
-        if (Array.isArray(result.rows) && result.rows.length > 0) {
-          const tempStudents: any = [];
-          result.rows.forEach((row: any) => {
-            tempStudents.push({
-              name: row.nickname,
-              img: row.avatar
-            });
-          });
-          studyData.callStudentList = [...tempStudents];
-        }
-      } catch {
-        //
-      }
-    };
-
-    // 滚动到某个元素的位置
-    const scrollResourceSection = () => {
-      const drawerCardItemRefs =
-        document.querySelectorAll('.drawerCardItemRef');
-      if (
-        popupData.activeIndex >= 0 &&
-        drawerCardItemRefs[popupData.activeIndex]
-      ) {
-        drawerCardItemRefs[popupData.activeIndex].scrollIntoView();
-      }
-    };
-
-    const getModalHeight = () => {
-      const dom: any = document.querySelector('#model-homework-height');
-      if (dom) {
-        useResizeObserver(dom as HTMLElement, (entries: any) => {
-          const entry = entries[0];
-          const { height } = entry.contentRect;
-          dom.style.setProperty('--window-page-lesson-height', height + 'px');
-        });
-      }
-    };
-
-    /* 弹窗加拖动 */
-    // 选择课件弹窗
-    const selCourBoxClass = 'selCourBoxClass_drag';
-    const selCourDragData = useDrag(
-      [`${selCourBoxClass}>.n-card-header`, `${selCourBoxClass} .bom_drag`],
-      selCourBoxClass,
-      toRef(data, 'selectClassStatus'),
-      users.info.id
-    );
-    // 选择资源弹窗
-    const selResourBoxClass = 'selResourBoxClass_drag';
-    const selResourDragData = useDrag(
-      [
-        `${selResourBoxClass} .select-resource>.n-tabs>.n-tabs-nav--top.n-tabs-nav`,
-        `${selResourBoxClass} .bom_drag`
-      ],
-      selResourBoxClass,
-      toRef(data, 'selectResourceStatus'),
-      users.info.id
-    );
-    // 结束预览  结束课程确认弹窗
-    const removeResourBoxClass = 'removeResourBoxClass_drag';
-    const removeResourDragData = useDrag(
-      [
-        `${removeResourBoxClass}>.n-card-header`,
-        `${removeResourBoxClass} .bom_drag`
-      ],
-      removeResourBoxClass,
-      toRef(data, 'removeVisiable'),
-      users.info.id
-    );
-    // 章节next弹窗
-    const nextEndBoxClass = 'nextEndBoxClass_drag';
-    const nextEndBoxDragData = useDrag(
-      [`${nextEndBoxClass}>.n-card-header`, `${nextEndBoxClass} .bom_drag`],
-      nextEndBoxClass,
-      toRef(data, 'nextEndShow'),
-      users.info.id
-    );
-    // 章节切换弹窗
-    const chapterConBoxClass = 'chapterConBoxClass_drag';
-    const chapterConBoxDragData = useDrag(
-      [
-        `${chapterConBoxClass}>.n-card-header`,
-        `${chapterConBoxClass} .bom_drag`
-      ],
-      chapterConBoxClass,
-      toRef(popupData, 'chapterOpen'),
-      users.info.id
-    );
-    // 资源列表弹窗
-    const resourcesConBoxClass = 'resourcesConBoxClass_drag';
-    const resourcesConDragData = useDrag(
-      [
-        `${resourcesConBoxClass}>.n-card-header`,
-        `${resourcesConBoxClass} .bom_drag`
-      ],
-      resourcesConBoxClass,
-      toRef(popupData, 'open'),
-      users.info.id
-    );
-    // 计时器
-    const timerMeterConBoxClass = 'timerMeterConBoxClass_drag';
-    const timerMeterConDragData = useDrag(
-      [
-        `${timerMeterConBoxClass}>.n-card-header`,
-        `${timerMeterConBoxClass} .bom_drag`
-      ],
-      timerMeterConBoxClass,
-      showModalTime,
-      users.info.id
-    );
-    // 节拍器
-    const metronomeConBoxClass = 'metronomeConBoxClass_drag';
-    const metronomeConBoxDragData = useDrag(
-      [
-        `${metronomeConBoxClass}>.n-card-header`,
-        `${metronomeConBoxClass} .bom_drag`
-      ],
-      metronomeConBoxClass,
-      showModalBeat,
-      users.info.id
-    );
-    // 布置作业弹窗
-    const modelTrainStatusConBoxClass = 'modelTrainStatusConBoxClass_drag';
-    const modelTrainStatusConBoxDragData = useDrag(
-      [
-        `${modelTrainStatusConBoxClass}>.n-card-header`,
-        `${modelTrainStatusConBoxClass} .bom_drag`
-      ],
-      modelTrainStatusConBoxClass,
-      toRef(data, 'modelTrainStatus'),
-      users.info.id
-    );
-    // 布置作业课后作业
-    const modelTrainHomeWordConBoxClass =
-      'modelTrainHomeWordConBoxClassBoxClass_drag';
-    const modelTrainHomeWordConBoxDragData = useDrag(
-      [
-        `${modelTrainHomeWordConBoxClass}>.n-card-header`,
-        `${modelTrainHomeWordConBoxClass} .bom_drag`
-      ],
-      modelTrainHomeWordConBoxClass,
-      toRef(data, 'modelAttendStatus'),
-      users.info.id
-    );
-    return () => (
-      <div id="playContent" class={[styles.playContent, 'wrap']}>
-        <div
-          onClick={() => {
-            clearTimeout(activeData.timer);
-            activeData.model = !activeData.model;
-            Object.values(data.videoRefs).map((n: any) =>
-              n?.toggleHideControl(activeData.model)
-            );
-            Object.values(data.audioRefs).map((n: any) =>
-              n?.toggleHideControl(activeData.model)
-            );
-          }}>
-          <div
-            class={styles.coursewarePlay}
-            style={{ width: parentContainer.width }}>
-            {!popupData.chapterLoading ? (
-              <div class={styles.wraps}>
-                <div
-                  style={
-                    activeVideoItem.value.type &&
-                    data.animationState === 'end' &&
-                    data.videoState === 'play'
-                      ? {
-                          zIndex: 15,
-                          opacity: 1
-                        }
-                      : { opacity: 0, zIndex: -1 }
-                  }
-                  class={styles.itemDiv}>
-                  <VideoPlay
-                    imagePos={columnPos.value}
-                    ref={(el: any) => (data.videoItemRef = el)}
-                    item={activeVideoItem.value}
-                    showModel={activeData.model}
-                    onClose={setModelOpen}
-                    onLoadedmetadata={(videoItem: any) => {
-                      if (data.itemList[popupData.activeIndex]) {
-                        data.itemList[popupData.activeIndex].videoEle =
-                          videoItem;
-                      }
-                    }}
-                    onCanplay={() => {
-                      data.videoState = 'play';
-                      // activeVideoItem.value.videoEle = videoItem;
-                    }}
-                    onPause={() => {
-                      clearTimeout(activeData.timer);
-                      activeData.model = true;
-                    }}
-                    onEnded={() => {
-                      // const _index = popupData.activeIndex + 1;
-                      // if (_index < data.itemList.length) {
-                      //   handleSwipeChange(_index);
-                      // }
-                    }}
-                  />
-                </div>
-                {data.itemList.map((m: any, mIndex: number) => {
-                  const isRender = Math.abs(popupData.activeIndex - mIndex) < 2;
-                  const isEmtry = Math.abs(popupData.activeIndex - mIndex) > 4;
-                  // if (isRender && m.type === 'PPT') {
-                  //   setTimeout(() => iframeClick() ,500)
-                  // }
-                  // if (isRender) {
-                  //   m.isRender = true;
-                  // }
-
-                  // const isRender =
-                  //   m.isRender || Math.abs(popupData.activeIndex - mIndex) < 2;
-                  // const isEmtry = Math.abs(popupData.activeIndex - mIndex) > 4;
-                  // if (isRender) {
-                  //   m.isRender = true;
-                  // }
-
-                  return isRender ? (
-                    <div
-                      key={'index' + mIndex}
-                      class={[
-                        styles.itemDiv,
-                        popupData.activeIndex === mIndex && styles.itemActive,
-                        activeData.isAnimation && styles.acitveAnimation,
-                        Math.abs(popupData.activeIndex - mIndex) < 2
-                          ? styles.show
-                          : styles.hide
-                      ]}
-                      style={
-                        mIndex < popupData.activeIndex
-                          ? effects[effectIndex.value].prev
-                          : mIndex > popupData.activeIndex
-                          ? effects[effectIndex.value].next
-                          : {}
-                      }
-                      onClick={(e: Event) => {
-                        e.stopPropagation();
-                        clearTimeout(activeData.timer);
-                        if (Date.now() - activeData.nowTime < 300) {
-                          handleDbClick(m);
-                          return;
-                        }
-                        activeData.nowTime = Date.now();
-                        activeData.timer = setTimeout(() => {
-                          activeData.model = !activeData.model;
-                          Object.values(data.videoRefs).map((n: any) =>
-                            n?.toggleHideControl(activeData.model)
-                          );
-                          Object.values(data.audioRefs).map((n: any) =>
-                            n?.toggleHideControl(activeData.model)
-                          );
-                          if (activeData.model) {
-                            setModelOpen();
-                          }
-                        }, 300);
-                      }}>
-                      {m.type === 'VIDEO' ? (
-                        <>
-                          <img
-                            src={m.coverImg}
-                            onLoad={() => {
-                              m.isprepare = true;
-                            }}
-                          />
-                          {/* <VideoPlay
-                            ref={(v: any) => (data.videoRefs[mIndex] = v)}
-                            item={m}
-                            isEmtry={isEmtry}
-                            onLoadedmetadata={(videoItem: any) => {
-                              m.videoEle = videoItem;
-                              m.isprepare = true;
-                            }}
-                            onTogglePlay={(paused: boolean) => {
-                              m.autoPlay = false;
-                              if (paused || popupData.open) {
-                                clearTimeout(activeData.timer);
-                              } else {
-                                setModelOpen();
-                              }
-                            }}
-                            onReset={() => {
-                              if (!m.videoEle?.paused) {
-                                setModelOpen();
-                              }
-                            }}
-                            onError={() => {
-                              console.log('video error');
-                              m.error = true;
-                            }}
-                          /> */}
-                          <Transition name="van-fade">
-                            {
-                              <div class={styles.loadWrap}>
-                                <Vue3Lottie
-                                  animationData={playLoadData}></Vue3Lottie>
-                              </div>
-                            }
-                          </Transition>
-                        </>
-                      ) : m.type === 'IMG' ? (
-                        <img src={m.content} />
-                      ) : m.type === 'SONG' ? (
-                        <AudioPay
-                          imagePos={columnPos.value}
-                          item={m}
-                          activeStatus={popupData.activeIndex === mIndex}
-                          ref={(v: any) => (data.audioRefs[mIndex] = v)}
-                          onLoadedmetadata={(audioItem: any) => {
-                            m.audioEle = audioItem;
-                            m.isprepare = true;
-                          }}
-                          onTogglePlay={(paused: boolean) => {
-                            // m.autoPlay = false;
-                            if (paused || popupData.open) {
-                              clearTimeout(activeData.timer);
-                            } else {
-                              setModelOpen();
-                            }
-                          }}
-                          onEnded={() => {
-                            // const _index = popupData.activeIndex + 1;
-                            // if (_index < data.itemList.length) {
-                            //   handleSwipeChange(_index);
-                            // }
-                          }}
-                          onReset={() => {
-                            if (!m.audioEle?.paused) {
-                              setModelOpen();
-                            }
-                          }}
-                        />
-                      ) : // : m.type === 'PPT' ? <div class={styles.iframePpt}>
-                      //   <div class={styles.pptBox}></div>
-                      //   <iframe src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(m.content)}`} width='100%' height='100%' frameborder='1'></iframe>
-                      // </div>
-                      m.type === 'PPT' ? (
-                        <iframe
-                          src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
-                            m.content
-                          )}`}
-                          width="100%"
-                          height="100%"
-                          frameborder="1"></iframe>
-                      ) : m.type === 'RHYTHM' ? (
-                        <RhythmModal
-                          item={m}
-                          activeStatus={popupData.activeIndex === mIndex}
-                          imagePos={columnPos.value}
-                          onSetIframe={(el: any) => {
-                            m.iframeRef = el;
-                          }}
-                        />
-                      ) : m.type === 'LISTEN' ? (
-                        <ListenModal
-                          item={m}
-                          data-vid={m.id}
-                          activeStatus={popupData.activeIndex === mIndex}
-                          onSetIframe={(el: any) => {
-                            m.iframeRef = el;
-                          }}
-                        />
-                      ) : m.type === 'INSTRUMENT' || m.type === 'MUSICIAN' ? (
-                        <InstruemntDetail
-                          type="preview"
-                          id={m.content}
-                          contentType={m.type}
-                          activeStatus={popupData.activeIndex === mIndex}
-                          ref={(el: any) => (m.iframeRef = el)}
-                        />
-                      ) : m.type === 'MUSIC_WIKI' ? (
-                        <MusicDetail
-                          type="preview"
-                          id={m.content}
-                          contentType={m.type}
-                          activeStatus={popupData.activeIndex === mIndex}
-                          ref={(el: any) => (m.iframeRef = el)}
-                        />
-                      ) : m.type === 'THEORY' ? (
-                        <TheotyDetail
-                          type="preview"
-                          id={m.content}
-                          activeStatus={popupData.activeIndex === mIndex}
-                          ref={(el: any) => (m.iframeRef = el)}
-                        />
-                      ) : (
-                        <MusicScore
-                          activeModel={activeData.model}
-                          activeStatus={popupData.activeIndex === mIndex}
-                          data-vid={m.id}
-                          music={m}
-                          imagePos={columnPos.value}
-                          onSetIframe={(el: any) => {
-                            m.iframeRef = el;
-                          }}
-                        />
-                      )}
-                    </div>
-                  ) : null;
-                })}
-              </div>
-            ) : (
-              ''
-            )}
-          </div>
-        </div>
-
-        {/* 右边操作栏 */}
-        <div
-          class={[
-            styles.rightColumn,
-            columnShow.value && columnPos.value === 'right'
-              ? ''
-              : styles.rightColumnHide
-          ]}>
-          {rightList.map((item: any) => (
-            <div class={styles.columnItemBox}>
-              <div
-                class={[
-                  styles.columnItem,
-                  (item.id === 2 && data.preStudentNum <= 0) ||
-                  (item.id === 10 && studyData.callStudentList.length <= 0) ||
-                  (item.id === 11 && !isUpArrow.value) ||
-                  (item.id === 12 && !isDownArrow.value)
-                    ? styles.itemDisabled
-                    : ''
-                ]}
-                onClick={() => operateRightBtn(item.id)}>
-                <NTooltip
-                  showArrow={false}
-                  placement="left"
-                  class={[
-                    item.id === 15
-                      ? 'columnItemTooltip rightColumnItemTooltip'
-                      : ''
-                  ]}>
-                  {{
-                    trigger: () => (
-                      <img src={item.id === 8 ? rightIconPackUp : item.icon} />
-                    ),
-                    default: () =>
-                      item.id === 15 ? (
-                        <div class="tools">
-                          {tooltipList.map(i => (
-                            <div onClick={() => operateRightBtn(i.id)}>
-                              <img src={i.icon} />
-                              <div class="tit">{i.name}</div>
-                            </div>
-                          ))}
-                        </div>
-                      ) : item.id === 1 && data.type === 'preview' ? (
-                        item.name2
-                      ) : (
-                        item.name
-                      )
-                  }}
-                </NTooltip>
-              </div>
-            </div>
-          ))}
-        </div>
-        <img
-          class={[
-            styles.rightHideIcon,
-            !(columnShow.value && columnPos.value === 'right')
-              ? styles.rightIconShow
-              : ''
-          ]}
-          src={rightHideIcon}
-          onClick={() => {
-            columnPos.value = 'right';
-            columnShow.value = true;
-          }}
-        />
-        {/* 左边操作栏 */}
-        <div
-          class={[
-            styles.leftColumn,
-            columnShow.value && columnPos.value === 'left'
-              ? ''
-              : styles.leftColumnHide
-          ]}>
-          {rightList.map((item: any) => (
-            <div class={styles.columnItemBox}>
-              <div
-                class={[
-                  styles.columnItem,
-                  (item.id === 2 && data.preStudentNum <= 0) ||
-                  (item.id === 10 && studyData.callStudentList.length <= 0) ||
-                  (item.id === 11 && !isUpArrow.value) ||
-                  (item.id === 12 && !isDownArrow.value)
-                    ? styles.itemDisabled
-                    : ''
-                ]}
-                onClick={() => operateRightBtn(item.id)}>
-                <NTooltip
-                  showArrow={false}
-                  placement="right"
-                  class={[item.id === 15 ? 'columnItemTooltip' : '']}>
-                  {{
-                    trigger: () => <img src={item.icon} />,
-                    default: () =>
-                      item.id === 15 ? (
-                        <div class="tools">
-                          {tooltipList.map(i => (
-                            <div onClick={() => operateRightBtn(i.id)}>
-                              <img src={i.icon} />
-                              <div class="tit">{i.name}</div>
-                            </div>
-                          ))}
-                        </div>
-                      ) : item.id === 1 && data.type === 'preview' ? (
-                        item.name2
-                      ) : (
-                        item.name
-                      )
-                  }}
-                </NTooltip>
-              </div>
-            </div>
-          ))}
-        </div>
-        <img
-          class={[
-            styles.leftHideIcon,
-            !(columnShow.value && columnPos.value === 'left')
-              ? styles.leftIconShow
-              : ''
-          ]}
-          src={leftHideIcon}
-          onClick={() => {
-            columnPos.value = 'left';
-            columnShow.value = true;
-          }}
-        />
-
-        {/* 显示列表 */}
-        {/* <NDrawer
-          v-model:show={popupData.open}
-          class={[styles.drawerContainer, styles.drawerContainerSource]}
-          onAfterLeave={handleClosePopup}
-          showMask={false}
-          blockScroll={false}
-          trapFocus={false}>
-          <NDrawerContent closable>
-            {{
-              header: () => (
-                <TheNoticeBar text={activeName.value || '资源列表'} />
-              ),
-              default: () => (
-                <SourceList
-                  teacherChapterName={data.teacherChapterName}
-                  knowledgePointList={data.knowledgePointList}
-                  courseActiveIndex={popupData.courseActiveIndex}
-                  activeItem={data.itemList[popupData.activeIndex]}
-                  onConfirm={(item: any) => {
-                    popupData.open = false;
-                    toggleMaterial(item.id);
-                  }}
-                />
-              )
-            }}
-          </NDrawerContent>
-        </NDrawer> */}
-        <NModal
-          transformOrigin="center"
-          v-model:show={popupData.open}
-          preset="card"
-          class={[
-            'modalTitle background',
-            styles.drawerContainer,
-            resourcesConBoxClass
-          ]}
-          style={resourcesConDragData.styleDrag.value}
-          title={activeName.value || '资源列表'}>
-          <SourceList
-            teacherChapterName={data.teacherChapterName}
-            knowledgePointList={data.knowledgePointList}
-            courseActiveIndex={popupData.courseActiveIndex}
-            activeItem={data.itemList[popupData.activeIndex]}
-            onConfirm={(item: any) => {
-              popupData.open = false;
-              toggleMaterial(item.id);
-            }}
-          />
-          <Dragbom></Dragbom>
-        </NModal>
-        {/* 章节切换 */}
-        {/* <NDrawer
-          v-model:show={popupData.chapterOpen}
-          class={styles.drawerContainer}
-          onAfterLeave={handleClosePopup}
-          showMask={false}
-          maskClosable={data.selectClassStatus ? false : true}
-          blockScroll={false}
-          trapFocus={false}>
-          <NDrawerContent title="切换章节" closable>
-            <Chapter
-              treeList={popupData.chapterDetails}
-              itemActive={data.detailId as any}
-              onHandleSelect={async (val: any) => {
-                // itemActive: child.id,
-                // itemName: child.name
-                popupData.courseId = val.itemActive;
-                data.selectClassStatus = true;
-              }}
-            />
-          </NDrawerContent>
-        </NDrawer> */}
-        <NModal
-          transformOrigin="center"
-          v-model:show={popupData.chapterOpen}
-          preset="card"
-          class={[
-            'modalTitle background',
-            styles.drawerContainer,
-            chapterConBoxClass
-          ]}
-          style={chapterConBoxDragData.styleDrag.value}
-          title={'切换章节'}>
-          <Chapter
-            treeList={popupData.chapterDetails}
-            itemActive={data.detailId as any}
-            onHandleSelect={async (val: any) => {
-              // itemActive: child.id,
-              // itemName: child.name
-              popupData.courseId = val.itemActive;
-              data.selectClassStatus = true;
-            }}
-          />
-          <Dragbom></Dragbom>
-        </NModal>
-        {/* 批注 */}
-        {studyData.penShow && (
-          <Pen
-            isDrag={true}
-            show={studyData.type === 'pen'}
-            type={studyData.type}
-            close={() => closeStudyTool()}
-          />
-        )}
-
-        {studyData.whiteboardShow && (
-          <Pen
-            isDrag={true}
-            show={studyData.type === 'whiteboard'}
-            type={studyData.type}
-            close={() => closeStudyTool()}
-          />
-        )}
-
-        {studyData.callShow && (
-          <Pen
-            isDrag={true}
-            imagePos={columnPos.value}
-            callStudents={studyData.callStudentList}
-            show={studyData.type === 'call'}
-            type={studyData.type}
-            close={() => closeStudyTool()}
-          />
-        )}
-
-        {/* 选择课件 */}
-        <NModal
-          transformOrigin="center"
-          v-model:show={data.selectClassStatus}
-          preset="card"
-          class={[
-            'modalTitle background',
-            // styles.attendClassModal,
-            styles.selectClassModal,
-            selCourBoxClass
-          ]}
-          style={selCourDragData.styleDrag.value}
-          title={'选择课件'}>
-          <SelectClass
-            classId={data.classId}
-            courseId={popupData.courseId}
-            instrumentId={data.instrumentId}
-            lessonCoursewareSubjectList={data.lessonCoursewareSubjectList}
-            onConfirm={async (val: any) => {
-              popupData.chapterLoading = true;
-              try {
-                data.selectClassStatus = false;
-                data.detailId = val.itemActive;
-                data.courseId = val.chapterId;
-                const ids = formatParentId(
-                  val.itemActive,
-                  popupData.chapterDetails
-                );
-                data.lessonCoursewareDetailId = ids[0];
-                // 更新上课记录 上课的时候才更新
-                if (data.type !== 'preview') {
-                  await classCourseScheduleUpdate();
-                }
-                await getDetail();
-                popupData.activeIndex = 0;
-                popupData.chapterOpen = false;
-              } catch {
-                //
-              }
-              popupData.chapterLoading = false;
-            }}
-          />
-          <Dragbom></Dragbom>
-        </NModal>
-
-        {/* 布置作业 */}
-        <NModal
-          transformOrigin="center"
-          v-model:show={data.modelAttendStatus}
-          preset="card"
-          title={'课后作业'}
-          style={modelTrainHomeWordConBoxDragData.styleDrag.value}
-          class={[
-            'modalTitle',
-            styles.removeVisiable,
-            modelTrainHomeWordConBoxClass
-          ]}>
-          <div class={styles.studentRemove}>
-            <p>{data.modalAttendMessage}</p>
-            <NSpace class={styles.btnGroupModal} justify="center">
-              <NButton
-                type="default"
-                round
-                onClick={() => {
-                  data.modelTrainStatus = true;
-                  nextTick(() => {
-                    getModalHeight();
-                  });
-                  data.modelAttendStatus = false;
-                }}>
-                布置作业
-              </NButton>
-              <NButton
-                type="primary"
-                round
-                onClick={() => {
-                  handleStop();
-                  data.modelAttendStatus = false;
-                }}>
-                取消
-              </NButton>
-            </NSpace>
-          </div>
-          <Dragbom class={styles.dragbom}></Dragbom>
-        </NModal>
-
-        {/* 训练设置 */}
-        {/* <NModal
-          transformOrigin="center"
-          v-model:show={data.modelTrainStatus}
-          preset="card"
-          class={[styles.attendClassModal, styles.trainClassModal]}
-          title={'作业设置'}>
-          <ClassWork
-            detailId={data.detailId}
-            instrumentId={data.instrumentId}
-            courseScheduleId={data.classId}
-            activeName={activeName.value}
-            classGroupId={data.classGroupId}
-            onClose={() => (data.modelTrainStatus = false)}
-          />
-        </NModal> */}
-        <NModal
-          v-model:show={data.modelTrainStatus}
-          preset="card"
-          class={[
-            'modalTitle background',
-            styles.workVisiable,
-            modelTrainStatusConBoxClass
-          ]}
-          style={modelTrainStatusConBoxDragData.styleDrag.value}
-          title={'布置作业'}>
-          <div id="model-homework-height" class={styles.workContainer}>
-            <div class={styles.workTrain}>
-              <Train
-                from={'class'}
-                cardType="homeworkRecord"
-                lessonPreTraining={{
-                  title: data.lessonPreTrainingId
-                    ? ''
-                    : data.teacherChapterName + '-课后作业',
-                  chapterId: data.courseId, // 课件编号
-                  id: data.lessonPreTrainingId // 作业编号
-                }}
-                classGroupId={data.classGroupId}
-                courseScheduleId={data.classId}
-                onChange={async (val: any) => {
-                  data.modelTrainStatus = val.status;
-                  // getCoursewareList();
-                  if (val.saveWork) {
-                    try {
-                      const res =
-                        await api_teacherChapterLessonCoursewareDetail(
-                          data.courseId
-                        );
-
-                      data.lessonPreTrainingId = res.data.lessonPreTrainingId;
-                    } catch {
-                      //
-                    }
-                  }
-                }}
-              />
-            </div>
-            <div class={styles.resourceMain}>
-              <ResourceMain from={'class'} cardType="homerowk-record" />
-            </div>
-          </div>
-          <Dragbom class={styles.dragbom}></Dragbom>
-        </NModal>
-
-        <NModal
-          transformOrigin="center"
-          class={['modalTitle background', metronomeConBoxClass]}
-          title={'节拍器'}
-          preset="card"
-          v-model:show={showModalBeat.value}
-          style={{
-            width: '687px',
-            ...metronomeConBoxDragData.styleDrag.value
-          }}>
-          <div class={styles.modeWrap}>
-            <iframe
-              src={`${vaildUrl()}/metronome/?id=${new Date().getTime()}`}
-              scrolling="no"
-              frameborder="0"
-              width="100%"
-              onLoad={(val: any) => {
-                iframeDislableKeyboard(val.target);
-              }}
-              height={'650px'}></iframe>
-            <Dragbom class={styles.dragbom}></Dragbom>
-          </div>
-        </NModal>
-
-        <NModal
-          transformOrigin="center"
-          class={['background']}
-          v-model:show={showModalTone.value}>
-          <div>
-            <PlaceholderTone
-              onClose={() => {
-                showModalTone.value = false;
-              }}></PlaceholderTone>
-          </div>
-        </NModal>
-        <NModal
-          transformOrigin="center"
-          v-model:show={showModalTime.value}
-          class={['modalTitle background', timerMeterConBoxClass]}
-          title={'计时器'}
-          preset="card"
-          style={{
-            width: px2vw(772),
-            ...timerMeterConDragData.styleDrag.value
-          }}>
-          <div>
-            <TimerMeter></TimerMeter>
-            <Dragbom class={styles.dragbom}></Dragbom>
-          </div>
-        </NModal>
-
-        <NModal
-          v-model:show={data.selectResourceStatus}
-          class={['modalTitle', styles.selectMusicModal, selResourBoxClass]}
-          style={selResourDragData.styleDrag.value}
-          preset="card"
-          title={'选择资源'}>
-          <SelectResources from="class" />
-          <Dragbom></Dragbom>
-        </NModal>
-        <NModal
-          transformOrigin="center"
-          v-model:show={data.removeVisiable}
-          preset="card"
-          class={['modalTitle', styles.removeVisiable, removeResourBoxClass]}
-          style={removeResourDragData.styleDrag.value}
-          title={data.removeTitle}>
-          <div class={styles.studentRemove}>
-            <p>{data.removeContent}</p>
-
-            <NSpace class={styles.btnGroupModal} justify="center">
-              <NButton
-                round
-                onClick={() => {
-                  if (data.removeCourseStatus) {
-                    if (globalState.application) {
-                      document.exitFullscreen
-                        ? document.exitFullscreen()
-                        : document.mozCancelFullScreen
-                        ? document.mozCancelFullScreen()
-                        : document.webkitExitFullscreen
-                        ? document.webkitExitFullscreen()
-                        : '';
-                      emit('close');
-                    } else {
-                      window.close();
-                    }
-                  } else {
-                    data.removeVisiable = false;
-                  }
-                }}>
-                {data.removeCourseStatus ? '结束课程' : '取消'}
-              </NButton>
-              <NButton
-                round
-                type="primary"
-                onClick={() => {
-                  //
-                  if (data.removeCourseStatus) {
-                    data.modelTrainStatus = true;
-                    data.removeVisiable = false;
-                    nextTick(() => {
-                      getModalHeight();
-                    });
-                  } else {
-                    if (globalState.application) {
-                      document.exitFullscreen
-                        ? document.exitFullscreen()
-                        : document.mozCancelFullScreen
-                        ? document.mozCancelFullScreen()
-                        : document.webkitExitFullscreen
-                        ? document.webkitExitFullscreen()
-                        : '';
-                      emit('close');
-                    } else {
-                      window.close();
-
-                      if (route.query.source === 'admin') {
-                        storage.remove(ACCESS_TOKEN_ADMIN);
-                        window.parent.postMessage(
-                          {
-                            api: 'iframe_exit'
-                          },
-                          '*'
-                        );
-                      }
-                    }
-                  }
-                }}>
-                {data.removeCourseStatus ? '布置作业' : '确定'}
-              </NButton>
-            </NSpace>
-            <Dragbom></Dragbom>
-          </div>
-        </NModal>
-        <NModal
-          style={nextEndBoxDragData.styleDrag.value}
-          z-index={3000}
-          transformOrigin="center"
-          v-model:show={data.nextEndShow}
-          preset="card"
-          title={'提示'}
-          class={['modalTitle', styles.removeVisiable, nextEndBoxClass]}>
-          <div class={styles.studentRemove}>
-            <p>当前课件已结束，是否进入下一章节</p>
-            <NSpace class={styles.btnGroupModal} justify="center">
-              <NButton
-                type="default"
-                round
-                onClick={() => {
-                  data.nextEndShow = false;
-                }}>
-                取消
-              </NButton>
-              <NButton
-                type="primary"
-                round
-                onClick={() => {
-                  data.nextEndShow = false;
-                  handleNextEnd();
-                }}>
-                确认
-              </NButton>
-            </NSpace>
-            <Dragbom></Dragbom>
-          </div>
-        </NModal>
-      </div>
-    );
-  }
-});
->>>>>>> Stashed changes

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

@@ -192,19 +192,24 @@ export default defineComponent({
             musicName: item.musicName
           });
         });
-        await lessonPreTrainingV2Save({
+        const { data } = await lessonPreTrainingV2Save({
           title: forms.title,
           id: props.lessonPreTraining?.id,
           coursewareKnowledgeDetailId:
             props.coursewareKnowledgeDetailId || prepareStore.getSelectKey,
           lessonPreTrainingDetails,
+          courseScheduleId: props.courseScheduleId,
           chapterLessonCoursewareId: props.lessonPreTraining?.chapterId
         });
         message.success('保存成功');
         prepareStore.setIsEditTrain(false);
         forms.removeIds = [];
         // getList();
-        emit('change', { status: false, saveWork: true });
+        emit('change', {
+          status: false,
+          saveWork: true,
+          lessonPreTrainingId: data.id
+        });
       } catch {
         //
       }

src/views/prepare-lessons/model/related-class/index.tsx

@@ -1,213 +1,213 @@
-import { defineComponent, onMounted, onUnmounted, reactive, watch } from 'vue';
-import styles from './index.module.less';
-import { NCascader, NInput, NScrollbar, NSelect, NSpin } from 'naive-ui';
-import { useThrottleFn } from '@vueuse/core';
-import CoursewareType from '../courseware-type';
-import TheEmpty from '/src/components/TheEmpty';
-import { api_queryOpenCoursewareByPage } from '../../api';
-import { eventGlobal } from '/src/utils';
-
-export default defineComponent({
-  name: 'related-class',
-  props: {
-    tableList: {
-      type: Array,
-      default: () => []
-    },
-    instrumentList: {
-      type: Array,
-      default: () => []
-    },
-    instrumentId: {
-      type: [String, Number],
-      default: ''
-    },
-    coursewareDetailKnowledgeId: {
-      type: [String, Number],
-      default: ''
-    }
-  },
-  emits: ['close', 'add', 'click'],
-  setup(props, { emit }) {
-    const forms = reactive({
-      loading: false,
-      finshed: false, // 是否加载完
-      pagination: {
-        page: 1,
-        rows: 20
-      },
-      tableList: [] as any,
-      searchGroup: {
-        instrumentId: props.instrumentId ? props.instrumentId : '',
-        keyword: null
-      }
-    });
-    const getList = async () => {
-      try {
-        if (forms.pagination.page === 1) {
-          forms.loading = true;
-        }
-        // 查询公开课件列表
-        const { data } = await api_queryOpenCoursewareByPage({
-          coursewareDetailKnowledgeId: props.coursewareDetailKnowledgeId,
-          ...forms.searchGroup,
-          ...forms.pagination
-        });
-        const result = data.rows || [];
-        const tempList: any = [];
-        result.forEach((item: any) => {
-          // const index = forms.tableList.findIndex(
-          //   (i: any) => i.fromChapterLessonCoursewareId === item.id
-          // );
-          const firstItem: any =
-            item.chapterKnowledgeList[0]?.chapterKnowledgeMaterialList[0];
-          tempList.push({
-            id: item.id,
-            openFlag: item.openFlag,
-            openFlagEnable: item.openFlagEnable,
-            instrumentNames: item.instrumentNames,
-            fromChapterLessonCoursewareId: item.fromChapterLessonCoursewareId,
-            name: item.name,
-            coverImg: firstItem?.bizInfo.coverImg,
-            type: firstItem?.bizInfo.type,
-            isAdd: item.addFlag,
-            isNotWork: item.lessonPreTrainingNum <= 0 ? true : false // 是否布置作业
-          });
-        });
-
-        forms.loading = false;
-        forms.tableList.push(...tempList);
-
-        forms.finshed = data.pages <= data.current ? true : false;
-      } catch {
-        forms.loading = false;
-      }
-    };
-
-    // 检测数据是否存在
-    // watch(
-    //   () => props.tableList,
-    //   () => {
-    //     // fromChapterLessonCoursewareId;
-    //     forms.tableList.forEach((item: any) => {
-    //       const index = props.tableList.findIndex(
-    //         (i: any) => i.fromChapterLessonCoursewareId === item.id
-    //       );
-    //       item.isAdd = index !== -1 ? true : false;
-    //     });
-    //   }
-    // );
-
-    const throttleFn = useThrottleFn(() => {
-      forms.pagination.page = 1;
-      forms.tableList = [];
-      getList();
-    }, 500);
-
-    onMounted(() => {
-      getList();
-      eventGlobal.on('openCoursewareChanged', throttleFn);
-    });
-
-    onUnmounted(() => {
-      eventGlobal.off('openCoursewareChanged', throttleFn);
-    });
-    return () => (
-      <div class={styles.relatedClass}>
-        <div class={styles.attendClassSearch}>
-          <NCascader
-            placeholder="全部声部"
-            clearable
-            options={[
-              { name: '全部声部', id: '' },
-              ...(props.instrumentList as any)
-            ]}
-            v-model:value={forms.searchGroup.instrumentId}
-            onUpdate:value={() => throttleFn()}
-            checkStrategy="child"
-            showPath
-            childrenField="instruments"
-            expandTrigger="hover"
-            labelField="name"
-            valueField="id"
-            filterable
-            style={{ width: '200px' }}
-          />
-          <NInput
-            placeholder="请输入课件标题关键词"
-            clearable
-            v-model:value={forms.searchGroup.keyword}
-            onKeyup={(e: KeyboardEvent) => {
-              if (e.code === 'Enter') {
-                throttleFn();
-              }
-            }}
-            onClear={() => throttleFn()}>
-            {{
-              prefix: () => (
-                <span
-                  class="icon-search-input"
-                  style={{ cursor: 'pointer' }}
-                  onClick={() => throttleFn()}></span>
-              )
-            }}
-          </NInput>
-        </div>
-
-        <NSpin show={forms.loading} size={'small'}>
-          <NScrollbar
-            class={styles.classList}
-            style={{
-              'max-height': `60vh`
-            }}
-            onScroll={(e: any) => {
-              const clientHeight = e.target?.clientHeight;
-              const scrollTop = e.target?.scrollTop;
-              const scrollHeight = e.target?.scrollHeight;
-              // 是否到底，是否加载完
-              if (
-                clientHeight + scrollTop + 20 >= scrollHeight &&
-                !forms.finshed &&
-                !forms.loading
-              ) {
-                throttleFn();
-              }
-            }}>
-            <div
-              style={{
-                'min-height': `60vh)`
-              }}
-              class={[
-                styles.listSection,
-                !forms.loading && forms.tableList.length <= 0
-                  ? styles.emptySection
-                  : ''
-              ]}>
-              {forms.tableList.length > 0 && (
-                <div class={[styles.list]}>
-                  {forms.tableList.map((item: any) => (
-                    <div class={[styles.itemWrap, styles.itemBlock, 'row-nav']}>
-                      <div class={styles.itemWrapBox}>
-                        <CoursewareType
-                          isHoverShowAdd={false}
-                          isShowOpenFlag={false}
-                          isShowAdd
-                          item={item}
-                          onAdd={() => {
-                            emit('add', item);
-                          }}
-                          onLook={() => emit('click', item)}
-                        />
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-              {!forms.loading && forms.tableList.length <= 0 && <TheEmpty />}
-            </div>
-          </NScrollbar>
-        </NSpin>
-      </div>
-    );
-  }
-});
+import { defineComponent, onMounted, onUnmounted, reactive, watch } from 'vue';
+import styles from './index.module.less';
+import { NCascader, NInput, NScrollbar, NSelect, NSpin } from 'naive-ui';
+import { useThrottleFn } from '@vueuse/core';
+import CoursewareType from '../courseware-type';
+import TheEmpty from '/src/components/TheEmpty';
+import { api_queryOpenCoursewareByPage } from '../../api';
+import { eventGlobal } from '/src/utils';
+
+export default defineComponent({
+  name: 'related-class',
+  props: {
+    tableList: {
+      type: Array,
+      default: () => []
+    },
+    instrumentList: {
+      type: Array,
+      default: () => []
+    },
+    instrumentId: {
+      type: [String, Number],
+      default: ''
+    },
+    coursewareDetailKnowledgeId: {
+      type: [String, Number],
+      default: ''
+    }
+  },
+  emits: ['close', 'add', 'click'],
+  setup(props, { emit }) {
+    const forms = reactive({
+      loading: false,
+      finshed: false, // 是否加载完
+      pagination: {
+        page: 1,
+        rows: 20
+      },
+      tableList: [] as any,
+      searchGroup: {
+        instrumentId: props.instrumentId ? props.instrumentId : '',
+        keyword: null
+      }
+    });
+    const getList = async () => {
+      try {
+        if (forms.pagination.page === 1) {
+          forms.loading = true;
+        }
+        // 查询公开课件列表
+        const { data } = await api_queryOpenCoursewareByPage({
+          coursewareDetailKnowledgeId: props.coursewareDetailKnowledgeId,
+          ...forms.searchGroup,
+          ...forms.pagination
+        });
+        const result = data.rows || [];
+        const tempList: any = [];
+        result.forEach((item: any) => {
+          // const index = forms.tableList.findIndex(
+          //   (i: any) => i.fromChapterLessonCoursewareId === item.id
+          // );
+          const firstItem: any =
+            item.chapterKnowledgeList[0]?.chapterKnowledgeMaterialList[0];
+          tempList.push({
+            id: item.id,
+            openFlag: item.openFlag,
+            openFlagEnable: item.openFlagEnable,
+            instrumentNames: item.instrumentNames,
+            fromChapterLessonCoursewareId: item.fromChapterLessonCoursewareId,
+            name: item.name,
+            coverImg: firstItem?.bizInfo.coverImg,
+            type: firstItem?.bizInfo.type,
+            isAdd: item.addFlag,
+            isNotWork: item.lessonPreTrainingNum <= 0 ? true : false // 是否布置作业
+          });
+        });
+
+        forms.loading = false;
+        forms.tableList.push(...tempList);
+
+        forms.finshed = data.pages <= data.current ? true : false;
+      } catch {
+        forms.loading = false;
+      }
+    };
+
+    // 检测数据是否存在
+    // watch(
+    //   () => props.tableList,
+    //   () => {
+    //     // fromChapterLessonCoursewareId;
+    //     forms.tableList.forEach((item: any) => {
+    //       const index = props.tableList.findIndex(
+    //         (i: any) => i.fromChapterLessonCoursewareId === item.id
+    //       );
+    //       item.isAdd = index !== -1 ? true : false;
+    //     });
+    //   }
+    // );
+
+    const throttleFn = useThrottleFn(() => {
+      forms.pagination.page = 1;
+      forms.tableList = [];
+      getList();
+    }, 500);
+
+    onMounted(() => {
+      getList();
+      eventGlobal.on('openCoursewareChanged', throttleFn);
+    });
+
+    onUnmounted(() => {
+      eventGlobal.off('openCoursewareChanged', throttleFn);
+    });
+    return () => (
+      <div class={styles.relatedClass}>
+        <div class={styles.attendClassSearch}>
+          <NCascader
+            placeholder="全部乐器"
+            clearable
+            options={[
+              { name: '全部乐器', id: '' },
+              ...(props.instrumentList as any)
+            ]}
+            v-model:value={forms.searchGroup.instrumentId}
+            onUpdate:value={() => throttleFn()}
+            checkStrategy="child"
+            showPath
+            childrenField="instruments"
+            expandTrigger="hover"
+            labelField="name"
+            valueField="id"
+            filterable
+            style={{ width: '200px' }}
+          />
+          <NInput
+            placeholder="请输入课件标题关键词"
+            clearable
+            v-model:value={forms.searchGroup.keyword}
+            onKeyup={(e: KeyboardEvent) => {
+              if (e.code === 'Enter') {
+                throttleFn();
+              }
+            }}
+            onClear={() => throttleFn()}>
+            {{
+              prefix: () => (
+                <span
+                  class="icon-search-input"
+                  style={{ cursor: 'pointer' }}
+                  onClick={() => throttleFn()}></span>
+              )
+            }}
+          </NInput>
+        </div>
+
+        <NSpin show={forms.loading} size={'small'}>
+          <NScrollbar
+            class={styles.classList}
+            style={{
+              'max-height': `60vh`
+            }}
+            onScroll={(e: any) => {
+              const clientHeight = e.target?.clientHeight;
+              const scrollTop = e.target?.scrollTop;
+              const scrollHeight = e.target?.scrollHeight;
+              // 是否到底，是否加载完
+              if (
+                clientHeight + scrollTop + 20 >= scrollHeight &&
+                !forms.finshed &&
+                !forms.loading
+              ) {
+                throttleFn();
+              }
+            }}>
+            <div
+              style={{
+                'min-height': `60vh)`
+              }}
+              class={[
+                styles.listSection,
+                !forms.loading && forms.tableList.length <= 0
+                  ? styles.emptySection
+                  : ''
+              ]}>
+              {forms.tableList.length > 0 && (
+                <div class={[styles.list]}>
+                  {forms.tableList.map((item: any) => (
+                    <div class={[styles.itemWrap, styles.itemBlock, 'row-nav']}>
+                      <div class={styles.itemWrapBox}>
+                        <CoursewareType
+                          isHoverShowAdd={false}
+                          isShowOpenFlag={false}
+                          isShowAdd
+                          item={item}
+                          onAdd={() => {
+                            emit('add', item);
+                          }}
+                          onLook={() => emit('click', item)}
+                        />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+              {!forms.loading && forms.tableList.length <= 0 && <TheEmpty />}
+            </div>
+          </NScrollbar>
+        </NSpin>
+      </div>
+    );
+  }
+});

src/views/prepare-lessons/model/subject-sync/index.tsx

@@ -32,7 +32,9 @@ export default defineComponent({
 
     const subjectImgs = {
       Panpipes: 'https://oss.dayaedu.com/ktqy/17103860536976fd4a751.png',
-      Ocarina: 'https://oss.dayaedu.com/ktqy/171038605369851874b22.png',
+      // Ocarina: 'https://oss.dayaedu.com/ktqy/171038605369851874b22.png',
+      Ocarina: 'https://oss.dayaedu.com/ktqy/17143623857205dba41a5.png',
+      Whistling: 'https://oss.dayaedu.com/ktqy/1714362351692fcf8c0b8.png',
       Woodwind: 'https://oss.dayaedu.com/ktqy/17103860536966826c50d.png',
       'Tenor Recorder':
         'https://oss.dayaedu.com/ktqy/17103860536950592e357.png',
@@ -72,6 +74,7 @@ export default defineComponent({
         const item = subjectList.value.find(
           (subject: any) => subject.id === id
         );
+        console.log(item, 'item');
         if (item) {
           subjectCode.push({
             materialId: item.id,