diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue index f86d7b50..b7049bd1 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,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 }); + }) + } } } };