Compare commits
8 Commits
c81f393715
...
ae839825d4
Author | SHA1 | Date |
---|---|---|
zhangxuelin | ae839825d4 | |
zhangxuelin | ef670dee99 | |
zhangxuelin | 06bb6284c4 | |
zhangxuelin | c2750e3da6 | |
zhangxuelin | 5550ca570c | |
zhangxuelin | ab9bad467a | |
zhangxuelin | a366d5d4d6 | |
zhangxuelin | e0ec22c3ac |
|
@ -0,0 +1,47 @@
|
||||||
|
export default class gridPic {
|
||||||
|
private static Instance: gridPic | null = null;
|
||||||
|
private gridPicRef: any = null;
|
||||||
|
|
||||||
|
constructor(elRef?: any) {
|
||||||
|
if (elRef) {
|
||||||
|
this.gridPicRef = elRef;
|
||||||
|
}
|
||||||
|
if (!gridPic.Instance) {
|
||||||
|
gridPic.Instance = this;
|
||||||
|
}
|
||||||
|
return gridPic.Instance;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
init(elRef) {
|
||||||
|
if (elRef) {
|
||||||
|
this.gridPicRef = elRef;
|
||||||
|
}
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
addPIc(data) {
|
||||||
|
if (this.gridPicRef && this.gridPicRef.value && typeof this.gridPicRef.value.addPic === 'function') {
|
||||||
|
this.gridPicRef.value.addPic(data);
|
||||||
|
}
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 静态方法 - 初始化
|
||||||
|
static init(elRef) {
|
||||||
|
if (!gridPic.Instance) {
|
||||||
|
gridPic.Instance = new gridPic(elRef);
|
||||||
|
} else {
|
||||||
|
gridPic.Instance.init(elRef);
|
||||||
|
}
|
||||||
|
return gridPic.Instance;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 静态方法 - 打开推图上屏幕
|
||||||
|
static addPIc(data) {
|
||||||
|
if (gridPic.Instance) {
|
||||||
|
return gridPic.Instance.addPIc(data);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
|
@ -274,6 +274,7 @@ export class PPTApi {
|
||||||
static toRousrceUrl =async (o:any) => {
|
static toRousrceUrl =async (o:any) => {
|
||||||
const formData = new FormData()
|
const formData = new FormData()
|
||||||
formData.append('file', o)
|
formData.append('file', o)
|
||||||
|
formData.append('ral', true)
|
||||||
const res = await Api_server.Other.uploadFile(formData)
|
const res = await Api_server.Other.uploadFile(formData)
|
||||||
if (res && res.code == 200){
|
if (res && res.code == 200){
|
||||||
const url = res?.url
|
const url = res?.url
|
||||||
|
|
|
@ -132,6 +132,8 @@ export class MsgEnum {
|
||||||
MSG_dz : 'dz',
|
MSG_dz : 'dz',
|
||||||
/** @desc: 疑惑 */
|
/** @desc: 疑惑 */
|
||||||
MSG_yh : 'yh',
|
MSG_yh : 'yh',
|
||||||
|
/** @desc: 推图片上屏 */
|
||||||
|
MSG_pushSreen_ImgList : 'pushSreen_ImgList',
|
||||||
// === 新定义-消息头 ===
|
// === 新定义-消息头 ===
|
||||||
/** @desc: 课程创建-待开课 */
|
/** @desc: 课程创建-待开课 */
|
||||||
MSG_0000: 0x0000,
|
MSG_0000: 0x0000,
|
||||||
|
|
|
@ -12,9 +12,10 @@ import Classcourse from './classcourse' // 课程相关
|
||||||
import msgUtils from '@/plugins/modal' // 消息工具
|
import msgUtils from '@/plugins/modal' // 消息工具
|
||||||
import * as dialogUtils from '@/utils/dialog' // 弹窗-函数
|
import * as dialogUtils from '@/utils/dialog' // 弹窗-函数
|
||||||
import { Homework } from './index' // api-作业相关
|
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 useExecPlay from '../views/Screen/hooks/useExecPlay' // 播放控制
|
||||||
import hooksUpvote from './upvote' // 点赞-工具
|
import hooksUpvote from './upvote' // 点赞-工具
|
||||||
|
import gridPic from './gridPic' // 上屏-工具
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description 监听器
|
* @description 监听器
|
||||||
|
@ -98,6 +99,7 @@ export default () => {
|
||||||
}
|
}
|
||||||
break
|
break
|
||||||
case MsgEnum.HEADS.MSG_slideFlapping: // 幻灯片翻页
|
case MsgEnum.HEADS.MSG_slideFlapping: // 幻灯片翻页
|
||||||
|
emitter.emit('closegridPic')
|
||||||
const slideIndex = content?.current || 0
|
const slideIndex = content?.current || 0
|
||||||
const type = content?.animation // 上下动作
|
const type = content?.animation // 上下动作
|
||||||
const steps = content?.animationSteps // 动画步骤
|
const steps = content?.animationSteps // 动画步骤
|
||||||
|
@ -128,6 +130,10 @@ export default () => {
|
||||||
case MsgEnum.HEADS.MSG_yh: // 疑惑
|
case MsgEnum.HEADS.MSG_yh: // 疑惑
|
||||||
hooksUpvote.trigger(2)
|
hooksUpvote.trigger(2)
|
||||||
break
|
break
|
||||||
|
case MsgEnum.HEADS.MSG_pushSreen_ImgList: // 推图片上屏
|
||||||
|
const imgArray = content.ImgList.map((obj) => obj.url);
|
||||||
|
emitter.emit('opengridPic',{arr:imgArray})
|
||||||
|
break
|
||||||
case MsgEnum.HEADS.MSG_0010: // 备用
|
case MsgEnum.HEADS.MSG_0010: // 备用
|
||||||
break
|
break
|
||||||
default:
|
default:
|
||||||
|
@ -142,4 +148,14 @@ export default () => {
|
||||||
window.close() // 关闭窗口
|
window.close() // 关闭窗口
|
||||||
}, 1000)
|
}, 1000)
|
||||||
}
|
}
|
||||||
|
// setTimeout(async () => {
|
||||||
|
// emitter.emit('opengridPic',{arr:['https://prev.ysaix.com:7868/src/assets/images/homecard4.jpg']})
|
||||||
|
// }, 3000)
|
||||||
|
|
||||||
|
// setTimeout(async () => {
|
||||||
|
// emitter.emit('closegridPic')
|
||||||
|
// }, 6000)
|
||||||
|
// setTimeout(async () => {
|
||||||
|
// emitter.emit('opengridPic',{arr:['https://prev.ysaix.com:7868/src/assets/images/homecard4.jpg','https://prev.ysaix.com:7868/src/assets/images/homecard4.jpg']})
|
||||||
|
// }, 9000)
|
||||||
}
|
}
|
|
@ -16,7 +16,7 @@
|
||||||
<PopoverMenuItem>导入 pptx 文件</PopoverMenuItem>
|
<PopoverMenuItem>导入 pptx 文件</PopoverMenuItem>
|
||||||
</FileInput>
|
</FileInput>
|
||||||
<PopoverMenuItem @click="setDialogForExport('pptx')">导出文件</PopoverMenuItem> -->
|
<PopoverMenuItem @click="setDialogForExport('pptx')">导出文件</PopoverMenuItem> -->
|
||||||
<PopoverMenuItem @click="resetSlides(); mainMenuVisible = false">重置幻灯片</PopoverMenuItem>
|
<!-- <PopoverMenuItem @click="resetSlides(); mainMenuVisible = false">重置幻灯片</PopoverMenuItem> -->
|
||||||
<!-- <PopoverMenuItem @click="goLink('https://github.com/pipipi-pikachu/PPTist/issues')">意见反馈</PopoverMenuItem> -->
|
<!-- <PopoverMenuItem @click="goLink('https://github.com/pipipi-pikachu/PPTist/issues')">意见反馈</PopoverMenuItem> -->
|
||||||
<!-- <PopoverMenuItem @click="goLink('https://github.com/pipipi-pikachu/PPTist/blob/master/doc/Q&A.md')">常见问题</PopoverMenuItem> -->
|
<!-- <PopoverMenuItem @click="goLink('https://github.com/pipipi-pikachu/PPTist/blob/master/doc/Q&A.md')">常见问题</PopoverMenuItem> -->
|
||||||
<PopoverMenuItem @click="mainMenuVisible = false; hotkeyDrawerVisible = true">快捷操作</PopoverMenuItem>
|
<PopoverMenuItem @click="mainMenuVisible = false; hotkeyDrawerVisible = true">快捷操作</PopoverMenuItem>
|
||||||
|
|
|
@ -88,7 +88,9 @@ import Button from '../../../../components/Button.vue'
|
||||||
import ButtonGroup from '../../../../components/ButtonGroup.vue'
|
import ButtonGroup from '../../../../components/ButtonGroup.vue'
|
||||||
import Popover from '../../../../components/Popover.vue'
|
import Popover from '../../../../components/Popover.vue'
|
||||||
import NumberInput from '../../../../components/NumberInput.vue'
|
import NumberInput from '../../../../components/NumberInput.vue'
|
||||||
|
import { PPTApi } from '../../../../api'
|
||||||
|
import { Console } from 'node:console'
|
||||||
|
import { x64 } from 'crypto-js'
|
||||||
const shapeClipPathOptions = CLIPPATHS
|
const shapeClipPathOptions = CLIPPATHS
|
||||||
const ratioClipOptions = [
|
const ratioClipOptions = [
|
||||||
{
|
{
|
||||||
|
@ -221,10 +223,14 @@ const presetImageClip = (shape: string, ratio = 0) => {
|
||||||
const replaceImage = (files: FileList) => {
|
const replaceImage = (files: FileList) => {
|
||||||
const imageFile = files[0]
|
const imageFile = files[0]
|
||||||
if (!imageFile) return
|
if (!imageFile) return
|
||||||
getImageDataURL(imageFile).then(dataURL => {
|
PPTApi.toRousrceUrl(imageFile).then(data=>{
|
||||||
const props = { src: dataURL }
|
const props = { src: data }
|
||||||
updateImage(props)
|
updateImage(props)
|
||||||
})
|
})
|
||||||
|
// getImageDataURL(imageFile).then(dataURL => {
|
||||||
|
// const props = { src: dataURL }
|
||||||
|
// updateImage(props)
|
||||||
|
// })
|
||||||
}
|
}
|
||||||
|
|
||||||
// 重置图片:清除全部样式
|
// 重置图片:清除全部样式
|
||||||
|
|
|
@ -1,16 +1,26 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="pptist-screen">
|
<div class="pptist-screen">
|
||||||
<BaseView :changeViewMode="changeViewMode" v-if="viewMode === 'base'" />
|
<BaseView :changeViewMode="changeViewMode" v-if="viewMode === 'base'" />
|
||||||
<PresenterView :changeViewMode="changeViewMode" v-else-if="viewMode === 'presenter'" />
|
<PresenterView :changeViewMode="changeViewMode" v-else-if="viewMode === 'presenter'" />
|
||||||
<!-- 点赞组件 -->
|
<!-- 点赞组件 -->
|
||||||
<upvote-vue ref="upvoteRef" type="2"></upvote-vue>
|
<upvote-vue ref="upvoteRef" type="2"></upvote-vue>
|
||||||
<!-- <div style="z-index: 999;position: absolute;top:10px">
|
<!-- <div style="z-index: 999;position: absolute;top:10px">
|
||||||
</div> -->
|
</div> -->
|
||||||
|
<!-- 推图上屏弹窗 -->
|
||||||
|
<el-dialog
|
||||||
|
v-model="dialogVisible"
|
||||||
|
:fullscreen="true"
|
||||||
|
class="gridPicRefdiv"
|
||||||
|
style="overflow: hidden;"
|
||||||
|
:show-close="false"
|
||||||
|
>
|
||||||
|
<grid-pic ref="gridPicRef" style="height:100%;" @clear="clearchidrenPic"></grid-pic>
|
||||||
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { onMounted, onUnmounted, ref } from 'vue'
|
import { onMounted, onUnmounted, ref , nextTick} from 'vue'
|
||||||
import { KEYS } from '../../configs/hotkey'
|
import { KEYS } from '../../configs/hotkey'
|
||||||
import useScreening from '../../hooks/useScreening'
|
import useScreening from '../../hooks/useScreening'
|
||||||
import hooksUpvote from '../../api/upvote' // 点赞-工具
|
import hooksUpvote from '../../api/upvote' // 点赞-工具
|
||||||
|
@ -18,9 +28,13 @@ import hooksUpvote from '../../api/upvote' // 点赞-工具
|
||||||
import BaseView from './BaseView.vue'
|
import BaseView from './BaseView.vue'
|
||||||
import PresenterView from './PresenterView.vue'
|
import PresenterView from './PresenterView.vue'
|
||||||
import upvoteVue from '@/views/tool/components/upvote.vue' // 点赞-子组件
|
import upvoteVue from '@/views/tool/components/upvote.vue' // 点赞-子组件
|
||||||
|
import gridPic from '@/components/grid-pic/index.vue' // 推图上屏弹子组件
|
||||||
|
|
||||||
|
import emitter from '@/utils/mitt' //mitt 事件总线
|
||||||
|
|
||||||
const viewMode = ref<'base' | 'presenter'>('base')
|
const viewMode = ref<'base' | 'presenter'>('base')
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const gridPicRef:any= ref(null)
|
||||||
const changeViewMode = (mode: 'base' | 'presenter') => {
|
const changeViewMode = (mode: 'base' | 'presenter') => {
|
||||||
viewMode.value = mode
|
viewMode.value = mode
|
||||||
}
|
}
|
||||||
|
@ -35,6 +49,23 @@ const keydownListener = (e: KeyboardEvent) => {
|
||||||
if (key === KEYS.ESC) exitScreening()
|
if (key === KEYS.ESC) exitScreening()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const clearchidrenPic= ()=> {
|
||||||
|
dialogVisible.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
// 开启推图上屏幕
|
||||||
|
emitter.on('opengridPic', async (data:object)=> {
|
||||||
|
if(gridPicRef.value) gridPicRef.value.clearPic()
|
||||||
|
dialogVisible.value = true
|
||||||
|
await nextTick();
|
||||||
|
gridPicRef.value.addPic(data.arr)
|
||||||
|
});
|
||||||
|
// 关闭推图
|
||||||
|
emitter.on('closegridPic', ()=> {
|
||||||
|
if(!gridPicRef.value) return
|
||||||
|
gridPicRef.value.clearPic()
|
||||||
|
dialogVisible.value = false
|
||||||
|
});
|
||||||
onMounted(() => document.addEventListener('keydown', keydownListener))
|
onMounted(() => document.addEventListener('keydown', keydownListener))
|
||||||
onUnmounted(() => document.removeEventListener('keydown', keydownListener))
|
onUnmounted(() => document.removeEventListener('keydown', keydownListener))
|
||||||
</script>
|
</script>
|
||||||
|
@ -46,4 +77,8 @@ onUnmounted(() => document.removeEventListener('keydown', keydownListener))
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:deep(.gridPicRefdiv .el-dialog__body){
|
||||||
|
height: 100% !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
|
@ -16,8 +16,8 @@
|
||||||
<draggable handle=".header-btn" :draggable="false" item-key="backgroundColor" v-model="gridPicList" class="grid-pic-wrap" :style="getGrid">
|
<draggable handle=".header-btn" :draggable="false" item-key="backgroundColor" v-model="gridPicList" class="grid-pic-wrap" :style="getGrid">
|
||||||
<template #item="{ element, index }">
|
<template #item="{ element, index }">
|
||||||
<div class="grid-pic-item" :key="element.backgroundColor" :style="getWH(element,index)">
|
<div class="grid-pic-item" :key="element.backgroundColor" :style="getWH(element,index)">
|
||||||
<div class="delete-btn" @click="gridPicList.splice(index,1)">X</div>
|
<div class="delete-btn" @click="()=>{gridPicList.splice(index,1);if(!gridPicList.length) emits('clear')} ">X</div>
|
||||||
<div class="header-btn"></div>
|
<div class="header-btn"></div>
|
||||||
<ViewerItem :gridPicList="gridPicList" :index="index" :images="element"></ViewerItem>
|
<ViewerItem :gridPicList="gridPicList" :index="index" :images="element"></ViewerItem>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -140,5 +140,8 @@ watch(props.images, (newValue, oldValue) => {
|
||||||
.viewer-item-wrap{
|
.viewer-item-wrap{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
:deep(.viewer-canvas img) {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue