cxmo преди 7 месеца
родител
ревизия
2cdda46e77
променени са 3 файла, в които са добавени 41 реда и са изтрити 49 реда
  1. 4 5
      src/views/ppt_manage/mixins/pptMixins.js
  2. 16 21
      src/views/ppt_manage/newVersion/pptEnPublish.vue
  3. 21 23
      src/views/ppt_manage/newVersion/pptPublish.vue

+ 4 - 5
src/views/ppt_manage/mixins/pptMixins.js

@@ -768,15 +768,14 @@ export default {
             let svgDoc = parser.parseFromString(svgData, 'image/svg+xml');
 
             // 查找class为'background'的rect元素并修改fill属性
-            var rectElement = svgDoc.querySelector('rect.highcharts-plot-background');
+            let rectElement = svgDoc.querySelector('rect.highcharts-plot-background');
             if (rectElement) {
                 rectElement.setAttribute('fill', plotBackgroundColor);
             }
-
             // 将修改后的SVG文档转换回字符串
-            var serializer = new XMLSerializer();
-            var updatedSvgCode = serializer.serializeToString(svgDoc);
-            this.chartSVGDataMap[chartId] = updatedSvgCode
+            let serializer = new XMLSerializer();
+            let updatedSvgCode = serializer.serializeToString(svgDoc);
+            this.chartSVGDataMap[`${refName}_${chartId}`] = updatedSvgCode
         }
       });
     },

+ 16 - 21
src/views/ppt_manage/newVersion/pptEnPublish.vue

@@ -1,13 +1,9 @@
 <template>
   <div class="publish-page-wrap page-wrap">
       <div class="pub-btn-list">
-        <!-- <div>图表转换方式:
-          <el-radio v-model="transChartType" :label="1">传服务器</el-radio>
-          <el-radio v-model="transChartType" :label="2">本地转</el-radio>
-        </div> -->
         <el-button  type="primary" plain style="width:182px;height:40px;" @click="$router.push({path:'/pptenlist'})">{{$t('Slides.return_to_list')}}</el-button>
           <!-- 下载配置 -->
-          <div class="setting">
+          <!-- <div class="setting">
             <div>
                 <span>是否压缩</span>
                 <el-radio v-model="setCompression" :label="true">是</el-radio>
@@ -18,7 +14,7 @@
                 <el-radio v-model="setCompression2" :label="true">开</el-radio>
                 <el-radio v-model="setCompression2" :label="false">关</el-radio>
             </div>
-        </div>
+        </div> -->
         <el-button  type="primary" style="width:182px;height:40px;margin-left: 0;" @click="downloadPPT" :disabled="isPublish">{{$t('Slides.operations_download')}}</el-button>
         <el-dropdown split-button style="width:182px;height:40px;" type="primary" @click="transHandle" @command="handleCommand" :disabled="isPublish">
           {{layoutStr}}
