From 7f3a10e8a13b4b90ceb2cde460bf994c3ba6de79 Mon Sep 17 00:00:00 2001
From: Tony Tao <king6180@gmail.com>
Date: Mon, 13 Jun 2022 22:27:25 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A6=81=E6=AD=A2widget=E7=A7=BB=E5=87=BAworkb?=
 =?UTF-8?q?ench=E7=94=BB=E5=B8=83=E8=BE=B9=E7=BC=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../designer/widget/widget.vue                | 32 +++++++++++++++++--
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue
index da65cbb6..71fc79ea 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue
@@ -106,7 +106,9 @@ export default {
       data: {
         setup: {},
         data: {},
-        position: {}
+        position: {},
+        leftMargin: null,
+        topMargin: null
       }
     };
   },
@@ -118,10 +120,10 @@ export default {
       return this.value.position.height;
     },
     widgetsLeft() {
-      return this.value.position.left;
+      return this.value.position.left >= this.leftMargin ? this.leftMargin : this.value.position.left;
     },
     widgetsTop() {
-      return this.value.position.top;
+      return this.value.position.top >= this.topMargin ? this.topMargin : this.value.position.top;
     },
     widgetsZIndex() {
       return this.value.position.zIndex || 1;
@@ -133,6 +135,30 @@ export default {
     handleBlur({ index, left, top, width, height }) {
       this.$emit("onActivated", { index, left, top, width, height });
       this.$refs.draggable.setActive(true);
+      // 处理widget超出workbench的问题
+      this.handleBoundary({ index, left, top, width, height })
+    },
+    handleBoundary({ index, left, top, width, height }) {
+      // 计算workbench的X轴边界值
+      // 组件距离左侧宽度 + 组件宽度 > 大屏总宽度时，右侧边界值 = (大屏宽度 - 组件宽度)；左侧边界值 = 0
+      const { bigscreenWidth, bigscreenHeight } = this.bigscreen;
+      const xBoundaryValue = (left + width) > bigscreenWidth ? bigscreenWidth - width : left < 0 ? 0 : left;
+      // 初始化X轴边界值
+      this.leftMargin = left;
+
+      // 计算Y轴边界值
+      const yBoundaryValue = (top + height) > bigscreenHeight ? bigscreenHeight - height : top < 0 ? 0 : top;
+      // 初始化Y轴边界值
+      this.topMargin = top;
+
+      // 若位置超出边界值则重新设置位置
+      if (this.leftMargin != xBoundaryValue || this.topMargin != yBoundaryValue) {
+        this.$nextTick(() => {
+          this.leftMargin = xBoundaryValue;
+          this.topMargin = yBoundaryValue;
+          this.$emit("onActivated", { index, left: xBoundaryValue, top: yBoundaryValue, width, height });
+        })
+      }
     }
   }
 };