src/renderer/src/AixPPTist/src/views/Editor/CanvasTool/index.vue

@@ -113,16 +113,14 @@
       />
     </Modal>
 
-    <Modal
-      v-model:visible="classWorkTaskVisible" 
-      :width="880"
-    >
+    
+    <el-dialog v-model="classWorkTaskVisible" append-to-body :show-close="false" width="70%">
       <QuestToPPTist 
         class="class-work-task-modal"
         @close="classWorkTaskVisible = false"
         @update="data => { onhtml2canvas(data); classWorkTaskVisible = false }"
       />
-    </Modal>
+    </el-dialog>
 
     <Modal
     v-model:visible="materiaVisible" 
@@ -390,7 +388,7 @@ const insertMaterial = (item: MaterialParams) =>{
   }
 }
 .class-work-task-modal{
-  height: 80vh;
+  height: 70vh;
 }
 
 @media screen and (width <= 1200px) {

src/renderer/src/AixPPTist/src/views/components/element/ImageElement/ImageClipHandler.vue

@@ -154,13 +154,15 @@ const topImgWrapperPositionStyle = computed(() => {
 const topImgPositionStyle = computed(() => {
   const bottomWidth = imgPosition.value.width
   const bottomHeight = imgPosition.value.height
+  console.log("底层图片位置大小（遮罩区域图片）", imgPosition.value)
   
   const { top, left, width, height } = topImgWrapperPosition.value
-  
+  console.log("width", ((bottomWidth / width * 100) - (left * (100 / width))) + '%')
+  console.log("height", bottomHeight / height * 100 + '%')
   return {
     left: -left * (100 / width) + '%',
     top: -top * (100 / height) + '%',
-    width: bottomWidth / width * 100 + '%',
+    width: ((bottomWidth / width * 100) - (left * (100 / width))) + '%' ,
     height: bottomHeight / height * 100 + '%',
   }
 })
@@ -228,6 +230,7 @@ const updateRange = () => {
     width: parseInt(topImgPositionStyle.value.width),
     height: parseInt(topImgPositionStyle.value.height),
   }
+  console.log('retPosition', retPosition)
 
   const widthScale = 100 / retPosition.width
   const heightScale = 100 / retPosition.height
@@ -475,7 +478,7 @@ const scaleClipRange = (e: MouseEvent, type: OperateResizeHandlers) => {
     isMouseDown = false
     document.onmousemove = null
     document.onmouseup = null
-
+console.log('----------------------------------')
     updateRange()
 
     setTimeout(() => isSettingClipRange.value = false, 0)

src/renderer/src/views/classTask/newClassTaskAssign/questToPPTist/index.vue

@@ -68,7 +68,7 @@ defineExpose({
   
   .page-resource {
     user-select: none;
-    height: calc(100% - 55px);
+    height: 100%;
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;

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

@@ -0,0 +1,33 @@
+
+<template>
+  <el-dialog v-model="open" v-bind="dAttrs">
+    <el-progress type="dashboard" v-bind="$attrs.pg" />
+  </el-dialog>
+</template>
+<script setup>
+// 功能说明 弹窗进度条组件
+import { computed, useAttrs } from 'vue'
+const attrs = useAttrs()
+const props = defineProps({
+  visible: { // 是否显示弹窗
+    type: Boolean,
+    default: false
+  },
+})
+// 数据更新
+const emit = defineEmits(['update:visible'])
+// 弹窗显示-双向绑定
+const open = computed({
+  get: () => props.visible,
+  set: val => emit('update:visible', val)
+})
+//  弹窗属性
+const dAttrs = computed(() => {
+  const attrsNew = { ...attrs }
+  delete attrsNew.pg
+  return attrsNew
+})
+</script>
+<style lang="scss" scoped>
+
+</style>

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

@@ -50,6 +50,7 @@
   <EditDialog v-model="isEdit" :item="curItem" />
   <AdjustDialog v-model="isAdjust" :item="curItem" />
   <PptDialog @add-success="addAiPPT" :dataList="resultList" v-model="pptDialog"/>
+  <progress-dialog v-model:visible="pgDialog.visible" v-bind="pgDialog" />
 </template>
 
 <script setup>
@@ -58,6 +59,7 @@ import { sessionStore } from '@/utils/store'
 import emitter from '@/utils/mitt'
 import EditDialog from './edit-dialog.vue'
 import AdjustDialog from './adjust-dialog.vue'
+import progressDialog from './progress-dialog.vue'
 import { completion, tempResult } from '@/api/mode/index.js'
 // import { dataSetJson } from '@/utils/comm.js'
 import * as commUtils from '@/utils/comm.js'
@@ -77,7 +79,22 @@ const resultList = ref([])
 const courseObj = reactive({
   node: null, // 选择的课程节点
 })
-
+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 }, // 绿色
+    ]
+  }
+})
 emitter.on('changeMode', (item) => {
   console.log(item, 'item')
   resultList.value = item.child
@@ -115,6 +132,8 @@ const params = reactive(
 const addAiPPT = async(res) => {
   let node = courseObj.node
   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)
@@ -129,10 +148,16 @@ const addAiPPT = async(res) => {
       const resPptJson = await PPTXFileToJson(buffer)
       const { def, slides, ...content } = resPptJson
       // 转换图片|音频|视频 为线上地址
+      let completed = 0
+      const total = slides.length
       for( let o of slides ) {
+        completed++
         await toRousrceUrl(o)
+        // 设置进度条
+        pgDialog.pg.percentage = Math.floor(completed / total * 100)
       }
-      // return
+      pgDialog.pg.percentage = 0
+      pgDialog.visible = false
       // 生成ppt课件-父级
       const p_params = {parentContent: JSON.stringify(content)}
       const parentid = await HTTP_SERVER_API('addEntpcoursefile', p_params)