diff --git a/src/renderer/src/AixPPTist/src/api/chat.ts b/src/renderer/src/AixPPTist/src/api/chat.ts index 70574e2..9987c7d 100644 --- a/src/renderer/src/AixPPTist/src/api/chat.ts +++ b/src/renderer/src/AixPPTist/src/api/chat.ts @@ -14,7 +14,8 @@ export default () => { const courseId = classcourse?.id // 课堂id const timgroupid = classcourse?.timgroupid // 群组id const classcourseStore = useClasscourseStore() // 课堂信息-状态管理 - if (!ChatWs.ws) ChatWs.init() + // 上课状态才-初始化socket + if (!ChatWs.ws && !!courseId) ChatWs.init() // 开课消息 const startCourse = async() => { // await API_classcourse.updateClasscourse({ id: classcourse.id, status: 'open' }) diff --git a/src/renderer/src/AixPPTist/src/api/index.ts b/src/renderer/src/AixPPTist/src/api/index.ts index 5e5bcb6..8e15fb7 100644 --- a/src/renderer/src/AixPPTist/src/api/index.ts +++ b/src/renderer/src/AixPPTist/src/api/index.ts @@ -274,6 +274,7 @@ export class PPTApi { static toRousrceUrl =async (o:any) => { const formData = new FormData() formData.append('file', o) + formData.append('ral', true) const res = await Api_server.Other.uploadFile(formData) if (res && res.code == 200){ const url = res?.url diff --git a/src/renderer/src/AixPPTist/src/views/Editor/CanvasTool/MaterialDialog.vue b/src/renderer/src/AixPPTist/src/views/Editor/CanvasTool/MaterialDialog.vue index 26c852e..7402fe8 100644 --- a/src/renderer/src/AixPPTist/src/views/Editor/CanvasTool/MaterialDialog.vue +++ b/src/renderer/src/AixPPTist/src/views/Editor/CanvasTool/MaterialDialog.vue @@ -21,6 +21,7 @@ import { sessionStore } from '@/utils/store' import { getSmarttalkPage } from '@/api/file' import * as commUtils from '@/utils/comm.js' import { getFileSuffix } from '@/utils/ruoyi.js' +import { PPTApi } from '../../../api' const emit = defineEmits(['insertMaterial', 'close']) @@ -60,73 +61,31 @@ const fileUrl = computed(() => (item) =>{ } }) - // 插入 const onInsert = async (item) =>{ + loading.value = true const res = await fetch(item.fileFullPath) const bolb = await res.blob() const file = commUtils.blobToFile(bolb, item.fileShowName) - if(videoSuffix.indexOf(getFileSuffix(item.fileShowName)) != -1){ - emit('insertMaterial',{ type: 'video', file }) - } - else{ - emit('insertMaterial',{ type: 'img', file }) - } -} - - - -const GetUrlParameters = (parameters) => { - let resData = ""; - - let url = document.location.toString(); - let arrUrl = url.split("?"); - // 判断是否有参数 - if (arrUrl.length > 1) { - // 拆分参数字符串 - let parametersArr = arrUrl[1].split("&"); - // 循环查找参数 - for (let i = 0; i <= parametersArr.length; i++) { - if (parametersArr[i]) { - // 拆分参数的键和值 - let parameterStr = parametersArr[i].split("="); - if (parameters == parameterStr[0]) { - resData = parameterStr[1]; - break; - } - } + try { + const data = await PPTApi.toRousrceUrl(file) + if(videoSuffix.indexOf(getFileSuffix(item.fileShowName)) != -1){ + emit('insertMaterial',{ type: 'video', data }) } + else{ + emit('insertMaterial',{ type: 'img', data }) + } + } finally { + loading.value = false } - return resData; } -const proxyToBase64 = (url)=> { - const dourl = GetUrlParameters(url) - console.log(dourl,'dourl') - return - axios({ - url: "/api/logo.png", - method: "get", - responseType: "blob", - }).then((res) => { - const reader = new FileReader(); - reader.readAsDataURL(res.data); - reader.onload = () => { - console.log(reader.result); - }; - }); -} - - - - // 关闭 const onClose = () =>{ emit('close') } - onMounted(() => { let data = sessionStore.get('subject.curNode') Object.assign(curNode, data); diff --git a/src/renderer/src/AixPPTist/src/views/Editor/CanvasTool/index.vue b/src/renderer/src/AixPPTist/src/views/Editor/CanvasTool/index.vue index ad51dd9..64da59a 100644 --- a/src/renderer/src/AixPPTist/src/views/Editor/CanvasTool/index.vue +++ b/src/renderer/src/AixPPTist/src/views/Editor/CanvasTool/index.vue @@ -281,20 +281,17 @@ const toggleNotesPanel = () => { // 插入素材 interface MaterialParams { type: string, - file: any + data: string } -const insertMaterial = (item: MaterialParams) =>{ - const { type, file } = item - PPTApi.toRousrceUrl(file).then(data=>{ - if(type == 'video'){ - createVideoElement(data) - } - else{ - createImageElement(data) - } - materiaVisible.value = false - }) - +const insertMaterial = async (item: MaterialParams) =>{ + const { type, data } = item + if(type == 'video'){ + createVideoElement(data) + } + else{ + createImageElement(data) + } + materiaVisible.value = false } // 文生图 diff --git a/src/renderer/src/AixPPTist/src/views/Editor/EditorHeader/index.vue b/src/renderer/src/AixPPTist/src/views/Editor/EditorHeader/index.vue index 72eb83f..8b5365a 100644 --- a/src/renderer/src/AixPPTist/src/views/Editor/EditorHeader/index.vue +++ b/src/renderer/src/AixPPTist/src/views/Editor/EditorHeader/index.vue @@ -14,9 +14,9 @@ mainMenuVisible = false }"> 导入 pptx 文件 - --> - 导出文件 - + + 导出文件 --> + 重置幻灯片 快捷操作 @@ -54,9 +54,9 @@
-
+
diff --git a/src/renderer/src/utils/ppt/index.js b/src/renderer/src/utils/ppt/index.js new file mode 100644 index 0000000..6634826 --- /dev/null +++ b/src/renderer/src/utils/ppt/index.js @@ -0,0 +1,87 @@ +/** + * ppt 转换为图片 + */ +import { h, render, getCurrentInstance } from 'vue' +import { toPng, toJpeg } from 'html-to-image' // 引入html-to-image库 +import { PPTXFileToJson } from "@/AixPPTist/src/hooks/useImport" +import ThumbnailSlide from '@/AixPPTist/src/views/components/ThumbnailSlide/index.vue' +import { useSlidesStore } from '@/AixPPTist/src/store' +// 延时 +const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)) + +/** + * @description: 渲染组件 + * @param {*} node 节点或属性 + * @param {*} props 属性 + * @param {*} children 子元素 + * @param {*} container 容器 + */ +const renderComponent = (node, props = {}, children, container) => { + let vNode, body + if (!node) throw new Error('vNode is required') + if (typeof container == 'string') { + if (node == 'slide') { + vNode = h(ThumbnailSlide, props, children) + } else throw new Error('vNode has no corresponding component') + } else { + vNode = h(node, props, children) + } + if (!container) body = document.body // 默认为body + else { // 判断是否为字符串 + if (typeof container == 'string') { + body = document.querySelector(container) + } else { + body = container + } + } + return render(vNode, body) +} + +/** + * @description: 幻灯片转换为图片 + * 提示：icon组件找不到是应为 h() 渲染是底层创建的虚拟节点，找不到全局组件 + * @param {*} slides 幻灯片数据 + * @param {*} options 配置 number 为幻灯片宽度 | object 为配置项 + * @returns + */ +export const slidesToImg = (slides = [], options) => { + let width, option, ispng = true + if (typeof options =='number'){width = options; option = {}} + else {const { width: w, isPng, ...opt } = options;width = w; ispng=isPng; option = opt} + const slidesStore = useSlidesStore() + !!width && slidesStore.setViewportSize(width) // 设置幻灯片宽度 + return new Promise(async(resolve) => { + const instance = getCurrentInstance() + console.log('instance', instance) + const slidesDom = [] + for(const slide of slides) { + const props = { class: 'c-thumbnail', slide, size: 120, ...option } + const node = h(ThumbnailSlide, props) + slidesDom.push(node) + } + // 渲染组件到body + const props = { class: 'c-thumbnails', style:{position:'absolute',top:0,left:'-200vw'}} + renderComponent('div', props, slidesDom) + let imgs = [] + const toImag = ispng? toPng : toJpeg + for(const slide of slidesDom) { + const img = await toImag(slide.el) + imgs.push(img) + } + // console.log('ppt生成图片: ', imgs) + // console.log('图片已生成，正在卸载组件') + !!width && slidesStore.setViewportSize(1000) // 设置幻灯片宽度-恢复 + render(null, document.body) // 卸载组件 + resolve(imgs) + }) +} +/** + * description: ppt 文件转换为图片 + * @param {*} file file 为文件对象| arrayBuffer 为数组 + * @param {*} options 配置 number 为幻灯片宽度 | object 为配置项 + * @returns + */ +export const pptToImg = async(file, options) => { + const { slides } = await PPTXFileToJson(file) + return slidesToImg(slides, options) +} \ No newline at end of file diff --git a/src/renderer/src/views/model/index.vue b/src/renderer/src/views/model/index.vue index dd15098..fcd0038 100644 --- a/src/renderer/src/views/model/index.vue +++ b/src/renderer/src/views/model/index.vue @@ -83,6 +83,8 @@ import useUserStore from '@/store/modules/user' // 用户信息 import ChooseTextbook from '@/components/choose-textbook/index.vue' import KjListItem from '@/views/prepare/container/kj-list-item.vue' import FileImage from '@/components/file-image/index.vue' +import progressDialog from '@/views/teachingDesign/container/progress-dialog.vue' +import ThumbnailSlide from '@/AixPPTist/src/views/components/ThumbnailSlide/index.vue' import {creatAPT, getSmarttalkPage, getModelInfo} from '@/api/file' import {ArrowDown, Flag, Position} from '@element-plus/icons-vue' import {asyncLocalFile, parseCataByNode} from "@/utils/talkFile"; @@ -94,11 +96,11 @@ import {createWindow, toLinkLeftWeb} from "@/utils/tool"; import {ElMessage} from "element-plus"; import {PPTXFileToJson} from "@/AixPPTist/src/hooks/useImport"; import * as API_entpcoursefile from "@/api/education/entpcoursefile"; -import progressDialog from '@/views/teachingDesign/container/progress-dialog.vue' import msgUtils from "@/plugins/modal"; import * as commUtils from "@/utils/comm"; import * as Api_server from "@/api/apiService"; // 学科名字文生图 import useClassTaskStore from '@/store/modules/classTask' +import { slidesToImg } from '@/utils/ppt' // ppt相关工具 const router = useRouter() const userStore = useUserStore().user // 用户信息 @@ -278,12 +280,14 @@ const handleFileChange = ()=> { createAIPPTByFile(file) } } - +// ppt文件转PPT线上数据 const createAIPPTByFile = async (file)=> { - pgDialog.value.visible = true - pgDialog.value.pg.percentage = 0 + // pgDialog.value.visible = true + // pgDialog.value.pg.percentage = 0 const resPptJson = await PPTXFileToJson(file) const { def, slides, ...content } = resPptJson + // 生成缩略图 + const thumbnails = await slidesToImg(slides, content.width) // 转换图片|音频|视频 为线上地址 let completed = 0 const total = slides.length @@ -335,6 +339,7 @@ const createAIPPTByFile = async (file)=> { entpcourseid: resCourse.id, title: '', filetype: 'slide', + thumbnails, // 缩略图-列表 slides: resSlides, edituserid: userStore.userId } diff --git a/src/renderer/src/views/prepare/index.vue b/src/renderer/src/views/prepare/index.vue index bd0b57b..7ee3ab0 100644 --- a/src/renderer/src/views/prepare/index.vue +++ b/src/renderer/src/views/prepare/index.vue @@ -205,13 +205,12 @@ import TreeLog from '@/views/prepare/components/treeLog.vue' import classStart from './container/class-start.vue' // 预备上课 import MsgEnum from '@/plugins/imChat/msgEnum' // im 消息枚举 import * as commUtils from "@/utils/comm"; -import * as Api_server from "@/api/apiService"; import msgUtils from "@/plugins/modal"; +import * as Api_server from "@/api/apiService"; import * as API_entpcoursefile from "@/api/education/entpcoursefile"; +import { slidesToImg } from '@/utils/ppt' // ppt相关工具 import ChatWs from '@/plugins/socket' // 聊天socket if (!ChatWs.ws) ChatWs.init() -// import Chat from '@/utils/chat' // im 登录初始化 -// if (!Chat.imChat) Chat.init() const toolStore = useToolState() const fs = require('fs') @@ -573,8 +572,9 @@ export default { },500) }) }, - openFilePicker(){ + async openFilePicker(){ this.$refs.fileInput.click(); + // const files = await commUtils.getFiles() }, handleFileChange(){ const file = event.target.files[0]; @@ -634,6 +634,8 @@ export default { this.pgDialog.pg.percentage = 0 const resPptJson = await PPTXFileToJson(file) const { def, slides, ...content } = resPptJson + // 生成缩略图 + const thumbnails = await slidesToImg(slides, content.width) // 转换图片|音频|视频 为线上地址 let completed = 0 const total = slides.length @@ -686,6 +688,7 @@ export default { title: '', filetype: 'slide', slides: resSlides, + thumbnails, // 缩略图 edituserid: this.userStore.userId } const res_3 = await API_entpcoursefile.batchAddNew(params) diff --git a/src/renderer/src/views/teachingDesign/container/right.vue b/src/renderer/src/views/teachingDesign/container/right.vue index d0683dd..3c91cb6 100644 --- a/src/renderer/src/views/teachingDesign/container/right.vue +++ b/src/renderer/src/views/teachingDesign/container/right.vue @@ -94,6 +94,7 @@ import * as API_smarttalk from '@/api/file' // 文件相关api import msgUtils from '@/plugins/modal' import { getEntpcoursefile } from '@/api/education/entpcoursefile' import { createWindow } from '@/utils/tool' // 消息工具 +import { slidesToImg } from '@/utils/ppt' // ppt相关工具 const userStore = useUserStore() const pptDialog = ref(false) @@ -205,7 +206,7 @@ const handleCompleteText = async (answer, index) => { } // 保存模板 -const onSaveTemp = (item) => { +const onSaveTemp = async (item) => { if (item.answer == '') return const data = { @@ -215,7 +216,11 @@ const onSaveTemp = (item) => { content: item.answer, ex1: curNode.id } - tempSave(data).then(res => { }) + const res = await tempSave(data) + + if(!item.resultId){ + item.resultId = res.data + } } const isWordDialog = ref(false) @@ -323,6 +328,7 @@ const prompt = ref('') const addAiPPT = async (res) => { + // res = { url: 'https://bjcdn.openstorage.cn/xinghuo-privatedata/%2Ftmp/apiTempFileba724e0344f74e1480535eedf3ebec661601807661085006275/%E9%87%91%E9%A9%AC%E5%A5%96%E5%B0%B4%E5%B0%AC%E4%BA%8B%E4%BB%B6%E5%88%86%E6%9E%90%E4%B8%8E%E5%BA%94%E5%AF%B9%E7%AD%96%E7%95%A5.pptx' } let node = courseObj.node pptDialog.value = false; if (!node) return msgUtils.msgWarning('请选择章节?') @@ -341,6 +347,8 @@ const addAiPPT = async (res) => { .then(async buffer => { const resPptJson = await PPTXFileToJson(buffer) const { def, slides, ...content } = resPptJson + // 生成缩略图 + const thumbnails = await slidesToImg(slides, content.width) // 转换图片|音频|视频 为线上地址 let completed = 0 const total = slides.length @@ -360,7 +368,7 @@ const addAiPPT = async (res) => { const smarttalk = await HTTP_SERVER_API('addSmarttalk', { fileId: parentid }) if (slides.length > 0) { const resSlides = slides.map(({ id, ...slide }) => JSON.stringify(slide)) - const params = { parentid, filetype: 'slide', title: '', slides: resSlides } + const params = { parentid, filetype: 'slide', title: '', thumbnails, slides: resSlides } const res_3 = await HTTP_SERVER_API('batchAddNew', params) if (res_3 && res_3.code == 200) { msgUtils.msgSuccess('生成PPT课件成功')