This commit is contained in:
zdg 2024-12-17 17:34:47 +08:00
parent cf7f985020
commit 0d38a12094
7 changed files with 95 additions and 51 deletions

View File

@ -4,6 +4,7 @@
import ChatWs from '@/plugins/socket' // 聊天socket import ChatWs from '@/plugins/socket' // 聊天socket
import { sessionStore } from '@/utils/store' // electron-store 状态管理 import { sessionStore } from '@/utils/store' // electron-store 状态管理
import * as API_classcourse from '@/api/teaching/classcourse' // 后端api
export default () => { export default () => {
const classcourse = sessionStore.get('curr.classcourse') // 课堂信息 const classcourse = sessionStore.get('curr.classcourse') // 课堂信息
@ -12,7 +13,7 @@ export default () => {
// 下课消息 // 下课消息
const exitCourse = async() => { const exitCourse = async() => {
if(!timgroupid) throw new Error('未获取到群组ID') if(!timgroupid) throw new Error('未获取到群组ID')
await updateClasscourse({ id: classcourse.id, status: 'closed' }) await API_classcourse.updateClasscourse({ id: classcourse.id, status: 'closed' })
return ChatWs.closedCourse(timgroupid) return ChatWs.closedCourse(timgroupid)
} }
return { return {

View File

@ -7,13 +7,13 @@ import { sessionStore } from '@/utils/store' // electron-store 状态管理
import * as useStore from '../store' // pptist-状态管理 import * as useStore from '../store' // pptist-状态管理
import ChatWs from '@/plugins/socket' // 聊天socket import ChatWs from '@/plugins/socket' // 聊天socket
import msgUtils from '@/plugins/modal' // 消息工具 import msgUtils from '@/plugins/modal' // 消息工具
import useExecPlay from '../views/Screen/hooks/useExecPlay' // 播放控制 import emitter from '@/utils/mitt' //mitt 事件总线
import { nextTick } from 'vue'
const slidesStore = useStore.useSlidesStore() // 幻灯片-状态管理 const slidesStore = useStore.useSlidesStore() // 幻灯片-状态管理
const screenStore = useStore.useScreenStore() // 全屏-状态管理 const screenStore = useStore.useScreenStore() // 全屏-状态管理
const classcourseStore = useStore.useClasscourseStore() // 课堂信息-状态管理 const classcourseStore = useStore.useClasscourseStore() // 课堂信息-状态管理
const classcourse = sessionStore.get('curr.classcourse') // 课堂信息 const classcourse = sessionStore.get('curr.classcourse') // 课堂信息
const execPlay = useExecPlay() // 播放控制
export class Classcourse { export class Classcourse {
msgObj:ElMessageBox = null // 提示消息对象 msgObj:ElMessageBox = null // 提示消息对象
@ -23,10 +23,12 @@ export class Classcourse {
constructor() { constructor() {
this.load() this.load()
} }
// 延时
sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
/** /**
* @description * @description
*/ */
load() { async load() {
console.log('classcourse-load', classcourse) console.log('classcourse-load', classcourse)
// 打开全屏 // 打开全屏
const isCourse = !!classcourse const isCourse = !!classcourse
@ -39,13 +41,22 @@ export class Classcourse {
this.classcourse = classcourse // 课堂信息 this.classcourse = classcourse // 课堂信息
this.id = classcourse.id // 课堂id this.id = classcourse.id // 课堂id
// 如果课堂信息有paging则更新当前页码 // 如果课堂信息有paging则更新当前页码
const isPaging = !!classcourse.paging const { paging } = classcourse
if (isPaging) slidesStore.updateSlideIndex(classcourse.paging) const isPaging = !!paging || paging === 0
if (isPaging) {
console.log('更新当前页码', paging)
await this.sleep(200)
emitter.emit('useExecPlay', {key:'turnSlideToIndex', paging})
await this.sleep(1000)
// 如果课堂信息有paging则更新动画播放状态 // 如果课堂信息有paging则更新动画播放状态
const isAnim = !!classcourse.cartoonTimes const isAnim = !!classcourse.cartoonTimes
if (isAnim) { // 动画播放 if (isAnim) { // 动画播放
for (let i = 0; i <= classcourse.cartoonTimes; i++) { console.log('动画播放1', classcourse)
execPlay.runAnimation(true) // 异步执行动画 for (let i = 0; i < classcourse.cartoonTimes; i++) {
console.log('动画播放2', i)
// 异步执行动画
emitter.emit('useExecPlay', {key:'execNext', isAsync:true})
}
} }
} }
// 课堂信息-状态管理 // 课堂信息-状态管理

View File

@ -37,7 +37,8 @@ export default () => {
// 监听幻灯片下标变化 // 监听幻灯片下标变化
watch(() => slidesStore.slideIndex, (newVal, oldVal) => { watch(() => slidesStore.slideIndex, (newVal, oldVal) => {
PPTApi.updateWorkList() if (!!Classcourse.id) return // 上课状态,不更新右侧作业列表
PPTApi.updateWorkList() // 更新作业列表
}) })
// 消息监听ws // 消息监听ws
@ -91,7 +92,8 @@ export default () => {
case MsgEnum.HEADS.MSG_slideFlapping: // 幻灯片翻页 case MsgEnum.HEADS.MSG_slideFlapping: // 幻灯片翻页
const slideIndex = content?.current || 0 const slideIndex = content?.current || 0
const type = content?.animation const type = content?.animation
if (type === 'Nextsteps') emitter.emit('useExecPlay', 'execNext') // 下一步 // 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') // 上一步清空-动画 else if (type === 'Previoustep') emitter.emit('useExecPlay', 'turnPrevSlide') // 上一步清空-动画
else slidesStore.updateSlideIndex(slideIndex) // 更新幻灯片下标 else slidesStore.updateSlideIndex(slideIndex) // 更新幻灯片下标
break break
@ -122,5 +124,4 @@ export default () => {
window.close() // 关闭窗口 window.close() // 关闭窗口
}, 1000) }, 1000)
} }
} }

View File

@ -52,7 +52,7 @@
<IconOffScreenOne class="tool-btn" v-tooltip="'退出全屏'" v-if="fullscreenState" @click="manualExitFullscreen()" /> <IconOffScreenOne class="tool-btn" v-tooltip="'退出全屏'" v-if="fullscreenState" @click="manualExitFullscreen()" />
<IconFullScreenOne class="tool-btn" v-tooltip="'进入全屏'" v-else @click="enterFullscreen()" /> <IconFullScreenOne class="tool-btn" v-tooltip="'进入全屏'" v-else @click="enterFullscreen()" />
<IconPower class="tool-btn" v-tooltip="'结束放映'" @click="exitScreening()" /> <IconPower class="tool-btn" v-tooltip="'结束放映'" @click="exitScreening()" />
<IconPower class="tool-btn" v-if="chat.groupid" v-tooltip="'结束课堂'" @click="exitCourse()" /> <IconPower class="tool-btn close" v-if="chat.groupid" v-tooltip="'结束课堂'" @click="exitCourse()" />
</div> </div>
</div> </div>
</div> </div>
@ -61,7 +61,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref , watchEffect} from 'vue' import { ref , watchEffect} from 'vue'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import { useSlidesStore ,useScreenStore} from '../../store' import { useSlidesStore ,useScreenStore, useClasscourseStore} from '../../store'
import type { ContextmenuItem } from '../../components/Contextmenu/types' import type { ContextmenuItem } from '../../components/Contextmenu/types'
import { enterFullscreen } from '../../utils/fullscreen' import { enterFullscreen } from '../../utils/fullscreen'
import useScreening from '../../hooks/useScreening' import useScreening from '../../hooks/useScreening'
@ -76,12 +76,15 @@ import CountdownTimer from './CountdownTimer.vue'
import upvoteVue from '@/views/tool/components/upvote.vue' // - import upvoteVue from '@/views/tool/components/upvote.vue' // -
import emitter from '@/utils/mitt'; import emitter from '@/utils/mitt';
import Chat from '../../api/chat' // import Chat from '../../api/chat' //
// import * as emits from './hooks/emitter'
// emits.init() //
const props = defineProps<{ const props = defineProps<{
changeViewMode: (mode: 'base' | 'presenter') => void changeViewMode: (mode: 'base' | 'presenter') => void
}>() }>()
const { slides, slideIndex } = storeToRefs(useSlidesStore()) const { slides, slideIndex } = storeToRefs(useSlidesStore())
const { classcourse } = storeToRefs(useClasscourseStore()) //
const { const {
autoPlayTimer, autoPlayTimer,
@ -102,6 +105,26 @@ const {
execNext, execNext,
animationIndex, animationIndex,
} = useExecPlay() } = 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 { slideWidth, slideHeight } = useSlideSize()
const { exitScreening } = useScreening() const { exitScreening } = useScreening()
const { fullscreenState, manualExitFullscreen } = useFullscreen() const { fullscreenState, manualExitFullscreen } = useFullscreen()
@ -207,39 +230,21 @@ const exitCourse = async () => {
emitter.on('upvoteTrigger', (type) => { emitter.on('upvoteTrigger', (type) => {
upvoteRef.value?.trigger(type) upvoteRef.value?.trigger(type)
}); });
// zdg: 使
const execPlay = { //
autoPlayTimer,
autoPlay,
closeAutoPlay,
autoPlayInterval,
setAutoPlayInterval,
loopPlay,
setLoopPlay,
mousewheelListener,
touchStartListener,
touchEndListener,
turnPrevSlide,
turnNextSlide,
turnSlideToIndex,
turnSlideToId,
execPrev,
execNext,
animationIndex,
}
emitter.on('useExecPlay', (data: string|any) => { emitter.on('useExecPlay', (data: string|any) => {
console.log('useExecPlay', data)
if (!data) throw new Error('参数错误') if (!data) throw new Error('参数错误')
if (typeof data === 'string') { // if (typeof data === 'string') { //
if (execPlay[data]) execPlay[data]() if (execPlay[data]) execPlay[data]()
else throw new Error('方法不存在') else throw new Error('方法不存在')
} else { // } else { //
const { method, ...params } = data || {} const { key, ...params } = data || {}
if (execPlay[method]) execPlay[method](...params) const paramsArray = Object.values(params)
if (execPlay[key]) execPlay[key](...paramsArray)
else throw new Error('方法不存在') else throw new Error('方法不存在')
} }
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -320,6 +325,9 @@ emitter.on('useExecPlay', (data: string|any) => {
& + .tool-btn { & + .tool-btn {
margin-left: 15px; margin-left: 15px;
} }
&.close{
color: #d14424;
}
} }
.page-number { .page-number {
font-size: 13px; font-size: 13px;

View File

@ -12,7 +12,7 @@
</div> </div>
<Divider class="divider" /> <Divider class="divider" />
<div class="tool-btn" @click="exitScreening()"><IconPower class="tool-icon" /><span>结束放映</span></div> <div class="tool-btn" @click="exitScreening()"><IconPower class="tool-icon" /><span>结束放映</span></div>
<div class="tool-btn" @click="exitCourse()" v-if="chat.groupid"><IconPower class="tool-icon" /><span>结束课堂</span></div> <div class="tool-btn close" @click="exitCourse()" v-if="chat.groupid"><IconPower class="tool-icon" /><span>结束课堂</span></div>
</div> </div>
<div class="content"> <div class="content">
@ -56,7 +56,7 @@
:class="{ 'active': index === slideIndex }" :class="{ 'active': index === slideIndex }"
v-for="(slide, index) in slides" v-for="(slide, index) in slides"
:key="slide.id" :key="slide.id"
@click="turnSlideToIndex(index)" @click="turnSlideTo(index, $event)"
> >
<ThumbnailSlide :slide="slide" :size="120 / viewportRatio" :visible="index < slidesLoadLimit" /> <ThumbnailSlide :slide="slide" :size="120 / viewportRatio" :visible="index < slidesLoadLimit" />
</div> </div>
@ -80,7 +80,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, nextTick, ref, watch } from 'vue' import { computed, nextTick, ref, watch } from 'vue'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import { useSlidesStore } from '../../store' import { useSlidesStore, useClasscourseStore } from '../../store'
import type { ContextmenuItem } from '../../components/Contextmenu/types' import type { ContextmenuItem } from '../../components/Contextmenu/types'
import { enterFullscreen } from '../../utils/fullscreen' import { enterFullscreen } from '../../utils/fullscreen'
import { parseText2Paragraphs } from '../../utils/textParser' import { parseText2Paragraphs } from '../../utils/textParser'
@ -102,6 +102,7 @@ const props = defineProps<{
}>() }>()
const { slides, slideIndex, viewportRatio, currentSlide } = storeToRefs(useSlidesStore()) const { slides, slideIndex, viewportRatio, currentSlide } = storeToRefs(useSlidesStore())
const { classcourse } = storeToRefs(useClasscourseStore()) //
const slideListWrapRef = ref<HTMLElement>() const slideListWrapRef = ref<HTMLElement>()
const thumbnailsRef = ref<HTMLElement>() const thumbnailsRef = ref<HTMLElement>()
@ -131,6 +132,13 @@ const currentSlideRemark = computed(() => {
return parseText2Paragraphs(currentSlide.value.remark || '无备注') return parseText2Paragraphs(currentSlide.value.remark || '无备注')
}) })
//
const turnSlideTo = (index: number, e: PointerEvent) => {
//
console.log('课堂信息', classcourse, index)
if (!!classcourse.value) return
turnSlideToIndex(index)
}
// //
const exitCourse = async () => { const exitCourse = async () => {
// console.log('', chat) // console.log('', chat)
@ -218,7 +226,7 @@ const contextmenus = (): ContextmenuItem[] => {
background-color: #fff; background-color: #fff;
border-right: solid 1px #eee; border-right: solid 1px #eee;
font-size: 12px; font-size: 12px;
margin: 20px 0; padding: 20px 0;
.tool-btn { .tool-btn {
display: flex; display: flex;
@ -234,6 +242,9 @@ const contextmenus = (): ContextmenuItem[] => {
&:hover, &.active { &:hover, &.active {
color: $themeColor; color: $themeColor;
} }
&.close{
color: #d14424;
}
} }
.divider { .divider {

View File

@ -1,13 +1,14 @@
import { onMounted, onUnmounted, ref } from 'vue' import { onMounted, onUnmounted, ref } from 'vue'
import { throttle } from 'lodash' import { throttle } from 'lodash'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import { useSlidesStore } from '../../../store' import { useSlidesStore, useClasscourseStore } from '../../../store'
import { KEYS } from '../../../configs/hotkey' import { KEYS } from '../../../configs/hotkey'
import { ANIMATION_CLASS_PREFIX } from '../../../configs/animation' import { ANIMATION_CLASS_PREFIX } from '../../../configs/animation'
import message from '../../../utils/message' import message from '../../../utils/message'
export default () => { export default () => {
const slidesStore = useSlidesStore() const slidesStore = useSlidesStore()
const classcourseStore = useClasscourseStore() // 课堂信息-状态管理
const { slides, slideIndex, formatedAnimations } = storeToRefs(slidesStore) const { slides, slideIndex, formatedAnimations } = storeToRefs(slidesStore)
// 当前页的元素动画执行到的位置 // 当前页的元素动画执行到的位置
@ -121,9 +122,9 @@ export default () => {
// 遇到元素动画时,优先执行动画播放,无动画则执行翻页 // 遇到元素动画时,优先执行动画播放,无动画则执行翻页
// 向上播放遇到动画时,仅撤销到动画执行前的状态,不需要反向播放动画 // 向上播放遇到动画时,仅撤销到动画执行前的状态,不需要反向播放动画
// 撤回到上一页时,若该页从未播放过(意味着不存在动画状态),需要将动画索引置为最小值(初始状态),否则置为最大值(最终状态) // 撤回到上一页时,若该页从未播放过(意味着不存在动画状态),需要将动画索引置为最小值(初始状态),否则置为最大值(最终状态)
const execPrev = () => { const execPrev = (isAsync: boolean) => {
if (formatedAnimations.value.length && animationIndex.value > 0) { if (formatedAnimations.value.length && animationIndex.value > 0) {
revokeAnimation() revokeAnimation(isAsync)
} }
else if (slideIndex.value > 0) { else if (slideIndex.value > 0) {
slidesStore.updateSlideIndex(slideIndex.value - 1) slidesStore.updateSlideIndex(slideIndex.value - 1)
@ -139,9 +140,10 @@ export default () => {
} }
inAnimation.value = false inAnimation.value = false
} }
const execNext = () => { const execNext = (isAsync: boolean) => {
console.log('execNext', isAsync)
if (formatedAnimations.value.length && animationIndex.value < formatedAnimations.value.length) { if (formatedAnimations.value.length && animationIndex.value < formatedAnimations.value.length) {
runAnimation() runAnimation(isAsync)
} }
else if (slideIndex.value < slides.value.length - 1) { else if (slideIndex.value < slides.value.length - 1) {
slidesStore.updateSlideIndex(slideIndex.value + 1) slidesStore.updateSlideIndex(slideIndex.value + 1)
@ -173,7 +175,13 @@ export default () => {
} }
// 鼠标滚动翻页 // 鼠标滚动翻页
const mousewheelListener = throttle(function(e: WheelEvent) { const mousewheelListener = (e: WheelEvent) => {
// console.log('mousewheel', e)
// 课堂信息存在时,不允许翻页
if (!!classcourseStore.classcourse) e.preventDefault()
mousewheelListenerThrottle(e)
}
const mousewheelListenerThrottle = throttle(function(e: WheelEvent) {
if (e.deltaY < 0) turning(e, 'prev') if (e.deltaY < 0) turning(e, 'prev')
else if (e.deltaY > 0) turning(e, 'next') else if (e.deltaY > 0) turning(e, 'next')
}, 500, { leading: true, trailing: false }) }, 500, { leading: true, trailing: false })
@ -203,6 +211,8 @@ export default () => {
// 向上翻页/向下翻页 // 向上翻页/向下翻页
const turning = (e, type) => { const turning = (e, type) => {
e.preventDefault() // 阻止默认事件 e.preventDefault() // 阻止默认事件
// 课堂信息存在时,不允许翻页
if (!!classcourseStore.classcourse) return
if (type === 'prev') execPrev() if (type === 'prev') execPrev()
else if (type === 'next') execNext() else if (type === 'next') execNext()
} }

View File

@ -23,7 +23,8 @@
</div> </div>
<div class="class-reserv-item-tool" style="width: 50px;"> <div class="class-reserv-item-tool" style="width: 50px;">
<!-- <el-button v-if="item.status!='open'" size="small" type="danger" @click="deleteReserv">删除</el-button>--> <!-- <el-button v-if="item.status!='open'" size="small" type="danger" @click="deleteReserv">删除</el-button>-->
<el-tag>APT</el-tag> <!-- <el-tag>APT</el-tag> -->
<el-tag>AIPPT</el-tag>
</div> </div>
<div style="min-width: 150px;"><span> 浏览25955 点赞26605</span></div> <div style="min-width: 150px;"><span> 浏览25955 点赞26605</span></div>
</div> </div>
@ -85,6 +86,7 @@ const chatSend = () => {
<style scoped lang="scss"> <style scoped lang="scss">
.class-reserv-item { .class-reserv-item {
display: flex; display: flex;
align-items: center;
background-color: white; background-color: white;
border-radius: 10px; border-radius: 10px;
padding: 5px; padding: 5px;
@ -110,7 +112,7 @@ const chatSend = () => {
} }
} }
.class-reserv-item-tool { .class-reserv-item-tool {
margin-left: 15px; margin: 0 7px;
display: flex; display: flex;
align-items: center; align-items: center;
} }