禁止widget移出画布边界

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,28 @@ 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 });
+        })
+      }
     }
   }
 };