ETA_1.9.0 图表配置优化

src/CustomElement/EtaTable.ce.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {ref} from 'vue'
+import {ref,nextTick} from 'vue'
 import {infoByCode} from './api/getData.js'
 import {parseQueryString} from "./utils/index"
 
@@ -13,12 +13,20 @@ const props=defineProps({
 const params=parseQueryString(props.src)
 const info=ref({})
 const showData = ref(false);
+
+const sheetRef=ref(null)
+const sheetFooter=ref(null)
+
 async function getTableData(){
     const res = await infoByCode({  UniqueCode: params.code, FromScene: Number(params.fromScene||'') });
     if(res.Ret !== 200) return
 
     info.value=res.Data
     showData.value = true;
+    nextTick(()=>{
+        console.log(sheetRef.value.clientWidth);
+        sheetFooter.value && (sheetFooter.value.style.maxWidth=sheetRef.value?.clientWidth+'px')
+    })
 }
 
 getTableData()
@@ -28,6 +36,7 @@ getTableData()
     <div 
         v-if="showData"
         class="sheet-show-wrapper"  
+        ref="sheetRef"
     >
         <h3 class="title">{{info.ExcelName}}</h3>
         
@@ -76,6 +85,15 @@ getTableData()
                 </tbody>
             </table>
         </div>
+        <div class="sheet-source" ref="sheetFooter"
+            v-if="info.SourcesFrom&&JSON.parse(info.SourcesFrom).isShow"
+            :style="`
+                color: ${ JSON.parse(info.SourcesFrom).color };
+                font-size: ${ JSON.parse(info.SourcesFrom).fontSize }px;
+            `"
+        >
+          source：<em>{{ JSON.parse(info.SourcesFrom).text}}</em>
+        </div>
     </div>
 </template>
 
@@ -143,5 +161,12 @@ getTableData()
         }
     }
 }
+.sheet-source{
+    margin-top: 5PX;
+    min-width: 150PX;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
 }
 </style>

src/hooks/chart/render.js

@@ -564,14 +564,14 @@ function setStatisticFrequency(e){
 
       let series_item = {
         data: item.Value.map(_ =>[_.X,_.Y]),
-        dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
-        type: (chartTheme&&chartTheme.lineOptions.lineType) || 'spline',
+        dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
+        type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || 'spline',
         yAxis: index,
         name: item.Name,
         nameZh: item.Name,
         nameEn: item.NameEn||item.Name,
         color: item.Color,
-        lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth)||3,
+        lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth)||3,
         chartType: 'linear',
         zIndex:1
       }
@@ -654,17 +654,23 @@ function setSplineOpt(e){
             dataGrouping:{
                 enabled:false
             },
-            type: (chartTheme&&chartTheme.lineOptions.lineType) || 'spline',
-            dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
+            type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || 'spline',
+            dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
             yAxis:index,
             name:temName,
             nameZh:temName,
             nameEn:temNameEN,
             color: item.ChartColor,
-            lineWidth: Number(item.ChartWidth)||(chartTheme&&chartTheme.lineOptions.lineWidth)||1,
+            lineWidth: Number(item.ChartWidth)||(chartTheme&&chartTheme.lineOptionList[index].lineWidth)||1,
             visible:true,
             LatestDate:item.LatestDate,
             LatestValue:item.LatestValue,
+            marker: {
+                enabled:chartTheme.lineOptionList[index].dataMark && chartTheme.lineOptionList[index].dataMark!='none',
+                symbol: chartTheme.lineOptionList[index].markType || 'circle',
+                fillColor:chartTheme.lineOptionList[index].markColor,
+                radius: chartTheme.lineOptionList[index].markSize
+            },
             ...predict_params
         }
         item.DataList = item.DataList || [];
@@ -843,13 +849,19 @@ function setSeasonOpt(e){
                 dataGrouping:{
                     enabled:false
                 },
-                type: (chartTheme&&chartTheme.lineOptions.lineType) || data.ChartStyle,
-                dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
+                type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || data.ChartStyle,
+                dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
                 yAxis:0,
                 name:item.ChartLegend,
-                lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth) || 1,
+                lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth) || 1,
                 color:colorsArr.slice(-chartDataHandle.length)[index],                
                 visible:true,
+                marker: {
+                    enabled:chartTheme.lineOptionList[index].dataMark && chartTheme.lineOptionList[index].dataMark!='none',
+                    symbol: chartTheme.lineOptionList[index].markType || 'circle',
+                    fillColor:chartTheme.lineOptionList[index].markColor,
+                    radius: chartTheme.lineOptionList[index].markSize
+                },
                 ...predict_params
             }
             item.DataList=item.DataList||[]
@@ -1371,7 +1383,7 @@ function setScatterOptions(data){
         visible:true,
         chartType: 'linear',
         marker: {
-          radius: (chartTheme&&chartTheme.lineOptions.radius)||5,
+          radius: (chartTheme&&chartTheme.lineOptionList[0].radius)||5,
         },
     }
     real_data.forEach(_ => {
@@ -1591,21 +1603,21 @@ const setCommodityChart = (leftMin,leftMax) => {
     }
 
     //数据列
-    data.forEach(item => {
+    data.forEach((item,index) => {
         //处理首或/尾全是无效数据的以null填充
         let filterData = filterInvalidData(item)
 
         let serie_item = {
             data: filterData,
-            type: (chartTheme&&chartTheme.lineOptions.lineType) || 'spline',
-            dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
+            type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || 'spline',
+            dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
             yAxis: 0,
             name: item.Name,
             nameZh: item.Name,
             nameEn: item.NameEn,
             color: item.Color,
             chartType: 'linear',
-            lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth) || 3,
+            lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth) || 3,
             visible: true,
             marker: {
                 enabled: false
@@ -1789,18 +1801,18 @@ function initRelevanceChart(data){
 
     //处理series
     let seriesData=[]
-    data.YDataList.forEach(item=>{
+    data.YDataList.forEach((item,index)=>{
         let serie_item = {
           data: item.Value,
-          type: (chartTheme&&chartTheme.lineOptions.lineType) || 'spline',
-          dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
+          type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || 'spline',
+          dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
           yAxis: 0,
           name: data.ChartInfo.ChartName,
           nameZh: data.ChartInfo.ChartName,
           nameEn: data.ChartInfo.ChartNameEn,
           color: item.Color,
           chartType: 'linear',
-          lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth) || 3,
+          lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth) || 3,
           visible:true,
           marker: {
             enabled: false
@@ -1932,7 +1944,7 @@ function setSectionScatterChart({DataResp,ChartInfo}) {
 
     //数据列
     let series = [];
-    DataList.forEach(item => {
+    DataList.forEach((item,index) => {
         //数据列
         let series_item = {
             data: [],
@@ -1946,7 +1958,7 @@ function setSectionScatterChart({DataResp,ChartInfo}) {
             zIndex:1,
             visible: true,
             marker: {
-                radius: (chartTheme&&chartTheme.lineOptions.radius)||5,
+                radius: (chartTheme&&chartTheme.lineOptionList[index].radius)||5,
             },
         }
         item.EdbInfoList.forEach(_ => {
@@ -2273,18 +2285,18 @@ function setRadarChart({DataResp,EdbInfoList,ChartInfo}) {
 
     //系列
     let series = [];
-    YDataList.forEach(item => {
+    YDataList.forEach((item,index) => {
       let serie_item = {
         name: item.Name || item.Date,
         nameZh: item.Name || item.Date,
         nameEn: item.Date,
         data: item.Value,
         pointPlacement: 'on',
-        type: (chartTheme&&chartTheme.lineOptions.lineType) || 'line',
-        dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
+        type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || 'line',
+        dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
         yAxis: 0,
         color: item.Color,
-        lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth) || 1,
+        lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth) || 1,
         chartType: 'linear'
       };
       series.push(serie_item)

src/views/ppt/components/ChartWrap.vue

@@ -16,6 +16,8 @@ const renderId=computed(()=>{
     }
 })
 
+const sourceFrom=ref(null)
+
 // 获取图表详情
 let chartIsDelete=ref(false)//图表是否被删除
 async function getChartInfo(){
@@ -28,6 +30,7 @@ async function getChartInfo(){
 
         let showChartTitle=false
         const {Source,ChartType}=res.Data.ChartInfo
+        sourceFrom.value= res.Data.ChartInfo.SourcesFrom?JSON.parse(res.Data.ChartInfo.SourcesFrom):''
         if((Source==1&&[2,7,10].includes(ChartType))||(Source==2&&ChartType==8)){
             showChartTitle=true
         }
@@ -53,6 +56,12 @@ onMounted(()=>{
         <div class="chart-box" :id="renderId">
             <img v-if="chartIsDelete" class="empty-img" src="https://hzstatic.hzinsights.com/static/ppt_default.png" alt="">
         </div>
+        <div class="chart-source">
+            <span
+            v-if="sourceFrom && sourceFrom.isShow"
+            :style="`color: ${sourceFrom.isShow ? sourceFrom.color : '#999'};font-size: ${ sourceFrom.fontSize }px;`"
+            >来源:{{ sourceFrom.text}}</span>
+        </div>
     </div>
 </template>
 
@@ -62,14 +71,23 @@ onMounted(()=>{
     height: 100%;
     position: relative;
     z-index: 10;
+    display: flex;
+    flex-direction: column;
     .chart-box{
         width: 100%;
-        height: 100%;
+        // height: 100%;
+        flex-grow: 1;
         .empty-img{
             width: 100%;
             height: 100%;
             object-fit: contain;
         }
     }
+    .chart-source{
+        width: 100%;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+    }
 }
 </style>

src/views/ppt/components/SheetWrap.vue

@@ -12,12 +12,15 @@ const props=defineProps({
     }
 })
 
+const sourceFrom=ref(null)
+
 // 获取表格数据
 let list=ref([])
 async function getSheetInfo(){
     const res=await apiSheet.infoByCode({UniqueCode:props.itemData.sheetId})
     if(res.Ret===200){
         list.value=res.Data?.TableInfo?.TableDataList||[]
+        sourceFrom.value= res.Data?.SourcesFrom ? JSON.parse(res.Data.SourcesFrom):''
     }
 }
 
@@ -30,37 +33,45 @@ onMounted(()=>{
 
 <template>
     <div class="sheet-box">
-        <table :style="`font-size: ${pptSheetSize}px`">
-            <tbody>
-                <tr v-for="(row,rowIndex) in list" :key="rowIndex">
-                    <td v-for="(col,colIndex) in row" 
-                        :key="colIndex"
-                        :rowspan="col.mc.rs===0?1:col.mc.rs"
-                        :colspan="col.mc.cs===0?1:col.mc.cs"
-                        :style="`
-                            color: ${col.fc};
-                            font-weight: ${col.bl ? 'bold' : 'normal'};
-                            font-style: ${col.it ? 'italic' : 'normal'};
-                            background: ${col.bg||'transparent'};
-                        `"
-                    >
-                        <!-- 单元格拆分 -->
-                        <div class="split-word" v-if="col.ct.s">
-                            <span 
-                                v-for="(word,word_index) in col.ct.s" 
-                                :key="`${rowIndex}_${colIndex}_${word_index}`"
-                                :style="`
-                                color: ${word.fc};
-                                font-weight: ${word.bl ? 'bold' : 'normal'};
-                                font-style: ${word.it ? 'italic' : 'normal'};
-                                `"
-                            >{{word.v}}</span>
-                        </div>
-                        <div v-else>{{col.m}}</div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
+        <div class="table-box">
+            <table :style="`font-size: ${pptSheetSize}px`">
+                <tbody>
+                    <tr v-for="(row,rowIndex) in list" :key="rowIndex">
+                        <td v-for="(col,colIndex) in row" 
+                            :key="colIndex"
+                            :rowspan="col.mc.rs===0?1:col.mc.rs"
+                            :colspan="col.mc.cs===0?1:col.mc.cs"
+                            :style="`
+                                color: ${col.fc};
+                                font-weight: ${col.bl ? 'bold' : 'normal'};
+                                font-style: ${col.it ? 'italic' : 'normal'};
+                                background: ${col.bg||'transparent'};
+                            `"
+                        >
+                            <!-- 单元格拆分 -->
+                            <div class="split-word" v-if="col.ct.s">
+                                <span 
+                                    v-for="(word,word_index) in col.ct.s" 
+                                    :key="`${rowIndex}_${colIndex}_${word_index}`"
+                                    :style="`
+                                    color: ${word.fc};
+                                    font-weight: ${word.bl ? 'bold' : 'normal'};
+                                    font-style: ${word.it ? 'italic' : 'normal'};
+                                    `"
+                                >{{word.v}}</span>
+                            </div>
+                            <div v-else>{{col.m}}</div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <div class="chart-source">
+            <span
+            v-if="sourceFrom && sourceFrom.isShow"
+            :style="`color: ${sourceFrom.isShow ? sourceFrom.color : '#999'};font-size: ${ sourceFrom.fontSize }px;`"
+            >来源:{{ sourceFrom.text}}</span>
+        </div>
     </div>
 </template>
 
@@ -68,19 +79,31 @@ onMounted(()=>{
 .sheet-box{
     width: 100%;
     height: 100%;
-    overflow: auto;
+    display: flex;
+    flex-direction: column;
     &::-webkit-scrollbar{
         width: 4px;
     }
-    table{
-        width:100%;
-        border-collapse: collapse;
-        border-spacing: 0;
-        td{
-			border: 1px solid #747474;
-			height: 45px;
-			text-align: center;
-		}
+    .table-box{
+        flex-grow: 1;
+        overflow: auto;
+        table{
+            width:100%;
+            border-collapse: collapse;
+            border-spacing: 0;
+            td{
+                border: 1px solid #747474;
+                height: 45px;
+                text-align: center;
+            }
+        }
+    }
+
+    .chart-source{
+        width: 100%;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
     }
 }
 </style>

src/views/ppt/hooks/usePPTPublish.js

@@ -184,7 +184,6 @@ function svg2Base64 (element) {
  * @param id 图表dom中的id
  */
 function changeUrl(id){
-    console.log(id);
     let img = new Image()
     // const svgHtml = $(`#${id} svg`)[0].outerHTML
     /* img.src = `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svgHtml)))}` */
@@ -567,7 +566,7 @@ async function pageToPPT(){
     //const PPTINS=PPTInit(new pptxgen(),1,window.location.pathname.startsWith('/ppten')?'en':'ch')
     const PPTINS = pptConfigInit(new pptxgen(),1,window.location.pathname.startsWith('/ppten')?'en':'ch')
     PPTINS.addSlide()
-
+    console.log(PPTContentList,'PPTContentList');
     // ppt正文内容
     for (let i = 1; i < PPTContentList.length-1; i++) {
         //console.log(`正在生成,第${i+1}页...`,`lastVisibleItemIndex:`,this.lastVisibleItemIndex)
@@ -586,7 +585,7 @@ async function pageToPPT(){
         const elements = PPTContentList[i].elements;
         const elLength = elements.length;
         for (let j = 0; j < elLength; j++) {
-            let imgData = null,textData = null,imgData2 = null,imgData2Obj=null,sheetData=null;
+            let imgData = null,textData = null,imgData2 = null,imgData2Obj=null,sheetData={list:null,SourcesFrom:null};
             if (elements[j].type === "chart") {
                 console.log("img/chart...");
                 const chartId=`chart${elements[j].chartId}_${i}_${elements[j].position}`
@@ -613,7 +612,8 @@ async function pageToPPT(){
                 const sheetId = elements[j].sheetId
                 const res=await apiSheet.infoByCode({UniqueCode:sheetId})
                 if(res.Ret===200){
-                    sheetData = getTableData(res.Data?.TableInfo?.TableDataList||[])
+                    sheetData.list = getTableData(res.Data?.TableInfo?.TableDataList||[])
+                    sheetData.SourcesFrom = res.Data?.SourcesFrom
                 }
             }
             const { x, y, width, height } = getPosition(
@@ -629,6 +629,8 @@ async function pageToPPT(){
                     h: height,
                     size: { type: "contain" },
                 });
+                // //追加生成图表底部文字
+                // transBottomInfo(slide,{x,y,width,height},this.optionMap[elements[j].chartId])
             }else if (textData){
                 slide.addText(textData,{
                     x:x,
@@ -660,14 +662,16 @@ async function pageToPPT(){
                     h:offsetY===0?height:(realSize.height/imgData2Obj.imgHeight*percentHeight)+'%',
                     size:{type:"contain"}
                 })
-            }else if(sheetData){
-                slide.addTable(sheetData,{
+            }else if(sheetData.list){
+                slide.addTable(sheetData.list,{
                     x:x,
                     y:y,
                     w:width,
                     h:height,
                     border:{type:'solid',pt:1}
                 })
+              //追加生成表格底部文字
+              transBottomInfo(slide,{x,y,width,height},sheetData)
             }
         }
         //在添加完版式后,添加图层元素
@@ -781,6 +785,30 @@ async function pageToPPT(){
     // pptx2.writeFile({ fileName: "test.pptx" }) //本地测试可直接用该方法生成ppt文件
 }
 
+/* 生成ppt时 图表、表格 追加底部文字 来源 */
+function transBottomInfo(slide,{x,y,width,height},data){
+  let yPercent = Number(Math.ceil(height.replace(/%/,''))+Math.ceil(y.replace(/%/,'')))+'%';
+  // console.log(yPercent)
+
+  if(data.SourcesFrom&&JSON.parse(data.SourcesFrom).isShow) {
+    let sourceObj = JSON.parse(data.SourcesFrom);
+    //pptx 只接受6bit的颜色格式,用333警告太多了 优化下
+    const color = sourceObj.color.includes('rgb') ? rgbaToHex(sourceObj.color).color.substring(1) 
+                : sourceObj.color.indexOf('#')===0 
+                ? sourceObj.color.substring(1).length<6 
+                ? '000000':sourceObj.color.substring(1)
+                : '666666'
+    slide.addText(`${this.$t('ETable.Common.source')}:${sourceObj.text}`,{
+      x:x,
+      y: yPercent,
+      w: width,
+      margin:10,
+      fontSize: sourceObj.fontSize*0.75,
+      color,
+    })
+  }
+}
+
 // 发布ppt
 function handlePublishPPT(url){
 	apiPPTPublish({