123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980 |
- /** 图库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()
- }
- }
|