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,getChartInfo} 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';
import FormatThirteen from '../newVersion/components/formatPage/FormatThirteen.vue';
import FormatFourteen from '../newVersion/components/formatPage/FormatFourteen.vue';
const chunkArray = (array, chunkSize)=>{
    let result = [];
    for (let i = 0; i < array.length; i += chunkSize) {
        result.push(array.slice(i, i + chunkSize));
    }
    return result;
}
export default {
  components:{ FormatOne,FormatTwo,FormatThree,
    FormatFour,FormatFive,FormatSix,FormatSeven,FormatEight,FormatNine,FormatTen,FormatEle,FormatTwelve,FormatThirteen,FormatFourteen},
  computed: {
    globalLang() { //全局语言版本 中文ppt可用 英文ppt固定en忽视
      return this.$store.state.lang
    }
  },
  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:'',//自定义封面页的内容
      pptSheetSize:'',//ppt内嵌表格的字号


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

      //截面散点设置英文props
			enChartInfo: {},
			enEdblist:[],


        chartSVGDataMap:{}
    }
  },
  methods: {
    getBasePosition(titleDetail){
        const {top=6.6,left=10,width=68,height=5} = titleDetail
        const baseWidth = 900
        const baseHeight = 630
        return {
            baseTop:baseHeight*top/100,
            baseLeft:baseWidth*left/100,
            baseWidth:baseWidth*width/100,
            baseHeight:baseHeight*height/100,
        }
    },
    //配置自定义标题内容
    setPPTTitle(slide,page){
        const {titleDetail,title} = page
        //兼容之前的ppt
        if(!titleDetail){
            slide.addText(title, {
                /* placeholder:"slideTitle", */
                x:'10%',
                y:'5.5%',
                w:'68%',
                h:'7%',
                color:'333333'
              });
        }else{
            const {left,top,width,height,color='#333',fontSize=24,fontFamily} = titleDetail
            const text = toTextProps(toJson(title))
            const colorObj = color.includes('#')?{color:'333333',transparency:0}:rgbaToHex(color)
            slide.addText(text,{
                /* placeholder:"slideTitle", //加上后会走母版slideTitle的设置 */
                x:left+'%',
                y:top+'%',
                w:width+'%',
                h:height+'%',
                color:colorObj.color,
                transparency:colorObj.transparency,
                fontSize:fontSize*0.7,
                fontFace:fontFamily,
            })
        }
        return slide
    },
    //配置自定义封面内容
    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,CnPptSheetSize,
               EnPptCoverImgs,EnPptBackgroundImg,EnPptBottomImg,PptCompanyNameEn,PptTeamNameEn,PptFontColorEn,EnPptSheetSize
              } = 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
            this.pptSheetSize = EnPptSheetSize
        }else{
            this.pptCoverList = CnPptCoverImgs.split(',')
            this.pptBgImage = CnPptBackgroundImg
            this.pptBackImage = CnPptBottomImg
            this.pptCoverCompenyName = PptCompanyName
            this.pptCoverDepartName = PptTeamName
            this.pptCoverTextColor = PptFontColor
            this.pptSheetSize = CnPptSheetSize
        }
    },
    //获取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,
            TitleSetting,
            AdminId,
            ReportSource
        } = res.Data
        const pptDate = formatPPTDate(this.currentLang, PptDate)
        let legalContent = Content ? JSON.parse(Content) : []
        legalContent = legalContent.map(page => {
            page.elements = checkPPTpageElemant(page)
            return page
        })
        let legalTitleSetting = null
        try{
            legalTitleSetting = TitleSetting ? JSON.parse(TitleSetting) : null
        }catch(e){
            console.log(e)
            legalTitleSetting = null
        }
        
        this.pptCoverContent = CoverContent
        this.result = {
            status: 200,
            content: legalContent,
            FirstPage: {
                Title,
                ReportType,
                BackgroundImg,
                PptDate: pptDate,
                TemplateType,
            },
            ReportId,
            ModifyTime,
            PublishTime,
            Editor,
            CoverContent,
            TitleSetting:legalTitleSetting,
            AdminId,
            ReportSource
        }
      }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='zh') {
        console.log('getChartData')
      const currentLang = this.currentLang==='en'?'en':this.globalLang;
      const res = await dataBaseInterface.getChartByCode({
        UniqueCode: id,
        IsCache:true
      });
      const { Data } = res;
      if(!Data) return 
      this.chartInfo = Data.ChartInfo;
      if(!this.chartInfo) return
      if([1,11,12].includes(this.chartInfo.Source)) { //常规图
        //处理下历史默认来源
        this.setDefaultSourceFrom();
        //季节性图处理SeasonAverageConfig,SeasonRightEdbConfig
        if(this.chartInfo.ChartType===2){
            const {MaxMinLimits={},SamePeriodAverage={},SamePeriodStandardDeviation={},RightAxis={}} = Data.DataResp||{}
            this.chartInfo.SeasonAverageConfig = {MaxMinLimits,SamePeriodAverage,SamePeriodStandardDeviation}
            this.chartInfo.SeasonRightConfig = RightAxis
        }
        this.dataList = Data.EdbInfoList;
        //初始化上下限
        this.setLimitData(this.dataList)
        //柱形图独立数据
        this.chartInfo.ChartType === 7 && this.initBarData(res.Data);
        //截面散点图
        this.chartInfo.ChartType === 10 && this.initSectionScatterData(res.Data);
        //雷达图
        this.chartInfo.ChartType === 11 && this.initRadarData(res.Data);

        //截面组合图
        this.chartInfo.ChartType===14 && this.initSectionalCombinationChart(res.Data)

        // 区间分析
        this.chartInfo.Source===12&&this.initIntervalAnalysisChartData(res.Data)

        // 时序组合图控制是否堆叠
        if(this.chartInfo.ChartType===6){
          this.IsHeap=res.Data.DataResp.IsHeap===1?true:false
        }
        

        Data.Status && ![7,10,14].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:res.Data.YDataList[0].Color||'#00f',
                    Name:res.Data.YDataList[0].Name||res.Data.ChartInfo.ChartName,
                    NameEn:res.Data.YDataList[0].NameEn||res.Data.ChartInfo.ChartNameEn
                }
            ]
        }
        //多因子重新赋值YDataList
        if(res.Data.CorrelationChartInfo.AnalysisMode===1){
            this.relevanceChartData.YDataList = res.Data.YDataList
        }
        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;
        
        /* 历史数据chartInfo里全是空 兼容下历史数据不崩 */
        this.chartLimit = {
          min: res.Data.ChartInfo.LeftMin?Number(res.Data.ChartInfo.LeftMin):Number(res.Data.DataResp.YMinValue),
          max: res.Data.ChartInfo.LeftMax?Number(res.Data.ChartInfo.LeftMax):Number(res.Data.DataResp.YMaxValue),
          x_min: res.Data.ChartInfo.XMin?Number(res.Data.ChartInfo.XMin):Number(res.Data.DataResp.XMinValue),
          x_max: res.Data.ChartInfo.XMax?Number(res.Data.ChartInfo.XMax):Number(res.Data.DataResp.XMaxValue),
        }
        this.setCrossVarietyChart();
        this.changeRelevanceOptions(currentLang);//更改英文一样
      }

      //根据图表数据获取配置项
      if(Data.Status){
        const chartTitle = currentLang==='zh'?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,
                            ChartAlias:this.chartInfo.ChartAlias||'',//图表别名
                          }
        this.optionMap[id] = { ...defaultOpts, ...this.options,...otherOpts };
      }else{
        this.optionMap[id] = 'noSource'
      }
      //console.log("?", this.optionMap);
    },
    //设置图表中英文
    setOptionsLang(lang){
      console.log(lang)
      //中文图表不需要下面的设置
      if(lang==='zh') 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==='zh') 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==='zh') 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'
      })
      this.initPageTitle(page)
      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);
    },
    //初始化内页标题
    initPageTitle(page){
        const index = this.pageList.findIndex((i) => i.id === page.id)
        this.$nextTick(()=>{
            const dom = document.getElementById(`page_title__${index}`)
            if(dom){
                dom.innerHTML = page.title
            }
        })
    },
    //图表,表格数据统一加载,不按照页
    async initPPTAllPage(pageList){
        let chartElements = []
        let sheetElements = []
        pageList.forEach(page=>{
            const pageChartElements = page.elements.filter((item) => {
                return item.type === "chart";
            });
            const pageSheetElements = page.elements.filter((item)=>{
                return item.type === 'sheet'
            })
            chartElements.push(...pageChartElements)
            sheetElements.push(...pageSheetElements)
        })
        
        await this.sheetListHandle(sheetElements);
        await this.listHandle(chartElements);
    },
    async listHandle(chartElements,fromType='') {
        let needGetDataArr = []
        for(let i=0;i<chartElements.length;i++) {
            if(!this.optionMap[chartElements[i].chartId]&&!needGetDataArr.includes(chartElements[i].chartId)){
                /* needGetDataArr.push(new Promise((res,rej)=>{
                    res(this.getchartData(chartElements[i].chartId))
                })) */
                needGetDataArr.push(chartElements[i].chartId)
            }
        }
        if(needGetDataArr.length){
            //由于存在加载过程中会切换PPT/页面的情况，不能一股脑加载
            //将需要加载的数据分组
            const chunkedArray = chunkArray(needGetDataArr, 6);

            for(let i=0;i<chunkedArray.length;i++){
                if(!chunkedArray[i].length) continue //如果组内无数据，跳过
                if(this.interruptLoad) return //若需要中断加载，返回

                const promisesList = chunkedArray[i].map(chartId=>{
                    return new Promise((res,rej)=>{
                        res(this.getchartData(chartId))
                    })
                })

                await Promise.all(promisesList).then(()=>{}).catch((e)=>{
                    console.log('catch',e)
                })
                console.log(`第${i}组chart加载完成`)
            }
            console.log('全部chart加载完成')

            if(fromType==='present'){
                for(let i=0;i<chartElements.length;i++) {
                    let temp = getChartInfo(this.optionMap[chartElements[i].chartId])
                    this.$store.commit('SET_CHART_INFO',{chartId:chartElements[i].chartId,chartInfo:temp})
                }
            }
        }
    },
    async sheetListHandle(sheetElements){
      let needGetDataArr = []
      for(let i=0;i<sheetElements.length;i++){
        if( (!this.sheetDataMap[sheetElements[i].sheetId] || !this.sheetDataMap[sheetElements[i].sheetId].list) 
          && !needGetDataArr.includes(sheetElements[i].sheetId)){
            needGetDataArr.push(sheetElements[i].sheetId)
        }
      }
      if(needGetDataArr.length){
        //由于存在加载过程中会切换PPT/页面的情况，不能一股脑加载
        //将需要加载的数据分组
            const chunkedArray = chunkArray(needGetDataArr, 6);
            for(let i=0;i<chunkedArray.length;i++){
                if(!chunkedArray[i].length) continue //如果组内无数据，跳过
                if(this.interruptLoad) return //若需要中断加载，返回

                const promisesList = chunkedArray[i].map(sheetId=>{
                    return new Promise((res,rej)=>{
                        res(this.getsheetData(sheetId))
                    })
                })

                await Promise.all(promisesList).then(()=>{}).catch((e)=>{
                    console.log('catch',e)
                })
                console.log(`第${i}组sheet加载完成`)
            }
            console.log('全部sheet加载完成')
      }
      
    },
    async getsheetData(id){
      const res = await sheetInterface.getSheetData({
				UniqueCode: id
			})
      if(res.Ret !== 200) return 0
      const {TableInfo,SourcesFrom,ExcelSource} = res.Data
      //console.log('get')
      this.sheetDataMap[id] ={
        list:_.cloneDeep(TableInfo.TableDataList),
        otherParams:{
          SourcesFrom:SourcesFrom?SourcesFrom:
                      ExcelSource?this.setDefaultSource(ExcelSource):''
        }
      }
      return 1
    },
    setDefaultSource(sourceText){
      return JSON.stringify({
        isShow: true,
        text: sourceText,
        color: "#606266",
        fontSize: 9
      })
    },
    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,
                    item.chartId
			    )
        }else{
          //显示图表已被删除
          this.initImage(
				`#img_${index}_${item.position}`,
				"https://hzstatic.hzinsights.com/static/ppt_default.png"
			)
        }
			
      });
    },
    initChart(refName, options, page,chartId="") {
      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 截面散点图,11 雷达图
        Source:2
        MyChartType: 8 商品价格曲线图
        Source:5
        MyChartType: 8 利润曲线
        Source:6 拟合方程曲线
        Source:7 统计特征
        以上图表需要显示标题

        Source:1
        MyChartType:1 曲线图 5 散点图 6组合图 
        以上图表需要显示别名

        后端控制->通过新字段来判断是否显示标题/别名
      */
     const {Source,MyChartType,ChartThemeStyle} = options
     const isShowTitle = isShowPPTTitle(Source,MyChartType)
     const isShowOtherTitle = Source===1&&[1,4,5,6,11,14].includes(MyChartType)
     
    /* 主题样式*/
    const chartTheme =  ChartThemeStyle ? JSON.parse(ChartThemeStyle) : null;
    console.log('chartTheme',chartTheme)
      //console.log(options)
      this.$nextTick(() => {
        let is_linear = options.series 
          ? options.series.some(_ => _.chartType === 'linear')
          : false ;

          /* 根据板式控制的季节图x轴的刻度数
              板式1 不管  其余3个
              板式10 12的曲线，堆积柱，组合 也固定3个 其余板式不管
            */
          const { modelId } = this.pageList[index];
          let minData=[],maxData=[];
          if([1,2,4,6].includes(MyChartType)) {
            options.series.forEach(item => {
              if(item.data&&item.data.length) {
                minData.push(item.data[0][0])
                maxData.push(item.data[item.data.length-1][0])
              }
            })
          }
          
          let tickInterval = undefined;
          if((modelId!==1&&MyChartType===2) 
          || ([1,4,6].includes(MyChartType)&&[10,12].includes(modelId))) {
              tickInterval = (Math.max(...maxData)-Math.min(...minData))/6;
          }
          
          //y轴也要刻度数量固定...
          let tickAmount = [3,4,5,10,11,12].includes(modelId)?6:undefined;

        //title样式
        let titleHTML = null
        //中英文发布页需设置title换行
        //一行可容纳的中文字体数
        const fontSize = chartTheme?chartTheme.titleOptions.style.fontSize:16
        let count = parseInt($(`#${refName}`)[0].offsetWidth / fontSize)*1.75
        let {total,newStr} = getStrSize(isShowTitle?options.MyChartTitle:isShowOtherTitle?options.ChartAlias:'',count)
        const isPublish = this.$route.path==='/pptpublish'||this.$route.path==='/pptenpublish'
        if(isShowTitle||(isShowOtherTitle&&options.ChartAlias.length)){
          titleHTML = `<div style="
            text-align:${chartTheme&&chartTheme.titleOptions.align};
            font-size:${chartTheme&&chartTheme.titleOptions.style.fontSize}px;
            color:${chartTheme&&chartTheme.titleOptions.style.color};
            min-height:18px;word-break: break-all;
          ">
            ${isShowTitle?options.MyChartTitle:isShowOtherTitle?options.ChartAlias:''}
          </div>`
        }
        let SpecialOption = {
          chart: {
            ...defaultOpts.chart,
					  ...chartTheme&&chartTheme.drawOption,
            spacing: chartTheme.legendOptions.verticalAlign==='bottom' ? [25,10,2,10] : [2,10,2,10],//图例在底部顶部空间留大点给单位
            animation: false,
            backgroundColor: "rgba(0,0,0,0)",
            renderTo:$(`#${refName}`)[0],
            polar: (MyChartType===11&&Source===1) ? true :false
          },
          legend: {
            ...defaultOpts.legend,
            ...chartTheme&&chartTheme.legendOptions
          },
          colors: options.colors||chartTheme&&chartTheme.colorsOptions||defaultOpts.colors,
          title: isPublish?{
            text: (isShowTitle||(isShowOtherTitle&&options.ChartAlias.length))?newStr:null,
            margin:5,
            useHTML:false,
            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,
              }
            },
          },
          xAxis: {
            ...options.xAxis,
            tickInterval: is_linear ? undefined : tickInterval
          },
          yAxis: options.yAxis.map(_ => ({
            ..._,
            tickAmount
          }))
        }
        //奇怪柱不堆叠
        let secialBarOpt = (options.series.some(_ => _.chartType === 'linear') && options.series.some(_ => _.chartType === 'linear')) ? {
          plotOptions: {
            ...defaultOpts.plotOptions,
            column:{
              stacking: null,
            },
          },
        } : {};

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

        let chart = null
        if(is_linear)
          chart = Highcharts.chart({
            // Highcharts 配置
            ...options,
            ...SpecialOption,
            ...secialBarOpt
            });
        else
        chart = Highcharts.stockChart({
          // Highcharts 配置
          ...options,
          ...SpecialOption,
          ...secialBarOpt
        });
        
        
        if(isPublish&&chartId){
            const {clientWidth,clientHeight} = $(`#${refName}`)[0]
            const {plotBackgroundColor} = chartTheme&&chartTheme.drawOption||{}
            const svgData = chart.getSVG({
                    chart:{
                        width:clientWidth,
                        height:clientHeight,
                        backgroundColor:null,
                        plotBorderColor:null,
                        plotBackgroundColor:null,
                        plotBackgroundImage:null,
                        plotBorderWidth:null,
                        plotShadow:false,
                        animation: false,
                    }
                })
            let  parser = new DOMParser();
            let svgDoc = parser.parseFromString(svgData, 'image/svg+xml');
            //console.log('plotBackgroundColor',plotBackgroundColor)
            // 查找class为'background'的rect元素并修改fill属性
            let rectElement = svgDoc.querySelector('rect.highcharts-plot-background');
            if (rectElement) {
                //transparent(生成的图表背景会变黑) -> rgba(255, 255, 255, 0)
                let currentColor = plotBackgroundColor==='transparent'?'rgba(255, 255, 255, 0)':plotBackgroundColor
                rectElement.setAttribute('fill', currentColor);
            }
            // 将修改后的SVG文档转换回字符串
            let serializer = new XMLSerializer();
            let updatedSvgCode = serializer.serializeToString(svgDoc);
            this.chartSVGDataMap[`${refName}_${chartId}`] = updatedSvgCode
        }
      });
    },
    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:/* "图表名称" */this.$t('Chart.Detail.chart_name'),
        value:chartInfo.ChartName,
        key:'ChartName',
        id:chartInfo.ChartInfoId,
        source: chartInfo.Source,
        notEdit:true
      },
      {
        label:/* "英文图表名称" */this.$t('Chart.Detail.chart_en_name'),
        value:chartInfo.ChartNameEn,
        key:'ChartNameEn',
        id:chartInfo.ChartInfoId,
        placeholder:/* "请输入英文图表名称" */ this.$t('Chart.InputHolderAll.input_en_name')
      })
      if([1,2,5].includes(chartInfo.Source)){
        this.formItemArray.chartsList = tableData.map(item => {
          return item.Unit 
            ? [
                {
                  label:/* "指标名称" */this.$t('Edb.Detail.e_name'),
                  value:item.EdbName,
                  key:'EdbName',
                  id:item.EdbInfoId,
                  notEdit:true
                },
                {
                  label:/* "单位" */this.$t('Edb.Detail.e_unit'),
                  value:item.Unit,
                  key:'Unit',
                  id:item.EdbInfoId,
                  notEdit:true
                },
                {
                  label:/* "英文指标名称" */this.$t('Edb.Detail.e_en_name'),
                  value:item.EdbNameEn,
                  key:'EdbNameEn',
                  id:item.EdbInfoId,
                  placeholder:/* "请输入英文指标名称" */this.$t('Edb.InputHolderAll.input_common',{label:this.$t('Edb.Detail.e_en_name')})
                },
                {
                  label:/* "英文单位" */this.$t('Edb.Detail.e_en_unit'),
                  value:item.UnitEn,
                  key:'UnitEn',
                  id:item.EdbInfoId,
                  placeholder:/* "请输入英文单位" */this.$t('Edb.InputHolderAll.input_common',{label:this.$t('Edb.Detail.e_en_unit')})
                }
              ]
            : [
                {
                  label:/* "指标名称" */this.$t('Edb.Detail.e_name'),
                  value:item.EdbName,
                  key:'EdbName',
                  id:item.EdbInfoId,
                  notEdit:true
                },
                {
                  label:/*  "英文指标名称" */this.$t('Edb.Detail.e_en_name'),
                  value:item.EdbNameEn,
                  key:'EdbNameEn',
                  id:item.EdbInfoId,
                  placeholder:/* "请输入英文指标名称" */this.$t('Edb.InputHolderAll.input_common',{label:this.$t('Edb.Detail.e_en_name')})
                }
              ]
        })
      }

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

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

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

        const { TagList,VarietyList } = res.Data;

        this.formItemArray.chartInfo.push({
          label:/* 'X轴名称' */this.$t('Chart.Detail.x_name'),
          value:Data.DataResp.XName,
          key:'XName',
          id:TagList[0].ChartTagId,
          notEdit:true
        },
        {
          label:/* '英文X轴名称' */this.$t('Chart.Detail.x_en_name'),
          value:Data.DataResp.XNameEn,
          key:'XNameEn',
          id:TagList[0].ChartTagId,
          placeholder:/* '请输入英文X轴名称' */this.$t('Chart.InputHolderAll.input_common',{label:this.$t('Chart.Detail.x_en_name')})
        },{
          label:/* 'Y轴名称' */this.$t('Chart.Detail.y_name'),
          value:Data.DataResp.YName,
          key:'YName',
          id:TagList[1].ChartTagId,
          notEdit:true
        },
        {
          label:/* '英文Y轴名称' */this.$t('Chart.Detail.y_en_name'),
          value:Data.DataResp.YNameEn,
          key:'YNameEn',
          id:TagList[1].ChartTagId,
          placeholder:/* '请输入英文Y轴名称' */this.$t('Chart.InputHolderAll.input_common',{label:this.$t('Chart.Detail.y_en_name')})
        })

        VarietyList.forEach(item => {
          this.formItemArray.chartsList.push([
            {
              label:/* '品种名称' */this.$t('Chart.Detail.variety_name'),
              value:item.ChartVarietyName,
              key:'ChartVarietyName',
              id:item.ChartVarietyId,
              notEdit:true
            },
            {
              label:/* '英文品种名称' */this.$t('Chart.Detail.variety_en_name'),
              value:item.ChartVarietyNameEn,
              key:'ChartVarietyNameEn',
              id:item.ChartVarietyId,
              placeholder:/* '请输入英文品种名称' */this.$t('Chart.InputHolderAll.input_common',{label:this.$t('Chart.Detail.variety_en_name')})
            }
          ])
        })
      }
			
      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时 图表、表格 追加底部文字 来源/说明 */
    transBottomInfo(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);
        //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,
        })
      }

      if(chartData.Instructions&&JSON.parse(chartData.Instructions).isShow) {
        let instructObj = JSON.parse(chartData.Instructions);
        const color = instructObj.color.includes('rgb') ? rgbaToHex(instructObj.color).color.substring(1) 
                    : instructObj.color.indexOf('#')===0 
                    ? instructObj.color.substring(1).length<6 
                    ? '000000':instructObj.color.substring(1)
                    : '666666'
        slide.addText(instructObj.text,{
          x:x,
          y: yPercent,
          w: width,
          align:'right',
          margin:10,
          fontSize: instructObj.fontSize*0.75,
          color,
        })
      }
    }
  },
  mounted(){
    this.getpptConfig()
  }
}