| | |
| | | <div class="list"> |
| | | <div |
| | | class="main-image-box" |
| | | :style="{ width: viewSize.width + 'px', height: viewSize.height + 'px' }" |
| | | :style="{ width: viewSize.width + 'px', height: viewSize.height + 'px',position: 'relative' }" |
| | | > |
| | | <!-- 背景(必显示) --> |
| | | <el-image |
| | |
| | | class="background" |
| | | :src="selectPPT.pictureUrl" |
| | | /> |
| | | |
| | | <!-- 画中画 --> |
| | | <Vue3DraggableResizable |
| | | v-if="selectPPT.innerPicture && selectPPT.innerPicture.src" |
| | |
| | | <Delete /> |
| | | </el-icon> |
| | | </Vue3DraggableResizable> |
| | | <Vue3DraggableResizable |
| | | v-if="selectPPT.showDigitalHuman" |
| | | :parent="false" |
| | | :initW="PPTpositon.w" |
| | | :initH="PPTpositon.h" |
| | | @drag-move="onDragMove" |
| | | v-model:x="PPTpositon.x" |
| | | v-model:y="PPTpositon.y" |
| | | v-model:w="PPTpositon.w" |
| | | v-model:h="PPTpositon.h" |
| | | v-model:active="PPTpositon.active" |
| | | :draggable="true" |
| | | :resizable="true" |
| | | @activated="print('activated')" |
| | | @deactivated="print('deactivated')" |
| | | @drag-start="print('drag-start')" |
| | | @resize-start="print('resize-start')" |
| | | @dragging="print('dragging')" |
| | | @resizing="print('resizing')" |
| | | @drag-end="print('drag-end')" |
| | | @resize-end="print('resize-end')" |
| | | style="z-index: 2" |
| | | > |
| | | <el-image |
| | | class="minddle-host-image" |
| | | :src="selectHost ? selectHost.pictureUrl : ''" |
| | | /> |
| | | <el-icon |
| | | v-if="PPTpositon.active" |
| | | size="20" |
| | | color="#409eff" |
| | | style="position: absolute; top: 5px; right: 5px; z-index: 4" |
| | | @click.stop="deleteDigitalHuman" |
| | | <div style="width: 160%;height: 100%;position: absolute;top: 0;left: -30%"> |
| | | <Vue3DraggableResizable |
| | | v-if="selectPPT.showDigitalHuman" |
| | | :parent="true" |
| | | :initW="PPTpositon.w" |
| | | :initH="PPTpositon.h" |
| | | @drag-move="onDragMove" |
| | | v-model:x="PPTpositon.x" |
| | | v-model:y="PPTpositon.y" |
| | | v-model:w="PPTpositon.w" |
| | | v-model:h="PPTpositon.h" |
| | | v-model:active="PPTpositon.active" |
| | | :draggable="true" |
| | | :resizable="true" |
| | | @activated="print('activated')" |
| | | @deactivated="print('deactivated')" |
| | | @drag-start="print('drag-start')" |
| | | @resize-start="print('resize-start')" |
| | | @dragging="print('dragging')" |
| | | @resizing="print('resizing')" |
| | | @drag-end="print('drag-end')" |
| | | @resize-end="print('resize-end')" |
| | | style="z-index: 4" |
| | | > |
| | | <Delete /> |
| | | </el-icon> |
| | | </Vue3DraggableResizable> |
| | | <!-- {{PPTpositon.w}}{{PPTpositon.h}}--> |
| | | <el-image |
| | | class="minddle-host-image" |
| | | :src="selectHost ? selectHost.pictureUrl : ''" |
| | | /> |
| | | |
| | | <el-icon |
| | | v-if="PPTpositon.active" |
| | | size="20" |
| | | color="#409eff" |
| | | style="position: absolute; top: 5px; right: 5px; z-index: 4" |
| | | @click.stop="deleteDigitalHuman" |
| | | > |
| | | <Delete /> |
| | | </el-icon> |
| | | </Vue3DraggableResizable> |
| | | </div> |
| | | |
| | | </div> |
| | | </div> |
| | | <el-card |
| | |
| | | const template = selectTemplate.value |
| | | const pptList = applyAllTemplate.value ? PPTArr.value : [selectPPT.value] |
| | | |
| | | //数字人是统一生效的,先处理 |
| | | |
| | | // 数字人是统一生效的,先处理 |
| | | console.log(template) |
| | | pptList.forEach((item) => { |
| | | // 保存原始ppt图片 |
| | | const originalPPT = item.innerPicture?.src || item.pictureUrl |
| | |
| | | entityType: 1, |
| | | originHeight: courseInfo.value.height, |
| | | originWidth: courseInfo.value.width, |
| | | entityId: 1 |
| | | entityId: 1, |
| | | templateId: template.id, |
| | | } |
| | | } |
| | | } else { |
| | |
| | | } |
| | | |
| | | item.showDigitalHuman = template.showDigitalHuman |
| | | // 添加同步宽高的逻辑 |
| | | const targetTemplate = selectTemplate.value |
| | | console.log(PPTArr) |
| | | PPTArr.value.forEach((otherItem) => { |
| | | if (otherItem.templateId === item.templateId) { |
| | | otherItem.width = item.width |
| | | otherItem.height = item.height |
| | | } |
| | | }) |
| | | }) |
| | | |
| | | // 数字人位置也需要缩放 |
| | | PPTpositon.w = selectTemplate.value.humanW |
| | | PPTpositon.h = selectTemplate.value.humanH |
| | |
| | | } |
| | | |
| | | .minddle-host-image { |
| | | z-index: 3; |
| | | z-index: 5; |
| | | width: 100%; |
| | | height: 100%; |
| | | } |