Merge pull request #1189 from dataease/pr@dev@refactor_panel-edit

refactor:优化组件间隙和仪表板画布间隙

frontend/src/components/DeDrag/index.vue

@@ -444,7 +444,7 @@ export default {
     style() {
       // console.log('style-top:' + this.y + '--' + this.top)
       return {
-        padding: (this.canvasStyleData.panel.gap === 'yes' ? this.componentGap : 0) + 'px',
+        padding: this.curGap + 'px',
         transform: `translate(${this.left}px, ${this.top}px) rotate(${this.rotate}deg)`,
         width: this.computedWidth,
         height: this.computedHeight,
@@ -487,7 +487,6 @@ export default {
 
     //  根据left right 算出元素的宽度
     computedMainSlotWidth() {
-      const gap = (this.canvasStyleData.panel.gap === 'yes' ? this.componentGap : 0) * 2
       if (this.w === 'auto') {
         if (!this.widthTouched) {
           return 'auto'
@@ -495,14 +494,13 @@ export default {
       }
       if (this.element.auxiliaryMatrix) {
         const width = Math.round(this.width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
-        return (width - gap) + 'px'
+        return (width - this.curGap * 2) + 'px'
       } else {
-        return (this.width - gap) + 'px'
+        return (this.width - this.curGap * 2) + 'px'
       }
     },
     // 根据top bottom 算出元素的宽度
     computedMainSlotHeight() {
-      const gap = (this.canvasStyleData.panel.gap === 'yes' ? this.componentGap : 0) * 2
       if (this.h === 'auto') {
         if (!this.heightTouched) {
           return 'auto'
@@ -510,9 +508,9 @@ export default {
       }
       if (this.element.auxiliaryMatrix) {
         const height = Math.round(this.height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
-        return (height - gap) + 'px'
+        return (height - this.curGap * 2) + 'px'
       } else {
-        return (this.height - gap) + 'px'
+        return (this.height - this.curGap * 2) + 'px'
       }
     },
 
@@ -528,6 +526,9 @@ export default {
     curComponent() {
       return this.$store.state.curComponent
     },
+    curGap() {
+      return this.canvasStyleData.panel.gap === 'yes' && this.element.auxiliaryMatrix ? this.componentGap : 0
+    },
     ...mapState([
       'editor',
       'curCanvasScale',

frontend/src/components/canvas/components/Editor/ComponentWrapper.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     :style="getOutStyleDefault(config.style)"
-    :class="{'gap_class':canvasStyleData.panel.gap==='yes'}"
     class="component"
     @click="handleClick"
     @mousedown="elementMouseDown"
@@ -66,9 +65,13 @@ export default {
     }
   },
   computed: {
+    curGap() {
+      return this.canvasStyleData.panel.gap === 'yes' && this.config.auxiliaryMatrix ? this.componentGap : 0
+    },
     ...mapState([
       'canvasStyleData',
-      'curComponent'
+      'curComponent',
+      'componentGap'
     ])
   },
   mounted() {
@@ -101,7 +104,9 @@ export default {
       return value * scale / 100
     },
     getOutStyleDefault(style) {
-      const result = {};
+      const result = {
+        padding: this.curGap + 'px'
+      };
       ['width', 'left'].forEach(attr => {
         result[attr] = style[attr] + 'px'
       });

frontend/src/components/canvas/components/Editor/Preview.vue

@@ -1,6 +1,6 @@
 <template>
-  <div id="canvasInfoMain" ref="canvasInfoMain" class="main-class">
-    <div id="canvasInfoTemp" ref="canvasInfoTemp" :style="customStyle" class="bg" @mouseup="deselectCurComponent" @mousedown="handleMouseDown">
+  <div id="canvasInfoMain" ref="canvasInfoMain" :style="customStyle" class="bg">
+    <div id="canvasInfoTemp" ref="canvasInfoTemp" class="main-class" @mouseup="deselectCurComponent" @mousedown="handleMouseDown">
       <el-row v-if="componentDataShow.length===0" style="height: 100%;" class="custom-position">
         {{ $t('panel.panelNull') }}
       </el-row>
@@ -95,9 +95,7 @@ export default {
   computed: {
     customStyle() {
       let style = {
-        margin: 'auto',
-        width: this.mainWidth,
-        height: this.mainHeight
+        padding: this.componentGap + 'px'
       }
       if (this.canvasStyleData.openCommonStyle) {
         if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
@@ -132,7 +130,8 @@ export default {
       'isClickComponent',
       'curComponent',
       'componentData',
-      'canvasStyleData'
+      'canvasStyleData',
+      'componentGap'
     ])
   },
   watch: {
@@ -192,15 +191,6 @@ export default {
       const canvasWidth = document.getElementById('canvasInfoMain').offsetWidth
       this.scaleWidth = canvasWidth * 100 / parseInt(this.canvasStyleData.width)// 获取宽度比
       this.scaleHeight = canvasHeight * 100 / parseInt(this.canvasStyleData.height)// 获取高度比
-
-      // console.log('scaleHeight:' + this.scaleHeight + ';ch:' + this.canvasStyleData.height)
-
-      // this.scaleHeight = this.scaleWidth
-      // this.mainHeight = this.canvasStyleData.height * this.scaleHeight / 100 + 'px'
-      // if (this.showType === 'width') {
-      //   this.scaleHeight = this.scaleWidth
-      //   this.mainHeight = this.canvasStyleData.height * this.scaleHeight / 100 + 'px'
-      // }
       this.handleScaleChange()
     },
     resetID(data) {

frontend/src/components/canvas/components/Editor/index.vue

@@ -982,7 +982,8 @@ export default {
       'editor',
       'linkageSettingStatus',
       'curLinkageView',
-      'doSnapshotIndex'
+      'doSnapshotIndex',
+      'componentGap'
     ])
   },
   watch: {

frontend/src/views/panel/edit/index.vue

@@ -310,7 +310,9 @@ export default {
       }
     },
     customCanvasStyle() {
-      let style = {}
+      let style = {
+        padding: this.componentGap + 'px'
+      }
 
       if (this.canvasStyleData.openCommonStyle) {
         if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
@@ -340,7 +342,8 @@ export default {
       'curComponentIndex',
       'componentData',
       'linkageSettingStatus',
-      'dragComponentInfo'
+      'dragComponentInfo',
+      'componentGap'
     ])
   },
 
@@ -680,9 +683,9 @@ export default {
         this.$nextTick(() => {
           const canvasHeight = document.getElementById('canvasInfo').offsetHeight
           const canvasWidth = document.getElementById('canvasInfo').offsetWidth
-          this.outStyle.height = canvasHeight
+          this.outStyle.height = canvasHeight - (this.componentGap * 2)
           // 临时处理 确保每次restore 有会更新
-          this.outStyle.width = canvasWidth + (Math.random() * 0.000001)
+          this.outStyle.width = canvasWidth - (this.componentGap * 2) + (Math.random() * 0.000001)
           // console.log(canvasHeight + '--' + canvasWidth)
         })
       }
@@ -919,7 +922,6 @@ export default {
   overflow-x: hidden;
   overflow-y: auto;
   background-size:100% 100% !important;
-
 }
 .el-main{
   height: calc(100vh - 91px);

frontend/src/views/panel/list/PanelViewShow.vue

@@ -342,7 +342,7 @@ export default {
     min-height: 400px;
     height: 100%;
     min-width: 500px;
-    overflow-y: auto;
+    overflow-y: hidden;
     border-top: 1px solid #E6E6E6;
   }