生成ppt

src/renderer/src/views/model/index.vue

@@ -680,6 +680,7 @@ onMounted(async () => {
           display: flex;
           flex-wrap: wrap;
           gap: 15px;
+          padding: 10px;
           .content-body-right-item{
             &:hover{
               cursor: pointer;

src/renderer/src/views/prepare/container/pptist-dialog.vue

@@ -1,30 +1,120 @@
 <template>
   <div>
-    <el-dialog class="ppt-dialog" v-model="model" :show-close="false" width="800"  destroy-on-close :top="'3vh'">
+    <el-dialog class="ppt-dialog" v-model="model" title="生成PPT(试验版)"
-      <template #header="{ close, titleId, titleClass }">
+               :close-on-click-modal="false"
-        <div class="dialog-header">
+               :close-on-press-escape="false"
-          <h4 :id="titleId" :class="titleClass">生成PPT(试验版)</h4>
+               :show-close="false" width="1000"  destroy-on-close >
-          <i class="iconfont icon-guanbi" @click="close"></i>
+<!--      <AiPptist @add-success="addAiPPT" :dataList="dataList"/>-->
+      <div class="ppt-dialog-content">
+        <div v-if="activeStep === 1" class="ppt-dialog-cover-wrap">
+          <div v-for="(item,index) in backGroundList"
+               :key="item.templateIndexId"
+               @click="outlineData.templateId = item.templateIndexId"
+               :class="outlineData.templateId === item.templateIndexId?'active-mode':''"
+               class="ppt-dialog-cover-item">
+            <div class="icon-select">
+              <Select />
+            </div>
+            <img :src="getBackGroundImg(item.detailImage)">
+          </div>
+        </div>
+        <div class="ppt-dialog-prog-wrap" v-if="activeStep === 2">
+          <el-progress :percentage="percentage" type="circle"></el-progress>
+        </div>
+      </div>
+      <div class="ppt-dialog-footer" v-if="activeStep === 1">
+        <el-button @click="closeDialog">关闭</el-button>
+        <el-button type="primary" :loading="createPPTLoading" @click="createPPT">生成课件</el-button>
       </div>
-      </template>
-      <AiPptist @add-success="addAiPPT" :dataList="dataList"/>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
   import AiPptist from './ai-pptistV2.vue';
+  import {Select} from "@element-plus/icons-vue";
+  import {ref, defineEmits, onMounted} from "vue";
+  import {createPPTV2, getBackGroundV2, getProgressV2} from "@/utils/ppt-request";
+  import {ElMessage} from "element-plus";
   const model = defineModel()
-  const emit = defineEmits(['addSuccess'])
+  const emit = defineEmits(['addSuccess', 'close-dialogs'])
+  const backGroundList = ref([]);
+  const activeStep = ref(1);
   const props = defineProps({
     dataList: {
-      type: Array,
+      type: Object,
-      default: () => []
+      default: () => {}
     }
   })
+  const closeDialog = () => {
+    emit('close-dialogs')
+  }
   const addAiPPT = (data) => {
     emit('addSuccess', data)
   }
+  const getBackGroundImg = (imgUrlStr) => {
+    return JSON.parse(imgUrlStr).titleCoverImage
+  };
+
+  const createPPTLoading = ref(false);
+  const outlineData = ref({
+      query: '',  // 用户要求（最多8000字）
+      templateId: '',  // ppt生成主题
+      author: 'AIX平台',
+      isFigure: false,   // 是否自动配图
+      search: true,
+      language: "cn"
+  })
+  const percentage = ref(0);
+  const outlineCreatePPT = () => {
+    const newOutlineData = { ...outlineData.value, };
+    newOutlineData.query = props.dataList.outline;
+    createPPTLoading.value = true;
+    createPPTV2(newOutlineData).then((res) => {
+      console.log(res, "正在生成中");
+      createPPTLoading.value = false;
+      activeStep.value = 2
+
+      const checkProgress = () => {
+        getProgressV2(res.sid).then(response => {
+          percentage.value = Math.round(response?.donePages*100/response?.totalPages);
+          if (response.pptStatus === "done") {
+            emit('addSuccess',{...res,url:response.pptUrl})
+            ElMessage.success("生成成功");
+          } else {
+            const sleepTime = 2000;
+            let remainingTime = sleepTime;
+            const intervalId = setInterval(() => {
+              remainingTime -= 100;
+              if (remainingTime <= 0) {
+                clearInterval(intervalId);
+                checkProgress();
+              }
+            }, 100);
+          }
+        });
+      };
+
+      checkProgress();
+    }).finally(()=>{
+      createPPTLoading.value = false
+    })
+  };
+
+  const createPPT = () => {
+    if (outlineData.value.templateId) {
+      outlineCreatePPT()
+    }else {
+      ElMessage.warning("请选择模板");
+    }
+  }
+
+  onMounted(() => {
+    // emit('addSuccess',{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'})
+    getBackGroundV2().then((res) => {
+      backGroundList.value = res.records;
+    });
+  })
 </script>
 
 <style lang="scss" scoped>
@@ -40,4 +130,50 @@
     cursor: pointer;
   }
 }
+.ppt-dialog-footer{
+  padding-top: 20px;
+  text-align: right;
+}
+.ppt-dialog-content{
+  height: 500px;
+  overflow: auto;
+  .ppt-dialog-prog-wrap{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+  }
+  .ppt-dialog-cover-wrap{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    .ppt-dialog-cover-item{
+      margin-bottom: 10px;
+      border: 10px solid #ccc;
+      border-radius: 10px;
+      cursor: pointer;
+      img{
+        width: 200px;
+      }
+      .icon-select{
+        display: none;
+      }
+    }
+    .active-mode{
+      border: 10px solid #5e24d0;
+      position: relative;
+      .icon-select{
+        position: absolute;
+        bottom: 10px;
+        right: 10px;
+        height: 20px;
+        width: 20px;
+        color: #fff;
+        background: #5e24d0;
+        border-radius: 5px;
+        display: block!important;
+      }
+    }
+  }
+}
 </style>

src/renderer/src/views/teachingDesign/container/center.vue

@@ -9,7 +9,7 @@
         <el-button type="primary" @click="createAi">
           <i class="iconfont icon-chuangzuo"></i>生成教学大纲
         </el-button>
-        <el-button type="danger" :disabled="curItem.parentId" @click="delAnswer">
+        <el-button type="danger" :disabled="!!curItem.parentId" @click="delAnswer">
           <i class="iconfont icon-shanchu"></i>
           删除大纲
         </el-button>

src/renderer/src/views/teachingDesign/container/progress-dialog.vue

@@ -1,6 +1,6 @@
 
 <template>
-  <el-dialog v-model="open" v-bind="dAttrs">
+  <el-dialog class="aix-progress-dialog" v-model="open" v-bind="dAttrs">
     <el-progress type="dashboard" v-bind="$attrs.pg" />
   </el-dialog>
 </template>
@@ -29,5 +29,10 @@ const dAttrs = computed(() => {
 })
 </script>
 <style lang="scss" scoped>
-
+</style>
+<style>
+.aix-progress-dialog .el-dialog__body{
+  display: flex;
+  justify-content: center;
+}
 </style>

src/renderer/src/views/teachingDesign/container/right2.vue

@@ -4,22 +4,73 @@
       <span>课件预览</span>
       <div>
         <el-button type="danger" @click="onCreate">一键生成</el-button>
-        <el-button>编辑课件</el-button>
+        <el-button :disabled="!result?.parentId" @click="openAiPPT">编辑课件</el-button>
       </div>
     </div>
     <div class="right-con">
-      <el-empty v-if="!result" description="请先生成教学大纲，再生成教学课件" />
+      <el-empty v-if="!result?.parentId" description="请先生成教学大纲，再生成教学课件" />
+      <div v-for="(item,index) in pptSlides" class="right-con-item">
+        <div>{{index+1}}</div><img :src="item.fileurl">
       </div>
     </div>
+  </div>
+  <PptDialog @close-dialogs="pptDialog = false" @add-success="addAiPPT" :dataList="result" v-model="pptDialog" />
+  <progress-dialog v-model:visible="pgDialog.visible" v-bind="pgDialog" />
 </template>
 <script setup>
-import { ref, onUnmounted } from 'vue'
+import {ref, onUnmounted, onMounted, reactive} from 'vue'
 import { ElMessage } from 'element-plus'
 import emitter from '@/utils/mitt'
+import progressDialog from './progress-dialog.vue'
+import PptDialog from "@/views/prepare/container/pptist-dialog.vue";
+import msgUtils from "@/plugins/modal";
+import {PPTXFileToJson} from "@/AixPPTist/src/hooks/useImport";
+import {slidesToImg} from "@/utils/ppt";
+import {getEntpcoursefile, listEntpcoursefileNew} from "@/api/education/entpcoursefile";
+import {sessionStore} from "@/utils/store";
+import * as API_smarttalk from "@/api/file";
+import * as API_entpcourse from "@/api/education/entpcourse";
+import * as API_entpcoursefile from "@/api/education/entpcoursefile";
+import * as commUtils from '@/utils/comm.js'
+import * as Api_server from '@/api/apiService' // 相关api
+import useUserStore from '@/store/modules/user'
+import {createWindow} from "@/utils/tool";
+import {editSyllabus} from "@/api/mode";
+import { getSmarttalkPage } from "@/api/file"
+const userStore = useUserStore()
+
+const pptDialog = ref(false)
+const result = ref(null)
+const courseObj = reactive({
+  node: null, // 选择的课程节点
+})
+const curNode = reactive({})
+const pgDialog = reactive({ // 弹窗-进度条
+  visible: false,
+  title: 'PPT解析中...',
+  width: 300,
+  showClose: false,
+  draggable: true,
+  beforeClose: done => { }, // 阻止-弹窗事件
+  pg: { // 进度条-参数
+    percentage: 0, // 百分比
+    color: [
+      { color: '#1989fa', percentage: 50 }, // 蓝色
+      { color: '#e6a23c', percentage: 80 }, // 橙色
+      { color: '#5cb87a', percentage: 100 }, // 绿色
+    ]
+  }
+})
+
+const pptSlides = ref([])
 
-const result = ref('')
 emitter.on('onResult', (data)=>{
   result.value = data
+  if (!!result.value.parentId) {
+    listEntpcoursefileNew({parentid: result.value.parentId}).then(res=>{
+      pptSlides.value = res.rows
+    })
+  }
 })
 
 const onCreate = () =>{
@@ -27,8 +78,232 @@ const onCreate = () =>{
     ElMessage.warning('请先进行研读')
     return
   }
+  pptDialog.value = true
 }
 
+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('请选择章节?')
+  pgDialog.visible = true
+  pgDialog.pg.percentage = 0
+  //TODO res中有PPT地址
+  const params = { evalid: node.id, edituserid: userStore.id, pageSize: 1 }
+  const resEnpt = await HTTP_SERVER_API('getCourseList', params)
+  if (!(resEnpt?.rows?.[0] || null)) { // 创建
+    const resid = await HTTP_SERVER_API('addEntpcourse')
+    courseObj.entp.id = resid
+  } else courseObj.entp = resEnpt?.rows?.[0] || null
+  // 下载PPT 并解析json转换到我们自己数据库
+  fetch(res.url)
+    .then(res => res.arrayBuffer())
+    .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
+      for (let o of slides) {
+        completed++
+        await toRousrceUrl(o)
+        // 设置进度条
+        pgDialog.pg.percentage = Math.floor(completed / total * 100)
+      }
+      pgDialog.pg.percentage = 0
+      pgDialog.visible = false
+      // 生成ppt课件-父级
+      const p_params = { parentContent: JSON.stringify(content) }
+      const parentid = await HTTP_SERVER_API('addEntpcoursefile', p_params)
+      if (!!parentid ?? null) { // 生成内容幻灯片
+        // 生成备课资源-Smarttalk
+        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: '', thumbnails, slides: resSlides }
+          const res_3 = await HTTP_SERVER_API('batchAddNew', params)
+          if (res_3 && res_3.code == 200) {
+            msgUtils.msgSuccess('生成PPT课件成功')
+            //TODO 打开生成的课件
+            updateGen(parentid)
+            listEntpcoursefileNew({parentid: parentid}).then(res=>{
+              pptSlides.value = res.rows
+            })
+            const res = await getEntpcoursefile(parentid)
+            if (res && res.code === 200) {
+              openPublicScreen('edit', res.data, smarttalk.resData) // 打开公屏-窗口
+            } else {
+              ElMessage.warning(res.msg||'文件获取异常！')
+            }
+          } else {
+            msgUtils.msgWarning('生成PPT课件失败')
+          }
+        }
+      }
+    }).finally(()=>{
+      pgDialog.visible = false
+  })
+}
+
+const openAiPPT = async () =>{
+  let parentid = result.value.parentId
+  const res = await getEntpcoursefile(parentid)
+  if (res && res.code === 200) {
+    const smarttalk = getSmarttalkPage({fileId: parentid})
+    openPublicScreen('edit', res.data, smarttalk.resData) // 打开公屏-窗口
+  } else {
+    ElMessage.warning(res.msg||'文件获取异常！')
+  }
+}
+
+const updateGen = (parentid)=>{
+  result.value.parentId = parentid
+  editSyllabus(result.value)
+}
+
+const openPublicScreen = (type, resource, currData)=> {
+  sessionStore.set('curr.resource', resource) // 缓存当前资源信息
+  if (type=='edit') sessionStore.set('curr.smarttalk', currData) // 缓存当前文件smarttalk
+  else sessionStore.set('curr.classcourse', currData) // 缓存当前当前上课
+  createWindow('open-win', {
+    url: '/pptist', // 窗口关闭时，清除缓存
+    close: () => {
+      sessionStore.set('curr.resource', null) // 清除缓存
+      if (type=='edit') {
+        sessionStore.set('curr.smarttalk', null) // 清除缓存
+      } else sessionStore.set('curr.classcourse', null) // 清除缓存
+    }
+  })
+}
+
+// 图片|音频|视频 转换为在线地址
+const toRousrceUrl = async (o) => {
+  if (!!o.src) { // 如果有src就转换
+    const isBase64 = /^data:image\/(\w+);base64,/.test(o.src)
+    const isBlobUrl = /^blob:/.test(o.src)
+    console.log('isBase64', o, isBase64)
+    if (isBase64) {
+      const bolb = commUtils.base64ToBlob(o.src)
+      const fileName = Date.now() + '.png'
+      const file = commUtils.blobToFile(bolb, fileName)
+      // o.src = fileName
+      // console.log('file', file)
+      const formData = new FormData()
+      formData.append('file', file)
+      const res = await Api_server.Other.uploadFile(formData)
+      if (res && res.code == 200) {
+        const url = res?.url
+        url && (o.src = url)
+      }
+    } else if (isBlobUrl) { // 视频和音频
+      const res = await fetch(o.src)
+      const blob = await res.blob()
+      const fileName = o.type == 'video' ? Date.now() + '.mp4' : Date.now() + '.mp3'
+      const file = commUtils.blobToFile(blob, fileName)
+      // o.src = fileName
+      // console.log('file', file)
+      const formData = new FormData()
+      formData.append('file', file)
+      const ress = await Api_server.Other.uploadFile(formData)
+      if (ress && ress.code == 200) {
+        const url = ress?.url
+        url && (o.src = url)
+      }
+    }
+  }
+  if (o?.background?.image) await toRousrceUrl(o.background.image)
+  if (o?.elements) {
+    for (let element of o.elements) {
+      await toRousrceUrl(element);
+    }
+  }
+}
+
+const HTTP_SERVER_API = (type, params = {}) => {
+  switch (type) {
+    case 'addSmarttalk': { // 获取课程
+      const node = courseObj.node || {}
+      const def = {
+        fileId: '', // 文件id - Entpcoursefile 对应id
+        fileFlag: 'aippt',
+        fileShowName: node.itemtitle + '.aippt',
+        textbookId: node.rootid,
+        levelFirstId: node.parentid || node.id,
+        levelSecondId: node.parentid && node.id,
+        fileSource: '个人',
+        fileRoot: '备课'
+      }
+      return API_smarttalk.creatAPT({ ...def, ...params })
+    }
+    case 'addEntpcourse': { // 添加课程
+      const node = courseObj.node || {}
+      if (!node) return msgUtils.msgWarning('请选择章节?')
+      const def = { // 默认参数
+        entpid: userStore.user.deptId, // 部门id
+        level: 1, // 层级
+        parentid: 0, // 父级id
+        dictid: 0, // 字典id
+        evalid: node.id, // 章节id
+        evalparentid: node.parentid, // 单元id(父级id)
+        edusubject: node.edusubject, // 学科
+        edudegree: node.edudegree, // 年级
+        edustage: node.edustage, // 阶段
+        coursetype: '课标学科', // 课程类型
+        coursetitle: node.itemtitle, // 课程名称
+        coursedesc: '', // 课程描述
+        status: '', // 状态
+        dflag: 0, // 状态
+        edituserid: userStore.id, // 编辑人id
+        createblankfile: 'no', // 创建空白文件
+      }
+      courseObj.entp = def
+      return API_entpcourse.addEntpcourse(def)
+    }
+    case 'addEntpcoursefile': { // 添加课程文件
+      params = getDefParams(params)
+      return API_entpcoursefile.addEntpcoursefileReturnId(params)
+    }
+    case 'batchAddNew': { // 批量添加课程文件
+      params = getDefParams(params)
+      return API_entpcoursefile.batchAddNew(params)
+    }
+    case 'getCourseList': { // 获取课程列表
+      return API_entpcourse.listEntpcourse(params)
+    }
+    case 'getCourseFileList': { // 获取课程文件列表
+      return API_entpcoursefile.listEntpcoursefileNew(params)
+    }
+  }
+}
+// 获取默认参数
+const getDefParams = (params) => {
+  const enpt = courseObj.entp
+  const def = {
+    parentid: 0,
+    entpid: userStore.user.deptId,
+    entpcourseid: enpt.id,
+    ppttype: 'file',
+    title: enpt.coursetitle,
+    fileurl: '',
+    filetype: 'aippt',
+    datacontent: '',
+    filekey: '',
+    filetag: '',
+    fileidx: 0,
+    dflag: 0,
+    status: '',
+    edituserid: userStore.id
+  }
+  return Object.assign(def, params)
+}
+onMounted(()=>{
+  let data = sessionStore.get('subject.curNode')
+  Object.assign(curNode, data);
+  courseObj.node = data
+})
+
 onUnmounted(()=>{
   emitter.off('onResult')
 })
@@ -51,6 +326,14 @@ onUnmounted(()=>{
     background-color: #fff;
     border-radius: 5px;
     overflow-y: auto;
+    .right-con-item{
+      display: flex;
+      margin: 10px 0;
+      justify-content: space-around;
+      img{
+        width: 150px;
+      }
+    }
   }
 }
 

src/renderer/src/views/teachingDesign/index.vue

@@ -12,10 +12,10 @@
     <el-col :span="5">
       <Left/>
     </el-col>
-    <el-col :span="13">
+    <el-col :span="15">
       <Center/>
     </el-col>
-    <el-col :span="6">
+    <el-col :span="4">
       <Right/>
     </el-col>
   </el-row>