新增两个版式-嘉悦用

src/views/ppt_manage/mixins/pptMixins.js

@@ -20,9 +20,11 @@ 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';
 export default {
   components:{ FormatOne,FormatTwo,FormatThree,
-    FormatFour,FormatFive,FormatSix,FormatSeven,FormatEight,FormatNine},
+    FormatFour,FormatFive,FormatSix,FormatSeven,FormatEight,FormatNine,FormatTen,FormatEle},
   data(){
     return{
       chartInfo:null,

src/views/ppt_manage/newVersion/components/editor/AddFormat.vue

@@ -29,6 +29,8 @@ import FormatPreSix from "@/views/ppt_manage/newVersion/components/formatPreview
 import FormatPreSeven from "@/views/ppt_manage/newVersion/components/formatPreview/FormatPreSeven";
 import FormatPreEight from "@/views/ppt_manage/newVersion/components/formatPreview/FormatPreEight";
 import FormatPreNine from "@/views/ppt_manage/newVersion/components/formatPreview/FormatPreNine";
+import FormatPreTen from "@/views/ppt_manage/newVersion/components/formatPreview/FormatPreTen";
+import FormatPreEle from "@/views/ppt_manage/newVersion/components/formatPreview/FormatPreEle";
 import {countComponentName} from '@/views/ppt_manage/newVersion/utils/untils';
 export default {
   name: "AddFormat",
@@ -47,7 +49,9 @@ export default {
     FormatPreSix,
     FormatPreSeven,
     FormatPreEight,
-    FormatPreNine
+    FormatPreNine,
+    FormatPreTen,
+    FormatPreEle
   },
   data() {
     return {

src/views/ppt_manage/newVersion/components/formatPage/FormatEle.vue

@@ -0,0 +1,109 @@
+<template>
+    <div class="total-wrap flex-column" :style="{'pointer-events' :isPreview?'none':'auto'}">
+        <div class="line flex-center">
+            <div class="line-item flex-center"
+                :style="pageItem.layers&&!isLayerShow()?TypeName(1)==='ChartEl'?'z-index:5':'z-index:3':''">
+                <component :data-position="1" :is="TypeName(1)" :ref="RefName(1)" :index="pageIndex" :position="1"
+                    :item="Item(1)" @dragstart.native="onDragStart" @dragover.native="onDragOver" @drop.native="onDrop"
+                    @getText="getText($event,1)" />
+            </div>
+            <div class="line-item flex-center"
+                :style="pageItem.layers&&!isLayerShow()?TypeName(2)==='ChartEl'?'z-index:5':'z-index:3':''">
+                <component :data-position="2" :is="TypeName(2)" :ref="RefName(2)" :index="pageIndex" :position="2"
+                    :item="Item(2)" @dragstart.native="onDragStart" @dragover.native="onDragOver" @drop.native="onDrop"
+                    @getText="getText($event,2)" />
+            </div>
+        </div>
+        <div class="line flex-center">
+            <div class="line-item flex-center"
+                :style="pageItem.layers&&!isLayerShow()?TypeName(3)==='ChartEl'?'z-index:5':'z-index:3':''">
+                <component :data-position="3" :is="TypeName(3)" :ref="RefName(3)" :index="pageIndex" :position="3"
+                    :item="Item(3)" @dragstart.native="onDragStart" @dragover.native="onDragOver" @drop.native="onDrop"
+                    @getText="getText($event,3)" />
+            </div>
+            <div class="line-item flex-center"
+                :style="pageItem.layers&&!isLayerShow()?TypeName(4)==='ChartEl'?'z-index:5':'z-index:3':''">
+                <component :data-position="4" :is="TypeName(4)" :ref="RefName(4)" :index="pageIndex" :position="4"
+                    :item="Item(4)" @dragstart.native="onDragStart" @dragover.native="onDragOver" @drop.native="onDrop"
+                    @getText="getText($event,4)" />
+            </div>
+        </div>
+        <div class="wrap-full-bottom bottom-15 flex-center"
+            :style="pageItem.layers&&!isLayerShow()?TypeName(5)==='ChartEl'?'z-index:5':'z-index:3':''">
+            <component :data-position="5" :is="TypeName(5)" :ref="RefName(5)" :index="pageIndex" :position="5"
+                :item="Item(5)" @dragstart.native="onDragStart" @dragover.native="onDragOver" @drop.native="onDrop"
+                @getText="getText($event,5)"></component>
+        </div>
+        <!-- 图层编辑模式 -->
+        <div class="layers" :id="`layers_${pageItem.id}`" v-if="isLayerShow()" @click.stop="clickLayer"
+            @contextmenu.stop="showLayerContentMenu">
+            <template v-for="item in pageItem.layers">
+                <component :is="getLayerElName(item)" :key="item.id" :elementInfo="item"
+                    :isActive="item.id===activeLayerEl.id&&!isClickLayer" :isLayerEdit="true"
+                    @click.stop.native="changeActEl(item)" @chooseThis="changeActEl(item)" v-on="$listeners">
+                </component>
+            </template>
+        </div>
+        <!-- 非图层编辑模式 -->
+        <template v-else>
+            <template v-for="item in pageItem.layers">
+                <component :is="getLayerElName(item)" :key="item.id" :elementInfo="item" :isActive="false"
+                    :isLayerEdit="false"></component>
+            </template>
+        </template>
+    </div>
+</template>
+
+<script>
+    import mixin from "./mixins";
+    import {
+        defaultPosition
+    } from "../../utils/config";
+    export default {
+        name: "formatEle",
+        mixins: [mixin],
+        data() {
+            return {
+                modelId: 11,
+                positionInfo: defaultPosition[11]
+            }
+        },
+    };
+</script>
+<style lang="scss">
+.line{
+    .line-item{
+        .el-wrap .chart-wrap{
+            width:90%;
+            height:90%;
+        }
+        .editor-wrap{
+            width:90%;
+            height:90%
+        }
+    }
+}
+</style>
+<style scoped lang="scss">
+    .total-wrap {
+        .line{
+            height:40%;
+            .line-item{
+                width:45%;
+                height:100%;
+                .el-wrap .chart-wrap{
+                    width:90%;
+                    height:90%;
+                }
+            }
+        }
+
+        .wrap-full-bottom {
+            position: absolute;
+            bottom: 0;
+        }
+        .bottom-15{
+            height: 18%;
+        }
+    }
+</style>

src/views/ppt_manage/newVersion/components/formatPage/FormatTen.vue

@@ -0,0 +1,121 @@
+<template>
+    <div class="total-wrap flex-column" :style="{'pointer-events' :isPreview?'none':'auto'}">
+        <div class="line flex-center">
+            <div class="line-item flex-center"
+                :style="pageItem.layers&&!isLayerShow()?TypeName(1)==='ChartEl'?'z-index:5':'z-index:3':''">
+                <component :data-position="1" :is="TypeName(1)" :ref="RefName(1)" :index="pageIndex" :position="1"
+                    :item="Item(1)" @dragstart.native="onDragStart" @dragover.native="onDragOver" @drop.native="onDrop"
+                    @getText="getText($event,1)" />
+            </div>
+            <div class="line-item flex-center"
+                :style="pageItem.layers&&!isLayerShow()?TypeName(2)==='ChartEl'?'z-index:5':'z-index:3':''">
+                <component :data-position="2" :is="TypeName(2)" :ref="RefName(2)" :index="pageIndex" :position="2"
+                    :item="Item(2)" @dragstart.native="onDragStart" @dragover.native="onDragOver" @drop.native="onDrop"
+                    @getText="getText($event,2)" />
+            </div>
+            <div class="line-item flex-center"
+                :style="pageItem.layers&&!isLayerShow()?TypeName(3)==='ChartEl'?'z-index:5':'z-index:3':''">
+                <component :data-position="3" :is="TypeName(3)" :ref="RefName(3)" :index="pageIndex" :position="3"
+                    :item="Item(3)" @dragstart.native="onDragStart" @dragover.native="onDragOver" @drop.native="onDrop"
+                    @getText="getText($event,3)" />
+            </div>
+        </div>
+        <div class="line flex-center">
+            <div class="line-item flex-center"
+                :style="pageItem.layers&&!isLayerShow()?TypeName(4)==='ChartEl'?'z-index:5':'z-index:3':''">
+                <component :data-position="4" :is="TypeName(4)" :ref="RefName(4)" :index="pageIndex" :position="4"
+                    :item="Item(4)" @dragstart.native="onDragStart" @dragover.native="onDragOver" @drop.native="onDrop"
+                    @getText="getText($event,4)" />
+            </div>
+            <div class="line-item flex-center"
+                :style="pageItem.layers&&!isLayerShow()?TypeName(5)==='ChartEl'?'z-index:5':'z-index:3':''">
+                <component :data-position="5" :is="TypeName(5)" :ref="RefName(5)" :index="pageIndex" :position="5"
+                    :item="Item(5)" @dragstart.native="onDragStart" @dragover.native="onDragOver" @drop.native="onDrop"
+                    @getText="getText($event,5)" />
+            </div>
+            <div class="line-item flex-center"
+                :style="pageItem.layers&&!isLayerShow()?TypeName(6)==='ChartEl'?'z-index:5':'z-index:3':''">
+                <component :data-position="6" :is="TypeName(6)" :ref="RefName(6)" :index="pageIndex" :position="6"
+                    :item="Item(6)" @dragstart.native="onDragStart" @dragover.native="onDragOver" @drop.native="onDrop"
+                    @getText="getText($event,6)" />
+            </div>
+        </div>
+        <div class="wrap-full-bottom bottom-15 flex-center"
+            :style="pageItem.layers&&!isLayerShow()?TypeName(7)==='ChartEl'?'z-index:5':'z-index:3':''">
+            <component :data-position="7" :is="TypeName(7)" :ref="RefName(7)" :index="pageIndex" :position="7"
+                :item="Item(7)" @dragstart.native="onDragStart" @dragover.native="onDragOver" @drop.native="onDrop"
+                @getText="getText($event,7)"></component>
+        </div>
+        <!-- 图层编辑模式 -->
+        <div class="layers" :id="`layers_${pageItem.id}`" v-if="isLayerShow()" @click.stop="clickLayer"
+            @contextmenu.stop="showLayerContentMenu">
+            <template v-for="item in pageItem.layers">
+                <component :is="getLayerElName(item)" :key="item.id" :elementInfo="item"
+                    :isActive="item.id===activeLayerEl.id&&!isClickLayer" :isLayerEdit="true"
+                    @click.stop.native="changeActEl(item)" @chooseThis="changeActEl(item)" v-on="$listeners">
+                </component>
+            </template>
+        </div>
+        <!-- 非图层编辑模式 -->
+        <template v-else>
+            <template v-for="item in pageItem.layers">
+                <component :is="getLayerElName(item)" :key="item.id" :elementInfo="item" :isActive="false"
+                    :isLayerEdit="false"></component>
+            </template>
+        </template>
+    </div>
+</template>
+
+<script>
+    import mixin from "./mixins";
+    import {
+        defaultPosition
+    } from "../../utils/config";
+    export default {
+        name: "formatTen",
+        mixins: [mixin],
+        data() {
+            return {
+                modelId: 10,
+                positionInfo: defaultPosition[10]
+            }
+        },
+    };
+</script>
+<style lang="scss">
+.line{
+    .line-item{
+        .el-wrap .chart-wrap{
+            width:90%;
+            height:90%;
+        }
+        .editor-wrap{
+            width:90%;
+            height:90%
+        }
+    }
+}
+</style>
+<style scoped lang="scss">
+    .total-wrap {
+        .line{
+            height:40%;
+            .line-item{
+                width:33%;
+                height:100%;
+                .el-wrap .chart-wrap{
+                    width:90%;
+                    height:90%;
+                }
+            }
+        }
+
+        .wrap-full-bottom {
+            position: absolute;
+            bottom: 0;
+        }
+        .bottom-15{
+            height: 18%;
+        }
+    }
+</style>

src/views/ppt_manage/newVersion/components/formatPreview/FormatPreEle.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="format-pre-wrap flex-center" style="flex-direction: column;">
+      <div class="line flex-center" style="justify-content: space-between;">
+        <img style="object-fit:fill !important;"
+          src="~@/assets/img/ppt_m/format-pic.png" />
+        <img style="object-fit:fill !important;"
+          src="~@/assets/img/ppt_m/format-pic.png" />
+      </div>
+      <div class="line flex-center" style="justify-content: space-between;">
+        <img style="object-fit:fill !important;"
+          src="~@/assets/img/ppt_m/format-pic.png" />
+        <img style="object-fit:fill !important;"
+          src="~@/assets/img/ppt_m/format-pic.png" />
+      </div>
+      <div class="line flex-center" style="width:100%;height:30%;">
+        <div class="full text" style="width:97%;height:90%;"></div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: "formatPreEle",
+    data() {
+      return {};
+    },
+    methods: {},
+  };
+  </script>
+  
+  <style scoped lang="scss">
+  .format-pre-wrap{
+    .line{
+        img{
+            width:45%;
+        }
+    }
+  }
+  </style>
+  

src/views/ppt_manage/newVersion/components/formatPreview/FormatPreTen.vue

@@ -0,0 +1,45 @@
+<template>
+    <div class="format-pre-wrap flex-center" style="flex-direction: column;">
+      <div class="line flex-center" style="justify-content: space-between;">
+        <img style="object-fit:fill !important;"
+          src="~@/assets/img/ppt_m/format-pic.png" />
+        <img style="object-fit:fill !important;"
+          src="~@/assets/img/ppt_m/format-pic.png" />
+        <img style="object-fit:fill !important;"
+          src="~@/assets/img/ppt_m/format-pic.png" />
+      </div>
+      <div class="line flex-center" style="justify-content: space-between;">
+        <img style="object-fit:fill !important;"
+          src="~@/assets/img/ppt_m/format-pic.png" />
+        <img style="object-fit:fill !important;"
+          src="~@/assets/img/ppt_m/format-pic.png" />
+        <img style="object-fit:fill !important;"
+          src="~@/assets/img/ppt_m/format-pic.png" />
+      </div>
+      <div class="line flex-center" style="width:100%;height:30%;">
+        <div class="full text" style="width:97%;height:90%;"></div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: "formatPreTen",
+    data() {
+      return {};
+    },
+    methods: {},
+  };
+  </script>
+  
+  <style scoped lang="scss">
+  .format-pre-wrap{
+    .line{
+        img{
+            width:30%;
+            height: 140%;
+        }
+    }
+  }
+  </style>
+  

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

@@ -83,6 +83,13 @@ export const formatPre = [{
     },{
       modelId:9,
       text:'上2图+文字'
+    },{
+        modelId:10,
+        text:'上6图+文字'
+    },
+    {
+        modelId:11,
+        text:'上4图+文字'
     }
 ]
 //版式id对应组件名
@@ -95,7 +102,9 @@ export const modelMap = {
     6: 'Six',
     7: 'Seven',
     8: 'Eight',
-    9: 'Nine'
+    9: 'Nine',
+    10:'Ten',
+    11:'Ele'
 }
 //版式信息,用于判断图表/文字插入哪个位置
 export const modelInfo = {
@@ -167,7 +176,23 @@ export const modelInfo = {
       elChartNum:2,
       elTextNum:1,
       elTextPosition: 3
-    }
+    },
+    10:{
+        elNum:7,
+        elType:['chart','chart','chart','chart','chart','chart','text'],
+        positions:[1,2,3,4,5,6,7],
+        elChartNum:6,
+        elTextNum:1,
+        elTextPosition: 7
+    },
+    11:{
+        elNum:5,
+        elType:['chart','chart','chart','chart','text'],
+        positions:[1,2,3,4,5],
+        elChartNum:4,
+        elTextNum:1,
+        elTextPosition: 5
+      }
 }
 
 //给标题预留的位置,单位%
@@ -348,6 +373,89 @@ export const modelConfig = [{
         y:60
       }
     ]
+    },{
+        modelId:10,
+        elements:[{
+            position:1,
+            width:33*0.9,
+            height:(restHeight)*0.40*0.9,
+            x:(33*0.1)/2,
+            y:(restHeight*0.4*0.1)/2
+        },{
+            position:2,
+            width:33*0.9,
+            height:(restHeight)*0.40*0.9,
+            x:(33*0.1)/2+33,
+            y:(restHeight*0.4*0.1)/2
+        },
+        {
+            position:3,
+            width:33*0.9,
+            height:(restHeight)*0.40*0.9,
+            x:(33*0.1)/2+33*2,
+            y:(restHeight*0.4*0.1)/2
+        },
+        {
+            position:4,
+            width:33*0.9,
+            height:(restHeight)*0.40*0.9,
+            x:(33*0.1)/2,
+            y:(restHeight*0.4*0.1)/2+40
+        },
+        {
+            position:5,
+            width:33*0.9,
+            height:(restHeight)*0.40*0.9,
+            x:(33*0.1)/2+33,
+            y:(restHeight*0.4*0.1)/2+40
+        },
+        {
+            position:6,
+            width:33*0.9,
+            height:(restHeight)*0.40*0.9,
+            x:(33*0.1)/2+33*2,
+            y:(restHeight*0.4*0.1)/2+40
+        },
+        {
+            position:7,
+            width:100*0.9,
+            height:(restHeight)*0.18*0.8,
+            x:(100-100*0.9)/2,
+            y:82
+        }]
+    },{
+        modelId:11,
+        elements:[{
+            position:1,
+            width:45*0.9,
+            height:(restHeight)*0.40*0.9,
+            x:(45*0.1)/2,
+            y:(restHeight*0.4*0.1)/2
+        },{
+            position:2,
+            width:45*0.9,
+            height:(restHeight)*0.40*0.9,
+            x:(45*0.1)/2+50,
+            y:(restHeight*0.4*0.1)/2
+        },{
+            position:3,
+            width:45*0.9,
+            height:(restHeight)*0.40*0.9,
+            x:(45*0.1)/2,
+            y:(restHeight*0.4*0.1)/2+40
+        },{
+            position:4,
+            width:45*0.9,
+            height:(restHeight)*0.40*0.9,
+            x:(45*0.1)/2+50,
+            y:(restHeight*0.4*0.1)/2+40
+        },{
+            position:5,
+            width:45*0.9,
+            height:(restHeight)*0.18*0.8,
+            x:(100-100*0.9)/2,
+            y:82
+        }]
     }
 ]
 //ppt母版
