Merge branch 'main' of http://27.128.240.72:3000/zhuhao/AIx_Smarttalk_WS into zxl
# Conflicts: # src/renderer/src/AixPPTist/src/views/Editor/EditorHeader/index.vue
This commit is contained in:
commit
ab9bad467a
|
@ -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' })
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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)
|
||||
|
||||
try {
|
||||
const data = await PPTApi.toRousrceUrl(file)
|
||||
if(videoSuffix.indexOf(getFileSuffix(item.fileShowName)) != -1){
|
||||
emit('insertMaterial',{ type: 'video', file })
|
||||
emit('insertMaterial',{ type: 'video', data })
|
||||
}
|
||||
else{
|
||||
emit('insertMaterial',{ type: 'img', file })
|
||||
emit('insertMaterial',{ type: 'img', data })
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
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);
|
||||
|
|
|
@ -281,11 +281,10 @@ const toggleNotesPanel = () => {
|
|||
// 插入素材
|
||||
interface MaterialParams {
|
||||
type: string,
|
||||
file: any
|
||||
data: string
|
||||
}
|
||||
const insertMaterial = (item: MaterialParams) =>{
|
||||
const { type, file } = item
|
||||
PPTApi.toRousrceUrl(file).then(data=>{
|
||||
const insertMaterial = async (item: MaterialParams) =>{
|
||||
const { type, data } = item
|
||||
if(type == 'video'){
|
||||
createVideoElement(data)
|
||||
}
|
||||
|
@ -293,8 +292,6 @@ const insertMaterial = (item: MaterialParams) =>{
|
|||
createImageElement(data)
|
||||
}
|
||||
materiaVisible.value = false
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
// 文生图
|
||||
|
|
|
@ -14,9 +14,9 @@
|
|||
mainMenuVisible = false
|
||||
}">
|
||||
<PopoverMenuItem>导入 pptx 文件</PopoverMenuItem>
|
||||
</FileInput> -->
|
||||
<PopoverMenuItem @click="setDialogForExport('pptx')">导出文件</PopoverMenuItem>
|
||||
<!-- <PopoverMenuItem @click="resetSlides(); mainMenuVisible = false">重置幻灯片</PopoverMenuItem> -->
|
||||
</FileInput>
|
||||
<PopoverMenuItem @click="setDialogForExport('pptx')">导出文件</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/blob/master/doc/Q&A.md')">常见问题</PopoverMenuItem> -->
|
||||
<PopoverMenuItem @click="mainMenuVisible = false; hotkeyDrawerVisible = true">快捷操作</PopoverMenuItem>
|
||||
|
@ -54,9 +54,9 @@
|
|||
<div class="arrow-btn"><IconDown class="arrow" /></div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div class="menu-item" v-tooltip="'导出'" @click="setDialogForExport('pptx')">
|
||||
<!-- <div class="menu-item" v-tooltip="'导出'" @click="setDialogForExport('pptx')">
|
||||
<IconDownload class="icon" />
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="menu-item" v-tooltip="`${userStore.user.parentDeptName}-${userStore.user.nickName}`">
|
||||
<el-avatar size="small" :src="avatar" />
|
||||
</div>
|
||||
|
|
|
@ -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)
|
||||
}
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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课件成功')
|
||||
|
|
Loading…
Reference in New Issue