代码整理

src/views/ppt_manage/mixins/pptMixins.js

@@ -101,7 +101,7 @@ export default {
                     y:'50%',
                     w:'60%',
                     h:'28%',
-                    color:'ffffff',
+                    color:'333333',
                     align:'center',
                     fontFace:'SimHei'
                 })

src/views/ppt_manage/newVersion/components/editor/ChooseCoverNew.vue

@@ -32,12 +32,11 @@
                             placeholder="请输入PPT标题" style="width:100%;"></el-input>
                     </div>
                     <div class="el-box box">
-                        <p @click.stop="addTextEl">插入文本<span><img src="~@/assets/img/ppt_m/text-icon.png"></span></p>
+                        <p @click.stop="addTextEl">插入文本<span style="vertical-align: middle;"><img src="~@/assets/img/ppt_m/text-icon.png"></span></p>
                     </div>
                     <div class="el-tool-box box">
-                        <p style="margin-bottom: 10px;">文本设置</p>
+                        <p style="margin-bottom: 10px;">文本设置 <span v-if="!activeEl.id" style="color:#B2B9CB;">请选择文本元素</span></p>
                         <div class="cover-text-toolbar" @mousedown.stop></div>
-                        <p v-if="!activeEl.id">请选择文本元素</p>
                     </div>
                     <div class="dialog-btn">
                         <el-button @click="saveCover">保存</el-button>
