Merge branch 'demand-132'

src/views/ppt_manage/mixins/pptMixins.js

@@ -25,6 +25,7 @@ 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';
+import FormatThirteen from '../newVersion/components/formatPage/FormatThirteen.vue';
 const chunkArray = (array, chunkSize)=>{
     let result = [];
     for (let i = 0; i < array.length; i += chunkSize) {
@@ -34,7 +35,7 @@ const chunkArray = (array, chunkSize)=>{
 }
 export default {
   components:{ FormatOne,FormatTwo,FormatThree,
-    FormatFour,FormatFive,FormatSix,FormatSeven,FormatEight,FormatNine,FormatTen,FormatEle,FormatTwelve},
+    FormatFour,FormatFive,FormatSix,FormatSeven,FormatEight,FormatNine,FormatTen,FormatEle,FormatTwelve,FormatThirteen},
   computed: {
     globalLang() { //全局语言版本 中文ppt可用 英文ppt固定en忽视
       return this.$store.state.lang

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

@@ -5,16 +5,20 @@
       class="add_ico"
       @click="addPage(chooseModalId)"
     />
+    <el-button type="text" icon="el-icon-arrow-left" :disabled="clickLeftTime===0" @click="scrollPrev"></el-button>
     <div class="format-wrap">
-      <div class="format-item" :class="{'last-choose':chooseModalId===item.modelId}"
-      v-for="item in formatArr" :key="item.modelId">
-        <component
-          :is="previewComponentName(item.modelId)"
-          @click.native="addPage(item.modelId)"
-        />
-        <!-- <p>{{ item.text }}</p> -->
-      </div>
+        <div class="format-trans-wrap" :style="`transform:translateX(${scrollOffset}px);`">
+            <div class="format-item" :class="{'last-choose':chooseModalId===item.modelId}"
+                :style="`margin:0 ${itemOccupyMargin}px;`"
+                    v-for="item in formatArr" :key="item.modelId">
+                    <component
+                    :is="previewComponentName(item.modelId)"
+                    @click.native="addPage(item.modelId)"
+                    />
+                </div>
+        </div>
     </div>
+    <el-button type="text" icon="el-icon-arrow-right" :disabled="clickRightTime===0" @click="scrollNext"></el-button>
   </div>
 </template>
 
@@ -32,6 +36,7 @@ import FormatPreNine from "@/views/ppt_manage/newVersion/components/formatPrevie
 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 FormatPreThirteen from "@/views/ppt_manage/newVersion/components/formatPreview/FormatPreThirteen";
 import {countComponentName} from '@/views/ppt_manage/newVersion/utils/untils';
 export default {
   name: "AddFormat",
@@ -53,15 +58,44 @@ export default {
     FormatPreNine,
     FormatPreTen,
     FormatPreEle,
-    FormatPreTwelve
+    FormatPreTwelve,
+    FormatPreThirteen
   },
   data() {
     return {
       formatArr: formatPre,
-
+      lineShowNum:9,//一行最多能展示几个
+      clickLeftTime:0,//可以按下左按钮的次数,为0时该按钮禁用
+      clickRightTime:0,//可以按下右按钮的次数,为0时该按钮禁用
+      scrollOffset:0,//当前滚动偏移量
+      itemOccupyMargin:0,//当前一个format占用间距
+      itemWidth:92,//当前一个format所占宽度(固定)
     };
   },
   methods: {
+    init(){
+        //初始化按钮次数
+        this.clickLeftTime = 0
+        this.clickRightTime = this.formatArr.length - this.lineShowNum
+        //获取容器宽度,以确定一个format应占宽度
+        const parentWidth = $('.format-wrap').width()
+        this.itemOccupyMargin = ((parentWidth/this.lineShowNum - this.itemWidth - 0.5)/2).toFixed(2)
+    },
+    scrollPrev(){
+        if(this.clickLeftTime<=0) return 
+        this.clickLeftTime--
+        this.clickRightTime++
+        this.scrollFormat(this.clickLeftTime)
+    },
+    scrollNext(){
+        if(this.clickRightTime===0) return
+        this.clickRightTime--
+        this.clickLeftTime++
+        this.scrollFormat(this.clickLeftTime)
+    },
+    scrollFormat(multiple){
+        this.scrollOffset = -(multiple*this.itemWidth+Number(this.itemOccupyMargin))
+    },
     previewComponentName(modelId) {
       return countComponentName(modelId,'pre')
       //return `formatPre${modelMap[modelId]}`;
@@ -70,10 +104,20 @@ export default {
       this.$emit("addPage", modelId);
     },
   },
+  mounted(){
+    this.init()
+  },
 };
 </script>
 <style lang="scss">
 @import "~@/views/ppt_manage/newVersion/css/formatPre.scss";
+.add-icon-wrap{
+    .el-button{
+        i{
+            font-weight: bold;
+        }
+    }
+}
 </style>
 <style scoped lang="scss">
 .add-icon-wrap {
@@ -81,6 +125,8 @@ export default {
   min-height: 64px;
   position: relative;
   padding: 10px 20px;
+  display: flex;
+  align-items: center;
   .add_ico {
     cursor: pointer;
     position: absolute;
@@ -91,15 +137,25 @@ export default {
     height: 28px;
     display: inline-block;
   }
+  .el-button{
+        font-size: 22px;
+        padding:0;
+        &:first-of-type{
+            margin-left: 40px;
+        }
+    }
   .format-wrap {
-    margin-left: 40px;
-    /* background-color: #eef0f3; */
-    width: calc(100% - 40px);
-    /* height: 120px; */
-    display: flex;
-    /* flex-wrap: wrap; */
-    justify-content: space-between;
+    width: calc(100% - 80px);
+    height:68px;
+    overflow-x: hidden;
+    .format-trans-wrap{
+        width:100%;
+        height: 100%;
+        display: flex;
+        flex-wrap: nowrap;
+    }
     .format-item {
+      flex:0 0 auto;
       width: 80px;
       height: 56px;
       padding: 5px;

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

@@ -48,6 +48,7 @@ import FormatPreNine from "@/views/ppt_manage/newVersion/components/formatPrevie
 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 FormatPreThirteen from "@/views/ppt_manage/newVersion/components/formatPreview/FormatPreThirteen";
 import {countComponentName} from '@/views/ppt_manage/newVersion/utils/untils';
 export default {
   props:{
@@ -71,7 +72,8 @@ export default {
     FormatPreNine,
     FormatPreTen,
     FormatPreEle,
-    FormatPreTwelve
+    FormatPreTwelve,
+    FormatPreThirteen
   },
   data() {
     return {

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

@@ -105,6 +105,7 @@ import FormatNine from '@/views/ppt_manage/newVersion/components/formatPage/Form
 import FormatTen from '@/views/ppt_manage/newVersion/components/formatPage/FormatTen.vue';
 import FormatEle from '@/views/ppt_manage/newVersion/components/formatPage/FormatEle.vue';
 import FormatTwelve from '@/views/ppt_manage/newVersion/components/formatPage/FormatTwelve.vue';
+import FormatThirteen from '@/views/ppt_manage/newVersion/components/formatPage/FormatThirteen.vue';
 import {countComponentName} from '@/views/ppt_manage/newVersion/utils/untils';
 export default {
   props:{
@@ -120,7 +121,7 @@ export default {
     }
   },
   components:{ FormatOne,FormatTwo,FormatThree,
-    FormatFour,FormatFive,FormatSix,FormatSeven,FormatEight,FormatNine,FormatTen,FormatEle,FormatTwelve},  
+    FormatFour,FormatFive,FormatSix,FormatSeven,FormatEight,FormatNine,FormatTen,FormatEle,FormatTwelve,FormatThirteen},  
   data() {
     return {
       startPageNum:null,//开始的页数

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

@@ -0,0 +1,80 @@
+<template>
+    <div class="total-wrap flex-column format-thirteen" :style="{'pointer-events' :isPreview?'none':'auto'}">
+      <div class="wrap-full-top 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)"
+        ></component>
+      </div>
+      <div class="wrap-full-bottom 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)"
+        ></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>
+          <!-- @deleteLayer="delLayer" -->
+        </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: "formatThirteen",
+    mixins: [mixin],
+    data(){
+      return {
+        modelId:13,
+        positionInfo:defaultPosition[13]
+      }
+    },
+  };
+  </script>
+  
+  <style scoped lang="scss">
+  </style>
+  

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

@@ -31,8 +31,11 @@
   <style scoped lang="scss">
   .format-pre-wrap{
     .line{
+        width:100%;
+        height: 30%;
         img{
-            width:40%;
+            width: 50%;
+            height: 100%;
         }
     }
   }

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

@@ -0,0 +1,26 @@
+<template>
+    <div class="format-pre-wrap flex-center" style="flex-direction: column;">
+      <div class="half-top flex-center">
+        <img class="full" style="object-fit:fill !important;"
+          src="~@/assets/img/ppt_m/format-pic.png" />
+      </div>
+      <div class="half-bottom flex-center">
+        <img class="full" style="object-fit:fill !important;"
+          src="~@/assets/img/ppt_m/format-pic.png" />
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: "formatPreThirteen",
+    data() {
+      return {};
+    },
+    methods: {},
+  };
+  </script>
+  
+  <style scoped lang="scss">
+  </style>
+  

src/views/ppt_manage/newVersion/css/format.scss

@@ -356,11 +356,14 @@ $marginTop:14%;
         }
     }
 
-    //版式8 9
+    //版式8 9 13
     .wrap-full-top,.wrap-full-bottom{
       width:100%;
       height:50%;
       position:relative;
+      .chart-bottom-insruction-info{
+        top:93%;
+      }
       &.top-70{
         height:70%;
         .chart-bottom-insruction-info{
@@ -426,6 +429,24 @@ $marginTop:14%;
             top:93%;
         }
     }
+    .format-thirteen{
+        .wrap-full-top{
+            .chart-wrap{
+                top: 2%;
+            }
+            .chart-bottom-insruction-info{
+                top:92%;
+            }
+        }
+        .wrap-full-bottom{
+            .chart-wrap{
+                top: 0%;
+            }
+            .chart-bottom-insruction-info{
+                top:90%;
+            }
+        }
+    }
     
     //layer-mask 更改版式345 9布局, ↑原先样式保留不动
     .wrap-full-left-half{

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

@@ -93,6 +93,9 @@ export const formatPre = [{
     },{
         modelId:12,
         text:'上6图'
+    },{
+        modelId:13,
+        text:'xxx'
     }
 ]
 //版式id对应组件名
@@ -108,7 +111,8 @@ export const modelMap = {
     9: 'Nine',
     10:'Ten',
     11:'Ele',
-    12:'Twelve'
+    12:'Twelve',
+    13:'Thirteen'
 }
 //版式信息,用于判断图表/文字插入哪个位置
 export const modelInfo = {
@@ -205,6 +209,13 @@ export const modelInfo = {
         elTextNum:1,
         elTextPosition: 7
     },
+    13:{
+        elNum:2,
+        elType:['chart','chart'],
+        positions:[1,2],
+        elChartNum:2,
+        elTextNum:0
+    }
 }
 
 //给标题预留的位置,单位%
@@ -512,6 +523,22 @@ export const modelConfig = [{
             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母版
@@ -809,6 +836,10 @@ export const defaultPosition = {
     6:{type:'chart'},
     7:{type:'text'}
   },
+  13:{
+    1:{type:'chart'},
+    2:{type:'chart'}
+  }
 }
 //画笔工具栏
 export const boardTool = [

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

@@ -355,6 +355,9 @@ export const getTextContentSize = (model,position)=>{
             6:[1,1,0.33,1,0.9],
             7:[1,1,0.9],
         },
+        13:{
+            1:[],2:[]
+        }
     }
     const modelMapHeight = {
         1:{
@@ -409,6 +412,9 @@ export const getTextContentSize = (model,position)=>{
             6:[0.86,0.4,1,0.9],
             7:[0.86,0.18,0.8],
         },
+        13:{
+            1:[],2:[]
+        }
     }
     const baseWidth=900,baseHeight=630
     const width = modelMapWidth[model][position].reduce((pre,curr)=>{