Browse Source

增加图表转换优化

cxmo 7 tháng trước cách đây
mục cha
commit
4fcf274c87

+ 28 - 7
src/views/ppt_manage/mixins/pptMixins.js

@@ -70,7 +70,10 @@ export default {
 
       //截面散点设置英文props
 			enChartInfo: {},
-			enEdblist:[]
+			enEdblist:[],
+
+
+        chartSVGDataMap:{}
     }
   },
   methods: {
@@ -592,7 +595,8 @@ export default {
           this.initChart(
 				    `chart_${index}_${item.position}`,
 				    this.optionMap[item.chartId],
-				    page
+				    page,
+                    item.chartId
 			    )
         }else{
           //显示图表已被删除
@@ -604,7 +608,7 @@ export default {
 			
       });
     },
-    initChart(refName, options, page) {
+    initChart(refName, options, page,chartId="") {
       console.log("refName", refName);
       const index = this.pageList.findIndex((i) => i.id === page.id)
       if(index===-1) return
@@ -727,22 +731,39 @@ export default {
 
         if(!$(`#${refName}`)[0]) return
 
-        console.log(SpecialOption)
-
+        let chart = null
         if(is_linear)
-          Highcharts.chart({
+          chart = Highcharts.chart({
             // Highcharts 配置
             ...options,
             ...SpecialOption,
             ...secialBarOpt
             });
         else
-        Highcharts.stockChart({
+        chart = Highcharts.stockChart({
           // Highcharts 配置
           ...options,
           ...SpecialOption,
           ...secialBarOpt
         });
+        
+        
+        if(isPublish&&chartId){
+            const {clientWidth,clientHeight} = $(`#${refName}`)[0]
+            this.chartSVGDataMap[chartId] = chart.getSVG({
+                chart:{
+                    width:clientWidth,
+                    height:clientHeight,
+                    backgroundColor: "rgba(255,255,255,0)",
+                    plotBorderColor:null,
+                    plotBackgroundColor:null,
+                    plotBackgroundImage:null,
+                    plotBorderWidth:null,
+                    plotShadow:false,
+                    animation: false,
+                }
+            })
+        }
       });
     },
     initImages(elements,page){

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

@@ -8,13 +8,28 @@
         </div> -->
         <el-button  type="primary" plain style="width:182px;height:40px;" @click="$router.push({path:'/pptlist'})">{{$t('Slides.return_to_list')}}</el-button>
         <!-- <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" @command="(command)=>{setCompression = command}" @click="downloadPPT">
+
+        <!-- 下载配置 -->
+        <div class="setting">
+            <div>
+                <span>是否压缩</span>
+                <el-radio v-model="setCompression" :label="true">是</el-radio>
+                <el-radio v-model="setCompression" :label="false">否</el-radio>
+            </div>
+            <div>
+                <span>图表转换优化</span>
+                <el-radio v-model="setCompression2" :label="true">开</el-radio>
+                <el-radio v-model="setCompression2" :label="false">关</el-radio>
+            </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" @command="(command)=>{setCompression = command}" @click="downloadPPT">
             {{setCompression?'下载(压缩版)':'下载'}}
             <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item :command="false">不压缩</el-dropdown-item>
                 <el-dropdown-item :command="true">压缩</el-dropdown-item>
             </el-dropdown-menu>
-        </el-dropdown>
+        </el-dropdown> -->
         <el-dropdown split-button style="width:182px;height:40px;" type="primary" @click="transHandle" @command="handleCommand" :disabled="isPublish">
           {{layoutStr}}
           <el-dropdown-menu slot="dropdown">
@@ -72,7 +87,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,pptConfigInit,toTextProps,toJson,svg2Base64,getImgRealSize,calcScale,countStrSize,getShapeOptions,createRandomCode,getTableData,getChartInfo,pptInit,rgbaToHex } from './utils/untils';
+import {countComponentName,pptConfigInit,toTextProps,toJson,svg2Base64,svgData2Base64,getImgRealSize,calcScale,countStrSize,getShapeOptions,createRandomCode,getTableData,getChartInfo,pptInit,rgbaToHex } from './utils/untils';
 import {marginTop,modelConfig,pptSlideMaster} from './utils/config';
 import pptmixin from '../mixins/pptMixins';
 import mixins from '../mixins/mixins';
@@ -127,6 +142,7 @@ export default {
       transChartType:2,//生成PPT时,转换动态图表的方式:1.将svg传至服务端转换;2.调用changeUrl转换
 
       setCompression:false,
+      setCompression2:false,
     };
   },
   watch:{
@@ -320,8 +336,9 @@ export default {
                 imgData = Data.ResourceUrl
               }else if(this.transChartType===2){
                 //将svgDom转为base64 png,返回一个base64字符串
-                imgData = await this.changeUrl(`chart_${i}_${elements[j].position}`)
+                //imgData = await this.changeUrl(`chart_${i}_${elements[j].position}`)
                 //imgData = svg2Base64($(`#chart_${i}_${elements[j].position} svg`)[0])//生成的svg背景色是黑色不是透明
+                imgData = this.setCompression2?svgData2Base64(this.chartSVGDataMap[elements[j].chartId]):await this.changeUrl(`chart_${i}_${elements[j].position}`)
               }
             }
           } else if (elements[j].type === 'text'){

+ 3 - 0
src/views/ppt_manage/newVersion/utils/untils.js

@@ -461,6 +461,9 @@ const encode = (input) => {
   }
   return output
 }
+export const svgData2Base64 = (svg)=>{
+    return PREFIX + encode(svg)
+}
 export const svg2Base64 = (element) => {
   const XMLS = new XMLSerializer()
   const svg = XMLS.serializeToString(element)