@@ -119,8 +115,9 @@ export default {
       transChartType:2,//生成PPT时,转换动态图表的方式:1.将svg传至服务端转换;2.调用changeUrl转换
       currentLang:'en',//语言标识
 
-      setCompression:false,
-      setCompression2:false,
+      setCompression:true,
+      setCompression2:true,
+      downloadLoading:null,
     };
   },
   watch:{
@@ -300,7 +297,7 @@ export default {
             if(svgData){
                 //将svgDom转为base64 png,返回一个base64字符串
                 imgData = this.setCompression2
-                         ?svgData2Base64(this.chartSVGDataMap[elements[j].chartId])
+                         ?svgData2Base64(this.chartSVGDataMap[`chart_${i}_${elements[j].position}_${elements[j].chartId}`])
                          :await this.changeUrl(`chart_${i}_${elements[j].position}`)
             }
           } else if (elements[j].type === 'text'){
@@ -325,16 +322,6 @@ export default {
             elements[j].position
           );
           if (imgData) {
-            if(this.transChartType===1){
-              slide.addImage({
-                path:imgData,
-                x: x,
-                y: y,
-                w: width,
-                h: height,
-                size: { type: "contain" },
-              });
-            }else if(this.transChartType===2){
               slide.addImage({
                 data:imgData,
                 x: x,
@@ -343,7 +330,6 @@ export default {
                 h: height,
                 size: { type: "contain" },
               });
-            }
 
             //追加生成图表底部文字
             this.transChartBottomInfo(slide,{x,y,width,height},this.optionMap[this.pageList[i].elements[j].chartId])
@@ -434,7 +420,16 @@ export default {
       //pptx2.writeFile({ fileName: "test.pptx" });//本地测试用
       //直接下载
       if(type==='dowload'){
-        pptx2.writeFile({ fileName: `${this.coverInfo.page.Title||'unname'}.pptx`,compression:this.setCompression});
+        this.downloadLoading = this.$loading({
+            fullscreen:true,
+            text:'生成PPT完成,正在下载PPT...'
+        })
+        pptx2.writeFile({ 
+            fileName: `${this.coverInfo.page.Title||'unname'}.pptx`,
+            compression:this.setCompression
+        }).then(()=>{
+            this.downloadLoading.close()
+        })
         return
       }
       this.publishLoading = this.$loading({

+ 21 - 23
src/views/ppt_manage/newVersion/pptPublish.vue

@@ -1,15 +1,10 @@
 <template>
   <div class="publish-page-wrap page-wrap">
       <div class="pub-btn-list">
-        <!-- <el-button  type="primary" style="width:120px;height:40px;" @click="transHandle" :loading="isPublish">{{isPublish?'发布中':'发布'}}</el-button> -->
-        <!-- <div>图表转换方式:
-          <el-radio v-model="transChartType" :label="1">传服务器</el-radio>
-          <el-radio v-model="transChartType" :label="2">本地转</el-radio>
-        </div> -->
         <el-button  type="primary" plain style="width:182px;height:40px;" @click="$router.push({path:'/pptlist'})">{{$t('Slides.return_to_list')}}</el-button>
 
         <!-- 下载配置 -->
-        <div class="setting">
+        <!-- <div class="setting">
             <div>
                 <span>是否压缩</span>
                 <el-radio v-model="setCompression" :label="true">是</el-radio>
@@ -20,7 +15,7 @@
                 <el-radio v-model="setCompression2" :label="true">开</el-radio>
                 <el-radio v-model="setCompression2" :label="false">关</el-radio>
             </div>
-        </div>
+        </div> -->
         <el-button  type="primary" style="width:182px;height:40px;margin-left: 0;" @click="downloadPPT" :disabled="isPublish">{{$t('Slides.operations_download')}}</el-button>
         <el-dropdown split-button style="width:182px;height:40px;" type="primary" @click="transHandle" @command="handleCommand" :disabled="isPublish">
           {{layoutStr}}
@@ -131,10 +126,10 @@ export default {
       layoutStr:`10:7${this.$t('Slides.default_publish')}`,
       ReportId:0,//ppt对应的双周报id,如果没转过,则为0
       transReportShow:false,//转双周报的弹窗是否显示
-      transChartType:2,//生成PPT时,转换动态图表的方式:1.将svg传至服务端转换;2.调用changeUrl转换
 
-      setCompression:false,
-      setCompression2:false,
+      setCompression:true,
+      setCompression2:true,
+      downloadLoading:null
     };
   },
   watch:{
@@ -325,8 +320,13 @@ export default {
             let svgData = this.optionMap[this.pageList[i].elements[j].chartId] instanceof Object
             if(svgData){
                 //将svgDom转为base64 png,返回一个base64字符串
+                //转换方式有两种,两者生成的图表无明显差别
+                /**
+                 * svgData2Base64:通过chart.getSVG获取,可能会与页面上的图表有所差别,但生成的svg更小,速度更快
+                 * changeUrl:通过html获取,页面上什么样,图表就什么样,为了保证清晰度将原图表放大4倍后通过canvas转为png,这个过程比较耗时,生成的文件也会比较大
+                 */
                 imgData = this.setCompression2
-                         ?svgData2Base64(this.chartSVGDataMap[elements[j].chartId])
+                         ?svgData2Base64(this.chartSVGDataMap[`chart_${i}_${elements[j].position}_${elements[j].chartId}`])
                          :await this.changeUrl(`chart_${i}_${elements[j].position}`)
             }
           } else if (elements[j].type === 'text'){
@@ -351,16 +351,6 @@ export default {
             elements[j].position
           );
           if (imgData) { //图表
-            if(this.transChartType===1){
-              slide.addImage({
-                path:imgData,
-                x: x,
-                y: y,
-                w: width,
-                h: height,
-                size: { type: "contain" },
-              });
-            }else if(this.transChartType===2){
               slide.addImage({
                 data:imgData,
                 x: x,
@@ -369,7 +359,6 @@ export default {
                 h: height,
                 size: { type: "contain" },
               });
-            }
 
             //追加生成图表底部文字
             this.transChartBottomInfo(slide,{x,y,width,height},this.optionMap[this.pageList[i].elements[j].chartId])
@@ -462,7 +451,16 @@ export default {
       //pptx.writeFile({ fileName: "test.pptx" });//本地测试用
       //直接下载
       if(type==='dowload'){
-        pptx.writeFile({ fileName: `${this.coverInfo.page.Title||'unname'}.pptx`,compression:this.setCompression });
+        this.downloadLoading = this.$loading({
+            fullscreen:true,
+            text:'生成PPT完成,正在下载PPT...'
+        })
+        pptx.writeFile({ 
+            fileName: `${this.coverInfo.page.Title||'unname'}.pptx`,
+            compression:this.setCompression 
+        }).then(()=>{
+            this.downloadLoading.close()
+        })
         return
       }
       this.publishLoading = this.$loading({