Merge branch 'ppt-demand-047'

src/views/ppt_manage/newVersion/components/formatEl/ChartEl.vue

@@ -1,11 +1,10 @@
 <template>
-<div style="width:100%;height:100%; position:relative;" class="flex-center el-wrap"
+<div style="width:100%;height:100%; position:relative;" class="flex-center el-wrap chart-out-wrap"
   :draggable="isBtnShow"
 >
   <div
     class="chart-wrap"
     :id="`${$parent.isPreview?'preview_':''}chart_${index}_${position}`"
-    :style="(chartSourcesFrom&&chartSourcesFrom.isShow || chartInstructions&&chartInstructions.isShow) ? 'margin-bottom:20px' : ''"
   >
     <img :id="`${$parent.isPreview?'preview_':''}img_${index}_${position}`" />
   </div>
@@ -121,9 +120,9 @@ export default {
 <style scoped lang="scss">
 .tool-list{
   position:absolute;
-  width:90%;
-  top:2%;
-  left:5%;
+  width:95%;
+  top:0;
+  left:2%;
   display: flex;
   justify-content: space-between;
   .dragBtn,.copyBtn,.addBtn,.closeBtn{
@@ -133,11 +132,12 @@ export default {
     margin-left: auto;
   }
 }
+//图表自定义信息
 .chart-bottom-insruction-info{
-  width: 90%;
+  width: 95%;
   position: absolute;
-  left: 5%;
-  bottom: 20px;
+  left: 2%;
+  //bottom: 4%;//top,bottom在具体版式单独设置
   align-items: center;
   justify-content: space-between;
 }

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="total-wrap flex-column" :style="{'pointer-events' :isPreview?'none':'auto'}">
+    <div class="total-wrap flex-column wrap-format-new format-ele" :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':''">
@@ -70,42 +70,13 @@
         },
     };
 </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%;
+.format-ele{
+    .line{
+        height: 41%;
+        .line-item{
+            width: 50%;
         }
     }
+}
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="total-wrap flex-column" :style="{'pointer-events' :isPreview?'none':'auto'}">
+  <div class="total-wrap flex-column format-nine" :style="{'pointer-events' :isPreview?'none':'auto'}">
 <!--     <div class="wrap-full-top top-70 flex-center" 
       :style="{zIndex:pageItem.layers&&!isLayerShow()?'3':'',
       justifyContent:'space-between'}"> -->

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="total-wrap flex-column" :style="{'pointer-events' :isPreview?'none':'auto'}">
+    <div class="total-wrap flex-column wrap-format-new format-ten" :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':''">
@@ -82,40 +82,13 @@
         },
     };
 </script>
-<style lang="scss">
-.line{
-    .line-item{
-        .el-wrap .chart-wrap{
-            width:90%;
-            height:90%;
-        }
-        .editor-wrap{
-            width:90%;
-            height:90%
+<style lang="scss" scoped>
+.format-ten{
+    .line{
+        height:41%;
+        .line-item{
+            width:33%;
         }
     }
 }
-</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

@@ -1,5 +1,5 @@
 <template>
-    <div class="total-wrap flex-column" :style="{'pointer-events' :isPreview?'none':'auto'}">
+    <div class="total-wrap flex-column wrap-format-new format-twelve" :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':''">
@@ -76,40 +76,13 @@
         },
     };
 </script>
-<style lang="scss">
-.line{
+<style scoped lang="scss">
+.format-twelve{
+    .line{
+        height:48%;
+    }
     .line-item{
-        .el-wrap .chart-wrap{
-            width:90%;
-            height:90%;
-        }
-        .editor-wrap{
-            width:90%;
-            height:90%
-        }
+        width:33%;
     }
 }
-</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/css/format.scss

@@ -144,8 +144,12 @@ $marginTop:14%;
       width: 100%;
       height: calc(100% - #{$marginTop});
       display: flex;
+      .chart-bottom-insruction-info{
+            margin-top: 0 !important;
+        }
     }
-    //版式1,6
+    //24.1.25 产品调整各个版式的位置,将chart-wrap宽度置为100% 高度尽量调高
+    //版式1,6 
     .full {
         width: 100%;
         height: 100%;
@@ -154,10 +158,9 @@ $marginTop:14%;
         align-items: flex-start;
         //chart容器
         .chart-wrap {
+            top:3%;
             width: 90%;
             height: 90%;
-            margin-top: 10px;
-            /* background-color: rgba(255, 192, 203, 0.507); */
         }
         .editor-wrap {
             width: 90%;
@@ -169,6 +172,9 @@ $marginTop:14%;
             top:0;
             right:calc(5% - 10px);
         }
+        .chart-bottom-insruction-info{
+            bottom:4%;
+        }
     }
 
     //版式2
@@ -178,10 +184,9 @@ $marginTop:14%;
         position: absolute;
         left: 0;
         top:0;
-        .chart-wrap {
-            width: 90%;
-            height: 80%;
-            /* background-color: rgba(0, 128, 0, 0.389); */
+        .chart-wrap{
+            width:100%;
+            height:80%;
         }
         .editor-wrap {
           width: 90%;
@@ -191,6 +196,9 @@ $marginTop:14%;
             top:calc(10% - 10px);
             right:calc(5% - 10px);
         }
+        .chart-bottom-insruction-info{
+            top:89%;
+        }
     }
 
     .word-full-right {
@@ -206,9 +214,12 @@ $marginTop:14%;
             height: 80%;
         }
         .chart-wrap {
-          width: 90%;
+          width: 100%;
           height: 80%;
-      }
+        }
+        .chart-bottom-insruction-info{
+            top:89%;
+        }
     }
 
     //版式345 7
