ppt上课-全屏演讲者

点赞修复

src/renderer/src/AixPPTist/src/api/classcourse.ts

@@ -41,21 +41,12 @@ export class Classcourse {
       this.classcourse = classcourse // 课堂信息
       this.id = classcourse.id // 课堂id
       // 如果课堂信息有paging，则更新当前页码
-      const { paging } = classcourse
+      const { paging, cartoonTimes } = classcourse
       const isPaging = !!paging || paging === 0
-      if (isPaging) {
+      // 如果课堂信息有paging，则更新动画播放状态
-        await this.sleep(200)
+      const isAnim = !!cartoonTimes || cartoonTimes === 0
-        emitter.emit('useExecPlay', {key:'turnSlideToIndex', paging})
+      if (isPaging) slidesStore.updateSlideIndex(paging)
-        await this.sleep(1000)
+      if (isAnim) slidesStore.updateAnimationIndex(cartoonTimes+1)
-        // 如果课堂信息有paging，则更新动画播放状态
-        const isAnim = !!classcourse.cartoonTimes
-        if (isAnim) { // 动画播放
-          for (let i = 0; i < classcourse.cartoonTimes; i++) {
-            // 异步执行动画
-            emitter.emit('useExecPlay', {key:'execNext', isAsync:true})
-          }
-        }
-      }
       // 课堂信息-状态管理
       classcourseStore.setClasscourse(classcourse)
       // 待上课提示

src/renderer/src/AixPPTist/src/api/upvote.ts

@@ -0,0 +1,33 @@
+/**
+ * 点赞组件-相关
+ */
+export default class Upvote {
+  instance: any = null // 自身实例
+  upvoteRef: any = null // 点赞组件
+  constructor(elRef?: any) {
+    if(!!elRef) this.upvoteRef = elRef // 点赞组件
+    if (!Upvote.Instance) {
+      Upvote.Instance = this
+    }
+    return Upvote.Instance
+  }
+
+  // 初始化
+  init(elRef) {
+    if(!!elRef) this.upvoteRef = elRef // 点赞组件
+    return this
+  }
+  // 打开点赞或者疑问 1点赞 2疑问
+  trigger(type) {
+    this.upvoteRef?.value?.trigger?.(type)
+    return this
+  }
+  // 静态方法-初始化
+  static init(elRef) {
+    return new Upvote(elRef)
+  }
+  // 静态方法-打开点赞或者疑问 1点赞 2疑问
+  static trigger(type) {
+    return new Upvote().trigger(type)
+  }
+}

src/renderer/src/AixPPTist/src/api/watcher.ts

@@ -13,6 +13,7 @@ import msgUtils from '@/plugins/modal' // 消息工具
 import { Homework } from './index' // api-作业相关
 import emitter from '@/utils/mitt' //mitt 事件总线
 import useExecPlay from '../views/Screen/hooks/useExecPlay' // 播放控制
+import hooksUpvote from './upvote' // 点赞-工具
 
 /**
  * @description 监听器
@@ -22,7 +23,7 @@ export default () => {
   const classcourseStore = store.useClasscourseStore() // 课堂信息-状态管理
   const resource = sessionStore.get('curr.resource') // apt 资源
   const smarttalk = sessionStore.get('curr.smarttalk') // 备课资源
-  const execPlay = useExecPlay() // 播放控制
+  const { execNext, turnPrevSlide } = useExecPlay()
   // 监听幻灯片内容变化
   watch(() => slidesStore.slides, (newVal, oldVal) => {
     PPTApi.updateSlides(newVal, oldVal) // 更新幻灯片内容
@@ -98,9 +99,8 @@ export default () => {
         case MsgEnum.HEADS.MSG_slideFlapping: // 幻灯片翻页
           const slideIndex = content?.current || 0
           const type = content?.animation
-          // if (type === 'Nextsteps') emitter.emit('useExecPlay', 'execNext') // 下一步
+          if (type === 'Nextsteps') execNext(true) // 下一步-异步动画
-          if (type === 'Nextsteps') emitter.emit('useExecPlay', {key:'execNext', isAsync:true}) // 下一步
+          else if (type === 'Previoustep') turnPrevSlide() // 上一步清空-动画
-          else if (type === 'Previoustep') emitter.emit('useExecPlay', 'turnPrevSlide') // 上一步清空-动画
           else slidesStore.updateSlideIndex(slideIndex) // 更新幻灯片下标
           break
         case MsgEnum.HEADS.MSG_homework: // 作业|活动-布置
@@ -111,10 +111,12 @@ export default () => {
           close()
           break
         case MsgEnum.HEADS.MSG_dz: // 点赞
-          emitter.emit('upvoteTrigger', 1)
+          // emitter.emit('upvoteTrigger', 1)
+          hooksUpvote.trigger(1)
           break
         case MsgEnum.HEADS.MSG_yh: // 疑惑
-          emitter.emit('upvoteTrigger', 2)
+          // emitter.emit('upvoteTrigger', 2)
+          hooksUpvote.trigger(2)
           break
         case MsgEnum.HEADS.MSG_0010: // 备用
           break

src/renderer/src/AixPPTist/src/store/classcourse.ts

@@ -3,16 +3,21 @@ import type { Classcourse } from '../api/types'
 
 export interface ClasscourseState {
   classcourse: Classcourse | any, // 课堂信息
+  isEmit: boolean, // 是否加载监听事件(动画播放)
 }
 
 export const useClasscourseStore = defineStore('classcourse', {
   state: (): ClasscourseState => ({
     classcourse: null, // 课堂信息
+    isEmit: false, // 是否加载监听事件(动画播放)
   }),
 
   actions: {
     setClasscourse(classcourse: Classcourse) {
       this.classcourse = classcourse
     },
+    setIsEmit(isEmit: boolean) {
+      this.isEmit = isEmit
+    },
   },
 })

src/renderer/src/AixPPTist/src/store/slides.ts

@@ -33,7 +33,8 @@ export interface SlidesState {
   slides: Slide[]
   slideIndex: number
   viewportSize: number
-  viewportRatio: number
+  viewportRatio: number,
+  animationIndex: number, // 不是从0开始
   workList:Object[],
   workItem:Object[],
 }
@@ -46,6 +47,7 @@ export const useSlidesStore = defineStore('slides', {
     slideIndex: 0, // 当前页面索引
     viewportSize: 1000, // 可视区域宽度基数
     viewportRatio: 0.5625, // 可视区域比例，默认16:9
+    animationIndex: 0, // 不是从0开始
     workList:[],// 活动的列表
     workItem:[],// 获取到的所有pptlist
   }),
@@ -206,6 +208,9 @@ export const useSlidesStore = defineStore('slides', {
     updateSlideIndex(index: number) {
       this.slideIndex = index
     },
+    updateAnimationIndex(index: number) {
+      this.animationIndex = index
+    },
   
     addElement(element: PPTElement | PPTElement[]) {
       const elements = Array.isArray(element) ? element : [element]

src/renderer/src/AixPPTist/src/views/Screen/BaseView.vue

@@ -30,14 +30,10 @@
       @close="timerlVisible = false" 
     />
 
-    <div class="tools-left">
+    <div class="tools-left" v-if="!classcourse">
       <IconLeftTwo class="tool-btn" theme="two-tone" :fill="['#111', '#fff']" @click="execPrev()" />
       <IconRightTwo class="tool-btn" theme="two-tone" :fill="['#111', '#fff']" @click="execNext()" />
     </div>
-    <!-- 点赞组件 -->
-    <div style="z-index: 999;position: absolute;top:10px">
-      <upvote-vue ref="upvoteRef"  type="2"></upvote-vue>
-    </div>
     <div 
       class="tools-right" :class="{ 'visible': rightToolsVisible }" 
       @mouseleave="rightToolsVisible = false"
@@ -59,7 +55,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref , watchEffect} from 'vue'
+import { ref , watchEffect, onMounted, onUnmounted} from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore ,useScreenStore, useClasscourseStore} from '../../store'
 import type { ContextmenuItem } from '../../components/Contextmenu/types'
@@ -73,18 +69,15 @@ import ScreenSlideList from './ScreenSlideList.vue'
 import SlideThumbnails from './SlideThumbnails.vue'
 import WritingBoardTool from './WritingBoardTool.vue'
 import CountdownTimer from './CountdownTimer.vue'
-import upvoteVue from '@/views/tool/components/upvote.vue' // 点赞-子组件
 import emitter from '@/utils/mitt';
 import Chat from '../../api/chat' // 聊天
-// import * as emits from './hooks/emitter'
-// emits.init() // 初始化事件
 
 const props = defineProps<{
   changeViewMode: (mode: 'base' | 'presenter') => void
 }>()
 
 const { slides, slideIndex } = storeToRefs(useSlidesStore())
-const { classcourse } = storeToRefs(useClasscourseStore()) // 课堂信息
+const { classcourse, isEmit } = storeToRefs(useClasscourseStore()) // 课堂信息
 
 const {
   autoPlayTimer,
@@ -105,26 +98,6 @@ const {
   execNext,
   animationIndex,
 } = useExecPlay()
-// zdg: 使用方法才生效
-const execPlay = {
-  autoPlayTimer,
-  autoPlay,
-  closeAutoPlay,
-  autoPlayInterval,
-  setAutoPlayInterval,
-  loopPlay,
-  setLoopPlay,
-  mousewheelListener,
-  touchStartListener,
-  touchEndListener,
-  turnPrevSlide,
-  turnNextSlide,
-  turnSlideToIndex,
-  turnSlideToId,
-  execPrev,
-  execNext,
-  animationIndex,
-}
 const { slideWidth, slideHeight } = useSlideSize()
 const { exitScreening } = useScreening()
 const { fullscreenState, manualExitFullscreen } = useFullscreen()
@@ -135,7 +108,6 @@ const writingBoardToolVisible = ref(false)
 const timerlVisible = ref(false)
 const slideThumbnailModelVisible = ref(false)
 const laserPen = ref(false)
-const upvoteRef = ref(null)
 const screenStore =useScreenStore()
 const contextmenus = (): ContextmenuItem[] => {
   return [
@@ -226,25 +198,6 @@ const exitCourse = async () => {
   exitScreening() // 结束放映
 }
 
-// 打开点赞或者疑问 1点赞 2疑问
-emitter.on('upvoteTrigger', (type) => {
-  upvoteRef.value?.trigger(type)
-});
-
-// 监听
-emitter.on('useExecPlay', (data: string|any) => {
-  console.log('useExecPlay', data)
-  if (!data) throw new Error('参数错误')
-  if (typeof data === 'string') { // 字符串
-    if (execPlay[data]) execPlay[data]()
-    else throw new Error('方法不存在')
-  } else { // 对象
-    const { key, ...params } = data || {}
-    const paramsArray = Object.values(params)
-    if (execPlay[key]) execPlay[key](...paramsArray)
-    else throw new Error('方法不存在')
-  }
-})
 </script>
 
 <style lang="scss" scoped>

src/renderer/src/AixPPTist/src/views/Screen/PresenterView.vue

@@ -78,7 +78,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore, useClasscourseStore } from '../../store'
 import type { ContextmenuItem } from '../../components/Contextmenu/types'
@@ -95,6 +95,7 @@ import ScreenSlideList from './ScreenSlideList.vue'
 import WritingBoardTool from './WritingBoardTool.vue'
 import CountdownTimer from './CountdownTimer.vue'
 import Divider from '../../components/Divider.vue'
+import emitter from '@/utils/mitt';
 import Chat from '../../api/chat' // 聊天
 
 const props = defineProps<{
@@ -102,7 +103,7 @@ const props = defineProps<{
 }>()
 
 const { slides, slideIndex, viewportRatio, currentSlide } = storeToRefs(useSlidesStore())
-const { classcourse } = storeToRefs(useClasscourseStore()) // 课堂信息
+const { classcourse, isEmit } = storeToRefs(useClasscourseStore()) // 课堂信息
 
 const slideListWrapRef = ref<HTMLElement>()
 const thumbnailsRef = ref<HTMLElement>()
@@ -120,7 +121,6 @@ const {
   turnSlideToId,
   animationIndex,
 } = useExecPlay()
-
 const { slideWidth, slideHeight } = useSlideSize(slideListWrapRef)
 const { exitScreening } = useScreening()
 const { slidesLoadLimit } = useLoadSlides()
@@ -210,6 +210,7 @@ const contextmenus = (): ContextmenuItem[] => {
     },
   ]
 }
+
 </script>
 
 <style lang="scss" scoped>

src/renderer/src/AixPPTist/src/views/Screen/hooks/useExecPlay.ts

@@ -5,14 +5,15 @@ import { useSlidesStore, useClasscourseStore } from '../../../store'
 import { KEYS } from '../../../configs/hotkey'
 import { ANIMATION_CLASS_PREFIX } from '../../../configs/animation'
 import message from '../../../utils/message'
+import emitter from '@/utils/mitt';
 
 export default () => {
   const slidesStore = useSlidesStore()
   const classcourseStore = useClasscourseStore() // 课堂信息-状态管理
-  const { slides, slideIndex, formatedAnimations } = storeToRefs(slidesStore)
+  const { slides, slideIndex, formatedAnimations, animationIndex } = storeToRefs(slidesStore)
 
   // 当前页的元素动画执行到的位置
-  const animationIndex = ref(0)
+  // const animationIndex = ref(0)
 
   // 动画执行状态
   const inAnimation = ref(false)
@@ -230,8 +231,8 @@ export default () => {
     ) turning(e, 'next')
   }
 
-  onMounted(() => document.addEventListener('keydown', keydownListener))
+  onMounted(() => {document.addEventListener('keydown', keydownListener)})
-  onUnmounted(() => document.removeEventListener('keydown', keydownListener))
+  onUnmounted(() => {document.removeEventListener('keydown', keydownListener)})
 
   // 切换到上一张/上一张幻灯片（无视元素的入场动画）
   const turnPrevSlide = () => {

src/renderer/src/AixPPTist/src/views/Screen/index.vue

@@ -2,6 +2,10 @@
   <div class="pptist-screen">
     <BaseView :changeViewMode="changeViewMode" v-if="viewMode === 'base'" />
     <PresenterView :changeViewMode="changeViewMode" v-else-if="viewMode === 'presenter'" />
+    <!-- 点赞组件 -->
+    <upvote-vue ref="upvoteRef"  type="2"></upvote-vue>
+    <!-- <div style="z-index: 999;position: absolute;top:10px">
+    </div> -->
   </div>
 </template>
 
@@ -9,9 +13,11 @@
 import { onMounted, onUnmounted, ref } from 'vue'
 import { KEYS } from '../../configs/hotkey'
 import useScreening from '../../hooks/useScreening'
+import hooksUpvote from '../../api/upvote' // 点赞-工具
 
 import BaseView from './BaseView.vue'
 import PresenterView from './PresenterView.vue'
+import upvoteVue from '@/views/tool/components/upvote.vue' // 点赞-子组件
 
 const viewMode = ref<'base' | 'presenter'>('base')
 
@@ -20,6 +26,8 @@ const changeViewMode = (mode: 'base' | 'presenter') => {
 }
 
 const { exitScreening } = useScreening()
+const upvoteRef = ref(null)
+hooksUpvote.init(upvoteRef) // 初始化点赞
 
 // 快捷键退出放映
 const keydownListener = (e: KeyboardEvent) => {

src/renderer/src/views/tool/components/upvote.vue

@@ -248,6 +248,8 @@ defineExpose({ trigger })
   position: fixed;
   // height: 90vh;
   // border: 1px solid;
+  z-index: 99;
+  pointer-events: none;
   inset: auto auto 3em 1em;
   display: flex;
   gap: 10px;