eta_front/src/views/ppt_manage/newVersion/utils/config.js

/**
 * ppt 设置
 */
//pageList数据结构
const pageList = [{
    id: 1, //pageId
    title: '我是版式一', //pageTitle
    modelId: 4, //版式id
    key: 0, //用于重新渲染
    layers:[//page图层元素
      {//形状元素
        id:'xvSIDSN',//图层元素id
        type:'shape',//图层类型:shape line text
        shapeType:'Rect',//用于指定BaseShape
        left:0,top:0,//位置信息,单位px
        width:100,height:100,//大小信息,单位px
        fill:'#FF0000',//填充颜色,支持透明度
        opacity:1,//元素整体的透明度
        outline:{//边框信息:对应rect的stroke属性
          style:'solid',//实线solid虚线dashed
          width:1,//边框的宽度
          color:'#008000',//边框颜色,也支持透明度
        }
      },
      {//线条元素
        id:'AxsdUE',
        type:'line',
        left:0,top:0,width:100,height:100,
        start:[0,0],//线条起点位置,对应line的x1,y1
        end:[100,100],//线条的终点位置,对应line的x2,y2
        color:'#008000',//线条颜色
        points:['','arrow'],//线条的端点样式:（[起点样式, 终点样式];'':无;'arrow':箭头
        style:'solid',//线条样式:实现虚线
      },
    ],
    elements: [{ //page元素
        type: 'chart', //元素类型:chart image text sheet
        position: 1, //元素所在位置
        chartId: '31161cf31e33bd262dca99e161308064', //动态图标对应的UniqueCode
    }, {
        type: 'image',
        position: 2,
        src: 'http://xxx.png', //图片对应的线上地址
    }, {
        type: 'text',
        position: 4,
        content: 'aaa', //纯文本信息
        richContent: '<p>aaa</p>' //富文本信息
    }, {
        type:'sheet',
        position:3,
        sheetId:'ajhskdakd',//表格id
        sheetHeight:'100px',//表格iframe所占的高度,转报告会用到 表格iframe加载完毕才会有
     }]
}, ]
//版式预览配置
export const formatPre = [{
        modelId: 1, //版式id
        text: '一张图', //描述文字
    },
    {
        modelId: 2,
        text: '左图+文字'
    },
    {
        modelId: 3,
        text: '左2图+文字'
    }, {
        modelId: 4,
        text: '3图+文字'
    },{
        modelId:7,
        text:'两张图'
    },{
        modelId: 5,
        text: '四张图'
    }, {
        modelId: 6,
        text: '全文字'
    },{
      modelId:8,
      text:'上图+文字'
    },{
      modelId:9,
      text:'上2图+文字'
    },{
        modelId:10,
        text:'上6图+文字'
    },
    {
        modelId:11,
        text:'上4图+文字'
    },{
        modelId:12,
        text:'上6图'
    },{
        modelId:13,
        text:'xxx'
    }
]
//版式id对应组件名
export const modelMap = {
    1: 'One',
    2: 'Two',
    3: 'Three',
    4: 'Four',
    5: 'Five',
    6: 'Six',
    7: 'Seven',
    8: 'Eight',
    9: 'Nine',
    10:'Ten',
    11:'Ele',
    12:'Twelve',
    13:'Thirteen'
}
//版式信息,用于判断图表/文字插入哪个位置
export const modelInfo = {
    1: {
        elNum: 1, //可容纳元素的个数
        elType: ['chart'], //可容纳元素的类型,index+1与positions对应
        positions: [1], //元素的位置索引
        elChartNum: 1,
        elTextNum: 0
    },
    2: {
        elNum: 2,
        elType: ['chart', 'text'],
        positions: [1, 2],
        elChartNum: 1,
        elTextNum: 1,
        elTextPosition: 2
    },
    3: {
        elNum: 3,
        elType: ['chart', 'chart', 'text'],
        positions: [1, 2, 3],
        elChartNum: 2,
        elTextNum: 1,
        elTextPosition: 3
    },
    4: {
        elNum: 4,
        elType: ['chart', 'chart', 'chart', 'text'],
        positions: [1, 2, 3, 4],
        elChartNum: 3,
        elTextNum: 1,
        elTextPosition: 4
    },
    5: {
        elNum: 4,
        elType: ['chart', 'chart', 'chart', 'chart'],
        positions: [1, 2, 3, 4],
        elChartNum: 4,
        elTextNum: 0
    },
    6: {
        elNum: 1, //可容纳元素的个数
        elType: ['text'], //可容纳元素的类型,index+1与positions对应
        positions: [1], //元素的位置索引
        elChartNum: 0,
        elTextNum: 1,
        elTextPosition: 1
    },
    7:{
        elNum:2,
        elType:['chart','chart'],
        positions:[1,2],
        elChartNum:2,
        elTextNum:0
    },
    8:{
      elNum:2,
      elType:['chart','text'],
      positions:[1,2],
      elChartNum:1,
      elTextNum:1,
      elTextPosition: 2
    },
    9:{
      elNum:3,
      elType:['chart','chart','text'],
      positions:[1,2,3],
      elChartNum:2,
      elTextNum:1,
      elTextPosition: 3
    },
    12:{
        elNum:6,
        elType:['chart','chart','chart','chart','chart','chart'],
        positions:[1,2,3,4,5,6],
        elChartNum:6,
        elTextNum:0,
        /* elTextPosition: 7 */
    },
    11:{
        elNum:5,
        elType:['chart','chart','chart','chart','text'],
        positions:[1,2,3,4,5],
        elChartNum:4,
        elTextNum:1,
        elTextPosition: 5
      },
    10:{
        elNum:7,
        elType:['chart','chart','chart','chart','chart','chart','text'],
        positions:[1,2,3,4,5,6],
        elChartNum:6,
        elTextNum:1,
        elTextPosition: 7
    },
    13:{
        elNum:2,
        elType:['chart','chart'],
        positions:[1,2],
        elChartNum:2,
        elTextNum:0
    }
}