@@ -224,13 +235,16 @@ $marginTop:14%;
             position: relative;
             &.top {
                 .chart-wrap {
-                    width: 90%;
+                    width: 100%;
                     height: 84%;
                 }
                 .closeBtn{
                     top:calc(4% - 10px);
                     right:2.5%;
                 }
+                .chart-bottom-insruction-info{
+                    top:89%;
+                }
             }
 
             &.bottom {
@@ -242,22 +256,24 @@ $marginTop:14%;
                     top:-1.5% !important;
                   }
                   .tool-list{
-                    top:-20px !important;
+                    top:-10px !important;
                   }
                 }
                 .chart-wrap {
-                    width: 90%;
+                    width: 100%;
                     height: 84%;
-                    /* background-color: coral; */
                 }
                 .closeBtn{
                     top:0;
                     right:2.5%;
                 }
+                .chart-bottom-insruction-info{
+                    top:84%;
+                }
             }
         }
         .chart-wrap {
-            width: 90%;
+            width: 100%;
             height: 80%;
         }
         .editor-wrap {
@@ -268,6 +284,9 @@ $marginTop:14%;
             top:calc(10% - 10px);
             right:calc(5% - 10px);
         }
+        .chart-bottom-insruction-info{
+            top:90%;
+        }
     }
 
     .wrap-full-right {
@@ -282,13 +301,16 @@ $marginTop:14%;
             position:relative;
             &.top {
                 .chart-wrap {
-                  width: 90%;
+                  width: 100%;
                   height: 84%;
                 }
                 .closeBtn{
                   top:calc(4% - 10px);
                   right:2.5%;
                 }
+                .chart-bottom-insruction-info{
+                    top:89%;
+                }
             }
 
             &.bottom {
@@ -300,11 +322,11 @@ $marginTop:14%;
                     top:-1.5% !important;
                   }
                   .tool-list{
-                    top:-20px !important;
+                    top:-10px !important;
                   }
                 }
                 .chart-wrap {
-                    width: 90%;
+                    width: 100%;
                     height: 84%;
                      /* background-color: royalblue; */
                 }
@@ -312,6 +334,9 @@ $marginTop:14%;
                     top:0;
                     right:2.5%;
                 }
+                .chart-bottom-insruction-info{
+                    top:84%;
+                }
             }
         }
         .editor-wrap {
@@ -319,13 +344,16 @@ $marginTop:14%;
             height: 84%;
         }
         .chart-wrap {
-            width: 90%;
+            width: 100%;
             height: 80%;
         }
         .closeBtn{
             top:calc(10% - 10px);
             right:calc(5% - 10px);
         }
+        .chart-bottom-insruction-info{
+            top:90%;
+        }
     }
 
     //版式8 9