@@ -77,10 +76,10 @@ export default {
     },
     data() {
         return {
-            coverElList: [],
-            activeEl:{},
-            copyEl:{},
-            pageData:{Title:''},
+            coverElList: [], //封面自定义内容
+            activeEl:{}, //当前选择的元素
+            copyEl:{}, //当前copy的元素
+            pageData:{Title:''}, //封面标题，背景图等设置
             searchIndex:0,
             choosedIndex:0
         };
@@ -97,24 +96,24 @@ export default {
         setCoverInfo() {
             this.pageData.Title = this.firstPage.Title||''
             this.searchIndex = this.pptCoverList.findIndex(i=>i===this.firstPage.BackgroundImg)
+            //如果基本配置-封面图，没有当前ppt的封面图，则默认第一个
             if(this.searchIndex===-1){
                 this.pageData.BackgroundImg = this.pptCoverList[0]
             }
+            //如果封面页内容不是合法的json，置空
             try{
                 this.coverElList = JSON.parse(this.CoverContent);
             }catch(e){
                 this.coverElList = []
             }
         },
+        //保存封面配置
         saveCover() {
-            //校验
             if(!this.pageData.Title.length){
                 return this.$message.warning("请输入PPT标题")
             }
-            /* if(!this.coverElList.length){
-
-            } */
             const coverContent = JSON.stringify(this.coverElList);
+            //校验标题
             pptInterface.pptTitleCheck({PptId:this.$route.query.id || this.PptId ||0,Title:this.pageData.Title}).then(res=>{
                 if(res.Ret == 200){
                     this.$emit('saveCover', {
@@ -123,7 +122,6 @@ export default {
                     });
                 }
             })
-            //this.$emit('saveCover', coverContent);
         },
         changeActEl(el){
             this.activeEl = el
@@ -144,8 +142,8 @@ export default {
             el = {...el,...options}
             const areaWidth = $(".editor-area").width()||0
             const areaHeight = areaWidth*0.7
-            const percentageShape = caclShapePercentage({layerWidth:areaWidth,layerHeight:areaHeight},this.activeEl)
-            el = {...el,...percentageShape,...options}
+            const percentageShape = caclShapePercentage({layerWidth:areaWidth,layerHeight:areaHeight},el)
+            el = {...el,...percentageShape}
             el.id = createRandomCode()
             this.coverElList.push(el)
             this.changeActEl(el)
@@ -223,7 +221,7 @@ export default {
             .cover{
                 min-width: 640px;
                 flex:1;
-                background-color: #C8CDD9;
+                background-color: #c8cdd921;
                 display: flex;
                 align-items: center;
                 box-sizing: border-box;
@@ -236,7 +234,7 @@ export default {
                     width:100%;
                     height: 0;
                     padding-bottom: 70%;
-                    background-color:bisque;
+                    /* background-color:bisque; */
                     background-repeat: no-repeat;
                     background-position: center;
                     background-size: 100% 100%;
@@ -253,7 +251,6 @@ export default {
                         span{
                             cursor: pointer;
                             margin-left: 10px;
-                            vertical-align: middle;
                             img{
                                 width:23px;
                                 height:23px;

src/views/ppt_manage/newVersion/components/editor/chooseCover/elMixin.js

@@ -1,4 +1,4 @@
-import{getBoundary,getLineScaleInfo,caclShapePercentage} from "@/views/ppt_manage/newVersion/utils/untils";
+import{getBoundary,caclShapePercentage} from "@/views/ppt_manage/newVersion/utils/untils";
 import ContextMenu from "@/views/ppt_manage/newVersion/components/layer/Element/ShapeContextMenu.vue";
 export default{
     components:{ContextMenu},
@@ -170,10 +170,10 @@ export default{
           //更新percentage单位
           const width = $('.editor-area').width(),height = width*0.7
           const percentageShape = caclShapePercentage({layerWidth:width,layerHeight:height},this.elementInfo)
-          this.elementInfo.percentageLeft = Number(percentageShape.percentageLeft.toFixed(5))
-          this.elementInfo.percentageTop = Number(percentageShape.percentageTop.toFixed(5))
-          this.elementInfo.percentageWidth = Number(percentageShape.percentageWidth.toFixed(5))
-          this.elementInfo.percentageHeight = Number(percentageShape.percentageHeight.toFixed(5))
+          this.elementInfo.percentageLeft = percentageShape.percentageLeft
+          this.elementInfo.percentageTop = percentageShape.percentageTop
+          this.elementInfo.percentageWidth = percentageShape.percentageWidth
+          this.elementInfo.percentageHeight = percentageShape.percentageHeight
         },
         //显示右键菜单
         showContentMenu(e){

src/views/ppt_manage/newVersion/pptEditor.vue

@@ -2,7 +2,7 @@
   <div class="page-wrap">
     <div class="index-wrap ppt-page-wrap flex-column">
         <div class="cover-wrap" @click="openChooseCover">
-            <div class="cover" :style="'background: no-repeat center/cover url('+firstPage.BackgroundImg+');background-color:#F2F6FA;background-size:100% 100%;'">
+            <div class="cover" :style="`background: no-repeat center/cover url(${firstPage.BackgroundImg||''});background-color:#F2F6FA;background-size:100% 100%;`">
                 <img src="~@/assets/img/ppt_m/add_first.png" />
             </div>
             <p class="hint-text">选择封面页</p>
@@ -137,7 +137,7 @@
                 <div class="chart-list" v-infinite-scroll="loadReportHandle" :infinite-scroll-immediate="false" ref="chartListRef">
                     <template v-if="chartList.length">
                     <div v-for="(item, index) in chartList" :key="index" @click="chooseChart(item,'chart')" class="chart-item" :style="item.Disabled && 'cursor: not-allowed;'">
-                        <p class="chart_tit">{{ item.ChartName }}</p>
+                        <p class="chart_tit" style="word-break: break-all;">{{ item.ChartName }}</p>
                         <img :src="item.ChartImage" ref="insert_img" style="-webkit-user-drag:none;"/>
                     </div>
                     </template>

src/views/ppt_manage/newVersion/pptEnEditor.vue

@@ -2,7 +2,7 @@
   <div class="page-wrap">
     <div class="index-wrap ppt-page-wrap flex-column">
         <div class="cover-wrap" @click="openChooseCover">
-            <div class="cover" :style="'background: no-repeat center/cover url('+firstPage.BackgroundImg+');background-color:#F2F6FA;background-size:100% 100%;'">
+            <div class="cover" :style="`background: no-repeat center/cover url(${firstPage.BackgroundImg||''});background-color:#F2F6FA;background-size:100% 100%;`">
                 <img src="~@/assets/img/ppt_m/add_first.png" />
             </div>
             <p class="hint-text">选择封面页</p>
@@ -138,7 +138,7 @@
                           <span v-if="item.IsEnChart">En</span>
                           <i class="el-icon-edit" v-else style="font-size:15px"/>
                         </div>
-                        <p class="chart_tit">{{ chart_source===1 ? (item.ChartNameEn||item.ChartName) : item.ChartName }}</p>
+                        <p class="chart_tit" style="word-break: break-all;">{{ chart_source===1 ? (item.ChartNameEn||item.ChartName) : item.ChartName }}</p>
                         <img :src="item.ChartImage" ref="insert_img" />
                     </div>
                     </template>

src/views/ppt_manage/newVersion/pptEnPublish.vue

@@ -50,7 +50,7 @@
 import Cover from './components/CoverEn.vue';
 import CustomCover from './components/CustomCover.vue';
 import TransReport from './components/catalog/transReport.vue';
-import {countComponentName,pptInit,pptConfigInit,toTextProps,toJson,svg2Base64,getImgRealSize,calcScale,getShapeOptions,createRandomCode,getTableData} from './utils/untils';
+import {countComponentName,pptConfigInit,toTextProps,toJson,svg2Base64,getImgRealSize,calcScale,getShapeOptions,createRandomCode,getTableData} from './utils/untils';
 import {marginTop,modelConfig,pptSlideMaster,pptSlideMasterEn,pptCoverEn} from './utils/config';
 import pptmixin from '../mixins/pptMixins';
 import mixins from '../mixins/mixins';
@@ -216,7 +216,6 @@ export default {
     async pageToPptx(){
       //开始计时
       const start = Date.now()
-      //let pptx = pptInit(new pptxgen(),this.LayoutType,'en');
       const SlideMaster = _.cloneDeep(pptSlideMasterEn) 
       SlideMaster.objects[1] = {image: {x:0,y:0,w:10,h:7,path:this.pptBgImage}}
       let pptx = pptConfigInit(new pptxgen(),this.LayoutType,'en',SlideMaster,this.pptBgImage)
@@ -225,8 +224,6 @@ export default {
       const length = this.pageList.length;
       for (let i = 0; i < length; i++) {
         let slide = pptx.addSlide({ masterName: pptSlideMaster.title });
-        //添加背景图片
-        //slide.background = { path: "/static/pptnextimg.png" };
         slide.addText(this.pageList[i].title, {
           placeholder:"slideTitle",
           x:'8%',
@@ -308,7 +305,6 @@ export default {
               valign:'top'
             })
           }else if(imgData2){
-            //console.log('src',imgData2)
             const realSize = getImgRealSize(imgData2Obj)
             const percentWidth = Number(width.substring(0,width.length-1))
             const percentHeight = Number(height.substring(0,height.length-1))
@@ -341,7 +337,6 @@ export default {
           if(['shape','line'].includes(layers[j].type)){
             const scale = calcScale({w:906,h:906*0.7},{w:$('.ppt-item').width(),h:$('.ppt-item').width()*this.coefficient})
             let options = getShapeOptions(layers[j],position,scale)
-            //console.log('options',options)
             if(layers[j].shapeType==='Circle'){ //circle的points太复杂,直接用插件预设的
                 slide.addShape('ellipse', options);
             }else{
@@ -379,7 +374,6 @@ export default {
       }
       //为了把封面放到第一页,操作pptx.slides达不成想要的效果,于是弄了个pptx2
       //将封面放在最后生成是因为htmlToCanvans占用太多内存会导致页面假死
-      //let pptx2 = pptInit(new pptxgen(),this.LayoutType,'en');
       let pptx2 = pptConfigInit(new pptxgen(),this.LayoutType,'en',SlideMaster,this.pptBgImage)
       //添加封面
       let cover = pptx2.addSlide()

src/views/ppt_manage/newVersion/pptPublish.vue

@@ -59,7 +59,7 @@ import Cover from './components/Cover.vue';
 import CustomCover from './components/CustomCover.vue';
 import TransReport from './components/catalog/transReport.vue';
 //import {pageList} from './utils/mock';
-import {countComponentName,pptInit,pptConfigInit,toTextProps,toJson,svg2Base64,getImgRealSize,calcScale,getShapeOptions,createRandomCode,getTableData} from './utils/untils';
+import {countComponentName,pptConfigInit,toTextProps,toJson,svg2Base64,getImgRealSize,calcScale,getShapeOptions,createRandomCode,getTableData} from './utils/untils';
 import {marginTop,modelConfig,pptSlideMaster} from './utils/config';
 import pptmixin from '../mixins/pptMixins';
 import mixins from '../mixins/mixins';
@@ -228,7 +228,6 @@ export default {
     async pageToPptx(){
       //开始计时
       const start = Date.now()
-      //let pptx = pptInit(new pptxgen(),this.LayoutType);
       const SlideMaster = _.cloneDeep(pptSlideMaster) 
       SlideMaster.objects[1] = {image: {x:0,y:0,w:10,h:7,path:this.pptBgImage}}
       let pptx = pptConfigInit(new pptxgen(),this.LayoutType,'ch',SlideMaster,this.pptBgImage)
@@ -236,10 +235,7 @@ export default {
       pptx.addSlide()
       const length = this.pageList.length;
       for (let i = 0; i < length; i++) {
-        //console.log(`正在生成,第${i+1}页...`,`lastVisibleItemIndex:`,this.lastVisibleItemIndex)
         let slide = pptx.addSlide({ masterName: pptSlideMaster.title });
-        //添加背景图片
-        //slide.background = { path: "/static/pptnextimg.png" };
         slide.addText(this.pageList[i].title, {
           placeholder:"slideTitle",
           x:'10%',
@@ -321,7 +317,6 @@ export default {
               valign:'top'
             })
           }else if(imgData2){
-            //console.log('src',imgData2)
             const realSize = getImgRealSize(imgData2Obj)
             const percentWidth = Number(width.substring(0,width.length-1))
             const percentHeight = Number(height.substring(0,height.length-1))
@@ -358,7 +353,6 @@ export default {
           if(['shape','line'].includes(layers[j].type)){
             const scale = calcScale({w:906,h:906*0.7},{w:$('.ppt-item').width(),h:$('.ppt-item').width()*this.coefficient})
             let options = getShapeOptions(layers[j],position,scale)
-            //console.log('options',options)
             if(layers[j].shapeType==='Circle'){ //circle的points太复杂,直接用插件预设的
                 slide.addShape('ellipse', options);
             }else{
@@ -398,7 +392,6 @@ export default {
       
       //为了把封面放到第一页,操作pptx.slides达不成想要的效果,于是弄了个pptx2
       //将封面放在最后生成是因为htmlToCanvans占用太多内存会导致页面假死
-      //let pptx2 = pptInit(new pptxgen(),this.LayoutType);
       let pptx2 = pptConfigInit(new pptxgen(),this.LayoutType,'ch',SlideMaster,this.pptBgImage)
       //添加封面
       let cover = pptx2.addSlide()

src/views/ppt_manage/newVersion/utils/untils.js

@@ -486,10 +486,10 @@ export const calcScale = (oldShap,newShap)=>{
 export const caclShapePercentage = (layer,el)=>{
   const {layerWidth,layerHeight} = layer
   const {left,top,width,height} = el
-  const percentageLeft = left/layerWidth
-  const percentageTop = top/layerHeight
-  const percentageWidth = width/layerWidth
-  const percentageHeight = height/layerHeight
+  const percentageLeft = Number((left/layerWidth).toFixed(5))
+  const percentageTop = Number((top/layerHeight).toFixed(5))
+  const percentageWidth = Number((width/layerWidth).toFixed(5))
+  const percentageHeight = Number((height/layerHeight).toFixed(5))
   return {percentageLeft,percentageTop,percentageWidth,percentageHeight}
 }
 //计算图层元素的真实宽高