zdg_dev #149
|
@ -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)
|
||||
// 待上课提示
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
}
|
|
@ -11,8 +11,9 @@ import ChatWs from '@/plugins/socket' // 聊天socket
|
|||
import Classcourse from './classcourse' // 课程相关
|
||||
import msgUtils from '@/plugins/modal' // 消息工具
|
||||
import { Homework } from './index' // api-作业相关
|
||||
import emitter from '@/utils/mitt' //mitt 事件总线
|
||||
// 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,10 @@ export default () => {
|
|||
close()
|
||||
break
|
||||
case MsgEnum.HEADS.MSG_dz: // 点赞
|
||||
emitter.emit('upvoteTrigger', 1)
|
||||
hooksUpvote.trigger(1)
|
||||
break
|
||||
case MsgEnum.HEADS.MSG_yh: // 疑惑
|
||||
emitter.emit('upvoteTrigger', 2)
|
||||
hooksUpvote.trigger(2)
|
||||
break
|
||||
case MsgEnum.HEADS.MSG_0010: // 备用
|
||||
break
|
||||
|
|
|
@ -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
|
||||
},
|
||||
},
|
||||
})
|
|
@ -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]
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 = () => {
|
||||
|
|
|
@ -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) => {
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue