再加一个版式，各种调整

src/views/ppt_manage/mixins/pptMixins.js

@@ -22,9 +22,10 @@ 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},
+    FormatFour,FormatFive,FormatSix,FormatSeven,FormatEight,FormatNine,FormatTen,FormatEle,FormatTwelve},
   data(){
     return{
       chartInfo:null,

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

@@ -31,6 +31,7 @@ import FormatPreEight from "@/views/ppt_manage/newVersion/components/formatPrevi
 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 FormatPreTwelve from "@/views/ppt_manage/newVersion/components/formatPreview/FormatPreTwelve";
 import {countComponentName} from '@/views/ppt_manage/newVersion/utils/untils';
 export default {
   name: "AddFormat",
@@ -51,7 +52,8 @@ export default {
     FormatPreEight,
     FormatPreNine,
     FormatPreTen,
-    FormatPreEle
+    FormatPreEle,
+    FormatPreTwelve
   },
   data() {
     return {
@@ -95,11 +97,12 @@ export default {
     width: calc(100% - 40px);
     /* height: 120px; */
     display: flex;
+    /* flex-wrap: wrap; */
     justify-content: space-between;
     .format-item {
-      width: 95px;
-      height: 70px;
-      padding: 10px 10px 20px 10px;
+      width: 80px;
+      height: 56px;
+      padding: 5px;
       border: 1px solid transparent;
       cursor: pointer;
       &:hover {

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

@@ -45,6 +45,9 @@ 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 FormatPreTwelve from "@/views/ppt_manage/newVersion/components/formatPreview/FormatPreTwelve";
 import {countComponentName} from '@/views/ppt_manage/newVersion/utils/untils';
 export default {
   props:{
@@ -65,7 +68,10 @@ export default {
     FormatPreSix,
     FormatPreSeven,
     FormatPreEight,
-    FormatPreNine
+    FormatPreNine,
+    FormatPreTen,
+    FormatPreEle,
+    FormatPreTwelve
   },
   data() {
     return {

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

@@ -40,12 +40,12 @@
                     @getText="getText($event,6)" />
             </div>
         </div>
-        <!-- <div class="wrap-full-bottom bottom-15 flex-center"
+        <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>
         <!-- 图层编辑模式 -->
         <div class="layers" :id="`layers_${pageItem.id}`" v-if="isLayerShow()" @click.stop="clickLayer"
             @contextmenu.stop="showLayerContentMenu">
@@ -99,7 +99,7 @@
 <style scoped lang="scss">
     .total-wrap {
         .line{
-            height:48%;
+            height:40%;
             .line-item{
                 width:33%;
                 height:100%;

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

@@ -0,0 +1,115 @@
+<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="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:48%;
+            .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

@@ -32,7 +32,7 @@
   .format-pre-wrap{
     .line{
         img{
-            width:45%;
+            width:40%;
         }
     }
   }

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

@@ -16,9 +16,9 @@
         <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="line flex-center" style="width:100%;height:30%;">
         <div class="full text" style="width:97%;height:90%;"></div>
-      </div> -->
+      </div>
     </div>
   </template>
   
@@ -37,7 +37,6 @@
     .line{
         img{
             width:30%;
-            height: 140%;
         }
     }
   }

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

@@ -0,0 +1,41 @@
+<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>
+  </template>
+  
+  <script>
+  export default {
+    name: "formatPreTwelve",
+    data() {
+      return {};
+    },
+    methods: {},
+  };
+  </script>
+  
+  <style scoped lang="scss">
+  .format-pre-wrap{
+    .line{
+        img{
+            width:33%;
+        }
+    }
+  }
+  </style>
+  

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

@@ -90,6 +90,9 @@ export const formatPre = [{
     {
         modelId:11,
         text:'上4图+文字'
+    },{
+        modelId:12,
+        text:'上6图'
     }
 ]
 //版式id对应组件名
@@ -104,7 +107,8 @@ export const modelMap = {
     8: 'Eight',
     9: 'Nine',
     10:'Ten',
-    11:'Ele'
+    11:'Ele',
+    12:'Twelve'
 }
 //版式信息,用于判断图表/文字插入哪个位置
 export const modelInfo = {
@@ -177,8 +181,8 @@ export const modelInfo = {
       elTextNum:1,
       elTextPosition: 3
     },
-    10:{
-        elNum:7,
+    12:{
+        elNum:6,
         elType:['chart','chart','chart','chart','chart','chart'],
         positions:[1,2,3,4,5,6],
         elChartNum:6,
@@ -192,7 +196,15 @@ export const modelInfo = {
         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
+    },
 }
 
 //给标题预留的位置,单位%
@@ -375,7 +387,7 @@ export const modelConfig = [{
       }
     ]
     },{
-        modelId:10,
+        modelId:12,
         elements:[{
             position:1,
             width:33*0.9,
@@ -416,14 +428,7 @@ export const modelConfig = [{
             height:(restHeight)*0.48*0.9,
             x:(33*0.1)/2+33*2,
             y:(restHeight*0.48*0.1)/2+50
-        }/* ,
-        {
-            position:7,
-            width:100*0.9,
-            height:(restHeight)*0.18*0.8,
-            x:(100-100*0.9)/2,
-            y:82
-        } */]
+        }]
     },{
         modelId:11,
         elements:[{
@@ -456,6 +461,56 @@ export const modelConfig = [{
             height:(restHeight)*0.18*0.8,
             x:(100-100*0.9)/2,
             y:80
+        },{
+            modelId:10,
+            elements:[{
+                position:1,
+                width:33*0.9,
+                height:(restHeight)*0.4*0.9,
+                x:(33*0.1)/2,
+                y:(restHeight*0.4*0.1)/2
+            },{
+                position:2,
+                width:33*0.9,
+                height:(restHeight)*0.4*0.9,
+                x:(33*0.1)/2+33,
+                y:(restHeight*0.4*0.1)/2
+            },
+            {
+                position:3,
+                width:33*0.9,
+                height:(restHeight)*0.4*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.4*0.9,
+                x:(33*0.1)/2,
+                y:(restHeight*0.4*0.1)/2+40
+            },
+            {
+                position:5,
+                width:33*0.9,
+                height:(restHeight)*0.4*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.4*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:80
+            }]
         }]
     }
 ]
@@ -688,6 +743,7 @@ export const BaseTextShape = {
   richContent:''
 }
 //默认情况下，版式内部位置对应的组件元素
+//用于版式渲染，版式内切换元素位置
 export const defaultPosition = {
   1:{//modelId
     1:{type:'chart'},//position
@@ -729,14 +785,13 @@ export const defaultPosition = {
     2:{type:'chart'},
     3:{type:'text'}
   },
-  10:{
+  12:{
     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'},
@@ -744,7 +799,16 @@ export const defaultPosition = {
     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'}
+  },
 }
 //画笔工具栏
 export const boardTool = [

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

@@ -332,6 +332,16 @@ export const getTextContentSize = (model,position)=>{
           2:[1,1,0.5,0.9],
           3:[1,1,0.9]
         },
+        12:{
+            1:[],2:[],3:[],4:[],5:[],6:[],7:[],
+        },
+        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],
+        },
         10:{
             1:[1,1,0.33,1,0.9],
             2:[1,1,0.33,1,0.9],
@@ -339,15 +349,8 @@ export const getTextContentSize = (model,position)=>{
             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], */
+            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 = {
         1:{
@@ -383,14 +386,8 @@ export const getTextContentSize = (model,position)=>{
           2:[0.86,0.7,1,0.9],
           3:[0.86,0.3,0.8]
         },
-        10:{
-            1:[0.86,0.48,1,0.9],
-            2:[0.86,0.48,1,0.9],
-            3:[0.86,0.48,1,0.9],
-            4:[0.86,0.48,1,0.9],
-            5:[0.86,0.48,1,0.9],
-            6:[0.86,0.48,1,0.9],
-            /* 7:[0.86,0.18,0.8], */
+        12:{
+            1:[],2:[],3:[],4:[],5:[],6:[],
         },
         11:{
             1:[0.86,0.4,1,0.9],
@@ -398,7 +395,16 @@ export const getTextContentSize = (model,position)=>{
             3:[0.86,0.4,1,0.9],
             4:[0.86,0.4,1,0.9],
             5:[0.86,0.18,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],
+        },
     }
     const baseWidth=900,baseHeight=630
     const width = modelMapWidth[model][position].reduce((pre,curr)=>{