From 1d10dff4dc1ed2d83988bb024161437875f92bf9 Mon Sep 17 00:00:00 2001 From: zdg Date: Fri, 27 Dec 2024 15:21:55 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96ppt=E4=B8=8A=E8=AF=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AixPPTist/src/views/Screen/BaseView.vue | 1 + .../src/views/Screen/hooks/useExecPlay.ts | 98 +++++++++++-------- .../views/prepare/container/class-start.vue | 8 +- 3 files changed, 62 insertions(+), 45 deletions(-) diff --git a/src/renderer/src/AixPPTist/src/views/Screen/BaseView.vue b/src/renderer/src/AixPPTist/src/views/Screen/BaseView.vue index df33b5c..4b747bd 100644 --- a/src/renderer/src/AixPPTist/src/views/Screen/BaseView.vue +++ b/src/renderer/src/AixPPTist/src/views/Screen/BaseView.vue @@ -104,6 +104,7 @@ const { execPrev, execNext, animationIndex, + turning, } = useExecPlay() const { slideWidth, slideHeight } = useSlideSize() const { exitScreening } = useScreening() diff --git a/src/renderer/src/AixPPTist/src/views/Screen/hooks/useExecPlay.ts b/src/renderer/src/AixPPTist/src/views/Screen/hooks/useExecPlay.ts index cb59465..abccbfd 100644 --- a/src/renderer/src/AixPPTist/src/views/Screen/hooks/useExecPlay.ts +++ b/src/renderer/src/AixPPTist/src/views/Screen/hooks/useExecPlay.ts @@ -28,53 +28,56 @@ export default (isLoader?: boolean = true) => { // 执行元素动画 isAsync 为 true 时，异步执行，否则同步执行 const runAnimation = (isAsync: boolean) => { - // 正在执行动画时，禁止其他新的动画开始 - if (inAnimation.value && !isAsync) return + return new Promise((resolve, reject) => { + // 正在执行动画时，禁止其他新的动画开始 + if (inAnimation.value && !isAsync) return resolve() - const { animations, autoNext } = formatedAnimations.value[animationIndex.value] - animationIndex.value += 1 + const { animations, autoNext } = formatedAnimations.value[animationIndex.value] + animationIndex.value += 1 - // 标记开始执行动画 - inAnimation.value = true + // 标记开始执行动画 + inAnimation.value = true - let endAnimationCount = 0 + let endAnimationCount = 0 - // 依次执行该位置中的全部动画 - for (const animation of animations) { - const elRef: HTMLElement | null = document.querySelector(`#screen-element-${animation.elId} [class^=base-element-]`) - if (!elRef) { - endAnimationCount += 1 - continue - } - - const animationName = `${ANIMATION_CLASS_PREFIX}${animation.effect}` - - // 执行动画前先清除原有的动画状态（如果有） - elRef.style.removeProperty('--animate-duration') - for (const classname of elRef.classList) { - if (classname.indexOf(ANIMATION_CLASS_PREFIX) !== -1) elRef.classList.remove(classname, `${ANIMATION_CLASS_PREFIX}animated`) - } - - // 执行动画 - elRef.style.setProperty('--animate-duration', `${animation.duration}ms`) - elRef.classList.add(animationName, `${ANIMATION_CLASS_PREFIX}animated`) - - // 执行动画结束，将“退场”以外的动画状态清除 - const handleAnimationEnd = () => { - if (animation.type !== 'out') { - elRef.style.removeProperty('--animate-duration') - elRef.classList.remove(animationName, `${ANIMATION_CLASS_PREFIX}animated`) + // 依次执行该位置中的全部动画 + for (const animation of animations) { + const elRef: HTMLElement | null = document.querySelector(`#screen-element-${animation.elId} [class^=base-element-]`) + if (!elRef) { + endAnimationCount += 1 + continue } - // 判断该位置上的全部动画都已经结束后，标记动画执行完成，并尝试继续向下执行（如果有需要） - endAnimationCount += 1 - if (endAnimationCount === animations.length) { - inAnimation.value = false - if (autoNext) runAnimation() + const animationName = `${ANIMATION_CLASS_PREFIX}${animation.effect}` + + // 执行动画前先清除原有的动画状态（如果有） + elRef.style.removeProperty('--animate-duration') + for (const classname of elRef.classList) { + if (classname.indexOf(ANIMATION_CLASS_PREFIX) !== -1) elRef.classList.remove(classname, `${ANIMATION_CLASS_PREFIX}animated`) } + + // 执行动画 + elRef.style.setProperty('--animate-duration', `${animation.duration}ms`) + elRef.classList.add(animationName, `${ANIMATION_CLASS_PREFIX}animated`) + + // 执行动画结束，将“退场”以外的动画状态清除 + const handleAnimationEnd = async() => { + if (animation.type !== 'out') { + elRef.style.removeProperty('--animate-duration') + elRef.classList.remove(animationName, `${ANIMATION_CLASS_PREFIX}animated`) + } + + // 判断该位置上的全部动画都已经结束后，标记动画执行完成，并尝试继续向下执行（如果有需要） + endAnimationCount += 1 + if (endAnimationCount === animations.length) { + inAnimation.value = false + if (autoNext) await runAnimation() + resolve() // 执行完成 + } + } + elRef.addEventListener('animationend', handleAnimationEnd, { once: true }) } - elRef.addEventListener('animationend', handleAnimationEnd, { once: true }) - } + }) } if (isLoader) { // 加载相关钩子 onMounted(() => { @@ -147,7 +150,7 @@ export default (isLoader?: boolean = true) => { } inAnimation.value = false } - const execNext = (isAsync: boolean) => { + const execNext = async(isAsync: boolean) => { if (formatedAnimations.value.length && animationIndex.value < formatedAnimations.value.length) { runAnimation(isAsync) } @@ -216,9 +219,17 @@ export default (isLoader?: boolean = true) => { // 向上翻页/向下翻页 const turning = async (e, type) => { e.preventDefault() // 阻止默认事件 - if (type === 'prev') execPrev() - else if (type === 'next') execNext() - if (classcourseStore.classcourse) { // 上课中 + window.scrollTo(0, 0) // 滚动到顶部 + const isCourse = !!classcourseStore.classcourse + if (type === 'prev') { + if (!isCourse) execPrev() // 上一步 + else { // 上课状态: 上一步 动作变成 上一页 + const current = slideIndex.value + if (current <= 0) return throttleMassage('已经是第一页了') + turnSlideToIndex(current - 1) // 翻页: 上一页 + } + } else if (type === 'next') execNext() + if (isCourse) { // 上课中 const current = slideIndex.value const animationSteps = animationIndex.value const animation = type == 'next'?'Nextsteps':'Previoustep' @@ -285,5 +296,6 @@ export default (isLoader?: boolean = true) => { execPrev, execNext, animationIndex, + turning, } } diff --git a/src/renderer/src/views/prepare/container/class-start.vue b/src/renderer/src/views/prepare/container/class-start.vue index 6795990..a9b602a 100644 --- a/src/renderer/src/views/prepare/container/class-start.vue +++ b/src/renderer/src/views/prepare/container/class-start.vue @@ -364,8 +364,12 @@ const openPublicScreen = (classcourse, isPublic) => { console.log('打开公屏', classcourse) if (!dt.ctCourse) { // 新开课需要发送消息-继续上课不需要直接打开 // 发送app端待开课消息 - const data = { id: classcourse.id } - ChatWs.sendMsg(MsgEnum.HEADS.MSG_0000, data, {}, ChatWs.TYPES.single, userStore.id) + const TeacherId = userStore.id + const data = { id: classcourse.id, TeacherId } + const head = isPublic ? MsgEnum.HEADS.MSG_open : MsgEnum.HEADS.MSG_0000 // 消息头 + const type = isPublic ? ChatWs.TYPES.group : ChatWs.TYPES.single // 消息类型 + const toId = isPublic ? classcourse.timgroupid : TeacherId // 消息接收人 + ChatWs.sendMsg(head, data, {}, type, toId) } // 缓存当前资源信息 const resource = toRaw(myClassActive.value)