@@ -619,6 +727,22 @@ export const defaultPosition = {
     1:{type:'chart'},
     2:{type:'chart'},
     3:{type:'text'}
+  },
+  10:{
+    1:{type:'chart'},
+    2:{type:'chart'},
+    3:{type:'chart'},
+    4:{type:'chart'},
+    5:{type:'chart'},
+    6:{type:'chart'},
+    7:{type:'text'}
+  },
+  11:{
+    1:{type:'chart'},
+    2:{type:'chart'},
+    3:{type:'chart'},
+    4:{type:'chart'},
+    5:{type:'text'},
   }
 }
 //画笔工具栏

src/views/ppt_manage/newVersion/utils/untils.js

@@ -330,6 +330,22 @@ export const getTextContentSize = (model,position)=>{
           1:[1,1,0.5,0.9],
           2:[1,1,0.5,0.9],
           3:[1,1,0.9]
+        },
+        10:{
+            1:[1,1,0.33,1,0.9],
+            2:[1,1,0.33,1,0.9],
+            3:[1,1,0.33,1,0.9],
+            4:[1,1,0.33,1,0.9],
+            5:[1,1,0.33,1,0.9],
+            6:[1,1,0.33,1,0.9],
+            7:[1,1,0.9],
+        },
+        11:{
+            1:[1,1,0.45,1,0.9],
+            2:[1,1,0.45,1,0.9],
+            3:[1,1,0.45,1,0.9],
+            4:[1,1,0.45,1,0.9],
+            5:[1,1,0.9],
         }
     }
     const modelMapHeight = {
@@ -365,6 +381,22 @@ export const getTextContentSize = (model,position)=>{
           1:[0.86,0.7,1,0.9],
           2:[0.86,0.7,1,0.9],
           3:[0.86,0.3,0.8]
+        },
+        10:{
+            1:[0.86,0.4,1,0.9],
+            2:[0.86,0.4,1,0.9],
+            3:[0.86,0.4,1,0.9],
+            4:[0.86,0.4,1,0.9],
+            5:[0.86,0.4,1,0.9],
+            6:[0.86,0.4,1,0.9],
+            7:[0.86,0.18,0.8],
+        },
+        11:{
+            1:[0.86,0.4,1,0.9],
+            2:[0.86,0.4,1,0.9],
+            3:[0.86,0.4,1,0.9],
+            4:[0.86,0.4,1,0.9],
+            5:[0.86,0.18,0.8],
         }
     }
     const baseWidth=900,baseHeight=630