From 3f4375827f1736de587e16741a2acc9f99414d67 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 16 Sep 2021 16:10:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E4=BB=AA=E8=A1=A8=E6=9D=BF=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE=E6=94=B9=E5=8F=98=E5=A4=A7=E7=9F=A9=E9=98=B5=E5=BC=8F?=
 =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E9=A2=84=E5=88=A4=E8=A7=86=E5=9B=BE=E5=AE=9E?=
 =?UTF-8?q?=E9=99=85=E5=B0=BA=E5=AF=B8=E5=A4=A7=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/DeDrag/index.vue      | 43 ++++++++++++++++++-
 .../canvas/components/Editor/index.vue        |  7 +--
 .../canvas/custom-component/UserView.vue      |  2 +-
 3 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue
index 1d95915e4c..08b51318b8 100644
--- a/frontend/src/components/DeDrag/index.vue
+++ b/frontend/src/components/DeDrag/index.vue
@@ -32,7 +32,9 @@
     >
       <slot :name="handlei" />
     </div>
-    <slot />
+    <div :style="mainSlotStyle">
+      <slot />
+    </div>
   </div>
 </template>
 
@@ -445,7 +447,7 @@ export default {
       return {
         width: this.computedWidth,
         height: this.computedHeight,
-        opacity: 0.2,
+        opacity: 0.4,
         background: 'gray'
       }
     },
@@ -473,7 +475,44 @@ export default {
       return this.height + 'px'
     },
 
+    //  根据left right 算出元素的宽度
+    computedMainSlotWidth() {
+      if (this.w === 'auto') {
+        if (!this.widthTouched) {
+          return 'auto'
+        }
+      }
+      if (this.canvasStyleData.auxiliaryMatrix) {
+        const width = Math.round(this.width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
+        return width + 'px'
+      } else {
+        return this.width + 'px'
+      }
+    },
+    // 根据top bottom 算出元素的宽度
+    computedMainSlotHeight() {
+      if (this.h === 'auto') {
+        if (!this.heightTouched) {
+          return 'auto'
+        }
+      }
+      if (this.canvasStyleData.auxiliaryMatrix) {
+        const height = Math.round(this.height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
+        return height + 'px'
+      } else {
+        return this.height + 'px'
+      }
+    },
+
     // private
+    mainSlotStyle() {
+      const style = {
+        width: this.computedMainSlotWidth,
+        height: this.computedMainSlotHeight
+      }
+      console.log('style=>' + JSON.stringify(style))
+      return style
+    },
     ...mapState([
       'curComponent',
       'editor',
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index afd486554a..33fc9af320 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -12,7 +12,7 @@
     @mousedown="handleMouseDown"
   >
     <!-- 网格线 -->
-    <!--    <Grid v-if="canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />-->
+    <Grid v-if="canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />
 
     <!-- 仪表板联动清除按钮-->
     <canvas-opt-bar />
@@ -221,8 +221,8 @@ export default {
       },
       // 矩阵数量 默认 128 * 72
       matrixCount: {
-        x: 80,
-        y: 45
+        x: 36,
+        y: 18
       },
       customStyleHistory: null,
       showDrag: true,
@@ -636,6 +636,7 @@ export default {
     },
     resizeView(index, item) {
       if (item.type === 'view') {
+        console.log('view:resizeView')
         this.$refs.wrapperChild[index].chartResize()
       }
     }
diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index 74cf2d3f86..4aa962993b 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -435,7 +435,7 @@ export default {
             this.$refs[this.element.propValue.id].chartResize()
           }
           this.destroyTimeMachine()
-        }, 200)
+        }, 50)
       }
     },