//给标题预留的位置,单位%
export const marginTop = 14
const titleHeight = 7
const restHeight = 100 - marginTop
//版式位置宽高设置,x,y,width,height都是基于整张ppt的百分比
//百分比的值来自./css/format.scss ->.chart-wrap,.editor-wrap
//用于发布页生成PPT
export const modelConfig = [{
        modelId: 1,
        elements: [{
            position: 1,
            width: 100*0.9, //单位%
            height: (restHeight)*0.9,
            x: (100-100*0.9)/2, //单位%,left
            /* y: ((restHeight)-(restHeight)*0.9)/2, //top */
            y:1.5
        }]
    }, {
        modelId: 2,
        elements: [{
            position: 1,
            width: 100*0.6, 
            height:(restHeight)*0.8 ,
            x: 0,
            y: ((restHeight)-(restHeight)*0.8)/2
        }, {
            position: 2,
            width: 100*0.4, 
            height: (restHeight)*0.8,
            x: 60,// or 60
            y: ((restHeight)-(restHeight)*0.8)/2
        }]
    },
    {
        modelId: 3,
        elements: [{
            position: 1,
            width: 100*0.5,
            height: (restHeight)*0.5*0.84,
            x: 0,
            y: ((restHeight)*0.5-(restHeight)*0.5*0.84)/2
        }, {
            position: 2,
            width: 100*0.5,
            height: (restHeight)*0.5*0.84,
            x: 0,
            //这个位置的图表布局是align-items: flex-start，所以紧接着上一个图表
            y: 50-7/* +((restHeight)*0.5-(restHeight)*0.5*0.84)/2 */,//or 50
        }, {
            position: 3,
            width: 100*0.5,
            height: (restHeight)*0.84,
            x: 50,
            y: ((restHeight)-(restHeight)*0.84)/2
        }]
    },
    {
        modelId: 4,
        elements: [{
            position: 1,
            width: 100*0.5,
            height: (restHeight)*0.5*0.84,
            x: 0,
            y: ((restHeight)*0.5-(restHeight)*0.5*0.84)/2
        }, {
            position: 2,
            width: 100*0.5,
            height: (restHeight)*0.5*0.84,
            x: 0,
            y: 50-7/* +((restHeight)*0.5-(restHeight)*0.5*0.84)/2 */,//or 50
        }, {
            position: 3,
            width: 100*0.5,
            height: (restHeight)*0.5*0.84,
            x: 50,//or 50
            y: ((restHeight)*0.5-(restHeight)*0.5*0.84)/2
        }, {
            position: 4,
            width: 100*0.5,
            height: (restHeight)*0.5*0.84,
            x: 50,
            y: 50-7/* +((restHeight)*0.5-(restHeight)*0.5*0.84)/2 */,//or 50
        }]
    },
    {
        modelId: 5,
        elements: [{
            position: 1,
            width: 100*0.5,
            height: (restHeight)*0.5*0.84,
            x: 0,
            y: ((restHeight)*0.5-(restHeight)*0.5*0.84)/2
        }, {
            position: 2,
            width: 100*0.5,
            height: (restHeight)*0.5*0.84,
            x: 0,
            y: 50-7/* +((restHeight)*0.5-(restHeight)*0.5*0.84)/2 */,//or 50
        }, {
            position: 3,
            width: 100*0.5,
            height: (restHeight)*0.5*0.84,
            x: 50,//or 50
            y: ((restHeight)*0.5-(restHeight)*0.5*0.84)/2
        }, {
            position: 4,
            width: 100*0.5,
            height: (restHeight)*0.5*0.84,
            x: 50,
            y: 50-7/* +((restHeight)*0.5-(restHeight)*0.5*0.84)/2 */,//or 50
        }]
    },
    {
        modelId: 6,
        elements: [{
            position: 1,
            width: 100*0.9,
            height: (100-marginTop)*0.9,
            x: (100-100*0.9)/2, 
            y: ((100-marginTop)-(100-marginTop)*0.9)/2, 
        }]
    },
    {
        modelId:7,
        elements:[{
            position:1,
            width:100*0.5,
            height:(restHeight)*0.8,
            x:0,
            y:((restHeight)-(restHeight)*0.8)/2
        },{
            position:2,
            width:100*0.5,
            height:(restHeight)*0.8,
            x:50,
            y:((restHeight)-(restHeight)*0.8)/2
        }]
    },
    {
      modelId:8,
      elements:[{
        position:1,
        width:100,
        height:(restHeight)*0.7*0.9,
        x:0,
        y:(restHeight*0.7-restHeight*0.7*0.9)/2
      },
      {
        position:2,
        width:100,
        height:(restHeight)*0.3*0.8,
        x:0,
        y:60
      }]
    },
    {
      modelId:9,
      elements:[{
        position:1,
        width:100*0.5,
        height:(restHeight)*0.7*0.9,
        x:0,
        y:(restHeight*0.7-restHeight*0.7*0.9)/2
      },
      {
        position:2,
        width:100*0.5,
        height:(restHeight)*0.7*0.9,
        x:50,
        y:(restHeight*0.7-restHeight*0.7*0.9)/2
      },
      {
        position:3,
        width:100*0.9,
        height:(restHeight)*0.3*0.8,
        x:0,
        y:60
      }
    ]
    },{
        modelId:12,
        elements:[{
            position:1,
            width:33,
            height:(restHeight)*0.48*0.9,
            x:0,
            y:(restHeight*0.48*0.1)/2
        },{
            position:2,
            width:33,
            height:(restHeight)*0.48*0.9,
            x:33,
            y:(restHeight*0.48*0.1)/2
        },
        {
            position:3,
            width:33,
            height:(restHeight)*0.48*0.9,
            x:33*2,
            y:(restHeight*0.48*0.1)/2
        },
        {
            position:4,
            width:33,
            height:(restHeight)*0.48*0.9,
            x:0,
            y:(restHeight)*0.48+(restHeight*0.48*0.1)/2
        },
        {
            position:5,
            width:33,
            height:(restHeight)*0.48*0.9,
            x:33,
            y:(restHeight)*0.48+(restHeight*0.48*0.1)/2
        },
        {
            position:6,
            width:33,
            height:(restHeight)*0.48*0.9,
            x:33*2,
            y:(restHeight)*0.48+(restHeight*0.48*0.1)/2
        }]
    },{
        modelId:11,
        elements:[{
            position:1,
            width:50,
            height:(restHeight)*0.40*0.9,
            x:0,
            y:(restHeight*0.4*0.1)/2
        },{
            position:2,
            width:50,
            height:(restHeight)*0.40*0.9,
            x:50,
            y:(restHeight*0.4*0.1)/2
        },{
            position:3,
            width:50,
            height:(restHeight)*0.40*0.9,
            x:0,
            y:38
        },{
            position:4,
            width:50,
            height:(restHeight)*0.40*0.9,
            x:50,
            y:38
        },{
            position:5,
            width:100*0.9,
            height:(restHeight)*0.18*0.8,
            x:0,
            y:74
        }]
    },{
        modelId:10,
        elements:[{
            position:1,
            width:33,
            height:(restHeight)*0.4*0.9,
            x:0,
            y:(restHeight*0.4*0.1)/2
        },{
            position:2,
            width:33,
            height:(restHeight)*0.4*0.9,
            x:33,
            y:(restHeight*0.4*0.1)/2
        },
        {
            position:3,
            width:33,
            height:(restHeight)*0.4*0.9,
            x:33*2,
            y:(restHeight*0.4*0.1)/2
        },
        {
            position:4,
            width:33,
            height:(restHeight)*0.4*0.9,
            x:0,
            y:38
        },
        {
            position:5,
            width:33,
            height:(restHeight)*0.4*0.9,
            x:33,
            y:38
        },
        {
            position:6,
            width:33,
            height:(restHeight)*0.4*0.9,
            x:33*2,
            y:38
        },
        {
            position:7,
            width:100,
            height:(restHeight)*0.18*0.8,
            x:0,
            y:74
        }]
    },{
        modelId:13,
        elements:[{
            position:1,
            width:100,
            height:(restHeight)*0.5*0.9,
            x:0,
            y:(restHeight*0.5-restHeight*0.5*0.9)/2
        },
        {
            position:2,
            width:100,
            height:(restHeight)*0.5*0.9,
            x:0,
            y:(restHeight)*0.5
        }]
    }
]
//ppt母版
export const pptSlideMaster = {
	title: "幻灯片母版",
	objects: [
		{
			/* placeholder: {
				options: {
					name: "slideTitle",
					type: "title",
					x: "10%",
					y: "5%",
					w: "68%",
					h: titleHeight + "%",
					color: "333333",
                    align:'left',
                    valign:'middle',
					fontSize:24*0.75,
				},
			}, */
		},
		{
			image: {
				x: 0,
				y: 0,
				w: 10,
				h: 7,
				path: "/static/pptnextimg.png", //会发送http请求,static or 线上地址
			},
		},
	],
  slideNumber:{x:"95%",y:"94%",fontSize:12}
}
//ppt母版英文
export const pptSlideMasterEn = {
  title: "幻灯片母版",
	objects: [
		{
		},
		{
			image: {
        x: 0,
        y: 0,
        w: 10,
        h: 7,
        path: "/static/ppt_en_bg.png", 
      },
		},
	],
  slideNumber:{x:"95%",y:"94%",fontSize:12}
}
//ppt宽高比
export const pptLayout = { name: "myppt", width: 10, height: 7 }
//ppt封面图
export const pptCover = [
    require('@/assets/img/ppt_m/bg3.jpg'),
    require('@/assets/img/ppt_m/bg4.jpg'),
    require('@/assets/img/ppt_m/bg5.jpg'),
]
//ppt封面图英文
export const pptCoverEn = [
  require('@/assets/img/ppt_m/bg_en1.png'),
  require('@/assets/img/ppt_m/bg_en2.png'),
  require('@/assets/img/ppt_m/bg_en3.png'),
]
//ppt-item的base宽高:默认比例是10:7,单位px;也是编辑页ppt-item的固定宽高
export const pptBaseSize = {width:906,height:906*0.7}
//ppt列表操作项
export const toolList = [
    {
        label:'撤销',
        key:'cancel'
    },
    {
        label:'提交',
        key:'submit'
    },
    {
        label:'预览发布',
        key:'publish'
    },
    {
        label:'演示',
        key:'present'
    },
    {
        label:'下载',
        key:'download'
    },
    // {
    //     label:'',
    //     key:'transform'
    // },
    // {
    //   label:'转英文PPT',
    //   key:'transEn'
    // },
    {
        label:'编辑',
        key:'edit'
    },
    // {
    //     label:'复制',
    //     key:'copy'
    // },
    {
        label:'删除',
        key:'delete'
    }
]
//图层元素预览信息
export const layerElments = [
  {
    type:'line',
    name:"直线",
    path:'M 0 0 L 200 200 z',
    viewBox:[200,200]
  },
  {
    type:'line',
    name:"箭头",
    path:'M 0 0 L 200 200 z',
    viewBox:[200,200],
    points:['','arrow'],
    lineType:'arrow'
  },
  {
    type:'shape',
    name:'矩形',
    shapeType:'Rect',
    path:'M 0 0 L 200 0 L 200 200 L 0 200 Z',
    viewBox:[200,200]
  },{
    type:'text',
    name:'文本',
    path:'M 0 50 L 200 50 M 100 50 L 100 180 ',
    viewBox:[200,200]
  },
  {
    type:'shape',
    name:'圆形',
    shapeType:'Circle',
    path:'M 100 0 A 50 50 0 1 1 100 200 A 50 50 0 1 1 100 0 Z',
    viewBox:[200,200]
  }
]
//图层元素编辑配置
export const layerEditOptions = {
  stokeSize:[1,2,3,4,5],//边框粗细
  stokeStyle:'solid',//边框样式:实线solid,虚线:dashed
  colorsOptions:['#333','#5B9BD5','#f00','#fff','#00f','#000','#00FFFF','#70DB93','#9F5F9F','#A67D3D','#5F9F9F'],
  strokeColor:'black',
  fillColor:'transparent'
}
//图层元素resize时,操作的按钮
//8个方向:左上,左,左下;上,下,右上,右,右下
export const layerElOperate = ['LEFT_TOP','TOP','RIGHT_TOP','LEFT','RIGHT','LEFT_BOTTOM','BOTTOM','RIGHT_BOTTOM']
//图层元素预设值
//矩形
export const BaseRectShape = {
  id:'xvSIDSN',//图层元素id
  type:'shape',//图层类型
  shapeType:'Rect',//用于指定组件名
  left:0,top:0,//位置信息,单位px
  width:100,height:100,//大小信息,单位px
  percentageLeft:0,percentageTop:0,percentageWidth:0,percentageHeight:0,//百分比化的位置信息和大小信息
  realWidth:100,realHeight:100,//元素在dom内的真实宽高,单位px;在ppt-item宽不为pptBaseSize.width的时候与width,height不相等
  fill:'rgba(255, 255, 255, 0)',//填充颜色
  opacity:1,//元素整体的透明度
  path:'M 0 0 L 200 0 L 200 200 L 0 200 Z',//矩形的svg路径
  viewBox:[200,200],//视口,对应path,求比例用的
  outline:{//边框信息:对应rect的stroke属性
    style:'solid',//实线solid虚线dashed
    width:3,//边框的宽度
    color:'rgba(75, 75, 75, 1)',//边框颜色,也支持透明度
  }
}
//圆 除了path跟rect的不一样,其他都一样
export const BaseCircleShape = {
    id:'abUOPic',
    type:'shape',
    shapeType:'Circle',
    left:0,top:0,
    width:100,height:100,
    percentageLeft:0,percentageTop:0,percentageWidth:0,percentageHeight:0,
    realWidth:100,realHeight:100,
    fill:'rgba(255, 255, 255, 0)',
    opacity:1,
    path:'M 100 0 A 50 50 0 1 1 100 200 A 50 50 0 1 1 100 0 Z',//圆形的svg路径
    viewBox:[200,200],
    outline:{
        style:'solid',
        width:3,
        color:'rgba(75, 75, 75, 1)'
    }
    
}
//直线
export const BaseLineShape = {
  id:'AxsdUE',
  type:'line',
  left:0,top:0,width:100,height:100,
  start:[0,0],//线条起点位置,对应line的x1,y1
  end:[100,100],//线条的终点位置,对应line的x2,y2
  viewBox:[200,200],
  color:'rgba(75, 75, 75, 1)',//线条颜色
  points:['',''],//线条的端点样式:（[起点样式, 终点样式];'':无;'arrow':箭头
  style:'solid',//线条样式:实现虚线
  strokeWidth:3,//线条的粗细
  fill:'transparent',//填充颜色:线条所占区域是一个矩形,一般是透明色
}
//文本框
export const BaseTextShape = {
  id:'eRxFirB',
  type:'text',
  left:0,top:0,width:200,height:100,
  fontSize:12,
  content:'请输入内容',
  richContent:''
}
//默认情况下，版式内部位置对应的组件元素
//用于版式渲染，版式内切换元素位置
export const defaultPosition = {
  1:{//modelId
    1:{type:'chart'},//position
  },
  2:{
    1:{type:'chart'},
    2:{type:'text'}
  },
  3:{
    1:{type:'chart'},
    2:{type:'chart'},
    3:{type:'text'}
  },
  4:{
    1:{type:'chart'},
    2:{type:'chart'},
    3:{type:'chart'},
    4:{type:'text'}
  },
  5:{
    1:{type:'chart'},
    2:{type:'chart'},
    3:{type:'chart'},
    4:{type:'chart'}
  },
  6:{
    1:{type:'text'},
  },
  7:{
    1:{type:'chart'},
    2:{type:'chart'}
  },
  8:{
    1:{type:'chart'},
    2:{type:'text'}
  },
  9:{
    1:{type:'chart'},
    2:{type:'chart'},
    3:{type:'text'}
  },
  12:{
    1:{type:'chart'},
    2:{type:'chart'},
    3:{type:'chart'},
    4:{type:'chart'},
    5:{type:'chart'},
    6:{type:'chart'},
  },
  11:{
    1:{type:'chart'},
    2:{type:'chart'},
    3:{type:'chart'},
    4:{type:'chart'},
    5:{type:'text'},
  },
  10:{
    1:{type:'chart'},
    2:{type:'chart'},
    3:{type:'chart'},
    4:{type:'chart'},
    5:{type:'chart'},
    6:{type:'chart'},
    7:{type:'text'}
  },
  13:{
    1:{type:'chart'},
    2:{type:'chart'}
  }
}
//画笔工具栏
export const boardTool = [
  {
    iconName:'brush',
    hintName:'画笔',
  },
  {
    iconName:'palette',
    hintName:'颜色',
  },
  {
    iconName:'eraser',
    hintName:'橡皮',
  },
  {
    iconName:'broom',
    hintName:'擦除',
  }
]
//画笔工具栏-颜色选择
export const colorList = [
  '#FFFFFF',
  '#000000',
  '#FF0000',
  '#FDB863',
  '#FFF849',
  '#8CD67A',
  '#409EFF',
  '#9D42D6'
]