From 7e4a85ea42c2421a94798f948ac786e9e804e8e0 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Mon, 24 Oct 2022 12:02:58 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E4=BB=AA?= =?UTF-8?q?=E8=A1=A8=E6=9D=BFTab=E7=BB=84=E4=BB=B6=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E7=A7=BB=E5=85=A5=E7=A7=BB=E5=87=BA=E8=87=AA=E7=94=B1=E5=B8=83?= =?UTF-8?q?=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/DeDrag/MoveInShadow.vue | 71 - frontend/src/components/DeDrag/index.vue | 252 ++- .../src/components/DeDrag/pointShadow.vue | 111 + frontend/src/components/DeDrag/shadow.vue | 39 +- frontend/src/components/canvas/DeCanvas.vue | 587 ++++++ .../canvas/components/Editor/DateFormat.vue | 22 +- .../canvas/components/Editor/DeEditor.vue | 1818 +++++++++++++++++ .../canvas/components/Editor/EditBar.vue | 83 +- .../canvas/components/Editor/PGrid.vue | 20 +- .../canvas/components/Editor/Preview.vue | 103 +- .../components/Editor/PreviewMobile.vue | 39 +- .../canvas/components/FilterTextAttr.vue | 237 --- .../canvas/components/RectangleAttr.vue | 284 --- .../components/canvas/components/TextAttr.vue | 17 +- .../canvas/custom-component/UserView.vue | 86 +- .../canvas/custom-component/component-list.js | 2 +- frontend/src/components/canvas/store/copy.js | 10 +- frontend/src/components/canvas/utils/utils.js | 10 +- .../src/components/dataease/DeOutWidget.vue | 3 - .../src/components/widget/DeWidget/DeTabs.vue | 84 +- frontend/src/store/index.js | 66 +- .../src/views/panel/AssistComponent/index.vue | 3 + .../src/views/panel/LinkJumpSet/index.vue | 1 + frontend/src/views/panel/edit/index.vue | 627 +++--- frontend/src/views/panel/filter/index.vue | 17 +- .../src/views/panel/list/PanelViewShow.vue | 8 +- 26 files changed, 3426 insertions(+), 1174 deletions(-) delete mode 100644 frontend/src/components/DeDrag/MoveInShadow.vue create mode 100644 frontend/src/components/DeDrag/pointShadow.vue create mode 100644 frontend/src/components/canvas/DeCanvas.vue create mode 100644 frontend/src/components/canvas/components/Editor/DeEditor.vue delete mode 100644 frontend/src/components/canvas/components/FilterTextAttr.vue delete mode 100644 frontend/src/components/canvas/components/RectangleAttr.vue diff --git a/frontend/src/components/DeDrag/MoveInShadow.vue b/frontend/src/components/DeDrag/MoveInShadow.vue deleted file mode 100644 index 68a8317fe9..0000000000 --- a/frontend/src/components/DeDrag/MoveInShadow.vue +++ /dev/null @@ -1,71 +0,0 @@ - - - - diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue index ffd15ea2ae..227387ac25 100644 --- a/frontend/src/components/DeDrag/index.vue +++ b/frontend/src/components/DeDrag/index.vue @@ -22,6 +22,7 @@ @mouseleave="leave" >
- +
- +
@@ -98,9 +100,13 @@ import { imgUrlTrans } from '@/components/canvas/utils/utils' export default { replace: true, - name: 'Dedrag', + name: 'DeDrag', components: { EditBar, MobileCheckBar }, props: { + canvasId: { + type: String, + default: 'canvas-main' + }, className: { type: String, default: 'vdr' @@ -370,10 +376,21 @@ export default { batchOptActive: { type: Boolean, default: false + }, + // tab 移入检测 + isTabMoveCheck: { + type: Boolean, + default: true } }, data: function() { return { + contentDisplay: true, + //当画布在tab中是 宽度左右拓展的余量 + parentWidthTabOffset: 40, + canvasChangeTips: 'none', + tabMoveInYOffset: 70, + tabMoveInXOffset: 40, left: this.x, top: this.y, right: null, @@ -417,6 +434,16 @@ export default { } }, computed: { + parentWidthOffset(){ + if(this.canvasId==='canvas-main'){ + return 0 + }else{ + return this.parentWidthTabOffset + } + }, + curCanvasScaleSelf() { + return this.curCanvasScaleMap[this.canvasId] + }, svgBg() { return { width: this.width + 'px!important', @@ -558,7 +585,7 @@ export default { } } if (this.element.auxiliaryMatrix) { - const width = Math.round(this.width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth + const width = Math.round(this.width / this.curCanvasScaleSelf.matrixStyleWidth) * this.curCanvasScaleSelf.matrixStyleWidth return (width - this.curGap * 2) + 'px' } else { return (this.width - this.curGap * 2) + 'px' @@ -572,7 +599,7 @@ export default { } } if (this.element.auxiliaryMatrix) { - const height = Math.round(this.height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight + const height = Math.round(this.height / this.curCanvasScaleSelf.matrixStyleHeight) * this.curCanvasScaleSelf.matrixStyleHeight return (height - this.curGap * 2) + 'px' } else { return (this.height - this.curGap * 2) + 'px' @@ -625,14 +652,14 @@ export default { return (this.canvasStyleData.panel.gap === 'yes' && this.element.auxiliaryMatrix) ? this.componentGap : 0 }, miniWidth() { - return this.element.auxiliaryMatrix ? this.curCanvasScale.matrixStyleWidth * (this.mobileLayoutStatus ? 1 : 4) : 0 + return this.element.auxiliaryMatrix ? this.curCanvasScaleSelf.matrixStyleWidth * (this.mobileLayoutStatus ? 1 : 4) : 0 }, miniHeight() { if (this.element.auxiliaryMatrix) { if (this.element.component === 'de-number-range') { - return this.element.auxiliaryMatrix ? this.curCanvasScale.matrixStyleHeight * (this.mobileLayoutStatus ? 1 : 4) : 0 + return this.element.auxiliaryMatrix ? this.curCanvasScaleSelf.matrixStyleHeight * (this.mobileLayoutStatus ? 1 : 4) : 0 } else { - return this.element.auxiliaryMatrix ? this.curCanvasScale.matrixStyleHeight * (this.mobileLayoutStatus ? 1 : 4) : 0 + return this.element.auxiliaryMatrix ? this.curCanvasScaleSelf.matrixStyleHeight * (this.mobileLayoutStatus ? 1 : 4) : 0 } } else { return 0 @@ -640,13 +667,17 @@ export default { }, ...mapState([ 'editor', - 'curCanvasScale', + 'curCanvasScaleMap', 'canvasStyleData', 'linkageSettingStatus', 'mobileLayoutStatus', 'componentGap', 'scrollAutoMove', - 'batchOptStatus' + 'batchOptStatus', + 'tabMoveInActiveId', + 'tabActiveTabNameMap', + 'mousePointShadowMap', + 'tabMoveOutComponentId' ]) }, watch: { @@ -799,6 +830,7 @@ export default { const rect = this.$el.parentNode.getBoundingClientRect() this.parentX = rect.x this.parentY = rect.y + // 高度不设置上限100000 宽度增加左右 60px return [Math.round(parseFloat(style.getPropertyValue('width'), 10)) + 6, 100000] } if (typeof this.parent === 'string') { @@ -834,6 +866,8 @@ export default { this.elementDown(e) this.$nextTick(() => { this.$store.commit('setCurComponent', { component: this.element, index: this.index }) + this.curComponent.optStatus.dragging = true + this.$store.commit('clearTabMoveInfo') }) }, // 元素按下 @@ -905,8 +939,9 @@ export default { } } else { return { - minLeft: this.left % this.grid[0], - maxLeft: Math.floor((this.parentWidth - this.width - this.left) / this.grid[0]) * this.grid[0] + this.left, + // X方向余量向左右偏移this.parentWidthOffset 个余量，可以做到类型像移出canvas的效果，适配Tab的canvas组件 + minLeft: this.left % this.grid[0] - this.parentWidthOffset, + maxLeft: (Math.floor((this.parentWidth - this.width - this.left) / this.grid[0]) * this.grid[0] + this.left) + this.parentWidthOffset, minRight: this.right % this.grid[0], maxRight: Math.floor((this.parentWidth - this.width - this.right) / this.grid[0]) * this.grid[0] + this.right, minTop: this.top % this.grid[1], @@ -1106,7 +1141,8 @@ export default { const bounds = this.bounds const mouseClickPosition = this.mouseClickPosition // 水平移动 - const tmpDeltaX = axis && axis !== 'y' ? mouseClickPosition.mouseX - (e.touches ? e.touches[0].pageX : e.pageX) : 0 + const mX = e.touches ? e.touches[0].pageX : e.pageX + const tmpDeltaX = axis && axis !== 'y' ? mouseClickPosition.mouseX - mX : 0 // 垂直移动 const mY = e.touches ? e.touches[0].pageY : e.pageY const tmpDeltaY = axis && axis !== 'x' ? mouseClickPosition.mouseY - mY : 0 @@ -1132,7 +1168,15 @@ export default { if (this.element.auxiliaryMatrix) { this.$emit('onDragging', e, this.element) } - + if ((-left > (this.parentWidthOffset - 10) || left - bounds.maxRight > (this.parentWidthOffset - 10)) && this.canvasId !== 'canvas-main') { + this.contentDisplay = false + this.$store.commit('setMousePointShadowMap', { mouseX: mX, mouseY: mY, width: this.width, height: this.height }) + this.$store.commit('setTabMoveOutComponentId', this.element.id) + } else { + this.$store.commit('setTabMoveOutComponentId', null) + this.contentDisplay = true + } + await this.tabMoveInCheck() // private 记录当前样式 this.recordCurStyle() }, @@ -1365,9 +1409,6 @@ export default { this.resizing = false this.conflictCheck() this.$emit('refLineParams', refLine) - // this.$emit('resizestop', this.left, this.top, this.width, this.height) - // private - // this.$emit('resizestop') } if (this.dragging) { this.dragging = false @@ -1384,9 +1425,14 @@ export default { // 如果辅助设计 需要最后调整矩阵 if (this.element.auxiliaryMatrix) { - // this.recordMatrixCurStyle() + const _this = this + const historyTabMoveInActiveId = this.tabMoveInActiveId + const historyTabMoveOutComponentId = this.tabMoveOutComponentId setTimeout(() => { - this.recordMatrixCurShadowStyle() + // 移入组件移入Tab时 不需要计算根据阴影面积重置大小 + if (!historyTabMoveInActiveId && !historyTabMoveOutComponentId) { + this.recordMatrixCurShadowStyle(this.curCanvasScaleSelf) + } this.hasMove && this.$store.commit('recordSnapshot', 'handleUp') // 记录snapshot后 移动已记录设置为false this.hasMove = false @@ -1404,14 +1450,78 @@ export default { // 挤占式画布设计 handleUp this.element.auxiliaryMatrix && this.$emit('onHandleUp', e) + this.componentCanvasChange() + // 还原Tab画布状态 + this.$store.commit('clearTabMoveInfo') + // 松开鼠标时 如果当前内容被隐藏，则需要进行显示出来 + if (!this.contentDisplay) { + this.contentDisplay = true + } }, - // 新增方法 ↓↓↓ - // 设置属性 + // 如果Tab移入状态还是Active 状态 则将当前的组件 放置到tab页中 + componentCanvasChange() { + // 主画布移入Tab画布 + if (this.tabMoveInActiveId) { + //从当前画布移除 + this.$emit('amRemoveItem') + this.element.canvasPid = this.element.canvasId + //Tab内部的画布ID 为 tab组件id + '-' + tabActiveName + const targetCanvasId = this.tabMoveInActiveId + '-' + this.tabActiveTabNameMap[this.tabMoveInActiveId] + const targetCanvasScale = this.curCanvasScaleMap[targetCanvasId] + if (this.element.auxiliaryMatrix) { + this.element.x = 1 + this.element.y = 108 + this.element.sizex = Math.round(this.element.sizex * this.curCanvasScaleSelf.matrixStyleWidth / targetCanvasScale.matrixStyleWidth) + this.element.sizey = Math.round(this.element.sizey * this.curCanvasScaleSelf.matrixStyleHeight / targetCanvasScale.matrixStyleHeight) + this.element.style.width = this.element.sizex * targetCanvasScale.matrixStyleOriginWidth + this.element.style.height = this.element.sizey * targetCanvasScale.matrixStyleOriginHeight + this.element.style.left = 0 + this.element.style.top = (this.element.y - 1) * targetCanvasScale.matrixStyleOriginHeight + } else { + this.element.style.left = 0 + this.element.style.top = 0 + this.element.style.width = this.element.style.width * this.curCanvasScaleSelf.matrixStyleWidth / targetCanvasScale.matrixStyleWidth + this.element.style.height = this.element.style.height * this.curCanvasScaleSelf.matrixStyleHeight / targetCanvasScale.matrixStyleHeight + } + this.element.canvasId = targetCanvasId + } + // Tab 画布 移入主画布 + if (this.tabMoveOutComponentId) { + //从当前画布移除 + this.$emit('amRemoveItem') + this.element.canvasPid = 0 + this.element.canvasId = 'canvas-main' + //Tab内部的画布ID 为 tab组件id + '-' + tabActiveName + const targetCanvasScale = this.curCanvasScaleMap['canvas-main'] + // 按照阴影位置定位 + this.element.style.left = (this.mousePointShadowMap.mouseX - (this.mousePointShadowMap.width)) / targetCanvasScale.scalePointWidth + this.element.style.top = (this.mousePointShadowMap.mouseY - (this.mousePointShadowMap.height / 2))/ targetCanvasScale.scalePointHeight + this.element.style.width = this.mousePointShadowMap.width/ targetCanvasScale.scalePointWidth + this.element.style.height = this.mousePointShadowMap.height/ targetCanvasScale.scalePointHeight + + if (this.element.auxiliaryMatrix) { + this.element.x = Math.round(this.element.style.left / targetCanvasScale.matrixStyleOriginWidth) + 1 + this.element.y = Math.round(this.element.style.top / targetCanvasScale.matrixStyleOriginHeight) + 1 + this.element.sizex = Math.round(this.element.style.width /targetCanvasScale.matrixStyleOriginWidth) + this.element.sizey = Math.round(this.element.style.height / targetCanvasScale.matrixStyleOriginHeight) + this.recordMatrixCurShadowStyle(targetCanvasScale) + } + } + + }, + + // 设置属性(属性跟随所属canvas component类型 要做出改变) settingAttribute() { // 设置冲突检测 this.$el.setAttribute('data-is-check', `${this.isConflictCheck}`) // 设置对齐元素 this.$el.setAttribute('data-is-snap', `${this.snap}`) + // 设置Tab移入检测 + this.$el.setAttribute('tab-is-check', `${this.isTabMoveCheck}`) + // 设置组件类型 + this.$el.setAttribute('component-type', `${this.element.component}`) + // 设置组件ID + this.$el.setAttribute('component-id', `${this.element.id}`) }, // 冲突检测 conflictCheck() { @@ -1688,10 +1798,10 @@ export default { // 记录当前样式 矩阵处理 recordMatrixCurStyle() { - const left = Math.round(this.left / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth - const top = Math.round(this.top / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight - const width = Math.round(this.width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth - const height = Math.round(this.height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight + const left = Math.round(this.left / this.curCanvasScaleSelf.matrixStyleWidth) * this.curCanvasScaleSelf.matrixStyleWidth + const top = Math.round(this.top / this.curCanvasScaleSelf.matrixStyleHeight) * this.curCanvasScaleSelf.matrixStyleHeight + const width = Math.round(this.width / this.curCanvasScaleSelf.matrixStyleWidth) * this.curCanvasScaleSelf.matrixStyleWidth + const height = Math.round(this.height / this.curCanvasScaleSelf.matrixStyleHeight) * this.curCanvasScaleSelf.matrixStyleHeight const style = { ...this.defaultStyle } @@ -1705,23 +1815,13 @@ export default { // resize self.$emit('resizeView') - // const self = this - // setTimeout(function() { - // self.$emit('resizeView') - // }, 200) }, // 记录当前样式 跟随阴影位置 矩阵处理 - recordMatrixCurShadowStyle() { - const left = (this.element.x - 1) * this.curCanvasScale.matrixStyleWidth - const top = (this.element.y - 1) * this.curCanvasScale.matrixStyleHeight - const width = this.element.sizex * this.curCanvasScale.matrixStyleWidth - const height = this.element.sizey * this.curCanvasScale.matrixStyleHeight - // const t1 = Math.round(this.width / this.curCanvasScale.matrixStyleWidth) - // const left = Math.round(this.left / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth - // const top = Math.round(this.top / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight - // const width = t1 * this.curCanvasScale.matrixStyleWidth - // const height = Math.round(this.height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight - + recordMatrixCurShadowStyle(scaleSelf) { + const left = (this.element.x - 1) * scaleSelf.matrixStyleWidth + const top = (this.element.y - 1) * scaleSelf.matrixStyleHeight + const width = this.element.sizex * scaleSelf.matrixStyleWidth + const height = this.element.sizey * scaleSelf.matrixStyleHeight const style = { ...this.defaultStyle } @@ -1730,16 +1830,10 @@ export default { style.width = width style.height = height style.rotate = this.rotate - // this.hasMove = true - this.$store.commit('setShapeStyle', style) - // resize const self = this self.$emit('resizeView') - // setTimeout(function() { - // self.$emit('resizeView') - // }, 200) }, mountedFunction() { // private 冲突检测 和水平设计值保持一致 @@ -1821,6 +1915,72 @@ export default { // 跳转设置 boardSet() { this.$emit('boardSet') + }, + // tab移入检测 + async tabMoveInCheck() { + const top = this.top + const left = this.left + const width = this.width + const height = this.height + // tab 移入检测开启 + if (this.isTabMoveCheck) { + const nodes = this.$el.parentNode.childNodes // 获取当前父节点下所有子节点 + for (const item of nodes) { + if ( + item.className !== undefined && + !item.className.split(' ').includes(this.classNameActive) && + item.getAttribute('tab-is-check') !== null && + item.getAttribute('tab-is-check') !== 'false' && + item.getAttribute('component-type') === 'de-tabs' + ) { + const tw = item.offsetWidth + const th = item.offsetHeight + // 正则获取left与right + const [tl, tt] = this.formatTransformVal(item.style.transform) + // 碰撞有效区域检查 + const collisionT = tt + this.tabMoveInYOffset + const collisionL = tl + (this.curCanvasScaleSelf.matrixStyleWidth / 2) - width + const collisionW = tw + 2 * width - this.curCanvasScaleSelf.matrixStyleWidth + const collisionH = th + height - this.tabMoveInYOffset + + // 左上角靠近左上角区域 + const tfAndTf = collisionT <= top && collisionL <= left + // 左下角靠近左下角区域 + const bfAndBf = (collisionT + collisionH) >= (top + height) && collisionL <= left + // 右上角靠近右上角区域 + const trAndTr = collisionT <= top && (collisionL + collisionW) >= (left + width) + // 右下角靠近右下角区域 + const brAndBr = (collisionT + collisionH) >= (top + height) && (collisionL + collisionW) >= (left + width) + if (tfAndTf && bfAndBf && trAndTr && brAndBr) { + this.$store.commit('setTabCollisionActiveId', item.getAttribute('component-id')) + } else { + this.$store.commit('setTabCollisionActiveId', null) + } + + // 移入有效区域检查 + // 碰撞有效区域检查 + const activeT = tt + this.tabMoveInYOffset + const activeL = tl + (this.curCanvasScaleSelf.matrixStyleWidth * 10) - width + const activeW = tw + 2 * width - this.curCanvasScaleSelf.matrixStyleWidth * 20 + const activeH = th + height - 2 * this.tabMoveInYOffset + + // 左上角靠近左上角区域 + const activeTfAndTf = activeT <= top && activeL <= left + // 左下角靠近左下角区域 + const activeBfAndBf = (activeT + activeH) >= (top + height) && activeL <= left + // 右上角靠近右上角区域 + const activeTrAndTr = activeT <= top && (activeL + activeW) >= (left + width) + // 右下角靠近右下角区域 + const activeBrAndBr = (activeT + activeH) >= (top + height) && (activeL + activeW) >= (left + width) + if (activeTfAndTf && activeBfAndBf && activeTrAndTr && activeBrAndBr) { + this.$store.commit('setTabMoveInActiveId', item.getAttribute('component-id')) + } else { + this.$store.commit('setTabMoveInActiveId', null) + } + + } + } + } } } diff --git a/frontend/src/components/DeDrag/pointShadow.vue b/frontend/src/components/DeDrag/pointShadow.vue new file mode 100644 index 0000000000..2a6591b714 --- /dev/null +++ b/frontend/src/components/DeDrag/pointShadow.vue @@ -0,0 +1,111 @@ + + + + diff --git a/frontend/src/components/DeDrag/shadow.vue b/frontend/src/components/DeDrag/shadow.vue index 9550c94f2f..26434ff922 100644 --- a/frontend/src/components/DeDrag/shadow.vue +++ b/frontend/src/components/DeDrag/shadow.vue @@ -10,8 +10,17 @@ import { mapState } from 'vuex' export default { replace: true, - name: 'ShadowDe', + name: 'Shadow', + props: { + canvasId: { + type: String, + required: true + } + }, computed: { + curCanvasScaleSelf(){ + return this.curCanvasScaleMap[this.canvasId] + }, styleInfo() { let left = 0 let top = 0 @@ -21,11 +30,11 @@ export default { if (this.dragComponentInfo) { // 组件移入 if (this.dragComponentInfo.auxiliaryMatrix) { - left = (this.dragComponentInfo.x - 1) * this.curCanvasScale.matrixStyleWidth - top = (this.dragComponentInfo.y - 1) * this.curCanvasScale.matrixStyleHeight + left = (this.dragComponentInfo.x - 1) * this.curCanvasScaleSelf.matrixStyleWidth + top = (this.dragComponentInfo.y - 1) * this.curCanvasScaleSelf.matrixStyleHeight - width = this.dragComponentInfo.sizex * this.curCanvasScale.matrixStyleWidth - height = this.dragComponentInfo.sizey * this.curCanvasScale.matrixStyleHeight + width = this.dragComponentInfo.sizex * this.curCanvasScaleSelf.matrixStyleWidth + height = this.dragComponentInfo.sizey * this.curCanvasScaleSelf.matrixStyleHeight transition = 0.1 } else { left = this.dragComponentInfo.shadowStyle.x @@ -34,14 +43,10 @@ export default { height = this.dragComponentInfo.style.height } } else { - // temp 临时测试 - // left = this.curComponent.style.left * this.curCanvasScale.scaleWidth / 100 - // top = this.curComponent.style.top * this.curCanvasScale.scaleHeight / 100 - left = (this.curComponent.x - 1) * this.curCanvasScale.matrixStyleWidth - top = (this.curComponent.y - 1) * this.curCanvasScale.matrixStyleHeight - - width = this.curComponent.style.width * this.curCanvasScale.scalePointWidth - height = this.curComponent.style.height * this.curCanvasScale.scalePointHeight + left = (this.curComponent.x - 1) * this.curCanvasScaleSelf.matrixStyleWidth + top = (this.curComponent.y - 1) * this.curCanvasScaleSelf.matrixStyleHeight + width = this.curComponent.style.width * this.curCanvasScaleSelf.scalePointWidth + height = this.curComponent.style.height * this.curCanvasScaleSelf.scalePointHeight if (this.curComponent.optStatus.dragging) { transition = 0.1 } @@ -70,13 +75,13 @@ export default { return this.$store.state.dragComponentInfo }, canvasWidth() { - const scaleWidth = this.curCanvasScale.scaleWidth / 100 + const scaleWidth = this.curCanvasScaleSelf.scaleWidth / 100 return this.canvasStyleData.width * scaleWidth }, ...mapState([ 'curComponent', 'editor', - 'curCanvasScale', + 'curCanvasScaleMap', 'canvasStyleData', 'linkageSettingStatus' ]) @@ -89,10 +94,10 @@ export default { this.dragComponentInfo.shadowStyle.y = this.scaleH(y) }, scaleH(h) { - return h / this.curCanvasScale.scalePointHeight + return h / this.curCanvasScaleSelf.scalePointHeight }, scaleW(w) { - return w / this.curCanvasScale.scalePointWidth + return w / this.curCanvasScaleSelf.scalePointWidth } } diff --git a/frontend/src/components/canvas/DeCanvas.vue b/frontend/src/components/canvas/DeCanvas.vue new file mode 100644 index 0000000000..30dd77c57e --- /dev/null +++ b/frontend/src/components/canvas/DeCanvas.vue @@ -0,0 +1,587 @@ + + + + + diff --git a/frontend/src/components/canvas/components/Editor/DateFormat.vue b/frontend/src/components/canvas/components/Editor/DateFormat.vue index c827ffbb03..af04e16a9a 100644 --- a/frontend/src/components/canvas/components/Editor/DateFormat.vue +++ b/frontend/src/components/canvas/components/Editor/DateFormat.vue @@ -84,11 +84,6 @@ - - +
+ + + + + + + + + + + + + + + + + + + +
+ + + + + diff --git a/frontend/src/components/canvas/components/Editor/EditBar.vue b/frontend/src/components/canvas/components/Editor/EditBar.vue index e85008ec54..d111132bc2 100644 --- a/frontend/src/components/canvas/components/Editor/EditBar.vue +++ b/frontend/src/components/canvas/components/Editor/EditBar.vue @@ -141,6 +141,38 @@ + + + + + + + + + + @@ -151,11 +183,17 @@ import SettingMenu from '@/components/canvas/components/Editor/SettingMenu' import LinkageField from '@/components/canvas/components/Editor/LinkageField' import toast from '@/components/canvas/utils/toast' import FieldsList from '@/components/canvas/components/Editor/fieldsList' +import LinkJumpSet from '@/views/panel/LinkJumpSet' +import Background from '@/views/background/index' export default { - components: { FieldsList, SettingMenu, LinkageField }, + components: { Background, LinkJumpSet, FieldsList, SettingMenu, LinkageField }, props: { + canvasId: { + type: String, + required: true + }, terminal: { type: String, default: 'pc' @@ -191,6 +229,9 @@ export default { }, data() { return { + boardSetVisible: false, + linkJumpSetVisible: false, + linkJumpSetViewId: null, curFields: [], multiplexingCheckModel: false, barWidth: 24, @@ -228,8 +269,8 @@ export default { }, showEditPosition() { if (this.activeModel === 'edit' && !this.linkageAreaShow && !this.batchOptAreaShow) { - const toRight = (this.canvasStyleData.width - this.element.style.left - this.element.style.width) * this.curCanvasScale.scalePointWidth - const toLeft = this.element.style.left * this.curCanvasScale.scalePointWidth + const toRight = (this.canvasStyleData.width - this.element.style.left - this.element.style.width) * this.curCanvasScaleSelf.scalePointWidth + const toLeft = this.element.style.left * this.curCanvasScaleSelf.scalePointWidth if (this.barWidth < toRight) { return 'bar-main-right' } else if (this.barWidth > toRight && this.barWidth > toLeft) { @@ -278,6 +319,9 @@ export default { miniWidth() { return this.mobileLayoutStatus ? 1 : 4 }, + curCanvasScaleSelf(){ + return this.curCanvasScaleMap[this.canvasId] + }, ...mapState([ 'menuTop', 'menuLeft', @@ -288,7 +332,7 @@ export default { 'linkageSettingStatus', 'targetLinkageInfo', 'curLinkageView', - 'curCanvasScale', + 'curCanvasScaleMap', 'batchOptStatus', 'mobileLayoutStatus', 'curBatchOptComponents', @@ -302,6 +346,16 @@ export default { } }, methods: { + backgroundSetClose() { + this.boardSetVisible = false + }, + linkJumpSet() { + this.linkJumpSetViewId = this.element.propValue.viewId + this.linkJumpSetVisible = true + }, + closeJumpSetDialog() { + this.linkJumpSetVisible = false + }, fieldsAreaDown(e) { // ignore e.preventDefault() @@ -347,10 +401,10 @@ export default { this.curComponent.auxiliaryMatrix = false this.$emit('amRemoveItem') } else { - this.curComponent.x = Math.round(this.curComponent.style.left / this.curCanvasScale.matrixStyleOriginWidth) + 1 - this.curComponent.y = Math.round(this.curComponent.style.top / this.curCanvasScale.matrixStyleOriginHeight) + 1 - this.curComponent.sizex = Math.round(this.curComponent.style.width / this.curCanvasScale.matrixStyleOriginWidth) - this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScale.matrixStyleOriginHeight) + this.curComponent.x = Math.round(this.curComponent.style.left / this.curCanvasScaleSelf.matrixStyleOriginWidth) + 1 + this.curComponent.y = Math.round(this.curComponent.style.top / this.curCanvasScaleSelf.matrixStyleOriginHeight) + 1 + this.curComponent.sizex = Math.round(this.curComponent.style.width / this.curCanvasScaleSelf.matrixStyleOriginWidth) + this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScaleSelf.matrixStyleOriginHeight) this.curComponent.sizey = this.curComponent.sizey > this.miniHeight ? this.curComponent.sizey : this.miniHeight this.curComponent.sizex = this.curComponent.sizex > this.miniWidth ? this.curComponent.sizex : this.miniWidth this.curComponent.auxiliaryMatrix = true @@ -364,10 +418,10 @@ export default { }, // 记录当前样式 跟随阴影位置 矩阵处理 recordMatrixCurShadowStyle() { - const left = (this.curComponent.x - 1) * this.curCanvasScale.matrixStyleWidth - const top = (this.curComponent.y - 1) * this.curCanvasScale.matrixStyleHeight - const width = this.curComponent.sizex * this.curCanvasScale.matrixStyleWidth - const height = this.curComponent.sizey * this.curCanvasScale.matrixStyleHeight + const left = (this.curComponent.x - 1) * this.curCanvasScaleSelf.matrixStyleWidth + const top = (this.curComponent.y - 1) * this.curCanvasScaleSelf.matrixStyleHeight + const width = this.curComponent.sizex * this.curCanvasScaleSelf.matrixStyleWidth + const height = this.curComponent.sizey * this.curCanvasScaleSelf.matrixStyleHeight const style = { left: left, top: top, @@ -409,9 +463,6 @@ export default { }) bus.$emit('clear_panel_linkage', { viewId: this.element.propValue.viewId }) }, - linkJumpSet() { - this.$emit('linkJumpSet') - }, goFile() { this.$refs.files.click() }, @@ -435,7 +486,7 @@ export default { reader.readAsDataURL(file) }, boardSet() { - this.$emit('boardSet') + this.boardSetVisible = true }, batchOptChange(val) { if (val) { diff --git a/frontend/src/components/canvas/components/Editor/PGrid.vue b/frontend/src/components/canvas/components/Editor/PGrid.vue index 8a1e8756f0..c2df81e89b 100644 --- a/frontend/src/components/canvas/components/Editor/PGrid.vue +++ b/frontend/src/components/canvas/components/Editor/PGrid.vue @@ -1,20 +1,17 @@ @@ -135,7 +195,6 @@ import bus from '@/utils/bus' import { mapState } from 'vuex' import { isChange } from '@/utils/conditionUtil' import { BASE_CHART_STRING } from '@/views/chart/chart/chart' -import eventBus from '@/components/canvas/utils/eventBus' import { deepCopy } from '@/components/canvas/utils/utils' import { getToken, getLinkToken } from '@/utils/auth' import DrillPath from '@/views/chart/view/DrillPath' @@ -151,10 +210,11 @@ import { checkAddHttp } from '@/utils/urlUtils' import DeRichTextView from '@/components/canvas/custom-component/DeRichTextView' import Vue from 'vue' import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter' +import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog' export default { name: 'UserView', - components: { DeRichTextView, LabelNormalText, PluginCom, ChartComponentS2, EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 }, + components: { UserViewDialog, DeRichTextView, LabelNormalText, PluginCom, ChartComponentS2, EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 }, props: { element: { type: Object, @@ -219,6 +279,11 @@ export default { }, data() { return { + mobileChartDetailsVisible: false, + chartDetailsVisible: false, + showChartInfo: {}, + showChartTableInfo: {}, + showChartInfoType: 'details', dataRowNameSelect: {}, dataRowSelect: {}, curFields: [], @@ -461,6 +526,12 @@ export default { } }, methods: { + exportExcel() { + this.$refs['userViewDialog'].exportExcel() + }, + exportViewImg() { + this.$refs['userViewDialog'].exportViewImg() + }, pluginEditHandler(e) { this.$emit('trigger-plugin-edit', { e, id: this.element.id }) }, @@ -728,7 +799,16 @@ export default { tableChart.customStyle.text.show = false tableChart.customAttr = JSON.stringify(tableChart.customAttr) tableChart.customStyle = JSON.stringify(tableChart.customStyle) - eventBus.$emit('openChartDetailsDialog', { chart: this.chart, tableChart: tableChart, openType: params.openType }) + + this.showChartInfo = this.chart + this.showChartTableInfo = tableChart + this.showChartInfoType = params.openType + this.chartDetailsVisible = true + if (this.terminal === 'pc') { + this.chartDetailsVisible = true + } else { + this.mobileChartDetailsVisible = true + } }, chartClick(param) { if (this.drillClickDimensionList.length < this.chart.drillFields.length - 1) { diff --git a/frontend/src/components/canvas/custom-component/component-list.js b/frontend/src/components/canvas/custom-component/component-list.js index 7f07d11b07..844f31a2a7 100644 --- a/frontend/src/components/canvas/custom-component/component-list.js +++ b/frontend/src/components/canvas/custom-component/component-list.js @@ -394,7 +394,7 @@ const list = [ tabList: [{ title: 'Tab1', name: '1', - content: null + content: { type: 'canvas' } }] }, x: 1, diff --git a/frontend/src/components/canvas/store/copy.js b/frontend/src/components/canvas/store/copy.js index 902e3f98ea..afb3f9e91f 100644 --- a/frontend/src/components/canvas/store/copy.js +++ b/frontend/src/components/canvas/store/copy.js @@ -35,7 +35,7 @@ export default { } }) const canvasStyleData = state.canvasStyleData - const curCanvasScale = state.curCanvasScale + const curCanvasScaleSelf = state.curCanvasScaleMap['canvas-main'] const componentGap = state.componentGap Object.keys(state.curMultiplexingComponents).forEach(function(componentId, index) { const component = @@ -53,15 +53,15 @@ export default { const tilePosition = index % 3 const divisiblePosition = parseInt(index / 3) if (canvasStyleData.auxiliaryMatrix) { - const width = component.sizex * curCanvasScale.matrixStyleOriginWidth + const width = component.sizex * curCanvasScaleSelf.matrixStyleOriginWidth // 取余 平铺4个 此处x 位置偏移 component.x = component.x + component.sizex * tilePosition // Y 方向根据当前应该放置的最大值 加上50矩阵余量 component.y = pYMax + 50 + state.viewBase.sizex * divisiblePosition - component.style.left = (component.x - 1) * curCanvasScale.matrixStyleOriginWidth - component.style.top = (component.y - 1) * curCanvasScale.matrixStyleOriginHeight + component.style.left = (component.x - 1) * curCanvasScaleSelf.matrixStyleOriginWidth + component.style.top = (component.y - 1) * curCanvasScaleSelf.matrixStyleOriginHeight component.style.width = width - component.style.height = component.sizey * curCanvasScale.matrixStyleOriginHeight + component.style.height = component.sizey * curCanvasScaleSelf.matrixStyleOriginHeight } else { const width = component.style.width const height = component.style.height diff --git a/frontend/src/components/canvas/utils/utils.js b/frontend/src/components/canvas/utils/utils.js index cd002ea3a0..319232a686 100644 --- a/frontend/src/components/canvas/utils/utils.js +++ b/frontend/src/components/canvas/utils/utils.js @@ -133,6 +133,10 @@ export function panelDataPrepare(componentData, componentStyle, callback) { if (item.component && item.component === 'Picture') { item.style.adaptation = item.style.adaptation || 'adaptation' } + // 增加所属画布ID（canvasId）当前所在画布的父ID（canvasPid） 主画布ID为main-canvas, PID = 0 表示当前所属canvas为最顶层 + item.canvasId = (item.canvasId || 'canvas-main') + item.canvasPid = (item.canvasPid || '0') + }) // 初始化密度为最高密度 componentStyle.aidedDesign.matrixBase = 4 @@ -145,7 +149,7 @@ export function panelDataPrepare(componentData, componentStyle, callback) { export function resetID(data) { if (data) { data.forEach(item => { - item.type !== 'custom' && (item.id = uuid.v1()) + item.type !== 'custom' && item.type !== 'de-tabs'&& (item.id = uuid.v1()) }) } return data @@ -224,3 +228,7 @@ export function imgUrlTrans(url) { return url } } + +export function getNowCanvasComponentData(canvasId){ + return store.state.componentData.filter(item => item.canvasId===canvasId) +} diff --git a/frontend/src/components/dataease/DeOutWidget.vue b/frontend/src/components/dataease/DeOutWidget.vue index 847ef8e992..b5fd78d669 100644 --- a/frontend/src/components/dataease/DeOutWidget.vue +++ b/frontend/src/components/dataease/DeOutWidget.vue @@ -118,9 +118,6 @@ export default { } return size }, - ...mapState([ - 'curCanvasScale' - ]), deSelectGridBg() { if (this.element.component !== 'de-select-grid') return null const { backgroundColorSelect, color } = this.element.commonBackground diff --git a/frontend/src/components/widget/DeWidget/DeTabs.vue b/frontend/src/components/widget/DeWidget/DeTabs.vue index 81f480e970..f2864713be 100644 --- a/frontend/src/components/widget/DeWidget/DeTabs.vue +++ b/frontend/src/components/widget/DeWidget/DeTabs.vue @@ -63,6 +63,27 @@ + + +
+ +
+ { try { @@ -313,7 +339,7 @@ export default { activeTabInner = item.content } }) - if (newVal && activeTabInner) { + if (newVal && activeTabInner && activeTabInner.type === 'view') { this.$store.commit('setCurActiveTabInner', activeTabInner) this.$store.dispatch('chart/setViewId', activeTabInner.propValue.viewId) } else { @@ -335,12 +361,17 @@ export default { created() { bus.$on('add-new-tab', this.addNewTab) this.activeTabName = this.element.options.tabList[0].name + this.$store.commit('setTabActiveTabNameMap', { tabId: this.element.id, activeTabName: this.activeTabName }) this.setContentThemeStyle() }, beforeDestroy() { bus.$off('add-new-tab', this.addNewTab) }, methods: { + tabCanvasComponentData(tabName) { + const result = getNowCanvasComponentData(this.element.id + '-' + tabName) + return result + }, setContentThemeStyle() { this.element.options.tabList.forEach(tab => { if (tab.content && tab.content.type === 'view') { @@ -429,7 +460,9 @@ export default { component.propValue = propValue component.filters = [] component.linkageFilters = [] - if (this.themeStyle) { component.commonBackground = JSON.parse(JSON.stringify(this.themeStyle)) } + if (this.themeStyle) { + component.commonBackground = JSON.parse(JSON.stringify(this.themeStyle)) + } } }) component.id = newComponentId @@ -494,8 +527,10 @@ export default { const tab = { title: 'NewTab', name: curName, - content: null + content: { type: 'canvas' } } + //的Tab都是画布 + this.element.options.tabList.push(tab) this.styleChange() @@ -523,18 +558,27 @@ export default { diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js index 854bf30cc5..d6ea9912fa 100644 --- a/frontend/src/store/index.js +++ b/frontend/src/store/index.js @@ -63,6 +63,7 @@ const data = { // 当前点击组件 curComponent: null, curCanvasScale: null, + curCanvasScaleMap: {}, curComponentIndex: null, // 预览仪表板缩放信息 previewCanvasScale: { @@ -95,6 +96,10 @@ const data = { mobileLayoutStatus: false, // 公共链接状态(当前是否是公共链接打开) publicLinkStatus: false, + pcTabMatrixCount: { + x: 36, + y: 36 + }, pcMatrixCount: { x: 36, y: 18 @@ -134,7 +139,20 @@ const data = { customAttr: {} }, allViewRender: [], - isInEditor: false // 是否在编辑器中，用于判断复制、粘贴组件时是否生效，如果在编辑器外，则无视这些操作 + isInEditor: false, // 是否在编辑器中，用于判断复制、粘贴组件时是否生效，如果在编辑器外，则无视这些操作 + tabCollisionActiveId: null, // 当前在碰撞的Tab组件ID + tabMoveInActiveId: null, // 当前在移入的Tab ID + tabMoveOutActiveId: null, // 当前在移出的Tab ID + tabMoveOutComponentId: null, // 当前在移出Tab de组件ID + tabActiveTabNameMap: {}, // 编辑器中 tab组件中的活动tab页, + // 鼠标处于drag状态的坐标点 + mousePointShadowMap: { + mouseX: 0, + mouseY: 0, + width: 0, + height: 0 + } + }, mutations: { ...animation.mutations, @@ -146,6 +164,10 @@ const data = { ...snapshot.mutations, ...lock.mutations, + setTabActiveTabNameMap(state, tabActiveInfo){ + state.tabActiveTabNameMap[tabActiveInfo.tabId] = tabActiveInfo.activeTabName + }, + setClickComponentStatus(state, status) { state.isClickComponent = status }, @@ -186,8 +208,9 @@ const data = { state.curActiveTabInner = curActiveTabInner }, - setCurCanvasScale(state, curCanvasScale) { - state.curCanvasScale = curCanvasScale + setCurCanvasScale(state, curCanvasScaleSelf) { + Vue.set(state.curCanvasScaleMap, curCanvasScaleSelf.canvasId, curCanvasScaleSelf) + state.curCanvasScale = curCanvasScaleSelf }, setPreviewCanvasScale(state, scale) { if (scale.scaleWidth) { @@ -197,14 +220,16 @@ const data = { state.previewCanvasScale.scalePointHeight = scale.scaleHeight } }, - setShapeStyle({ curComponent, canvasStyleData, curCanvasScale }, { top, left, width, height, rotate }) { + setShapeStyle({ curComponent, canvasStyleData, curCanvasScaleMap }, { top, left, width, height, rotate }) { + const curCanvasScaleSelf = curCanvasScaleMap[curComponent.canvasId] if (curComponent) { - if (top || top === 0) curComponent.style.top = (top / curCanvasScale.scalePointHeight) + 0.0000001 - if (left || left === 0) curComponent.style.left = (left / curCanvasScale.scalePointWidth) + 0.0000001 - if (width || width === 0) curComponent.style.width = (width / curCanvasScale.scalePointWidth + 0.0000001) - if (height || height === 0) curComponent.style.height = (height / curCanvasScale.scalePointHeight) + 0.0000001 + if (top || top === 0) curComponent.style.top = (top / curCanvasScaleSelf.scalePointHeight) + 0.0000001 + if (left || left === 0) curComponent.style.left = (left / curCanvasScaleSelf.scalePointWidth) + 0.0000001 + if (width || width === 0) curComponent.style.width = (width / curCanvasScaleSelf.scalePointWidth + 0.0000001) + if (height || height === 0) curComponent.style.height = (height / curCanvasScaleSelf.scalePointHeight) + 0.0000001 if (rotate || rotate === 0) curComponent.style.rotate = rotate } + // console.log("setShapeStyle==="+curComponent.style.width) }, setShapeSingleStyle({ curComponent }, { key, value }) { @@ -715,6 +740,31 @@ const data = { item.needAdaptor = false } }) + }, + setTabMoveInActiveId(state, tabId) { + state.tabMoveInActiveId = tabId + }, + setTabCollisionActiveId(state, tabId) { + state.tabCollisionActiveId = tabId + }, + setTabMoveOutActiveId(state, tabId) { + state.tabMoveOutActiveId = tabId + }, + setTabMoveOutComponentId(state, componentId) { + state.tabMoveOutComponentId = componentId + }, + clearTabMoveInfo(state){ + state.tabMoveInActiveId = null + state.tabCollisionActiveId = null + state.tabMoveOutActiveId = null + state.tabMoveOutComponentId = null + }, + setMousePointShadowMap(state,mousePoint){ + state.mousePointShadowMap.mouseX = mousePoint.mouseX + state.mousePointShadowMap.mouseY = mousePoint.mouseY + state.mousePointShadowMap.width = mousePoint.width + state.mousePointShadowMap.height = mousePoint.height + // console.log("mousePointMap:"+JSON.stringify(state.mousePointMap)) } }, modules: { diff --git a/frontend/src/views/panel/AssistComponent/index.vue b/frontend/src/views/panel/AssistComponent/index.vue index 5bfa37cf75..7f08ce4c50 100644 --- a/frontend/src/views/panel/AssistComponent/index.vue +++ b/frontend/src/views/panel/AssistComponent/index.vue @@ -120,6 +120,7 @@ export default { type: 'assist', id: ev.target.dataset.id } + this.$store.commit('clearTabMoveInfo') ev.dataTransfer.setData('componentInfo', JSON.stringify(dataTrans)) eventBus.$emit('startMoveIn') }, @@ -183,6 +184,8 @@ export default { component.auxiliaryMatrix = false } component.moveStatus = 'start' + component['canvasId'] = 'canvas-main' + component['canvasPid'] = '0' return component }, handleDragEnd(ev) { diff --git a/frontend/src/views/panel/LinkJumpSet/index.vue b/frontend/src/views/panel/LinkJumpSet/index.vue index d42104e1a9..75563f28a4 100644 --- a/frontend/src/views/panel/LinkJumpSet/index.vue +++ b/frontend/src/views/panel/LinkJumpSet/index.vue @@ -408,6 +408,7 @@ import { imgUrlTrans } from '@/components/canvas/utils/utils' export default { components: { codemirror, draggable }, + name: 'LinkJumpSet', props: { viewId: { type: String, diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue index b52860b98a..1fd14ed675 100644 --- a/frontend/src/views/panel/edit/index.vue +++ b/frontend/src/views/panel/edit/index.vue @@ -161,32 +161,22 @@ :modal-append-to-body="true" >
- - - + + +
-
- - - -
+ + - + {{ panelInfo.name }} @@ -215,15 +200,16 @@ class="this_mobile_canvas_main" :style="mobileCanvasStyle" > - + + + @@ -252,7 +238,7 @@ /> - + - + @@ -278,7 +264,7 @@ />
- +
@@ -294,7 +280,8 @@
- {{ $t('panel.select_view') }} + {{ $t('panel.select_view') }}
@@ -382,13 +369,6 @@ @click="e => {e.target.value = '';}" @change="handleFileChange" > - - - - {{ $t('panel.panel_cache_use_tips') }} + {{ $t('panel.panel_cache_use_tips') }}
{{ $t('panel.no') }} + >{{ $t('panel.no') }} + {{ $t('panel.yes') }} + >{{ $t('panel.yes') }} +
@@ -492,7 +475,7 @@ import FilterGroup from '../filter' import SubjectSetting from '../SubjectSetting' import bus from '@/utils/bus' import Editor from '@/components/canvas/components/Editor/index' -import { deepCopy, imgUrlTrans, matrixBaseChange } from '@/components/canvas/utils/utils' +import { deepCopy, getNowCanvasComponentData, imgUrlTrans, matrixBaseChange } from '@/components/canvas/utils/utils' import componentList, { BASE_MOBILE_STYLE, COMMON_BACKGROUND, @@ -534,9 +517,14 @@ import Multiplexing from '@/views/panel/ViewSelect/multiplexing' import { listenGlobalKeyDown } from '@/components/canvas/utils/shortcutKey' import { adaptCurThemeCommonStyle } from '@/components/canvas/utils/style' import eventBus from '@/components/canvas/utils/eventBus' +import DeEditor from '@/components/canvas/components/Editor/DeEditor' +import DeCanvas from '@/components/canvas/DeCanvas' + export default { name: 'PanelEdit', components: { + DeCanvas, + DeEditor, Multiplexing, ChartStyleBatchSet, OuterParamsSet, @@ -560,6 +548,7 @@ export default { }, data() { return { + canvasId: 'canvas-main', panelCacheExist: false, viewData: [], multiplexingShow: false, @@ -627,6 +616,9 @@ export default { }, computed: { + mainCanvasComponentData() { + return getNowCanvasComponentData(this.canvasId) + }, // 侧边显示控制 chartEditParam() { if (this.curComponent) { @@ -736,9 +728,12 @@ export default { multiplexingDisabled() { return Object.keys(this.curMultiplexingComponents) === 0 }, + curCanvasScaleSelf() { + return this.curCanvasScaleMap[this.canvasId] + }, ...mapState([ 'curComponent', - 'curCanvasScale', + 'curCanvasScaleMap', 'isClickComponent', 'canvasStyleData', 'curComponentIndex', @@ -796,8 +791,8 @@ export default { }, beforeDestroy() { bus.$off('component-on-drag', this.componentOnDrag) - bus.$off('component-dialog-edit', this.editDialog) - bus.$off('button-dialog-edit', this.editButtonDialog) + // bus.$off('component-dialog-edit', this.editDialog) + // bus.$off('button-dialog-edit', this.editButtonDialog) bus.$off('component-dialog-style', this.componentDialogStyle) bus.$off('previewFullScreenClose', this.previewFullScreenClose) bus.$off('change_panel_right_draw', this.changeRightDrawOpen) @@ -818,8 +813,8 @@ export default { }, initEvents() { bus.$on('component-on-drag', this.componentOnDrag) - bus.$on('component-dialog-edit', this.editDialog) - bus.$on('button-dialog-edit', this.editButtonDialog) + // bus.$on('component-dialog-edit', this.editDialog) + // bus.$on('button-dialog-edit', this.editButtonDialog) bus.$on('component-dialog-style', this.componentDialogStyle) bus.$on('previewFullScreenClose', this.previewFullScreenClose) bus.$on('change_panel_right_draw', this.changeRightDrawOpen) @@ -837,7 +832,9 @@ export default { const filterIds = com.options.attrs.filterIds let len = filterIds.length while (len--) { - if (param.componentId === filterIds[len]) { filterIds.splice(len, 1) } + if (param.componentId === filterIds[len]) { + filterIds.splice(len, 1) + } } com.options.attrs.filterIds = filterIds } @@ -857,9 +854,7 @@ export default { } this.rightDrawOpen = param if (this.rightDrawOpen) { - setTimeout(() => { - this.outStyle.width = this.outStyle.width + 0.000001 - }, 0) + this.$refs['canvasMainRef'].restore() } }, init(panelId) { @@ -933,11 +928,11 @@ export default { showPanel(type) { if (this.showIndex === -1 || this.showIndex === type) { this.$nextTick(() => { - if (this.show) { - this.showIndex === -1 + if (this.show) { + this.showIndex === -1 + } + this.show = !this.show } - this.show = !this.show - } ) } this.showIndex = type @@ -1007,15 +1002,17 @@ export default { } else { this.currentWidget = ApplicationContext.getService(componentInfo.id) this.currentFilterCom = this.currentWidget.getDrawPanel() + this.currentFilterCom['canvasId'] = 'canvas-main' + this.currentFilterCom['canvasPid'] = '0' if (this.canvasStyleData.auxiliaryMatrix) { this.currentFilterCom.x = this.dropComponentInfo.x this.currentFilterCom.y = this.dropComponentInfo.y this.currentFilterCom.sizex = this.dropComponentInfo.sizex this.currentFilterCom.sizey = this.dropComponentInfo.sizey - this.currentFilterCom.style.left = (this.dragComponentInfo.x - 1) * this.curCanvasScale.matrixStyleOriginWidth - this.currentFilterCom.style.top = (this.dragComponentInfo.y - 1) * this.curCanvasScale.matrixStyleOriginHeight - this.currentFilterCom.style.width = this.dragComponentInfo.sizex * this.curCanvasScale.matrixStyleOriginWidth - this.currentFilterCom.style.height = this.dragComponentInfo.sizey * this.curCanvasScale.matrixStyleOriginHeight + this.currentFilterCom.style.left = (this.dragComponentInfo.x - 1) * this.curCanvasScaleSelf.matrixStyleOriginWidth + this.currentFilterCom.style.top = (this.dragComponentInfo.y - 1) * this.curCanvasScaleSelf.matrixStyleOriginHeight + this.currentFilterCom.style.width = this.dragComponentInfo.sizex * this.curCanvasScaleSelf.matrixStyleOriginWidth + this.currentFilterCom.style.height = this.dragComponentInfo.sizey * this.curCanvasScaleSelf.matrixStyleOriginHeight } else { this.currentFilterCom.style.left = this.dragComponentInfo.shadowStyle.x this.currentFilterCom.style.top = this.dragComponentInfo.shadowStyle.y @@ -1046,10 +1043,10 @@ export default { component.sizex = this.dropComponentInfo.sizex component.sizey = this.dropComponentInfo.sizey - component.style.left = (this.dragComponentInfo.x - 1) * this.curCanvasScale.matrixStyleOriginWidth - component.style.top = (this.dragComponentInfo.y - 1) * this.curCanvasScale.matrixStyleOriginHeight - component.style.width = this.dragComponentInfo.sizex * this.curCanvasScale.matrixStyleOriginWidth - component.style.height = this.dragComponentInfo.sizey * this.curCanvasScale.matrixStyleOriginHeight + component.style.left = (this.dragComponentInfo.x - 1) * this.curCanvasScaleSelf.matrixStyleOriginWidth + component.style.top = (this.dragComponentInfo.y - 1) * this.curCanvasScaleSelf.matrixStyleOriginHeight + component.style.width = this.dragComponentInfo.sizex * this.curCanvasScaleSelf.matrixStyleOriginWidth + component.style.height = this.dragComponentInfo.sizey * this.curCanvasScaleSelf.matrixStyleOriginHeight } else { component.style.top = this.dropComponentInfo.shadowStyle.y component.style.left = this.dropComponentInfo.shadowStyle.x @@ -1058,6 +1055,8 @@ export default { } component.id = newComponentId + component['canvasId'] = 'canvas-main' + component['canvasPid'] = '0' // 新拖入的组件矩阵状态 和仪表板当前的矩阵状态 保持一致 component.auxiliaryMatrix = this.canvasStyleData.auxiliaryMatrix // 统一设置背景信息 @@ -1243,14 +1242,14 @@ export default { }, getPositionX(x) { if (this.canvasStyleData.selfAdaption) { - return x * 100 / this.curCanvasScale.scaleWidth + return x * 100 / this.curCanvasScaleSelf.scaleWidth } else { return x } }, getPositionY(y) { if (this.canvasStyleData.selfAdaption) { - return y * 100 / this.curCanvasScale.scaleHeight + return y * 100 / this.curCanvasScaleSelf.scaleHeight } else { return y } @@ -1281,10 +1280,10 @@ export default { component.auxiliaryMatrix = this.canvasStyleData.auxiliaryMatrix // position = absolution 或导致有偏移 这里中和一下偏移量 if (this.canvasStyleData.auxiliaryMatrix) { - component.style.left = (component.x - 1) * this.curCanvasScale.matrixStyleOriginWidth - component.style.top = (component.y - 1) * this.curCanvasScale.matrixStyleOriginHeight - component.style.width = component.sizex * this.curCanvasScale.matrixStyleOriginWidth - component.style.height = component.sizey * this.curCanvasScale.matrixStyleOriginHeight + component.style.left = (component.x - 1) * this.curCanvasScaleSelf.matrixStyleOriginWidth + component.style.top = (component.y - 1) * this.curCanvasScaleSelf.matrixStyleOriginHeight + component.style.width = component.sizex * this.curCanvasScaleSelf.matrixStyleOriginWidth + component.style.height = component.sizey * this.curCanvasScaleSelf.matrixStyleOriginHeight } else { component.style.left = 0 component.style.top = 0 @@ -1352,7 +1351,6 @@ export default { const touchOffset = 100 const canvasInfoMobile = document.getElementById('canvasInfoMobile') // 获取子盒子（高度肯定比父盒子大） - // const editorMobile = document.getElementById('editorMobile') // 画布区顶部到浏览器顶部距离 const canvasTop = canvasInfoMobile.offsetTop + 75 // 画布区有高度 @@ -1387,266 +1385,271 @@ export default { diff --git a/frontend/src/views/panel/filter/index.vue b/frontend/src/views/panel/filter/index.vue index cc0a1ec8cf..8a8cec5c49 100644 --- a/frontend/src/views/panel/filter/index.vue +++ b/frontend/src/views/panel/filter/index.vue @@ -40,6 +40,12 @@ import eventBus from '@/components/canvas/utils/eventBus' import { mapState } from 'vuex' export default { name: 'FilterGroup', + props: { + canvasId: { + type: String, + require: true + } + }, data() { return { panelInfo: this.$store.state.panel.panelInfo, @@ -73,9 +79,12 @@ export default { computed: { ...mapState([ 'canvasStyleData', - 'curCanvasScale', + 'curCanvasScaleMap', 'componentData' ]), + curCanvasScaleSelf(){ + return this.curCanvasScaleMap[this.canvasId] + }, searchButtonExist() { return this.componentData && this.componentData.some(component => component.type === 'custom-button' && component.serviceName === 'buttonSureWidget') }, @@ -119,10 +128,12 @@ export default { // 设置矩阵标记点 dragComponentInfo.x = 1 dragComponentInfo.y = 1 - dragComponentInfo.sizex = Math.round(dragComponentInfo.style.width / this.curCanvasScale.matrixStyleOriginWidth) - dragComponentInfo.sizey = Math.round(dragComponentInfo.style.height / this.curCanvasScale.matrixStyleOriginHeight) + dragComponentInfo.sizex = Math.round(dragComponentInfo.style.width / this.curCanvasScaleSelf.matrixStyleOriginWidth) + dragComponentInfo.sizey = Math.round(dragComponentInfo.style.height / this.curCanvasScaleSelf.matrixStyleOriginHeight) dragComponentInfo.auxiliaryMatrix = this.canvasStyleData.auxiliaryMatrix dragComponentInfo.moveStatus = 'start' + dragComponentInfo['canvasId'] = 'canvas-main' + dragComponentInfo['canvasPid'] = '0' this.$store.commit('setDragComponentInfo', dragComponentInfo) ev.dataTransfer.effectAllowed = 'copy' const dataTrans = { diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue index 4aa8a8d006..106a7dbb4a 100644 --- a/frontend/src/views/panel/list/PanelViewShow.vue +++ b/frontend/src/views/panel/list/PanelViewShow.vue @@ -205,7 +205,7 @@ >