|
|
@@ -11,18 +11,18 @@ import {
|
|
|
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 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 Moveable from 'moveable';
|
|
|
import VideoPlay from './component/video-play';
|
|
|
import {
|
|
|
useMessage,
|
|
|
@@ -30,10 +30,10 @@ import {
|
|
|
NDrawerContent,
|
|
|
NModal,
|
|
|
NSpace,
|
|
|
- NButton,
|
|
|
- NTooltip,
|
|
|
- NPopover,
|
|
|
- NImage
|
|
|
+ NButton
|
|
|
+ // NTooltip,
|
|
|
+ // NPopover,
|
|
|
+ // NImage
|
|
|
} from 'naive-ui';
|
|
|
import CardType from '@/components/card-type';
|
|
|
import Pen from './component/tools/pen';
|
|
|
@@ -46,18 +46,31 @@ import {
|
|
|
lessonPreTrainingPage,
|
|
|
queryCourseware
|
|
|
} from '../prepare-lessons/api';
|
|
|
-import Attentguide from '@/custom-plugins/guide-page/attent-guide';
|
|
|
+// import Attentguide from '@/custom-plugins/guide-page/attent-guide';
|
|
|
import { vaildUrl } from '/src/utils/urlUtils';
|
|
|
import TimerMeter from '/src/components/timerMeter';
|
|
|
-import toneImage from '/src/components/layout/images/toneImage.png';
|
|
|
-import toolbox from '/src/components/layout/images/toolbox.png';
|
|
|
-import setTimeIcon from '/src/components/layout/images/setTimeIcon.png';
|
|
|
-import beatIcon from '/src/components/layout/images/beatIcon.png';
|
|
|
-import toneIcon from '/src/components/layout/images/toneIcon.png';
|
|
|
+// import toneImage from '/src/components/layout/images/toneImage.png';
|
|
|
+// import toolbox from '/src/components/layout/images/toolbox.png';
|
|
|
+// import setTimeIcon from '/src/components/layout/images/setTimeIcon.png';
|
|
|
+// import beatIcon from '/src/components/layout/images/beatIcon.png';
|
|
|
+// import toneIcon from '/src/components/layout/images/toneIcon.png';
|
|
|
import { 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 iconBeatIcon from './new-image/icon-beatIcon.png';
|
|
|
+import iconChange from './new-image/icon-change.png';
|
|
|
+import iconDown from './new-image/icon-down.png';
|
|
|
+import iconMenu from './new-image/icon-menu.png';
|
|
|
+import iconNote from './new-image/icon-note.png';
|
|
|
+import iconOverClass from './new-image/icon-overclass.png';
|
|
|
+import iconSetTime from './new-image/icon-setTime.png';
|
|
|
+import iconToneIcon from './new-image/icon-toneIcon.png';
|
|
|
+import iconUp from './new-image/icon-up.png';
|
|
|
+import iconWhite from './new-image/icon-white.png';
|
|
|
+import iconWork from './new-image/icon-work.png';
|
|
|
+
|
|
|
export type ToolType = 'init' | 'pen' | 'whiteboard';
|
|
|
export type ToolItem = {
|
|
|
type: ToolType;
|
|
|
@@ -104,35 +117,25 @@ export default defineComponent({
|
|
|
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 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();
|
|
|
- const boxBoundaryInfo = reactive({
|
|
|
- isBoundary: false,
|
|
|
- isBoundaryType: '' as any,
|
|
|
- mainWidth: '' as any,
|
|
|
- mainHeight: '' as any,
|
|
|
- subWidth: '' as any,
|
|
|
- subHeight: '' as any
|
|
|
- });
|
|
|
-
|
|
|
onUnmounted(() => {
|
|
|
handleInit(1);
|
|
|
- window.removeEventListener('resize', resetSize);
|
|
|
});
|
|
|
|
|
|
const data = reactive({
|
|
|
@@ -169,7 +172,6 @@ export default defineComponent({
|
|
|
timer: null as any,
|
|
|
item: null as any
|
|
|
});
|
|
|
- const showGuide = ref(false);
|
|
|
const getDetail = async () => {
|
|
|
try {
|
|
|
const res = await queryCourseware({
|
|
|
@@ -207,160 +209,14 @@ export default defineComponent({
|
|
|
isRender: false // 是否渲染了
|
|
|
};
|
|
|
});
|
|
|
- setTimeout(() => {
|
|
|
- showGuide.value = true;
|
|
|
- }, 500);
|
|
|
} catch {
|
|
|
//
|
|
|
}
|
|
|
};
|
|
|
|
|
|
- const directionType = ref('left');
|
|
|
const showModalBeat = ref(false);
|
|
|
const showModalTone = ref(false);
|
|
|
const showModalTime = ref(false);
|
|
|
- const isDragIng = ref(false);
|
|
|
- const initMoveable = async () => {
|
|
|
- if (document.querySelector('.wrap')) {
|
|
|
- const moveable = new Moveable(document.querySelector('.wrap') as any, {
|
|
|
- target: document.querySelector('#moveNPopoverA') as any,
|
|
|
- // If the container is null, the position is fixed. (default: parentElement(document.body))
|
|
|
- container: document.querySelector('.wrap') as any,
|
|
|
- // snappable: true,
|
|
|
- // bounds: {"left":100,"top":100,"right":100,"bottom":100},
|
|
|
- draggable: true,
|
|
|
- resizable: false,
|
|
|
- scalable: false,
|
|
|
- rotatable: false,
|
|
|
- warpable: false,
|
|
|
- pinchable: false, // ["resizable", "scalable", "rotatable"]
|
|
|
- origin: false,
|
|
|
- keepRatio: false,
|
|
|
- // Resize, Scale Events at edges.
|
|
|
- edge: false,
|
|
|
- throttleDrag: 0,
|
|
|
- throttleResize: 0,
|
|
|
- throttleScale: 0,
|
|
|
- throttleRotate: 0
|
|
|
- });
|
|
|
- console.log('initMoveable完毕', moveable);
|
|
|
- moveable
|
|
|
- .on('dragStart', ({ target, clientX, clientY }) => {
|
|
|
- console.log('dragStart');
|
|
|
- })
|
|
|
- .on(
|
|
|
- 'drag',
|
|
|
- ({
|
|
|
- target,
|
|
|
- // transform,
|
|
|
- left,
|
|
|
- top,
|
|
|
- right,
|
|
|
- bottom
|
|
|
- // beforeDelta,
|
|
|
- // beforeDist,
|
|
|
- // delta,
|
|
|
- // dist,
|
|
|
- // clientX,
|
|
|
- // clientY
|
|
|
- }) => {
|
|
|
- isDragIng.value = true;
|
|
|
- if (NPopoverRef.value) {
|
|
|
- NPopoverRef.value.setShow(false);
|
|
|
- }
|
|
|
-
|
|
|
- const subdEl = document.getElementById(
|
|
|
- `moveNPopoverA`
|
|
|
- ) as HTMLDivElement;
|
|
|
- // console.log(subdEl, "subdEl", "drag");
|
|
|
- const subdElStyle = getComputedStyle(subdEl, null);
|
|
|
- const RectInfo = {
|
|
|
- left: Number(subdElStyle.left.replace('px', '')),
|
|
|
- top: Number(subdElStyle.top.replace('px', '')),
|
|
|
- width: Number(subdElStyle.width.replace('px', '')),
|
|
|
- height: Number(subdElStyle.height.replace('px', ''))
|
|
|
- };
|
|
|
- // target.style.transition = ''
|
|
|
- const mainWidth =
|
|
|
- parseInt(
|
|
|
- window.getComputedStyle(
|
|
|
- document.querySelector('.wrap') as Element
|
|
|
- ).width
|
|
|
- ) - RectInfo.width;
|
|
|
-
|
|
|
- const mainHeight =
|
|
|
- parseInt(
|
|
|
- window.getComputedStyle(
|
|
|
- document.querySelector('.wrap') as Element
|
|
|
- ).height
|
|
|
- ) - RectInfo.height;
|
|
|
- subdEl.style.transition = '';
|
|
|
- boxBoundaryInfo.isBoundary = false;
|
|
|
- boxBoundaryInfo.isBoundaryType = '';
|
|
|
- boxBoundaryInfo.mainHeight = mainHeight;
|
|
|
- boxBoundaryInfo.mainWidth = mainWidth;
|
|
|
- boxBoundaryInfo.subWidth = RectInfo.width;
|
|
|
- boxBoundaryInfo.subHeight = RectInfo.height;
|
|
|
- if (left < 0) {
|
|
|
- left = 2;
|
|
|
- boxBoundaryInfo.isBoundary = true;
|
|
|
- boxBoundaryInfo.isBoundaryType = 'left';
|
|
|
- }
|
|
|
- if (top < 0) {
|
|
|
- top = 2;
|
|
|
- boxBoundaryInfo.isBoundary = true;
|
|
|
- boxBoundaryInfo.isBoundaryType = 'top';
|
|
|
- }
|
|
|
- if (right < 0) {
|
|
|
- right = 2;
|
|
|
- }
|
|
|
- if (bottom < 0) {
|
|
|
- bottom = 2;
|
|
|
- }
|
|
|
- if (left > mainWidth - 2) {
|
|
|
- left = mainWidth - 2;
|
|
|
- // top = 2;
|
|
|
- boxBoundaryInfo.isBoundary = true;
|
|
|
- boxBoundaryInfo.isBoundaryType = 'right';
|
|
|
- }
|
|
|
- if (top > mainHeight - 2) {
|
|
|
- top = mainHeight - 2;
|
|
|
- boxBoundaryInfo.isBoundary = true;
|
|
|
- boxBoundaryInfo.isBoundaryType = 'bottom';
|
|
|
- }
|
|
|
-
|
|
|
- target!.style.left = `${left}px`;
|
|
|
- target!.style.top = `${top}px`;
|
|
|
- }
|
|
|
- )
|
|
|
- .on(
|
|
|
- 'dragEnd',
|
|
|
- async ({
|
|
|
- target,
|
|
|
- // isDrag,
|
|
|
- clientX
|
|
|
- // clientY
|
|
|
- }) => {
|
|
|
- if (document.body.clientWidth / 2 - clientX > 0) {
|
|
|
- // 往左出
|
|
|
- directionType.value = 'right';
|
|
|
- } else {
|
|
|
- // 往又出
|
|
|
- directionType.value = 'left';
|
|
|
- }
|
|
|
- console.log(target.style.left);
|
|
|
- isDragIng.value = false;
|
|
|
- // 在这里进行动画
|
|
|
- if (boxBoundaryInfo.isBoundary) {
|
|
|
- // 这里说明贴边了
|
|
|
-
|
|
|
- target.style.transition = '.3s';
|
|
|
- actionEnd(target, boxBoundaryInfo.isBoundaryType);
|
|
|
- }
|
|
|
- }
|
|
|
- );
|
|
|
- }
|
|
|
- };
|
|
|
// ifram事件处理
|
|
|
const iframeHandle = (ev: MessageEvent) => {
|
|
|
if (ev.data?.api === 'headerTogge') {
|
|
|
@@ -374,7 +230,7 @@ export default defineComponent({
|
|
|
};
|
|
|
|
|
|
onMounted(() => {
|
|
|
- initMoveable();
|
|
|
+ // initMoveable();
|
|
|
const query = route.query;
|
|
|
// 先取参数，
|
|
|
data.type = props.type || (query.type as any);
|
|
|
@@ -384,151 +240,11 @@ export default defineComponent({
|
|
|
data.classGroupId = props.classGroupId || query.classGroupId;
|
|
|
data.classId = props.classId || query.classId;
|
|
|
|
|
|
- const subdEl = document.getElementById(`moveNPopoverA`) as HTMLDivElement;
|
|
|
- initBoundaryWrap(subdEl, boxBoundaryInfo);
|
|
|
- initBoxRectInfo(subdEl, boxBoundaryInfo);
|
|
|
-
|
|
|
window.addEventListener('message', iframeHandle);
|
|
|
getDetail();
|
|
|
getLessonCoursewareDetail();
|
|
|
- window.addEventListener('resize', resetSize);
|
|
|
});
|
|
|
|
|
|
- const resetSize = () => {
|
|
|
- const subdEl = document.getElementById(`moveNPopoverA`) as HTMLDivElement;
|
|
|
- subdEl.style.display = 'none';
|
|
|
-
|
|
|
- boxBoundaryInfo.isBoundary = true;
|
|
|
- boxBoundaryInfo.isBoundaryType = 'right';
|
|
|
- if (NPopoverRef.value) {
|
|
|
- NPopoverRef.value.setShow(false);
|
|
|
- }
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- subdEl.style.transition = '';
|
|
|
- initBoxRectInfo(subdEl, boxBoundaryInfo);
|
|
|
- initBoundaryWrap(subdEl, boxBoundaryInfo);
|
|
|
- subdEl.style.display = 'block';
|
|
|
- }, 100);
|
|
|
- };
|
|
|
-
|
|
|
- const initBoundaryWrap = (target: any, wrapInfo: any) => {
|
|
|
- target.addEventListener('mouseenter', () => {
|
|
|
- if (wrapInfo.isBoundary) {
|
|
|
- // 如果在边框 就得还原 元素位置 还原完毕后 去除transition
|
|
|
- if (wrapInfo.isBoundaryType == 'left') {
|
|
|
- target.style.left = '2px';
|
|
|
- } else if (wrapInfo.isBoundaryType == 'right') {
|
|
|
- target.style.left = `${wrapInfo.mainWidth - 2}px`;
|
|
|
- } else if (wrapInfo.isBoundaryType == 'top') {
|
|
|
- target.style.top = `${2}px`;
|
|
|
- } else if (wrapInfo.isBoundaryType == 'bottom') {
|
|
|
- target.style.top = `${wrapInfo.mainHeight - 2}px`;
|
|
|
- }
|
|
|
- }
|
|
|
- rate(target, 0);
|
|
|
- });
|
|
|
- target.addEventListener('mouseleave', () => {
|
|
|
- console.log('mouseleave', wrapInfo.isBoundary);
|
|
|
- if (wrapInfo.isBoundary) {
|
|
|
- // 如果在边框 就得还原 元素位置 还原完毕后 去除transition
|
|
|
- if (wrapInfo.isBoundaryType == 'left') {
|
|
|
- actionEnd(target, 'left');
|
|
|
- } else if (wrapInfo.isBoundaryType == 'right') {
|
|
|
- actionEnd(target, 'right');
|
|
|
- } else if (wrapInfo.isBoundaryType == 'top') {
|
|
|
- actionEnd(target, 'top');
|
|
|
- } else if (wrapInfo.isBoundaryType == 'bottom') {
|
|
|
- actionEnd(target, 'bottom');
|
|
|
- }
|
|
|
- }
|
|
|
- // rate(target, 0)
|
|
|
- });
|
|
|
- // target.addEventListener('contextmenu', (event: any) => {
|
|
|
- // event.preventDefault();
|
|
|
- // dialog.warning({
|
|
|
- // title: '提示',
|
|
|
- // content: '是否收入托盘',
|
|
|
- // positiveText: '确定',
|
|
|
- // negativeText: '取消',
|
|
|
- // onPositiveClick: () => {
|
|
|
- // console.log('确定')
|
|
|
- // },
|
|
|
- // onNegativeClick: () => {
|
|
|
- // console.log('取消')
|
|
|
- // }
|
|
|
- // })
|
|
|
-
|
|
|
- // });
|
|
|
-
|
|
|
- // actionEnd(target, 'right');
|
|
|
- };
|
|
|
- // 这里是旋转
|
|
|
- const rate = (target: any, rate: any) => {
|
|
|
- target.style.transform = ' rotate(' + rate + ')';
|
|
|
- };
|
|
|
-
|
|
|
- // 这里是选装的方式
|
|
|
- const actionEnd = (target: any, type: any) => {
|
|
|
- switch (type) {
|
|
|
- case 'left':
|
|
|
- rate(target, '90deg');
|
|
|
- target!.style.left = `${2 - boxBoundaryInfo.subWidth / 2}px`;
|
|
|
- target!.style.top = `${top}px`;
|
|
|
- break;
|
|
|
- case 'right':
|
|
|
- rate(target, '-90deg');
|
|
|
- target!.style.left = `${
|
|
|
- boxBoundaryInfo.mainWidth - 2 + boxBoundaryInfo.subWidth / 2
|
|
|
- }px`;
|
|
|
- target!.style.top = `${top}px`;
|
|
|
- break;
|
|
|
-
|
|
|
- case 'top':
|
|
|
- target!.style.top = `${2 - boxBoundaryInfo.subHeight / 2}px`;
|
|
|
- rate(target, '-180deg');
|
|
|
- break;
|
|
|
- case 'bottom':
|
|
|
- target!.style.top = `${
|
|
|
- boxBoundaryInfo.mainHeight - 2 + boxBoundaryInfo.subHeight / 2
|
|
|
- }px`;
|
|
|
- break;
|
|
|
- default:
|
|
|
- rate(target, '-0');
|
|
|
- break;
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- const initBoxRectInfo = (target: any, wrapInfo: any) => {
|
|
|
- // const subdEl = document.getElementById(`moveNPopoverA`) as HTMLDivElement;
|
|
|
- // console.log(subdEl, "subdEl", "drag");
|
|
|
- const subdElStyle = getComputedStyle(target, null);
|
|
|
- const RectInfo = {
|
|
|
- left: Number(subdElStyle.left.replace('px', '')),
|
|
|
- top: Number(subdElStyle.top.replace('px', '')),
|
|
|
- width: Number(subdElStyle.width.replace('px', '')),
|
|
|
- height: Number(subdElStyle.height.replace('px', ''))
|
|
|
- };
|
|
|
- // target.style.transition = ''
|
|
|
- const mainWidth =
|
|
|
- parseInt(
|
|
|
- window.getComputedStyle(document.querySelector('.wrap') as Element)
|
|
|
- .width
|
|
|
- ) - RectInfo.width;
|
|
|
-
|
|
|
- const mainHeight =
|
|
|
- parseInt(
|
|
|
- window.getComputedStyle(document.querySelector('.wrap') as Element)
|
|
|
- .height
|
|
|
- ) - RectInfo.height;
|
|
|
- // boxBoundaryInfo.isBoundary = false;
|
|
|
- // boxBoundaryInfo.isBoundaryType = '';
|
|
|
- wrapInfo.mainHeight = mainHeight;
|
|
|
- wrapInfo.mainWidth = mainWidth;
|
|
|
- wrapInfo.subWidth = RectInfo.width;
|
|
|
- wrapInfo.subHeight = RectInfo.height;
|
|
|
- target.style.transition = '.3s';
|
|
|
- };
|
|
|
const onFullScreen = () => {
|
|
|
if (data.type === 'preview') {
|
|
|
const el: any = document.querySelector('#app');
|
|
|
@@ -1047,174 +763,145 @@ export default defineComponent({
|
|
|
) : null;
|
|
|
})}
|
|
|
</div>
|
|
|
- <Transition name="right">
|
|
|
- {activeData.model && (
|
|
|
- <div
|
|
|
- class={styles.rightFixedBtns}
|
|
|
- onClick={(e: Event) => {
|
|
|
- e.stopPropagation();
|
|
|
- clearTimeout(activeData.timer);
|
|
|
- }}>
|
|
|
- <div
|
|
|
- class={[styles.fullBtn]}
|
|
|
- onClick={() => (popupData.chapterOpen = true)}>
|
|
|
- <img src={iconChange} />
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class={[
|
|
|
- styles.fullBtn,
|
|
|
- styles.iconUp,
|
|
|
- popupData.activeIndex === 0 ? styles.btnsDisabled : ''
|
|
|
- ]}
|
|
|
- onClick={() => {
|
|
|
- if (popupData.activeIndex === 0) return;
|
|
|
- handlePreAndNext('up');
|
|
|
- }}>
|
|
|
- <img src={iconUp} />
|
|
|
- </div>
|
|
|
- <div id="attent-0">
|
|
|
- <div
|
|
|
- class={[styles.fullBtn, styles.point]}
|
|
|
- onClick={() => (popupData.open = true)}>
|
|
|
- <img src={iconMenu} />
|
|
|
- </div>
|
|
|
-
|
|
|
- <div
|
|
|
- class={[
|
|
|
- styles.fullBtn,
|
|
|
- styles.iconDown,
|
|
|
- popupData.activeIndex === data.itemList.length - 1
|
|
|
- ? styles.btnsDisabled
|
|
|
- : ''
|
|
|
- ]}
|
|
|
- onClick={() => {
|
|
|
- if (
|
|
|
- popupData.activeIndex ===
|
|
|
- data.itemList.length - 1
|
|
|
- )
|
|
|
- return;
|
|
|
- handlePreAndNext('down');
|
|
|
- }}>
|
|
|
- <img src={iconDown} />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </Transition>
|
|
|
</div>
|
|
|
</div>
|
|
|
) : (
|
|
|
''
|
|
|
)}
|
|
|
|
|
|
+ {/* 头部样式 */}
|
|
|
<div
|
|
|
style={{ transform: activeData.model ? '' : 'translateY(-100%)' }}
|
|
|
- class={styles.headerContainer}
|
|
|
- // ref={headeRef}
|
|
|
- >
|
|
|
- {/* <div class={styles.backBtn} onClick={() => goback()}>
|
|
|
- <Icon name={iconBack} />
|
|
|
- 返回
|
|
|
- </div> */}
|
|
|
+ class={styles.headerContainer}>
|
|
|
<div class={styles.menu}>{activeName.value}</div>
|
|
|
</div>
|
|
|
{/* 布置作业按钮 */}
|
|
|
|
|
|
- {data.type !== 'preview' ? (
|
|
|
- <div
|
|
|
- class={[
|
|
|
- styles.assignHomeworkClose,
|
|
|
- activeData.model ? '' : styles.sectionAnimateUp
|
|
|
- ]}
|
|
|
- onClick={async () => {
|
|
|
- data.removeVisiable = true;
|
|
|
- data.removeTitle = '结束课程';
|
|
|
- data.removeContent = '请确认是否结束课程？';
|
|
|
- }}>
|
|
|
- <img src={iconClose} />
|
|
|
- </div>
|
|
|
- ) : (
|
|
|
- ''
|
|
|
- )}
|
|
|
- <div
|
|
|
- id="attent-3"
|
|
|
- class={[
|
|
|
- styles.assignHomework,
|
|
|
- data.type !== 'preview' ? styles.isClose : '',
|
|
|
- activeData.model ? '' : styles.sectionAnimateUp
|
|
|
- ]}
|
|
|
- onClick={async () => {
|
|
|
- if (data.type === 'preview') {
|
|
|
- handleStop();
|
|
|
-
|
|
|
- data.removeVisiable = true;
|
|
|
- data.removeTitle = '结束预览';
|
|
|
- data.removeContent = '请确认是否结束预览？';
|
|
|
-
|
|
|
- // onFullScreen();
|
|
|
- } else {
|
|
|
- const res = await lessonPreTrainingPage({
|
|
|
- coursewareKnowledgeDetailId: data.detailId,
|
|
|
- subjectId: data.subjectId,
|
|
|
- page: 1,
|
|
|
- rows: 99
|
|
|
- });
|
|
|
- console.log(res, 'res');
|
|
|
- if (res.data.rows && res.data.rows.length) {
|
|
|
- data.modalAttendMessage = '本节课已设置课后训练，是否布置？';
|
|
|
- }
|
|
|
- data.modelAttendStatus = true;
|
|
|
- }
|
|
|
- }}>
|
|
|
- <img
|
|
|
- src={data.type === 'preview' ? iconOverPreivew : iconAssignHomework}
|
|
|
- />
|
|
|
- </div>
|
|
|
-
|
|
|
- {/* 白板 批注 */}
|
|
|
<div
|
|
|
class={[
|
|
|
styles.switchDisplaySection,
|
|
|
activeData.model ? '' : styles.sectionAnimate
|
|
|
]}>
|
|
|
- <NTooltip trigger="hover">
|
|
|
- {{
|
|
|
- trigger: () => (
|
|
|
- <div
|
|
|
- id="attent-1"
|
|
|
- class={styles.displayBtn}
|
|
|
- onClick={() =>
|
|
|
- openStudyTool({
|
|
|
- type: 'pen',
|
|
|
- icon: iconNote,
|
|
|
- name: '批注'
|
|
|
- })
|
|
|
- }>
|
|
|
- <img src={iconNote} />
|
|
|
- </div>
|
|
|
- ),
|
|
|
- default: () => '批注'
|
|
|
- }}
|
|
|
- </NTooltip>
|
|
|
- <NTooltip trigger="hover">
|
|
|
- {{
|
|
|
- trigger: () => (
|
|
|
- <div
|
|
|
- id="attent-2"
|
|
|
- class={styles.displayBtn}
|
|
|
- onClick={() =>
|
|
|
- openStudyTool({
|
|
|
- type: 'whiteboard',
|
|
|
- icon: iconWhiteboard,
|
|
|
- name: '白板'
|
|
|
- })
|
|
|
- }>
|
|
|
- <img src={iconWhiteboard} />
|
|
|
- </div>
|
|
|
- ),
|
|
|
- default: () => '白板'
|
|
|
- }}
|
|
|
- </NTooltip>
|
|
|
+ <NSpace class={styles.switchSpace}>
|
|
|
+ <div
|
|
|
+ class={styles.btnItem}
|
|
|
+ onClick={async () => {
|
|
|
+ if (data.type === 'preview') {
|
|
|
+ handleStop();
|
|
|
+ data.removeVisiable = true;
|
|
|
+ data.removeTitle = '结束预览';
|
|
|
+ data.removeContent = '请确认是否结束预览？';
|
|
|
+ } else {
|
|
|
+ data.removeVisiable = true;
|
|
|
+ data.removeTitle = '结束课程';
|
|
|
+ data.removeContent = '请确认是否结束课程？';
|
|
|
+ }
|
|
|
+ }}>
|
|
|
+ <img src={iconOverClass} />
|
|
|
+ <p>{data.type !== 'preview' ? '结束课程' : '结束预览'}</p>
|
|
|
+ </div>
|
|
|
+ {data.type !== 'preview' && (
|
|
|
+ <div
|
|
|
+ class={styles.btnItem}
|
|
|
+ onClick={async () => {
|
|
|
+ const res = await lessonPreTrainingPage({
|
|
|
+ coursewareKnowledgeDetailId: data.detailId,
|
|
|
+ subjectId: data.subjectId,
|
|
|
+ page: 1,
|
|
|
+ rows: 99
|
|
|
+ });
|
|
|
+ if (res.data.rows && res.data.rows.length) {
|
|
|
+ data.modalAttendMessage =
|
|
|
+ '本节课已设置课后训练，是否布置？';
|
|
|
+ }
|
|
|
+ data.modelAttendStatus = true;
|
|
|
+ }}>
|
|
|
+ <img src={iconWork} />
|
|
|
+ <p>布置作业</p>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+
|
|
|
+ <div
|
|
|
+ class={styles.btnItem}
|
|
|
+ onClick={() =>
|
|
|
+ openStudyTool({
|
|
|
+ type: 'pen',
|
|
|
+ icon: iconNote,
|
|
|
+ name: '批注'
|
|
|
+ })
|
|
|
+ }>
|
|
|
+ <img src={iconNote} />
|
|
|
+ <p>批注</p>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class={styles.btnItem}
|
|
|
+ onClick={() =>
|
|
|
+ openStudyTool({
|
|
|
+ type: 'whiteboard',
|
|
|
+ icon: iconWhite,
|
|
|
+ name: '白板'
|
|
|
+ })
|
|
|
+ }>
|
|
|
+ <img src={iconWhite} />
|
|
|
+ <p>白板</p>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class={styles.btnItem}
|
|
|
+ onClick={() => startShowModal('beatIcon')}>
|
|
|
+ <img src={iconToneIcon} />
|
|
|
+ <p>节拍器</p>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class={styles.btnItem}
|
|
|
+ onClick={() => startShowModal('toneIcon')}>
|
|
|
+ <img src={iconSetTime} />
|
|
|
+ <p>调音器</p>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class={styles.btnItem}
|
|
|
+ onClick={() => startShowModal('setTimeIcon')}>
|
|
|
+ <img src={iconBeatIcon} />
|
|
|
+ <p>计时器</p>
|
|
|
+ </div>
|
|
|
+ </NSpace>
|
|
|
+ <NSpace class={styles.switchSpace}>
|
|
|
+ <div
|
|
|
+ class={styles.btnItem}
|
|
|
+ onClick={() => (popupData.chapterOpen = true)}>
|
|
|
+ <img src={iconChange} />
|
|
|
+ <p>切换章节</p>
|
|
|
+ </div>
|
|
|
+ <div class={styles.btnItem} onClick={() => (popupData.open = true)}>
|
|
|
+ <img src={iconMenu} />
|
|
|
+ <p>资源列表</p>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class={[
|
|
|
+ styles.btnItem,
|
|
|
+ popupData.activeIndex === 0 ? styles.btnsDisabled : ''
|
|
|
+ ]}
|
|
|
+ onClick={() => {
|
|
|
+ if (popupData.activeIndex === 0) return;
|
|
|
+ handlePreAndNext('up');
|
|
|
+ }}>
|
|
|
+ <img src={iconUp} />
|
|
|
+ <p>上一个</p>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class={[
|
|
|
+ styles.btnItem,
|
|
|
+ popupData.activeIndex === data.itemList.length - 1
|
|
|
+ ? styles.btnsDisabled
|
|
|
+ : ''
|
|
|
+ ]}
|
|
|
+ onClick={() => {
|
|
|
+ if (popupData.activeIndex === data.itemList.length - 1) return;
|
|
|
+ handlePreAndNext('down');
|
|
|
+ }}>
|
|
|
+ <img src={iconDown} />
|
|
|
+ <p>下一个</p>
|
|
|
+ </div>
|
|
|
+ </NSpace>
|
|
|
</div>
|
|
|
|
|
|
{/* 显示列表 */}
|
|
|
@@ -1358,70 +1045,6 @@ export default defineComponent({
|
|
|
/>
|
|
|
</NModal>
|
|
|
|
|
|
- {/* <NModal transformOrigin='center'
|
|
|
- v-model:show={data.homeworkStatus}
|
|
|
- preset="card"
|
|
|
- class={[styles.attendClassModal]}
|
|
|
- closable={false}
|
|
|
- maskClosable={false}
|
|
|
- title={' '}>
|
|
|
- <div class={styles.workContainer}>
|
|
|
- <h2>作业布置成功</h2>
|
|
|
- <p>倒</p>
|
|
|
- </div>
|
|
|
- </NModal> */}
|
|
|
- {showGuide.value ? <Attentguide></Attentguide> : null}
|
|
|
-
|
|
|
- <NPopover
|
|
|
- raw
|
|
|
- trigger="click"
|
|
|
- show-arrow={false}
|
|
|
- ref={NPopoverRef}
|
|
|
- style="--n-box-shadow: none;"
|
|
|
- placement={directionType.value as 'left' | 'right'}
|
|
|
- v-slots={{
|
|
|
- trigger: () => (
|
|
|
- // 首页不显示工具箱
|
|
|
- <img
|
|
|
- // src={isDragIng.value ? dragingBoxIcon : toolbox}
|
|
|
- src={toolbox}
|
|
|
- id="moveNPopoverA"
|
|
|
- style={{
|
|
|
- display: ['/', '/home'].includes(route.path)
|
|
|
- ? 'none'
|
|
|
- : 'block'
|
|
|
- }}
|
|
|
- class={[
|
|
|
- styles.toolboxImg,
|
|
|
- 'moveNPopoverA',
|
|
|
- isDragIng.value ? styles.isDragIng : ''
|
|
|
- ]}
|
|
|
- alt=""
|
|
|
- />
|
|
|
- )
|
|
|
- }}>
|
|
|
- <div class={styles.booxToolWrap}>
|
|
|
- <div
|
|
|
- class={styles.booxToolItem}
|
|
|
- onClick={() => startShowModal('beatIcon')}>
|
|
|
- <img src={beatIcon} alt="" />
|
|
|
- 节拍器
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class={styles.booxToolItem}
|
|
|
- onClick={() => startShowModal('toneIcon')}>
|
|
|
- <img src={toneIcon} alt="" />
|
|
|
- 调音器
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class={styles.booxToolItem}
|
|
|
- onClick={() => startShowModal('setTimeIcon')}>
|
|
|
- <img src={setTimeIcon} alt="" />
|
|
|
- 计时器
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </NPopover>
|
|
|
-
|
|
|
<NModal
|
|
|
transformOrigin="center"
|
|
|
class={['modalTitle background']}
|