@@ -335,9 +363,15 @@ $marginTop:14%;
       position:relative;
       &.top-70{
         height:70%;
+        .chart-bottom-insruction-info{
+            top:93%;
+        }
       }
       &.bottom-30{
         height: 30%;
+        .chart-bottom-insruction-info{
+            top:85%;
+        }
       }
       .half{
         height:100%;
@@ -363,9 +397,8 @@ $marginTop:14%;
         }
       }
       .chart-wrap {
-        width: 90%;
+        width: 100%;
         height: 90%;
-       /*  margin-top: 10px; */
       }
       .editor-wrap {
         width: 90%;
@@ -388,6 +421,11 @@ $marginTop:14%;
 
       }
     }
+    .format-nine{
+        .chart-bottom-insruction-info{
+            top:93%;
+        }
+    }
     
     //layer-mask 更改版式345 9布局, ↑原先样式保留不动
     .wrap-full-left-half{
@@ -398,7 +436,7 @@ $marginTop:14%;
       &.top {
         top:0;
         .chart-wrap {
-            width: 90%;
+            width: 100%;
             height: 84%;
         }
         .closeBtn{
@@ -416,7 +454,7 @@ $marginTop:14%;
           }
         }
         .chart-wrap {
-            width: 90%;
+            width: 100%;
             height: 84%;
         }
         .closeBtn{
@@ -437,7 +475,7 @@ $marginTop:14%;
       &.top {
         top:0;
         .chart-wrap {
-          width: 90%;
+          width: 100%;
           height: 84%;
         }
         .closeBtn{
@@ -455,7 +493,7 @@ $marginTop:14%;
           }
         }
         .chart-wrap {
-            width: 90%;
+            width: 100%;
             height: 84%;
         }
         .closeBtn{
@@ -470,7 +508,7 @@ $marginTop:14%;
     }
     .half{
       .chart-wrap {
-        width: 90%;
+        width: 100%;
         height: 90%;
        /*  margin-top: 10px; */
       }
@@ -480,4 +518,35 @@ $marginTop:14%;
       }
     }
 
+    //版式10 11 12
+    .wrap-format-new{
+        .line{
+            .line-item{
+                height:100%;
+                .chart-wrap{
+                    width:100%;
+                    height:90%;
+                }
+                .editor-wrap{
+                    width:90%;
+                    height:90%
+                }
+                .chart-bottom-insruction-info{
+                    top:92%;
+                }
+            }
+        }
+
+        .wrap-full-bottom {
+            position: absolute;
+            bottom: 0;
+        }
+        .bottom-15{
+            height: 18%;
+            .chart-bottom-insruction-info{
+                top:80%;
+            }
+        }
+    }
+
 }

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

