Merge branch 'ppt-newformat'

src/views/ppt_manage/mixins/pptMixins.js

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

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

@@ -29,6 +29,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 {
   name: "AddFormat",
@@ -47,7 +50,10 @@ export default {
     FormatPreSix,
     FormatPreSeven,
     FormatPreEight,
-    FormatPreNine
+    FormatPreNine,
+    FormatPreTen,
+    FormatPreEle,
+    FormatPreTwelve
   },
   data() {
     return {
@@ -91,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/FormatEle.vue

@@ -0,0 +1,111 @@
+<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{
+    justify-content: space-around !important;
+    .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;
+            justify-content: space-around;
+        }
+        .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/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

@@ -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:40%;
+        }
+    }
+  }
+  </style>
+  

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

@@ -0,0 +1,44 @@
+<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%;
+        }
+    }
+  }
+  </style>
+  

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/pptPublish.vue

@@ -26,7 +26,12 @@
           </div>
           <!-- 内容 -->
           <div class="ppt-item" v-for="(item,index) in pageList" :key="item.id">
-            <div class="title-wrap">
+            <div class="title-wrap"
+            :style="`
+                top:${lineClamp===2?'2%':getStrCount(item.title)<58?'5.5%':'0'};
+                height:${lineClamp===2?'12%':getStrCount(item.title)<58?'7%':'14%'};
+                -webkit-line-clamp:${lineClamp===2?2:3};`" 
+            :class="{'title-ellipsis':getStrCount(item.title)>lineClamp*57}">
               {{item.title}} 
             </div>
             <component
@@ -59,7 +64,7 @@ import Cover from './components/Cover.vue';
 import CustomCover from './components/CustomCover.vue';
 import TransReport from './components/catalog/transReport.vue';
 //import {pageList} from './utils/mock';
-import {countComponentName,pptConfigInit,toTextProps,toJson,svg2Base64,getImgRealSize,calcScale,getShapeOptions,createRandomCode,getTableData,getChartInfo,pptInit,rgbaToHex } from './utils/untils';
+import {countComponentName,pptConfigInit,toTextProps,toJson,svg2Base64,getImgRealSize,calcScale,countStrSize,getShapeOptions,createRandomCode,getTableData,getChartInfo,pptInit,rgbaToHex } from './utils/untils';
 import {marginTop,modelConfig,pptSlideMaster} from './utils/config';
 import pptmixin from '../mixins/pptMixins';
 import mixins from '../mixins/mixins';
@@ -120,7 +125,16 @@ export default {
       this.coefficient = coefficient
     }
   },
+  computed:{
+    lineClamp(){
+        return this.LayoutType===2?2:3
+    },
+  },
   methods: {
+    //计算title的字节数
+    getStrCount(title){
+        return countStrSize(title)
+    },
     async transHandle(){
       //需要校验PPT
       const {result,hintText} = this.checkPPT()

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

@@ -83,6 +83,16 @@ export const formatPre = [{
     },{
       modelId:9,
       text:'上2图+文字'
+    },{
+        modelId:10,
+        text:'上6图+文字'
+    },
+    {
+        modelId:11,
+        text:'上4图+文字'
+    },{
+        modelId:12,
+        text:'上6图'
     }
 ]
 //版式id对应组件名
@@ -95,7 +105,10 @@ export const modelMap = {
     6: 'Six',
     7: 'Seven',
     8: 'Eight',
-    9: 'Nine'
+    9: 'Nine',
+    10:'Ten',
+    11:'Ele',
+    12:'Twelve'
 }
 //版式信息,用于判断图表/文字插入哪个位置
 export const modelInfo = {
@@ -167,7 +180,31 @@ export const modelInfo = {
       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
+    },
 }
 
 //给标题预留的位置,单位%
@@ -176,6 +213,7 @@ 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: [{
@@ -348,6 +386,132 @@ export const modelConfig = [{
         y:60
       }
     ]
+    },{
+        modelId:12,
+        elements:[{
+            position:1,
+            width:33*0.9,
+            height:(restHeight)*0.48*0.9,
+            x:(33*0.1)/2,
+            y:(restHeight*0.48*0.1)/2
+        },{
+            position:2,
+            width:33*0.9,
+            height:(restHeight)*0.48*0.9,
+            x:(33*0.1)/2+33,
+            y:(restHeight*0.48*0.1)/2
+        },
+        {
+            position:3,
+            width:33*0.9,
+            height:(restHeight)*0.48*0.9,
+            x:(33*0.1)/2+33*2,
+            y:(restHeight*0.48*0.1)/2
+        },
+        {
+            position:4,
+            width:33*0.9,
+            height:(restHeight)*0.48*0.9,
+            x:(33*0.1)/2,
+            y:(restHeight)*0.48
+        },
+        {
+            position:5,
+            width:33*0.9,
+            height:(restHeight)*0.48*0.9,
+            x:(33*0.1)/2+33,
+            y:(restHeight)*0.48
+        },
+        {
+            position:6,
+            width:33*0.9,
+            height:(restHeight)*0.48*0.9,
+            x:(33*0.1)/2+33*2,
+            y:(restHeight)*0.48
+        }]
+    },{
+        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:38
+        },{
+            position:4,
+            width:45*0.9,
+            height:(restHeight)*0.40*0.9,
+            x:(45*0.1)/2+50,
+            y:38
+        },{
+            position:5,
+            width:100*0.9,
+            height:(restHeight)*0.18*0.8,
+            x:(100-100*0.9)/2,
+            y:74
+        }]
+    },{
+        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:38
+        },
+        {
+            position:5,
+            width:33*0.9,
+            height:(restHeight)*0.4*0.9,
+            x:(33*0.1)/2+33,
+            y:38
+        },
+        {
+            position:6,
+            width:33*0.9,
+            height:(restHeight)*0.4*0.9,
+            x:(33*0.1)/2+33*2,
+            y:38
+        },
+        {
+            position:7,
+            width:100*0.9,
+            height:(restHeight)*0.18*0.8,
+            x:(100-100*0.9)/2,
+            y:74
+        }]
     }
 ]
 //ppt母版
@@ -579,6 +743,7 @@ export const BaseTextShape = {
   richContent:''
 }
 //默认情况下，版式内部位置对应的组件元素
+//用于版式渲染，版式内切换元素位置
 export const defaultPosition = {
   1:{//modelId
     1:{type:'chart'},//position
@@ -619,7 +784,31 @@ export const defaultPosition = {
     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'}
+  },
 }
 //画笔工具栏
 export const boardTool = [

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

@@ -140,7 +140,7 @@ export const toTextProps = (json) => {
       if ('tagName' in item && item.tagName === 'br') {
         slices.push({ text: '', options: { breakLine: true } })
       } else if ('content' in item) {
-            const transStr = /(<|>|“|”|&|‘|’|—|≥|≤|·)/g
+            const transStr = /(<|>|“|”|&|‘|’|—|≥|≤|·|ø|Ø|∅)/g
             const text = item.content.replace(/\n/g, '').replace(/ /g, ' ').replace(transStr, replacer)
             const options = {}
 
@@ -205,6 +205,7 @@ export const toTextProps = (json) => {
   return slices
 }
 //将text中被转义的字符转义回来,如:a<b 在富文本内会被转义成 a&lt;b
+//https://www.cnblogs.com/tiancixiong/p/13581746.html
 const replacer = (_, p1) => {
     return {
         "&lt;": "<",
@@ -217,7 +218,10 @@ const replacer = (_, p1) => {
         "&mdash;":'——',
         "&ge;":'≥',
         "&le;":'≤',
-        "&middot;":'·'
+        "&middot;":'·',
+        "&oslash;":'ø',
+        "&Oslash;":'Ø',
+        "&empty;":'∅'
     } [p1]
 }
 //根据字符串的字节长,在指定位置换行
@@ -292,6 +296,7 @@ export const changeCatalogArr = (arr)=>{
 }
 //计算各个版式下,文本框占据的真实宽度
 //基准:编辑页ppt-item的最大宽高:w:900px;h:630
+//用于transform:scale 文本元素，如果该版式没有文本框，可以直接给一个空数组
 export const getTextContentSize = (model,position)=>{
     const modelMapWidth = {
         1:{
@@ -330,7 +335,26 @@ export const getTextContentSize = (model,position)=>{
           1:[1,1,0.5,0.9],
           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],
+            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],
+        },
     }
     const modelMapHeight = {
         1:{
@@ -365,7 +389,26 @@ 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]
-        }
+        },
+        12:{
+            1:[],2:[],3:[],4:[],5:[],6:[],
+        },
+        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],
+        },
+        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)=>{