From 698f12fcad850cb0d3a295b2997215e12ce1fab0 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Fri, 11 Jun 2021 16:53:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=9D=9E=E8=87=AA=E9=80=82=E5=BA=94?=
 =?UTF-8?q?=E7=94=BB=E5=B8=83=E7=9A=84=20=E4=BB=AA=E8=A1=A8=E7=9B=98?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E6=97=B6=20=E8=B6=85=E9=AB=98=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E6=BB=9A=E5=8A=A8=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/components/Editor/ComponentWrapper.vue | 12 ++++++++++++
 .../canvas/components/Editor/Preview.vue          | 15 +++++++++++++--
 frontend/src/views/panel/list/PanelViewShow.vue   |  4 ++--
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
index 57ec8b0c8e..3016f4d9c9 100644
--- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
@@ -8,6 +8,7 @@
       :style="getStyle(config.style)"
       :out-style="config.style"
       :element="config"
+      :class="{'gap_class':canvasStyleData.panel.gap==='yes'}"
     />
     <component
       :is="config.component"
@@ -17,6 +18,7 @@
       :style="getStyle(config.style)"
       :prop-value="config.propValue"
       :element="config"
+      :class="{'gap_class':canvasStyleData.panel.gap==='yes'}"
     />
   </div>
 </template>
@@ -25,6 +27,7 @@
 import { getStyle } from '@/components/canvas/utils/style'
 import runAnimation from '@/components/canvas/utils/runAnimation'
 import { mixins } from '@/components/canvas/utils/events'
+import { mapState } from 'vuex'
 
 export default {
   mixins: [mixins],
@@ -40,6 +43,11 @@ export default {
       default: null
     }
   },
+  computed: {
+    ...mapState([
+      'canvasStyleData'
+    ])
+  },
   mounted() {
     runAnimation(this.$el, this.config.animations)
   },
@@ -60,4 +68,8 @@ export default {
 .component {
     position: absolute;
 }
+
+.gap_class{
+  padding:3px;
+}
 </style>
diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue
index e5233e428c..d9ba2dae1e 100644
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/frontend/src/components/canvas/components/Editor/Preview.vue
@@ -7,7 +7,6 @@
       v-for="(item, index) in componentDataInfo"
       :key="index"
       :config="item"
-      :class="{'gap_class':canvasStyleData.panel.gap==='yes'}"
     />
   </div>
 </template>
@@ -32,6 +31,11 @@ export default {
     show: {
       type: Boolean,
       default: false
+    },
+    showType: {
+      type: String,
+      required: false,
+      default: 'full'
     }
   },
   data() {
@@ -56,7 +60,11 @@ export default {
   },
   computed: {
     customStyle() {
-      let style = {}
+      let style = {
+        margin: 'auto',
+        width: '100%',
+        height: '100%'
+      }
       if (this.canvasStyleData.openCommonStyle) {
         if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
           style = {
@@ -113,6 +121,9 @@ export default {
       const canvasWidth = document.getElementById('canvasInfo').offsetWidth
       this.scaleWidth = canvasWidth * 100 / parseInt(this.canvasStyleData.width)// 获取宽度比
       this.scaleHeight = canvasHeight * 100 / parseInt(this.canvasStyleData.height)// 获取高度比
+      if (this.showType === 'width') {
+        this.scaleHeight = this.scaleWidth
+      }
       this.handleScaleChange()
     },
     resetID(data) {
diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue
index 944a572ff5..0113040025 100644
--- a/frontend/src/views/panel/list/PanelViewShow.vue
+++ b/frontend/src/views/panel/list/PanelViewShow.vue
@@ -47,8 +47,8 @@
       <!-- 仪表板预览区域-->
       <el-row class="panel-design-preview">
         <div ref="imageWrapper" style="width: 100%;height: 100%">
-          <fullscreen style="background: #ffffff;height: 100%" :fullscreen.sync="fullscreen">
-            <Preview v-if="showMain" />
+          <fullscreen style="background: none;height: 100%" :fullscreen.sync="fullscreen">
+            <Preview v-if="showMain" :show-type="canvasStyleData.selfAdaption?'full':'width'" />
           </fullscreen>
         </div>
       </el-row>