@@ -228,15 +228,15 @@ export const modelConfig = [{
         modelId: 2,
         elements: [{
             position: 1,
-            width: 100*0.6*0.9, 
+            width: 100*0.6, 
             height:(restHeight)*0.8 ,
-            x: (100*0.6-100*0.6*0.9)/2,
+            x: 0,
             y: ((restHeight)-(restHeight)*0.8)/2
         }, {
             position: 2,
-            width: 100*0.4*0.9, 
+            width: 100*0.4, 
             height: (restHeight)*0.8,
-            x: 60+(100*0.4-100*0.4*0.9)/2,// or 60
+            x: 60,// or 60
             y: ((restHeight)-(restHeight)*0.8)/2
         }]
     },
@@ -244,20 +244,20 @@ export const modelConfig = [{
         modelId: 3,
         elements: [{
             position: 1,
-            width: 100*0.5*0.9,
+            width: 100*0.5,
             height: (restHeight)*0.5*0.84,
-            x: (100*0.5-100*0.5*0.9)/2,
+            x: 0,
             y: ((restHeight)*0.5-(restHeight)*0.5*0.84)/2
         }, {
             position: 2,
-            width: 100*0.5*0.9,
+            width: 100*0.5,
             height: (restHeight)*0.5*0.84,
-            x: (100*0.5-100*0.5*0.9)/2,
+            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*0.9,
+            width: 100*0.5,
             height: (restHeight)*0.84,
             x: 50,
             y: ((restHeight)-(restHeight)*0.84)/2
@@ -267,27 +267,27 @@ export const modelConfig = [{
         modelId: 4,
         elements: [{
             position: 1,
-            width: 100*0.5*0.9,
+            width: 100*0.5,
             height: (restHeight)*0.5*0.84,
-            x: (100*0.5-100*0.5*0.9)/2,
+            x: 0,
             y: ((restHeight)*0.5-(restHeight)*0.5*0.84)/2
         }, {
             position: 2,
-            width: 100*0.5*0.9,
+            width: 100*0.5,
             height: (restHeight)*0.5*0.84,
-            x: (100*0.5-100*0.5*0.9)/2,
+            x: 0,
             y: 50-7/* +((restHeight)*0.5-(restHeight)*0.5*0.84)/2 */,//or 50
         }, {
             position: 3,
-            width: 100*0.5*0.9,
+            width: 100*0.5,
             height: (restHeight)*0.5*0.84,
-            x: 50+(100*0.5-100*0.5*0.9)/2,//or 50
+            x: 50,//or 50
             y: ((restHeight)*0.5-(restHeight)*0.5*0.84)/2
         }, {
             position: 4,
-            width: 100*0.5*0.9,
+            width: 100*0.5,
             height: (restHeight)*0.5*0.84,
-            x: 50+(100*0.5-100*0.5*0.9)/2,
+            x: 50,
             y: 50-7/* +((restHeight)*0.5-(restHeight)*0.5*0.84)/2 */,//or 50
         }]
     },
@@ -295,27 +295,27 @@ export const modelConfig = [{
         modelId: 5,
         elements: [{
             position: 1,
-            width: 100*0.5*0.9,
+            width: 100*0.5,
             height: (restHeight)*0.5*0.84,
-            x: (100*0.5-100*0.5*0.9)/2,
+            x: 0,
             y: ((restHeight)*0.5-(restHeight)*0.5*0.84)/2
         }, {
             position: 2,
-            width: 100*0.5*0.9,
+            width: 100*0.5,
             height: (restHeight)*0.5*0.84,
-            x: (100*0.5-100*0.5*0.9)/2,
+            x: 0,
             y: 50-7/* +((restHeight)*0.5-(restHeight)*0.5*0.84)/2 */,//or 50
         }, {
             position: 3,
-            width: 100*0.5*0.9,
+            width: 100*0.5,
             height: (restHeight)*0.5*0.84,
-            x: 50+(100*0.5-100*0.5*0.9)/2,//or 50
+            x: 50,//or 50
             y: ((restHeight)*0.5-(restHeight)*0.5*0.84)/2
         }, {
             position: 4,
-            width: 100*0.5*0.9,
+            width: 100*0.5,
             height: (restHeight)*0.5*0.84,
-            x: 50+(100*0.5-100*0.5*0.9)/2,
+            x: 50,
             y: 50-7/* +((restHeight)*0.5-(restHeight)*0.5*0.84)/2 */,//or 50
         }]
     },
@@ -333,15 +333,15 @@ export const modelConfig = [{
         modelId:7,
         elements:[{
             position:1,
-            width:100*0.5*0.9,
+            width:100*0.5,
             height:(restHeight)*0.8,
-            x:(100*0.5 - 100*0.5*0.9)/2,
+            x:0,
             y:((restHeight)-(restHeight)*0.8)/2
         },{
             position:2,
-            width:100*0.5*0.9,
+            width:100*0.5,
             height:(restHeight)*0.8,
-            x:50+(100*0.5 - 100*0.5*0.9)/2,
+            x:50,
             y:((restHeight)-(restHeight)*0.8)/2
         }]
     },
@@ -349,16 +349,16 @@ export const modelConfig = [{
       modelId:8,
       elements:[{
         position:1,
-        width:100*0.9,
+        width:100,
         height:(restHeight)*0.7*0.9,
-        x:(100-100*0.9)/2,
+        x:0,
         y:(restHeight*0.7-restHeight*0.7*0.9)/2
       },
       {
         position:2,
-        width:100*0.9,
+        width:100,
         height:(restHeight)*0.3*0.8,
-        x:(100-100*0.9)/2,
+        x:0,
         y:60
       }]
     },
@@ -366,23 +366,23 @@ export const modelConfig = [{
       modelId:9,
       elements:[{
         position:1,
-        width:100*0.5*0.9,
+        width:100*0.5,
         height:(restHeight)*0.7*0.9,
-        x:(100*0.5-100*0.5*0.9)/2,
+        x:0,
         y:(restHeight*0.7-restHeight*0.7*0.9)/2
       },
       {
         position:2,
-        width:100*0.5*0.9,
+        width:100*0.5,
         height:(restHeight)*0.7*0.9,
-        x:50+(100*0.5-100*0.5*0.9)/2,
+        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:(100-100*0.9)/2,
+        x:0,
         y:60
       }
     ]
@@ -390,126 +390,126 @@ export const modelConfig = [{
         modelId:12,
         elements:[{
             position:1,
-            width:33*0.9,
+            width:33,
             height:(restHeight)*0.48*0.9,
-            x:(33*0.1)/2,
+            x:0,
             y:(restHeight*0.48*0.1)/2
         },{
             position:2,
-            width:33*0.9,
+            width:33,
             height:(restHeight)*0.48*0.9,
-            x:(33*0.1)/2+33,
+            x:33,
             y:(restHeight*0.48*0.1)/2
         },
         {
             position:3,
-            width:33*0.9,
+            width:33,
             height:(restHeight)*0.48*0.9,
-            x:(33*0.1)/2+33*2,
+            x:33*2,
             y:(restHeight*0.48*0.1)/2
         },
         {
             position:4,
-            width:33*0.9,
+            width:33,
             height:(restHeight)*0.48*0.9,
-            x:(33*0.1)/2,
+            x:0,
             y:(restHeight)*0.48
         },
         {
             position:5,
-            width:33*0.9,
+            width:33,
             height:(restHeight)*0.48*0.9,
-            x:(33*0.1)/2+33,
+            x:33,
             y:(restHeight)*0.48
         },
         {
             position:6,
-            width:33*0.9,
+            width:33,
             height:(restHeight)*0.48*0.9,
-            x:(33*0.1)/2+33*2,
+            x:33*2,
             y:(restHeight)*0.48
         }]
     },{
         modelId:11,
         elements:[{
             position:1,
-            width:45*0.9,
+            width:50,
             height:(restHeight)*0.40*0.9,
-            x:(45*0.1)/2,
+            x:0,
             y:(restHeight*0.4*0.1)/2
         },{
             position:2,
-            width:45*0.9,
+            width:50,
             height:(restHeight)*0.40*0.9,
-            x:(45*0.1)/2+50,
+            x:50,
             y:(restHeight*0.4*0.1)/2
         },{
             position:3,
-            width:45*0.9,
+            width:50,
             height:(restHeight)*0.40*0.9,
-            x:(45*0.1)/2,
+            x:0,
             y:38
         },{
             position:4,
-            width:45*0.9,
+            width:50,
             height:(restHeight)*0.40*0.9,
-            x:(45*0.1)/2+50,
+            x:50,
             y:38
         },{
             position:5,
             width:100*0.9,
             height:(restHeight)*0.18*0.8,
-            x:(100-100*0.9)/2,
+            x:0,
             y:74
         }]
     },{
         modelId:10,
         elements:[{
             position:1,
-            width:33*0.9,
+            width:33,
             height:(restHeight)*0.4*0.9,
-            x:(33*0.1)/2,
+            x:0,
             y:(restHeight*0.4*0.1)/2
         },{
             position:2,
-            width:33*0.9,
+            width:33,
             height:(restHeight)*0.4*0.9,
-            x:(33*0.1)/2+33,
+            x:33,
             y:(restHeight*0.4*0.1)/2
         },
         {
             position:3,
-            width:33*0.9,
+            width:33,
             height:(restHeight)*0.4*0.9,
-            x:(33*0.1)/2+33*2,
+            x:33*2,
             y:(restHeight*0.4*0.1)/2
         },
         {
             position:4,
-            width:33*0.9,
+            width:33,
             height:(restHeight)*0.4*0.9,
-            x:(33*0.1)/2,
+            x:0,
             y:38
         },
         {
             position:5,
-            width:33*0.9,
+            width:33,
             height:(restHeight)*0.4*0.9,
-            x:(33*0.1)/2+33,
+            x:33,
             y:38
         },
         {
             position:6,
-            width:33*0.9,
+            width:33,
             height:(restHeight)*0.4*0.9,
-            x:(33*0.1)/2+33*2,
+            x:33*2,
             y:38
         },
         {
             position:7,
-            width:100*0.9,
+            width:100,
             height:(restHeight)*0.18*0.8,
-            x:(100-100*0.9)/2,
+            x:0,
             y:74
         }]
     }