eta_front/src/views/ppt_manage/mixins/pptMixins.js

/** 图库9.0(智能PPT) 共通逻辑 */
import Highcharts from "highcharts/highstock";
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartszhCN  from '@/utils/highcahrts-zh_CN'
HighchartszhCN(Highcharts)
HighchartsMore(Highcharts)
import { dataBaseInterface,pptInterface } from "@/api/api.js";
import {etaBaseConfigInterence} from '@/api/modules/etaBaseConfigApi.js';
import {pptEnInterface} from '@/api/modules/pptEnApi.js';
import * as sheetInterface from '@/api/modules/sheetApi.js';
import futuresInterface from '@/api/modules/futuresBaseApi';
import { fittingEquationInterface,statisticFeatureInterface,crossVarietyInterface } from '@/api/modules/chartRelevanceApi';
import chartRelevanceApi from '@/api/modules/chartRelevanceApi.js';
import { defaultOpts } from '@/utils/defaultOptions';
import {formatPPTDate,checkPPTpageElemant,getStrSize,isShowPPTTitle,toTextProps,toJson,rgbaToHex} from '../newVersion/utils/untils.js';
import FormatOne from '../newVersion/components/formatPage/FormatOne.vue';
import FormatTwo from '../newVersion/components/formatPage/FormatTwo.vue';
import FormatThree from '../newVersion/components/formatPage/FormatThree.vue';
import FormatFour from '../newVersion/components/formatPage/FormatFour.vue';
import FormatFive from '../newVersion/components/formatPage/FormatFive.vue';
import FormatSix from '../newVersion/components/formatPage/FormatSix.vue';
import FormatSeven from '../newVersion/components/formatPage/FormatSeven.vue';
import FormatEight from '../newVersion/components/formatPage/FormatEight.vue';
import FormatNine from '../newVersion/components/formatPage/FormatNine.vue';
import FormatTen from '../newVersion/components/formatPage/FormatTen.vue';
import FormatEle from '../newVersion/components/formatPage/FormatEle.vue';
import FormatTwelve from '../newVersion/components/formatPage/FormatTwelve.vue';
export default {
  components:{ FormatOne,FormatTwo,FormatThree,
    FormatFour,FormatFive,FormatSix,FormatSeven,FormatEight,FormatNine,FormatTen,FormatEle,FormatTwelve},
  data(){
    return{
      chartInfo:null,
      dataList:[],
      optionMap:{},
      options:{},
      sheetDataMap:{},//表格Table数据
      sheetHeightMap:{},//表格iframe的高
      pptInitType:'edit',//ppt模式,编辑页为edit,其他页面为show
      result:{
        status:''
      },//getpptDataById的结果
      dataLoading:null,//getPptData loading
      pageLoading:null,//演示时，切换page需要加载图表数据
      publishLoading:null,//发布时loading
      pptCoverList:[],//配置ppt封面
      pptBgImage:'',//ppt背景图
      pptBackImage:'',//ppt封底
      pptCoverCompenyName:'',//封面公司名称 ETA1.4.9后不再使用
      pptCoverDepartName:'',//封面部门名称 ETA1.4.9后不再使用
      pptCoverTextColor:'',//控制上面两个字段展示的颜色 ETA1.4.9后不再使用
      pptCoverContent:'',//自定义封面页的内容


      setEnName:false,
      // 传入的formItem所需内容
      formItemArray:[],
      addMyChartShow:false,//控制添加到 我的图库 弹窗是否显示
      addChartInfoId:0,//当前选择的图表InfoId,
      addChartClassifyIds:[],//当前选择的图表所在我的图库目录id
      addChartId:'',//当前选择的图表UnicodeId

      //截面散点设置英文props
			enChartInfo: {},
			enEdblist:[]
    }
  },
  methods: {
    //配置自定义封面内容
    setPPTCover(cover,pptCoverContent='',title=''){
        let contentList = []
        try{
            contentList = JSON.parse(pptCoverContent)
        }catch(e){
            contentList=[]
        }
        //将contentList的内容通过addText写入，方法与图层写入文字一致
        for(let i=0;i<contentList.length;i++){
            const {
                percentageTop,
                percentageLeft,
                percentageWidth,
                percentageHeight,
                richContent
            } = contentList[i]
            const position = {
                x:percentageLeft*100+'%',
                y:percentageTop*100+'%',
                w:percentageWidth*100+'%',
                h:percentageHeight*100+'%'
            }
            let textData = toTextProps(toJson(richContent))
            cover.addText(textData,{
                ...position,
                margin:10,
                fontSize:16*0.75,
                valign:'top'
            })
        }
        //不需要显示了
        //若contentList为空，则在右下的位置显示标题
        /* if(!contentList.length){
            cover.addText(
                [{text:title,options:{fontSize:28*0.75,breakLine:true}}],
                {
                    x:'38%',
                    y:'50%',
                    w:'60%',
                    h:'28%',
                    color:'ffffff',
                    align:'center',
                    fontFace:'SimHei'
                })
        } */
        return cover
    },
    //获取基本配置-ppt配置
    async getpptConfig(){
        const res = await etaBaseConfigInterence.getBaseConfig()
        if(res.Ret!==200) return 
        const {CnPptCoverImgs,CnPptBackgroundImg,CnPptBottomImg,PptCompanyName,PptTeamName,PptFontColor,
               EnPptCoverImgs,EnPptBackgroundImg,EnPptBottomImg,PptCompanyNameEn,PptTeamNameEn,PptFontColorEn
              } = res.Data
        if(this.currentLang==='en'){
            this.pptCoverList = EnPptCoverImgs.split(',')
            this.pptBgImage = EnPptBackgroundImg
            this.pptBackImage = EnPptBottomImg
            this.pptCoverCompenyName = PptCompanyNameEn
            this.pptCoverDepartName = PptTeamNameEn
            this.pptCoverTextColor = PptFontColorEn
        }else{
            this.pptCoverList = CnPptCoverImgs.split(',')
            this.pptBgImage = CnPptBackgroundImg
            this.pptBackImage = CnPptBottomImg
            this.pptCoverCompenyName = PptCompanyName
            this.pptCoverDepartName = PptTeamName
            this.pptCoverTextColor = PptFontColor
        }
    },
    //获取ppt详情
    async getpptDataById(id){
      const res = this.currentLang!=='en'?await pptInterface.getpptDetail({
        PptId:id
      }):await pptEnInterface.getpptDetail({PptId:id})
      if(res.Ret===200){
        const {
            Content,
            Title,
            ReportType,
            BackgroundImg,
            PptDate,
            TemplateType,
            ReportId,
            ModifyTime,
            PublishTime,
            Editor,
            CoverContent
        } = res.Data
        const pptDate = formatPPTDate(this.currentLang, PptDate)
        let legalContent = JSON.parse(Content)
        legalContent = legalContent.map(page => {
            page.elements = checkPPTpageElemant(page)
            return page
        })
        this.pptCoverContent = CoverContent
        this.result = {
            status: 200,
            content: legalContent,
            FirstPage: {
                Title,
                ReportType,
                BackgroundImg,
                PptDate: pptDate,
                TemplateType,
            },
            ReportId,
            ModifyTime,
            PublishTime,
            Editor,
            CoverContent
        }
      }else{
        this.result = {status:'',content:'获取ppt数据失败!'}
      }
    },
    //ppt设置相关,引用mixins.js里的setOptions chartType只有source是1才有用
    /* Source 1 ; chartType 1曲线 2季节 3面积 4堆积柱 5散点 6组合 7柱形 8截面散点
    * 2 商品价格
    * 3 相关性
    * 4 滚动相关性
    * 5 商品利润
    * 6 拟合方程
    * 7 统计特征/标准差
    * 8 统计特征/百分位
    * 9 统计特征/频率
    * 10 跨品种分析
    */
    //获取图表数据
    async getchartData(id,lang='ch') {
      const currentLang = this.currentLang || lang
      const res = await dataBaseInterface.getChartByCode({
        UniqueCode: id,
        IsCache:true
      });
      const { Data } = res;
      if(!Data) return 
      this.chartInfo = Data.ChartInfo;
      if(!this.chartInfo) return
      if(this.chartInfo.Source === 1) { //常规图
        //处理下历史默认来源
        this.setDefaultSourceFrom();
        
        this.dataList = Data.EdbInfoList;
        //柱形图独立数据
        this.chartInfo.ChartType === 7 && this.initBarData(res.Data);
        //截面散点图
        this.chartInfo.ChartType === 10 && this.initSectionScatterData(res.Data);
        //雷达图
        this.chartInfo.ChartType === 11 && this.initRadarData(res.Data);

        Data.Status && ![7,10].includes(this.chartInfo.ChartType) && this.setOptions();
        Data.Status&&this.setOptionsLang(currentLang)
      }else if([2,5].includes(this.chartInfo.Source)) { //商品价格图
        this.chartInfo = Data.ChartInfo.Source===5 ? {
					...Data.ChartInfo,
					ProfitNameEn: Data.DataResp.ProfitNameEn,
					ProfitName: Data.DataResp.ProfitName,
				} : Data.ChartInfo;
        this.dataList = [Data.EdbInfoList[0]];
        this.initCommodityData(res.Data)
        this.setCommodityLang(currentLang)
      }else if([3].includes(this.chartInfo.Source)){//相关性
        this.relevanceChartData={
            ChartInfo:res.Data.ChartInfo,
						EdbInfoList:res.Data.EdbInfoList,
						XEdbIdValue:this.chartInfo.Source === 3 ? res.Data.XEdbIdValue : res.Data.DataResp.XDateTimeValue,
						CorrelationChartInfo:res.Data.CorrelationChartInfo,
						YDataList:[
							{
								Value:this.chartInfo.Source === 3 ? res.Data.YDataList[0].Value : res.Data.DataResp.YDataList[0].Value,
								Color:'#00f',
								Name:res.Data.ChartInfo.ChartName,
								NameEn:res.Data.ChartInfo.ChartNameEn
							}
						]
        }
        this.initRelevanceChartData()
        this.changeRelevanceOptions(currentLang)
      }else if(this.chartInfo.Source===4) {//滚动相关性换成曲线图绘图
        this.dataList = [res.Data.DataResp];
        this.relevanceChartData = {
          CorrelationChartInfo: res.Data.CorrelationChartInfo
        }
        this.setDefaultChart([res.Data.DataResp]);
        this.changeRelevanceOptions(currentLang)

      }else if([6,7,8].includes(this.chartInfo.Source)) {
        //拟合方程 标准差 百分比
        this.dataList = [res.Data.DataResp];
        this.setDefaultChart([res.Data.DataResp]);
      }else if(this.chartInfo.Source===9) { //统计频率
        this.dataList = res.Data.EdbInfoList;
        this.statisticFrequencyData = res.Data.DataResp;
        this.setStatisticFrequency();
      }else if(this.chartInfo.Source===10) {
        this.dataList = res.Data.EdbInfoList;
        this.crossVarietyChartData = res.Data.DataResp;
        this.chartLimit = {
          min: Number(res.Data.DataResp.YMinValue),
          max: Number(res.Data.DataResp.YMaxValue),
          x_min: Number(res.Data.DataResp.XMinValue),
          x_max: Number(res.Data.DataResp.XMaxValue)
        }
        this.setCrossVarietyChart();
        this.changeRelevanceOptions();//更改英文一样
      }

      //根据图表数据获取配置项
      if(Data.Status){
        const chartTitle = currentLang==='ch'?this.chartInfo.ChartName
                            :this.chartInfo.ChartNameEn?this.chartInfo.ChartNameEn
                            :this.chartInfo.ChartName
        //由于英文PPT复制图表名称时，使用MyChartTitle字段会复制英文名称（如果有），现需要复制中文名称，遂增加了chartTitleCN存储中文名称
          const otherOpts = {
                            MyChartType:this.chartInfo.ChartType,//图表类型,和Source一起确定是什么图
                            MyChartTitle:chartTitle,//ppt复制时的图表标题(个别类型图表渲染时也需要展示图表标题)
                            chartTitleCN:this.chartInfo.ChartName,//英文ppt复制时,需要使用中文的图表标题......
                            chartInfoId:this.chartInfo.ChartInfoId,//添加到我的图库,图表id
                            MyChartClassifyId:this.chartInfo.MyChartClassifyId,//添加到我的图库,图库Id
                            Source:this.chartInfo.Source,//图表来源,和MyChartType一起确定是什么图
                            Instructions: this.chartInfo.Instructions,
                            SourcesFrom: this.chartInfo.SourcesFrom,
                            ChartThemeStyle: this.chartInfo.ChartThemeStyle
                          }
        this.optionMap[id] = { ...defaultOpts, ...this.options,...otherOpts };
      }else{
        this.optionMap[id] = 'noSource'
      }
      //console.log("?", this.optionMap);
    },
    //设置图表中英文
    setOptionsLang(lang){
      console.log(lang)
      //中文图表不需要下面的设置
      if(lang==='ch') return 
      //当 图表名称、指标名称、指标单位 有其一没有英文名称时，也不需要下面的设置
      if(!this.checkChartEnData()) return 
      const {ChartType} = this.chartInfo
      if(ChartType!=5){
        this.options.yAxis.forEach(item=>{
          item.title.text = item.title.textEn?item.title.textEn:item.title.textCh
        })
        if(ChartType!=2)
          this.options.series.forEach(item=>{
            item.name = item.nameEn?item.nameEn:item.nameCh
          })
        
        
        if(ChartType === 7) this.options.xAxis.categories = this.barXIdData.map(_ => this.barEdbData.find(edb => edb.EdbInfoId===_).EdbNameEn);

        //截面散点 x轴标题
        if(ChartType === 10){
          this.options.xAxis.title.text = this.options.xAxis.title.textEn || this.options.xAxis.title.textCh;
          this.options.tooltip.formatter = this.options.tooltip.formatterEn || this.options.tooltip.formatterCh;
          this.options.series.forEach(item => {
            if(!item.linkedTo) {
              item.data.forEach(point => {
                point.dataLabels.format = point.dataLabels.formatEn || point.dataLabels.formatCh;
              })
            }
          });
        } 
      }

      //散点图
      if(ChartType==5){
        this.options.yAxis.title.text = this.options.yAxis.title.textEn
        this.options.yAxis.title.style = this.options.yAxis.title.styleEn||{}
        this.options.xAxis.title.text = this.options.xAxis.title.textEn
        this.options.xAxis.title.style = this.options.xAxis.title.styleEn||{}
        this.options.series.forEach(item => {
            item.name = item.nameEn
        });
        this.options.tooltip.formatter = this.options.tooltip.formatterEn
      }
    },

    /* 设置价格曲线英文 */
    setCommodityLang(lang) {
      if(lang==='ch') return 
      //当 图表名称、指标名称、指标单位 有其一没有英文名称时，也不需要下面的设置
      if(!this.checkChartEnData()) return 

      this.options.yAxis.forEach(item => {
        item.title.text =  item.title.textEn || item.title.textCh
      });
      //图例
      this.options.series.forEach(item => {
        item.name = item.nameEn || item.nameCh 
      });
      //tooltip
      this.options.tooltip.formatter = this.options.tooltip.formatterEn
      //x轴
      this.options.xAxis.categories = this.commodityXData.map(_ => _.NameEn);
    },

    /* 切换相关性图中英文 */
    changeRelevanceOptions(lang){
      if(lang==='ch') return 
      if(!this.checkChartEnData()) return 
      console.log(this.options)
        this.options.yAxis.forEach(item => {
          item.title.text = item.title.textEn || item.title.textCh
        });
        //图例
        this.options.series.forEach(item => {
          item.name = item.nameEn || item.nameCh
        });
        //tooltip
        this.options.tooltip.formatter = this.options.tooltip.formatterEn
        this.options.xAxis.title.text=this.options.xAxis.title.textEn
    },

    /* 历史图表默认显示图表来源 d毛后端不修复只能自己每次详情处理下*/
		setDefaultSourceFrom() {
			if(!this.chartInfo.SourcesFrom) {
        let themeOpt = JSON.parse(this.chartInfo.ChartThemeStyle);
				this.chartInfo.SourcesFrom = JSON.stringify({
					isShow: true,
					text: this.chartInfo.ChartSource,
					color: themeOpt&&themeOpt.markerOptions.style.color,
					fontSize: themeOpt&&themeOpt.markerOptions.style.fontSize
				});
			}
		},

    //检查图表英文配置是否完整
    checkChartEnData(){
      let result = true
      //图表名称：this.chartInfo.ChartNameEn
      if(!this.chartInfo.ChartNameEn){
        result = false
      }

      if(this.chartInfo.Source === 10) {
        const { XNameEn,YNameEn,DataList } = this.crossVarietyChartData;

        let haveOneNoEn = DataList.some(_ =>!_.NameEn);

        if(haveOneNoEn || !XNameEn || !YNameEn) result = false
      }else {
        //指标名称：this.dataList[].EdbNameEn
        //指标单位：this.dataList[].UnitEn
        this.dataList.forEach(item=>{
          if(!item.EdbNameEn){
            result = false
          }
          if(this.chartInfo.ChartType!==10&&item.Unit&&!item.UnitEn){
            result = false
          }
        })
      }
      return result
    },
    //刷新图表数据
    async getRefreshChart(id){
      const res = await dataBaseInterface.chartRefresh({
        UniqueCode:id
      })
      if(res.Ret!==200){
        return
      }
    },
    //打开添加到我的图库弹窗
    async handleAddChartToGallery(chartId){
      const chartInfo = this.$store.state.ppt.chartInfoMap[chartId]
      this.addChartId = chartId
      this.addChartInfoId = chartInfo.chartInfoId
      this.addChartClassifyIds = chartInfo.MyChartClassifyId ? chartInfo.MyChartClassifyId.split(',').map(item => Number(item)) : [];
      this.addMyChartShow = true
    },
    //添加到我的图库,就是改一下chartInfo的MyChartClassifyId
    addChartToGallery({MyChartClassifyId}){
      let chartInfoMap = _.cloneDeep(this.$store.state.ppt.chartInfoMap)
      chartInfoMap[this.addChartId].MyChartClassifyId = MyChartClassifyId
      this.$store.commit('SET_CHART_INFO_MAP',chartInfoMap)
      this.addMyChartShow = false
    },
    //编辑ppt时,初始化相关
    async initPageElements(page,type="edit",only=false) {
      this.pptInitType = type
      const chartElements = page.elements.filter((item) => {
        return item.type === "chart";
      });
      const imageElements = page.elements.filter((item) => {
        return item.type === "image";
      });
      const textElements = page.elements.filter((item)=>{
        return item.type === 'text'
      })
      const sheetElements = page.elements.filter((item)=>{
        return item.type === 'sheet'
      })
      if(type==='edit'){
        this.initTexts(textElements,page)
      }
      this.initImages(imageElements,page);
      await this.sheetListHandle(sheetElements);
      this.initSheets(sheetElements,page,only)
      await this.listHandle(chartElements);
      this.initCharts(chartElements, page);
    },
    async listHandle(chartElements) {
			for(let i=0;i<chartElements.length;i++) {
        if(!this.optionMap[chartElements[i].chartId])
				await this.getchartData(chartElements[i].chartId);
			}
		},
    async sheetListHandle(sheetElements){
      for(let i=0;i<sheetElements.length;i++){
        if(!this.sheetDataMap[sheetElements[i].sheetId])
        await this.getsheetData(sheetElements[i].sheetId)
      }
    },
    async getsheetData(id){
      const res = await sheetInterface.getSheetData({
				UniqueCode: id
			})
      if(res.Ret !== 200) return 0
      const {TableInfo} = res.Data
      console.log('get')
      this.sheetDataMap[id] = _.cloneDeep(TableInfo.TableDataList)
      return 1
    },
    initCharts(elements, page) {
      const index = this.pageList.findIndex((i) => i.id === page.id)
      if(index===-1) return
      elements.forEach((item) => {
        if (this.optionMap[item.chartId] instanceof Object){
          this.initChart(
				    `chart_${index}_${item.position}`,
				    this.optionMap[item.chartId],
				    page
			    )
        }else{
          //显示图表已被删除
          this.initImage(
				`#img_${index}_${item.position}`,
				"https://hzstatic.hzinsights.com/static/ppt_default.png"
			)
        }
			
      });
    },
    initChart(refName, options, page) {
      console.log("refName", refName);
      const index = this.pageList.findIndex((i) => i.id === page.id)
      if(index===-1) return
      //if(!this.$refs[`pptPage_${index}`]||!this.$refs[`pptPage_${index}`][0]) return
      /* if(!$(`#${refName}`)[0]) return */
      /*
        Source:1
        MyChartType: 2 季节性图,7 柱形图,  10 截面散点图,
        Source:2
        MyChartType: 8 商品价格曲线图
        Source:5
        MyChartType: 8 利润曲线
        Source:6 拟合方程曲线
        Source:7 统计特征
        以上图表需要显示标题
      */
     const {Source,MyChartType,ChartThemeStyle} = options
     const isShowTitle = isShowPPTTitle(Source,MyChartType)
     
    /* 主题样式*/
    const chartTheme =  ChartThemeStyle ? JSON.parse(ChartThemeStyle) : null;

      this.$nextTick(() => {
        let is_linear = options.series 
          ? options.series.some(_ => _.chartType === 'linear')
          : false ;
        //title样式
        let titleHTML = null
        //中英文发布页需设置title换行
        //一行可容纳的中文字体数
        let count = parseInt($(`#${refName}`)[0].offsetWidth / 19)*2;
        let {total,newStr} = getStrSize(options.MyChartTitle,count)
        const isPublish = this.$route.path==='/pptpublish'||this.$route.path==='/pptenpublish'
        if(isShowTitle){
          titleHTML = `<div style="
            text-align:${chartTheme&&chartTheme.titleOptions.align};
            font-size:${chartTheme&&chartTheme.titleOptions.style.fontSize}px;
            color:${chartTheme&&chartTheme.titleOptions.style.color};
            height:18px;
          ">
            ${options.MyChartTitle}
          </div>`
        }
        const titleOption = isPublish&&isShowTitle?{marginTop:25}:{}
        let SpecialOption = {
          chart: {
            ...defaultOpts.chart,
					  ...chartTheme&&chartTheme.drawOption,
            spacing: chartTheme.legendOptions.verticalAlign==='bottom' ? [23,10,2,10] : [2,10,2,10],//图例在底部顶部空间留大点给单位
            animation: false,
            backgroundColor: "rgba(0,0,0,0)",
            renderTo:$(`#${refName}`)[0],
            ...options.chart||{},
            ...titleOption
          },
          legend: {
            ...defaultOpts.legend,
            ...chartTheme&&chartTheme.legendOptions
          },
          colors: options.colors||chartTheme&&chartTheme.colorsOptions||defaultOpts.colors,
          title: isPublish?{
            text: isShowTitle?newStr:null,
            margin:0,
            useHTML:false,
            floating:true,
            style:{...chartTheme&&chartTheme.titleOptions.style},
            align: (chartTheme&&chartTheme.titleOptions.align) || (total>count?'left':'center'),
          }:{
            text: titleHTML,
            useHTML:true,
            margin:0,
            style:{textAlign:chartTheme&&chartTheme.titleOptions.align,left:0,width:'100%'}
          },
          plotOptions: {
            ...defaultOpts.plotOptions,
            series: {
              animation: false,
              turboThreshold: 0, //不限制数据点个数 
              dataGrouping: {
                enabled: false,
              }
            },
          },
        }
        //奇怪柱不堆叠
        let secialBarOpt = (options.series.some(_ => _.chartType === 'linear') && options.series.some(_ => _.chartType === 'linear')) ? {
          plotOptions: {
            ...defaultOpts.plotOptions,
            column:{
              stacking: null,
            },
          },
        } : {};

        if(!$(`#${refName}`)[0]) return

        if(is_linear)
          Highcharts.chart({
            // Highcharts 配置
            ...options,
            ...SpecialOption,
            ...secialBarOpt
            });
        else
        Highcharts.stockChart({
          // Highcharts 配置
          ...options,
          ...SpecialOption,
          ...secialBarOpt
        });
      });
    },
    initImages(elements,page){
      const index = this.pageList.findIndex((i) => i.id === page.id)
      elements.forEach((item)=>{
        this.initImage(`#image_${index}_${item.position}`,item.src)
      })
    },
    initImage(idName,url){
      //console.log('idName',idName,'url',url)
      $(`${idName}`).hide()
      this.$nextTick(()=>{
        $(`${idName}`).attr('src',url).attr('object-fit','scale-down') 
        $(`${idName}`).show()
      })
      
    },
    initTexts(elements,page){
      const index = this.pageList.findIndex((i) => i.id === page.id)
      elements.forEach((item)=>{
        this.initText(index,`text_${index}_${item.position}`)
      })
    },
    initText(pageindex,refName){
      console.log(`pptPage_${pageindex}`,refName)
      this.$nextTick(()=>{
        this.$refs[`pptPage_${pageindex}`][0].$refs[refName].initTiny()
      })
    },
    initSheets(elements,page,only){
      const index = this.pageList.findIndex((i) => i.id === page.id)
      this.$nextTick(()=>{
        const formatRef = only?this.$refs[`pptPage_${index}`]:this.$refs[`pptPage_${index}`][0]
        elements.forEach((item)=>{
          this.initSheet(formatRef,`sheet_${index}_${item.position}`,item.sheetId)
        }) 
      })
    },
    initSheet($parent,refName,sheetId,type='init'){
      console.log('init sheet',refName)
      const $children = $parent.$children
      /* console.log('children',$children) */
      this.$nextTick(()=>{
        const sheet = $children.find(i=>i.$data.type==='sheet'&&i.item.sheetId===sheetId)
        sheet&&sheet.getSheetData(sheetId,this.sheetDataMap[sheetId])
      })
      if(this.pptInitType!=='edit'||refName.includes('preview')) return
      this.$nextTick(()=>{
        if(type==='init')
          !this.sheetHeightMap[sheetId]&&this.initSheetIframe(refName,sheetId)
        else
          this.initSheetIframe(refName,sheetId)
        this.sheetHeightMap[sheetId]&&this.setSheetElHeight(refName,sheetId)  
      }) 
    },
    //加载iframe
    initSheetIframe(idName,sheetId){
      console.log('init sheet iframe',idName)
      const LINK_URL = this.$setting.dynamicOutLinks.ChartViewUrl+'/sheetshow';
      $(`#${idName}`).append(`<iframe 
          src='${LINK_URL}?code=${sheetId}' 
          width='100%'
          height='0'
          class='sheet-iframe-box' 
          style='border-width:0px;'
          />
        `)
    },
    //获取表格iframe的高度,用于ppt转报告
    reInitIframe(e) {
      const LINK_URLS=[this.$setting.dynamicOutLinks.ChartViewUrl+'/chartshow',this.$setting.dynamicOutLinks.ChartViewUrl+'/sheetshow']
      if(!LINK_URLS.includes(e.origin)) return
      /* console.log('iframe加载完成',e.data) */
      const { height,code } = e.data;
      this.sheetHeightMap[code] = height
      this.pageList.forEach((page,pageIndex)=>{
        page.elements.map(el=>{
          if(el.type==='sheet'&&el.sheetId===code){
            el.sheetHeight = height+45+'px'
            //sheet_pageIndex_el.position
            const sheet = document.getElementById(`sheet_${pageIndex}_${el.position}`)
            //console.log(sheet.childNodes)
            sheet.childNodes&&sheet.childNodes.forEach(node=>{
              //iframe获取完高度就可以删除 留着占内存
              if(node.nodeName.toLocaleLowerCase()==='iframe'){
                sheet.removeChild(node)
              }
            })
          }
        })
      })
    },
    //设置表格元素的高,用于ppt转报告
    setSheetElHeight(idName,sheetId){
      const arr = idName.split('_')
      const pageIndex = arr[1],position = arr[2]
      this.pageList[pageIndex].elements.map(i=>{
        if(i.position==position){
          i.sheetHeight = this.sheetHeightMap[sheetId]+45+'px'
        }
      })
    },

    		/* 设置英文配置 */
		async setEnHandle({UniqueCode}) {
			this.formItemArray={ chartInfo: [],chartsList: [] }

			const { Ret,Data } = await dataBaseInterface.getChartByCode({UniqueCode});
			
			if (Ret !== 200) return;
			let chartInfo = Data.ChartInfo;
			let tableData = chartInfo.Source===1 ? Data.EdbInfoList : [Data.EdbInfoList[0]];

      this.enChartInfo = chartInfo;
			this.enEdblist = tableData;

      this.formItemArray.chartInfo.push({
        label:'图表名称',
        value:chartInfo.ChartName,
        key:'ChartName',
        id:chartInfo.ChartInfoId,
        source: chartInfo.Source,
        notEdit:true
      },
      {
        label:'英文图表名称',
        value:chartInfo.ChartNameEn,
        key:'ChartNameEn',
        id:chartInfo.ChartInfoId,
        placeholder:'请输入英文图表名称'
      })
      if([1,2,5].includes(chartInfo.Source)){
        this.formItemArray.chartsList = tableData.map(item => {
          return item.Unit 
            ? [
                {
                  label:'指标名称',
                  value:item.EdbName,
                  key:'EdbName',
                  id:item.EdbInfoId,
                  notEdit:true
                },
                {
                  label:'单位',
                  value:item.Unit,
                  key:'Unit',
                  id:item.EdbInfoId,
                  notEdit:true
                },
                {
                  label:'英文指标名称',
                  value:item.EdbNameEn,
                  key:'EdbNameEn',
                  id:item.EdbInfoId,
                  placeholder:'请输入英文指标名称'
                },
                {
                  label:'英文单位',
                  value:item.UnitEn,
                  key:'UnitEn',
                  id:item.EdbInfoId,
                  placeholder:'请输入英文单位'
                }
              ]
            : [
                {
                  label:'指标名称',
                  value:item.EdbName,
                  key:'EdbName',
                  id:item.EdbInfoId,
                  notEdit:true
                },
                {
                  label:'英文指标名称',
                  value:item.EdbNameEn,
                  key:'EdbNameEn',
                  id:item.EdbInfoId,
                  placeholder:'请输入英文指标名称'
                }
              ]
        })
      }

      //价格曲线
      if(chartInfo.Source===2) {
        this.formItemArray.chartInfo.push({
          label:'期货名称',
          value:Data.EdbInfoList[1].EdbName,
          key:'FutureGoodName',
          id:chartInfo.ChartInfoId,
          notEdit:true
        },
        {
          label:'英文期货名称',
          value:Data.EdbInfoList[1].EdbNameEn,
          key:'FutureGoodNameEn',
          id:chartInfo.ChartInfoId,
          placeholder:'请输入英文期货名称'
        })
      }

      //利润曲线
      else if(chartInfo.Source===5) {
        this.formItemArray.chartInfo.push({
          label:'盘面利润名称',
          value:Data.DataResp.ProfitName,
          key:'ProfitName',
          id:chartInfo.ChartInfoId,
          notEdit:true
        },
        {
          label:'英文盘面利润名称',
          value:Data.DataResp.ProfitNameEn,
          key:'ProfitNameEn',
          id:chartInfo.ChartInfoId,
          placeholder:'请输入英文盘面利润名称'
        })
      }

      //跨品种分析
      else if(chartInfo.Source===10) {
        let res = await crossVarietyInterface.chartLangOption({ChartInfoId: chartInfo.ChartInfoId})

        const { TagList,VarietyList } = res.Data;

        this.formItemArray.chartInfo.push({
          label:'X轴名称',
          value:Data.DataResp.XName,
          key:'XName',
          id:TagList[0].ChartTagId,
          notEdit:true
        },
        {
          label:'英文X轴名称',
          value:Data.DataResp.XNameEn,
          key:'XNameEn',
          id:TagList[0].ChartTagId,
          placeholder:'请输入英文X轴名称'
        },{
          label:'Y轴名称',
          value:Data.DataResp.YName,
          key:'YName',
          id:TagList[1].ChartTagId,
          notEdit:true
        },
        {
          label:'英文Y轴名称',
          value:Data.DataResp.YNameEn,
          key:'YNameEn',
          id:TagList[1].ChartTagId,
          placeholder:'请输入英文Y轴名称'
        })

        VarietyList.forEach(item => {
          this.formItemArray.chartsList.push([
            {
              label:'品种名称',
              value:item.ChartVarietyName,
              key:'ChartVarietyName',
              id:item.ChartVarietyId,
              notEdit:true
            },
            {
              label:'英文品种名称',
              value:item.ChartVarietyNameEn,
              key:'ChartVarietyNameEn',
              id:item.ChartVarietyId,
              placeholder:'请输入英文品种名称'
            }
          ])
        })
      }
			
      this.setEnName = true
		},

		// 更新英文信息
		async updateEnName(enNameData){
      let res=null
      if(this.chart_source === 1){
        res=await dataBaseInterface.chartInfoEditEn(enNameData)
      }else if([2,5].includes(this.chart_source)){
        res=await futuresInterface.editChartEn({
						ChartInfoId: enNameData.ChartInfoId,
						ChartNameEn: enNameData.ChartNameEn,
						UnitEn: enNameData.ChartEdbInfoList[0].UnitEn || '',
						EdbNameEn: enNameData.ChartEdbInfoList[0].EdbNameEn || '',
            FutureGoodNameEn: enNameData.FutureGoodNameEn || '',
            ProfitNameEn: enNameData.ProfitNameEn || ''
					})
      }else if(this.chart_source === 3){
        res=await chartRelevanceApi.editChartEn({
          ChartInfoId: enNameData.ChartInfoId,
          ChartNameEn: enNameData.ChartNameEn
        })
      }else if(this.chart_source===6){//拟合方程
        res=await fittingEquationInterface.editChartEn({
          ChartInfoId: enNameData.ChartInfoId,
          ChartNameEn: enNameData.ChartNameEn
        })
      }else if(this.chart_source===7){//统计特征
        res=await statisticFeatureInterface.editChartEn({
          ChartInfoId: enNameData.ChartInfoId,
          ChartNameEn: enNameData.ChartNameEn
        })
      }else if(this.chart_source===10) {//跨品种分析
        res=await crossVarietyInterface.editChartEn(enNameData)
      }
      
			if(res.Ret !==200) return

			this.$message({
				message:res.Msg,
				type:"success"
			})
			this.setEnName = false
		},

    /* 生成ppt时图表追加底部文字 来源/说明 */
    transChartBottomInfo(slide,{x,y,width,height},data) {
      let chartData = data;
      let yPercent = Number(Math.ceil(height.replace(/%/,''))+Math.ceil(y.replace(/%/,'')))+'%';
      // console.log(yPercent)

      if(chartData.SourcesFrom&&JSON.parse(chartData.SourcesFrom).isShow) {
        let sourceObj = JSON.parse(chartData.SourcesFrom);
        slide.addText(`来源:${sourceObj.text}`,{
          x:x,
          y: yPercent,
          w: width,
          margin:10,
          fontSize: sourceObj.fontSize*0.75,
          color: sourceObj.color.includes('rgb') ? rgbaToHex(sourceObj.color).color.substring(1) : sourceObj.color.indexOf('#')===0 ? sourceObj.color.substring(1): '666',
        })
      }

      if(chartData.Instructions&&JSON.parse(chartData.Instructions).isShow) {
        let instructObj = JSON.parse(chartData.Instructions);

        slide.addText(instructObj.text,{
          x:x,
          y: yPercent,
          w: width,
          align:'right',
          margin:10,
          fontSize: instructObj.fontSize*0.75,
          color: instructObj.color.includes('rgb') ? rgbaToHex(instructObj.color).color.substring(1) : instructObj.color.indexOf('#')===0 ? instructObj.color.substring(1): '666',
        })
      }
    }
  },
  mounted(){
    this.getpptConfig()
  }
}