Merge branch 'main' of github.com:dataease/dataease into main

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>

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) {

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">
+          <fullscreen style="background: none;height: 100%" :fullscreen.sync="fullscreen">
-            <Preview v-if="showMain" />
+            <Preview v-if="showMain" :show-type="canvasStyleData.selfAdaption?'full':'width'" />
           </fullscreen>
         </div>
       </el-row>