diff --git a/report-ui/src/views/bigscreenDesigner/designer/editor/EditRange.vue b/report-ui/src/views/bigscreenDesigner/designer/editor/EditRange.vue new file mode 100644 index 0000000000000000000000000000000000000000..26f111e5f32ecd2cb1d3d7f04556e42064f7cadb --- /dev/null +++ b/report-ui/src/views/bigscreenDesigner/designer/editor/EditRange.vue @@ -0,0 +1,142 @@ + + + + \ No newline at end of file diff --git a/report-ui/src/views/bigscreenDesigner/designer/editor/EditSelect.vue b/report-ui/src/views/bigscreenDesigner/designer/editor/EditSelect.vue new file mode 100644 index 0000000000000000000000000000000000000000..f6ba4419d7998188cb137ac6b791c71e013f1e01 --- /dev/null +++ b/report-ui/src/views/bigscreenDesigner/designer/editor/EditSelect.vue @@ -0,0 +1,70 @@ + + + + + + \ No newline at end of file diff --git a/report-ui/src/views/bigscreenDesigner/designer/index.vue b/report-ui/src/views/bigscreenDesigner/designer/index.vue index 4aa964b05d74fd60d9ad22c69c971416ac9dcb74..535ea5f3137228ff3e163065d24dbf6220212796 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/index.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/index.vue @@ -116,6 +116,116 @@ + + + +
+ @@ -356,7 +473,7 @@ import dynamicForm from "./components/dynamicForm.vue"; import draggable from "vuedraggable"; import VueRulerTool from "vue-ruler-tool"; // 大屏设计页面的标尺插件 import contentMenu from "./components/contentMenu"; - +import EditRange from './editor/EditRange.vue' export default { name: "Login", components: { @@ -365,6 +482,7 @@ export default { widget, dynamicForm, contentMenu, + EditRange }, mixins: [mixin], data() { @@ -388,6 +506,7 @@ export default { dragWidgetCode: "", //从工具栏拖拽的组件code // 大屏画布中的组件 widgets: [], // 工作区中拖放的组件 + activeWidget: [], //当前激活的widget列表 // 当前激活组件 widgetIndex: 0, // 当前激活组件右侧配置属性 @@ -620,6 +739,8 @@ export default { this.screenCode = "screen"; // 选中不同的组件 右侧都显示第一栏 this.activeName = "first"; + this.visibleContentMenu =false + this.handleMouseOver() this.widgetOptions = getToolByCode("screen")["options"]; }, // 如果是点击某个组件，获取该组件的配置项 @@ -643,10 +764,46 @@ export default { }); this.widgetOptions = this.deepClone(this.widgets[obj.index]["options"]); }, + selectWidgetByBox (box) { + this.handleMouseDown() + this.handleMouseOver() + this.activeWidget=[] + for (let i = 0; i < this.widgets.length; i++) { + const w = this.widgets[i] + + const { left, top, width, height } = this.widgets[i].value.position + + const wAttr = { + // 左上角 + x1: left, + y1: top, + // 右下角 + x2: left + width, + y2: top + height + } + // 全包含则选中 + if ( + wAttr.x1 - box.x1 >= 0 && + wAttr.y1 - box.y1 >= 0 && + wAttr.x2 - box.x2 <= 0 && + wAttr.y2 - box.y2 <= 0 + ) { + const id = i + this.$refs.widgets[i].$refs.draggable.setOverActive(true); + + if (!this.activeWidget.includes(id)) { + this.activeWidget.push(id) //加入激活的列表 + } + } + } + + }, widgetsClick(index) { + this.activeWidget=[] const draggableArr = this.$refs.widgets; for (let i = 0; i < draggableArr.length; i++) { if (i == index) { + this.activeWidget.push(i) this.$refs.widgets[i].$refs.draggable.setActive(true); } else { this.$refs.widgets[i].$refs.draggable.setActive(false); @@ -655,7 +812,17 @@ export default { this.setOptionsOnClickWidget(index); this.grade = true; }, + handleMouseOver() { + this.activeWidget=[] + const draggableArr = this.$refs.widgets; + if (draggableArr) { + for (let i = 0; i < draggableArr.length; i++) { + this.$refs.widgets[i].$refs.draggable.setOverActive(false); + } + } + }, handleMouseDown() { + this.activeWidget=[] const draggableArr = this.$refs.widgets; for (let i = 0; i < draggableArr.length; i++) { this.$refs.widgets[i].$refs.draggable.setActive(false); @@ -724,6 +891,127 @@ export default { evt.preventDefault(); this.widgets = this.swapArr(this.widgets, evt.oldIndex, evt.newIndex); }, + widgetAlign (mode) { + if (this.activeWidget.length > 1) { + /* 参考对象 */ + const referID = this.activeWidget[0] + + for (let i = 0; i < this.activeWidget.length; i++) { + const currenId = this.activeWidget[i] + var w =this.widgets[currenId] + if (referID === currenId) continue + if (mode === 'left') { /* 左对齐 */ + const v= this.widgets[referID].value.position.left + w.value.position.left =v + } else if (mode === 'top') { /* 上对齐 */ + const v= this.widgets[referID].value.position.top + w.value.position.top =v + } else if (mode === 'right') { /* 右对齐 */ + const r1 = + this.widgets[referID].value.position.left + + this.widgets[referID].value.position.width + + const _left =this.widgets[currenId].value.position.left + const r2 =_left + this.widgets[currenId].value.position.width + + const dist = r1 - r2 + w.value.position.left =_left+dist + + } else if (mode === 'bottom') { /* 下对齐 */ + const b1 = + this.widgets[referID].value.position.top + + this.widgets[referID].value.position.height + + const _top = this.widgets[currenId].value.position.top + const b2 = _top + this.widgets[currenId].value.position.height + + const dist = b1 - b2 + w.value.position.top =_top+dist + + } else if (mode === 'horizontal') { + const h1 = + this.widgets[referID].value.position.top + + this.widgets[referID].value.position.height / 2 + + const h2 = + this.widgets[currenId].value.position.top + + this.widgets[currenId].value.position.height / 2 + + const dist = h1 - h2 + const _top = this.widgets[currenId].value.position.top + w.value.position.top =_top+dist + + } else if (mode === 'vertical') { + const v1 = + this.widgets[referID].value.position.left + + this.widgets[referID].value.position.width / 2 + + const v2 = + this.widgets[currenId].value.position.left + + this.widgets[currenId].value.position.width / 2 + + const dist = v1 - v2 + const _left = this.widgets[currenId].value.position.left + w.value.position.left =_left+dist + + + } + } + } + }, + sameSize (mode) { + if (this.activeWidget.length > 1) { + var referId = this.activeWidget[0] + const v =this.widgets[referId] + for (let i = 0; i < this.activeWidget.length; i++) { + var currenId = this.activeWidget[i] + var w =this.widgets[currenId] + if (referId === currenId) continue + if (mode === 'width') { + w.value.position.width =v.value.position.width + } else if (mode === 'height') { + w.value.position.height =v.value.position.height + } + } + } + }, + distribute (mode) { + if (this.activeWidget.length > 2) { + var items = [] + for (let i = 0; i < this.activeWidget.length; i++) { + var currenId = this.activeWidget[i] + var w =this.widgets[currenId] + let x = w.value.position.left + let y = w.value.position.top + if (mode == 'horizontal') items.push({ value: x, index: currenId }) + else items.push({ value: y, index: currenId }) + } + + var sortItem = this.bubleSort(items) + var len = sortItem.length + var minV = sortItem[0].value + var maxV = sortItem[len - 1].value + var dist = (maxV - minV) / (len - 1) + for (let i = 1; i < sortItem.length - 1; i++) { + var idx = sortItem[i].index + var mWidget = this.widgets[idx] + if (mode == 'horizontal') mWidget.value.position.left = minV + dist * i + else mWidget.value.position.top = minV + dist * i + } + } + }, + /* 冒泡排序 */ + bubleSort (arr) { + var len = arr.length + for (let i = 0; i < len - 1; i++) { + for (let j = i; j < len; j++) { + if (arr[j].value < arr[i].value) { + [arr[i], arr[j]] = [arr[j], arr[i]] + } + } + } + return arr + } }, };