ppt上课-全屏演讲者

点赞修复
This commit is contained in:
zdg 2024-12-18 15:59:45 +08:00
parent c33c0d923e
commit b0fca4ad9b
10 changed files with 79 additions and 78 deletions

View File

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

View File

@ -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)
}
}

View File

@ -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') emitter.emit('useExecPlay', {key:'execNext', isAsync:true}) // 下一步
else if (type === 'Previoustep') emitter.emit('useExecPlay', 'turnPrevSlide') // 上一步清空-动画
if (type === 'Nextsteps') execNext(true) // 下一步-异步动画
else if (type === 'Previoustep') 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

View File

@ -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
},
},
})

View File

@ -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]

View File

@ -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>

View File

@ -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>

View File

@ -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))
onUnmounted(() => document.removeEventListener('keydown', keydownListener))
onMounted(() => {document.addEventListener('keydown', keydownListener)})
onUnmounted(() => {document.removeEventListener('keydown', keydownListener)})
// 切换到上一张/上一张幻灯片(无视元素的入场动画)
const turnPrevSlide = () => {

View File

@ -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) => {

View File

@ -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;