Merge branch 'dev' into pr@dev_eslint_auto_fix

frontend/src/components/DeDrag/MoveInShadow.vue

@@ -1,71 +0,0 @@
-<template>
-  <div
-    style="z-index:-1"
-    :style="style"
-  />
-</template>
-
-<script>
-import { mapState } from 'vuex'
-export default {
-  replace: true,
-  name: 'MoveInShadow',
-  props: {
-    w: {
-      type: Number,
-      required: true
-    },
-    h: {
-      type: Number,
-      required: true
-    },
-    x: {
-      type: Number,
-      required: true
-    },
-    y: {
-      type: Number,
-      required: true
-    },
-    z: {
-      type: Number,
-      required: true
-    }
-  },
-  computed: {
-    style() {
-      // 当前默认为自适应
-      let left = this.x
-      let top = this.y
-      let width = this.w
-      let height = this.h
-      if (this.canvasStyleData.auxiliaryMatrix) {
-        left = Math.round(left / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
-        width = Math.round(width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
-        top = Math.round(top / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
-        height = Math.round(height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
-      }
-      const style = {
-        transform: `translate(${left}px, ${top}px) rotate(0deg)`,
-        width: width + 'px',
-        height: height + 'px',
-        opacity: 0.4,
-        background: 'gray',
-        position: 'absolute'
-      }
-      return style
-    },
-    ...mapState([
-      'curComponent',
-      'editor',
-      'curCanvasScale',
-      'canvasStyleData',
-      'linkageSettingStatus'
-    ])
-  }
-
-}
-</script>
-<style scoped>
-
-</style>

frontend/src/components/DeDrag/index.vue

@@ -22,6 +22,7 @@
     @mouseleave="leave"
   >
     <div
+      v-show="contentDisplay"
       :class="[
         {
           ['de-drag-active-inner']:enabled,
@@ -35,6 +36,7 @@
         v-if="editBarShow"
         style="transform: translateZ(10px)"
         :active-model="'edit'"
+        :canvas-id="canvasId"
         :element="element"
         @showViewDetails="showViewDetails"
         @amRemoveItem="amRemoveItem"
@@ -62,7 +64,7 @@
         @mousedown.stop.prevent="handleDown(handlei, $event)"
         @touchstart.stop.prevent="handleTouchDown(handlei, $event)"
       >
-        <slot :name="handlei" />
+        <slot :name="handlei"/>
       </div>
       <div
         :id="componentCanvasId"
@@ -75,7 +77,7 @@
           class="svg-background"
           :icon-class="mainSlotSvgInner"
         />
-        <slot />
+        <slot/>
       </div>
     </div>
   </div>
@@ -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],
+          // X方向余量向左右偏移this.parentWidthOffset 个余量，可以做到类型像移出canvas的效果，适配Tab的canvas组件
-          maxLeft: Math.floor((this.parentWidth - this.width - this.left) / this.grid[0]) * this.grid[0] + this.left,
+          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 left = Math.round(this.left / this.curCanvasScaleSelf.matrixStyleWidth) * this.curCanvasScaleSelf.matrixStyleWidth
-      const top = Math.round(this.top / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
+      const top = Math.round(this.top / this.curCanvasScaleSelf.matrixStyleHeight) * this.curCanvasScaleSelf.matrixStyleHeight
-      const width = Math.round(this.width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
+      const width = Math.round(this.width / this.curCanvasScaleSelf.matrixStyleWidth) * this.curCanvasScaleSelf.matrixStyleWidth
-      const height = Math.round(this.height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
+      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() {
+    recordMatrixCurShadowStyle(scaleSelf) {
-      const left = (this.element.x - 1) * this.curCanvasScale.matrixStyleWidth
+      const left = (this.element.x - 1) * scaleSelf.matrixStyleWidth
-      const top = (this.element.y - 1) * this.curCanvasScale.matrixStyleHeight
+      const top = (this.element.y - 1) * scaleSelf.matrixStyleHeight
-      const width = this.element.sizex * this.curCanvasScale.matrixStyleWidth
+      const width = this.element.sizex * scaleSelf.matrixStyleWidth
-      const height = this.element.sizey * this.curCanvasScale.matrixStyleHeight
+      const height = this.element.sizey * scaleSelf.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
-
       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)
+            }
+
+          }
+        }
+      }
     }
   }
 

frontend/src/components/DeDrag/pointShadow.vue

@@ -0,0 +1,111 @@
+<template>
+  <div
+    class="point-shadow"
+    :style="styleInfo"
+  >
+    <div class="point-shadow-content">
+      <div id="point-shadow-component" class="point-shadow-component"></div>
+      <div class="point-shadow-tips" :style="tipsStyleInfo">
+        <div style="width: 100%;text-align: center">组件将被移出Tab</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  replace: true,
+  name: 'PointShadow',
+  props: {
+    canvasId: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    tipsStyleInfo() {
+      return {
+        width: this.mousePointShadowMap.width + 'px',
+        height: this.mousePointShadowMap.height + 'px'
+      }
+    },
+    curCanvasScaleSelf() {
+      return this.curCanvasScaleMap[this.canvasId]
+    },
+    componentCanvasId() {
+      if (this.curComponent.type === 'view') {
+        return 'user-view-' + this.curComponent.propValue.viewId
+      } else {
+        return 'components-' + this.curComponent.id
+      }
+    },
+    styleInfo() {
+      return {
+        left: this.mousePointShadowMap.mouseX - (this.mousePointShadowMap.width) + 'px',
+        top: this.mousePointShadowMap.mouseY - (this.mousePointShadowMap.height / 2) + 'px',
+        width: this.mousePointShadowMap.width + 'px',
+        height: this.mousePointShadowMap.height + 'px'
+      }
+    },
+    ...mapState([
+      'mousePointShadowMap',
+      'curComponent'
+    ])
+  },
+  mounted() {
+    this.init()
+  },
+  beforeDestroy() {
+    // const targetComponent = document.getElementById(this.componentCanvasId)
+    // const domId = 'dragContent-' + this.curComponent.id
+    // console.log('domId='+domId)
+    // document.getElementById(domId).appendChild(targetComponent)
+  },
+  methods: {
+    init() {
+      // 将拖拽的元素内容复制到shadow区域展示
+      // const targetComponent = document.getElementById(this.componentCanvasId)
+      // document.getElementById('point-shadow-component').appendChild(targetComponent)
+    },
+    scaleH(h) {
+      return h / this.curCanvasScaleSelf.scalePointHeight
+    },
+    scaleW(w) {
+      return w / this.curCanvasScaleSelf.scalePointWidth
+    }
+  }
+
+}
+</script>
+<style scoped>
+.point-shadow {
+  z-index: 1000;
+  position: absolute;
+}
+
+.point-shadow-content {
+  position: relative;
+}
+
+.point-shadow-component {
+  opacity: 0.6;
+  background-color: rgba(179, 212, 252);
+}
+
+
+.point-shadow-tips {
+  left: 0px;
+  top: 0px;
+  box-sizing: border-box;
+  z-index: 10001;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  color: #33ef08;
+  font-weight: bold;
+  background-color: rgba(179, 212, 252);
+}
+
+</style>

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
+          left = (this.dragComponentInfo.x - 1) * this.curCanvasScaleSelf.matrixStyleWidth
-          top = (this.dragComponentInfo.y - 1) * this.curCanvasScale.matrixStyleHeight
+          top = (this.dragComponentInfo.y - 1) * this.curCanvasScaleSelf.matrixStyleHeight
 
-          width = this.dragComponentInfo.sizex * this.curCanvasScale.matrixStyleWidth
+          width = this.dragComponentInfo.sizex * this.curCanvasScaleSelf.matrixStyleWidth
-          height = this.dragComponentInfo.sizey * this.curCanvasScale.matrixStyleHeight
+          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.x - 1) * this.curCanvasScaleSelf.matrixStyleWidth
-        // left = this.curComponent.style.left * this.curCanvasScale.scaleWidth / 100
+        top = (this.curComponent.y - 1) * this.curCanvasScaleSelf.matrixStyleHeight
-        // top = this.curComponent.style.top * this.curCanvasScale.scaleHeight / 100
+        width = this.curComponent.style.width * this.curCanvasScaleSelf.scalePointWidth
-        left = (this.curComponent.x - 1) * this.curCanvasScale.matrixStyleWidth
+        height = this.curComponent.style.height * this.curCanvasScaleSelf.scalePointHeight
-        top = (this.curComponent.y - 1) * this.curCanvasScale.matrixStyleHeight
-
-        width = this.curComponent.style.width * this.curCanvasScale.scalePointWidth
-        height = this.curComponent.style.height * this.curCanvasScale.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
     }
   }
 

frontend/src/components/canvas/DeCanvas.vue

@@ -0,0 +1,587 @@
+<template>
+  <div
+    class="canvas_content"
+    :id="canvasDomId"
+    @drop="handleDrop"
+    @dragover="handleDragOver"
+    @mousedown="handleMouseDown"
+    @mouseup="deselectCurComponent"
+    @scroll="canvasScroll"
+  >
+    <slot name="optBar" />
+    <de-editor :canvas-style-data="canvasStyleData"
+               :component-data="componentData"
+               :canvas-id="canvasId"
+               :parent-forbid="parentForbid"
+               :ref="editorRefName"
+               :matrix-count="matrixCountBase"
+               :out-style="outStyle"
+               :scroll-top="scrollTop"
+               @canvasDragging="canvasDragging"
+    />
+    <input id="input" ref="files" type="file" accept="image/*" hidden @click="e => {e.target.value = '';}" @change="handleFileChange" >
+    <el-dialog
+      v-if="buttonVisible && panelInfo.id"
+      :title="(currentWidget && currentWidget.getLeftPanel && currentWidget.getLeftPanel().label ? $t(currentWidget.getLeftPanel().label) : '') + $t('panel.module')"
+      :visible.sync="buttonVisible"
+      custom-class="de-button-dialog"
+      :append-to-body="true"
+      @close="cancelButton"
+    >
+      <button-dialog
+        v-if="buttonVisible && currentWidget && currentWidget.name === 'buttonSureWidget'"
+        :ref="'filter-setting-' + currentFilterCom.id"
+        :widget-info="currentWidget"
+        :element="currentFilterCom"
+        @sure-handler="sureHandler"
+        @cancel-handler="cancelHandler"
+      />
+
+      <button-reset-dialog
+        v-if="buttonVisible && currentWidget && currentWidget.name === 'buttonResetWidget'"
+        :ref="'filter-setting-' + currentFilterCom.id"
+        :widget-info="currentWidget"
+        :element="currentFilterCom"
+        @reset-button-handler="sureHandler"
+        @cancel-button-handler="cancelHandler"
+      />
+
+    </el-dialog>
+
+    <el-dialog
+      v-if="filterVisible && panelInfo.id"
+      :title="(currentWidget && currentWidget.getLeftPanel && currentWidget.getLeftPanel().label ? $t(currentWidget.getLeftPanel().label) : '') + $t('panel.module')"
+      :visible.sync="filterVisible"
+      custom-class="de-filter-dialog"
+      :append-to-body="true"
+      @close="cancelFilter"
+    >
+      <filter-dialog
+        v-if="filterVisible && currentWidget"
+        :ref="'filter-setting-' + currentFilterCom.id"
+        :widget-info="currentWidget"
+        :element="currentFilterCom"
+        @sure-button-status="sureStatusChange"
+        @re-fresh-component="reFreshComponent"
+      />
+      <div style="text-align: end !important;margin: 0 15px 10px !important;">
+        <span slot="footer">
+          <el-button
+            size="mini"
+            @click="cancelFilter"
+          >{{ $t('commons.cancel') }}</el-button>
+          <el-button
+            :disabled="!enableSureButton"
+            type="primary"
+            size="mini"
+            @click="sureFilter"
+          >{{ $t('commons.confirm') }}</el-button>
+        </span>
+      </div>
+    </el-dialog>
+    <!--矩形样式组件-->
+    <TextAttr v-if="showAttr" :canvas-id="canvasId" :scroll-left="scrollLeft" :scroll-top="scrollTop"/>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import DeEditor from '@/components/canvas/components/Editor/DeEditor'
+import elementResizeDetectorMaker from 'element-resize-detector'
+import bus from '@/utils/bus'
+import { deepCopy } from '@/components/canvas/utils/utils'
+import { uuid } from 'vue-uuid'
+import componentList, {
+  BASE_MOBILE_STYLE,
+  COMMON_BACKGROUND, commonAttr,
+  HYPERLINKS, PIC_STYLE
+} from '@/components/canvas/custom-component/component-list'
+import { ApplicationContext } from '@/utils/ApplicationContext'
+import { chartCopy } from '@/api/chart/chart'
+import { adaptCurThemeCommonStyle } from '@/components/canvas/utils/style'
+import toast from '@/components/canvas/utils/toast'
+import generateID from '@/components/canvas/utils/generateID'
+import ButtonDialog from '@/views/panel/filter/ButtonDialog'
+import ButtonResetDialog from '@/views/panel/filter/ButtonResetDialog'
+import FilterDialog from '@/views/panel/filter/filterDialog'
+
+export default {
+  components: { FilterDialog, ButtonResetDialog, ButtonDialog, DeEditor },
+  data() {
+    return {
+      // 需要展示属性设置的组件类型
+      showAttrComponent: [
+        'custom',
+        'v-text',
+        'picture-add',
+        'de-tabs',
+        'rect-shape',
+        'de-show-date',
+        'de-video',
+        'de-stream-media',
+        'de-frame'
+      ],
+      enableSureButton: false,
+      filterFromDrag: false,
+      buttonFromDrag: false,
+      filterVisible: false,
+      autoMoveOffSet: 15,
+      buttonVisible: false,
+      currentWidget: null,
+      currentFilterCom: null,
+      currentDropElement: null,
+      canvasDomId: 'canvas-id-' + this.canvasId,
+      editorRefName: 'canvas-editor-' + this.canvasId,
+      scrollLeft: 0,
+      scrollTop: 0,
+      outStyle: {
+        width: null,
+        height: null
+      }
+    }
+  },
+  props: {
+    parentForbid:{
+      type: Boolean,
+      require: false,
+      default: true
+    },
+    canvasStyleData: {
+      type: Object,
+      require: true
+    },
+    componentData: {
+      type: Array,
+      require: false,
+      default: []
+    },
+    canvasId: {
+      type: String,
+      require: true
+    },
+    canvasPid: {
+      type: String,
+      require: true
+    },
+    mobileLayoutStatus: {
+      type: Boolean,
+      require: false,
+      default: false
+    }
+  },
+  computed: {
+    matrixCountBase(){
+      if(this.isMainCanvas && this.mobileLayoutStatus){
+        return this.mobileMatrixCount
+      }else{
+        return this.pcMatrixCountBase
+      }
+    },
+    isMainCanvas(){
+      return this.canvasId === 'canvas-main'
+    },
+    panelInfo() {
+      return this.$store.state.panel.panelInfo
+    },
+    pcMatrixCountBase() {
+      if (this.canvasStyleData.aidedDesign) {
+        return {
+          x: this.pcMatrixCount.x * this.canvasStyleData.aidedDesign.matrixBase,
+          y: this.pcMatrixCount.y * this.canvasStyleData.aidedDesign.matrixBase
+        }
+      } else {
+        return this.pcMatrixCount
+      }
+    },
+    curCanvasScaleSelf() {
+      return this.curCanvasScaleMap[this.canvasId]
+    },
+    showAttr() {
+      if (this.mobileLayoutStatus) {
+        return false
+      } else if (this.curComponent && this.showAttrComponent.includes(this.curComponent.type)) {
+        // 过滤组件有标题才显示
+        if (this.curComponent.type === 'custom' && (!this.curComponent.options.attrs.showTitle || !this.curComponent.options.attrs.title)) {
+          return false
+        } else {
+          return true
+        }
+      } else {
+        return false
+      }
+    },
+    ...mapState([
+      'curComponent',
+      'componentGap',
+      'isClickComponent',
+      'pcMatrixCount',
+      'pcTabMatrixCount',
+      'dragComponentInfo',
+      'curCanvasScaleMap',
+      'mobileMatrixCount'
+    ])
+  },
+  watch: {
+    mobileLayoutStatus() {
+      this.restore()
+    },
+    // //监控当前组件移动 检查是否靠近tab
+    // curComponent: {
+    //   handler(newVal, oldVla) {
+    //     // this.restore()
+    //   },
+    //   deep: true
+    // },
+  },
+  created() {
+  },
+  mounted() {
+    const _this = this
+    // 监听div变动事件
+    const erd = elementResizeDetectorMaker()
+    erd.listenTo(document.getElementById(this.canvasDomId), element => {
+      _this.$nextTick(() => {
+        _this.restore()
+      })
+    })
+  },
+  beforeDestroy() {
+    bus.$off('component-dialog-edit', this.editDialog)
+    bus.$off('button-dialog-edit', this.editButtonDialog)
+  },
+  methods: {
+    initEvents() {
+      bus.$on('component-dialog-edit', this.editDialog)
+      bus.$on('button-dialog-edit', this.editButtonDialog)
+    },
+    getGap() {
+      return this.mobileLayoutStatus ? 0 : this.componentGap * 2
+    },
+    restore() {
+      this.$nextTick(() => {
+        const domInfo = document.getElementById(this.canvasDomId)
+        if (domInfo) {
+          this.outStyle.height = domInfo.offsetHeight - this.getGap()
+          // 临时处理 确保每次restore 有会更新
+          this.outStyle.width = domInfo.offsetWidth  + (Math.random() * 0.000001)
+        }
+      })
+    },
+    handleDragOver(e) {
+      // console.log("handleDragOver-"+this.canvasId)
+      e.preventDefault()
+      e.dataTransfer.dropEffect = 'copy'
+      this.$refs[this.editorRefName].handleDragOver(e)
+    },
+    handleMouseDown() {
+      this.$store.commit('setClickComponentStatus', false)
+    },
+
+    deselectCurComponent(e) {
+      if (!this.isClickComponent) {
+        this.$store.commit('setCurComponent', { component: null, index: null })
+      }
+
+      // 0 左击 1 滚轮 2 右击
+      if (e.button !== 2) {
+        this.$store.commit('hideContextMenu')
+      }
+    },
+    canvasScroll(e) {
+      this.scrollLeft = e.target.scrollLeft
+      this.scrollTop = e.target.scrollTop
+      bus.$emit('onScroll')
+    },
+    // handleDrop(e) {
+    //   this.$emit('handleDrop', e)
+    // }
+    handleDrop(e) {
+      this.dragComponentInfo.moveStatus = 'drop'
+      // 记录拖拽信息
+      this.dropComponentInfo = deepCopy(this.dragComponentInfo)
+      this.currentDropElement = e
+      e.preventDefault()
+      e.stopPropagation()
+      let component
+      const newComponentId = uuid.v1()
+      const componentInfo = JSON.parse(e.dataTransfer.getData('componentInfo'))
+      if (componentInfo.type === 'assist') {
+        // 辅助设计组件
+        componentList.forEach(componentTemp => {
+          if (componentInfo.id === componentTemp.id) {
+            component = deepCopy(componentTemp)
+          }
+        })
+        if (component.type === 'picture-add') {
+          this.goFile()
+          this.clearCurrentInfo()
+          return
+        }
+      } else if (componentInfo.type === 'view') {
+        // 用户视图设置 复制一个模板
+        componentList.forEach(componentTemp => {
+          if (componentTemp.type === 'view') {
+            component = deepCopy(componentTemp)
+            const propValue = {
+              id: newComponentId,
+              viewId: componentInfo.id
+            }
+            component.propValue = propValue
+            component.filters = []
+            component.linkageFilters = []
+          }
+        })
+      } else {
+        this.currentWidget = ApplicationContext.getService(componentInfo.id)
+        this.currentFilterCom = this.currentWidget.getDrawPanel()
+        this.currentFilterCom['canvasId'] = this.canvasId
+        this.currentFilterCom['canvasPid'] = this.canvasPid// 待处理
+        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.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
+          this.currentFilterCom.style.width = this.dragComponentInfo.style.width
+          this.currentFilterCom.style.height = this.dragComponentInfo.style.height
+        }
+        this.currentFilterCom.id = newComponentId
+        this.currentFilterCom.auxiliaryMatrix = this.canvasStyleData.auxiliaryMatrix
+        this.currentFilterCom.mobileStyle = deepCopy(BASE_MOBILE_STYLE)
+        this.currentFilterCom['hyperlinks'] = deepCopy(HYPERLINKS)
+        this.currentFilterCom.commonBackground = this.currentFilterCom.commonBackground || deepCopy(COMMON_BACKGROUND)
+
+        if (this.currentWidget.filterDialog) {
+          this.show = false
+          this.openFilterDialog(true)
+          return
+        }
+        if (this.currentWidget.buttonDialog) {
+          this.show = false
+          this.openButtonDialog(true)
+          return
+        }
+        component = deepCopy(this.currentFilterCom)
+      }
+      if (this.canvasStyleData.auxiliaryMatrix) {
+        component.x = this.dropComponentInfo.x
+        component.y = this.dropComponentInfo.y
+        component.sizex = this.dropComponentInfo.sizex
+        component.sizey = this.dropComponentInfo.sizey
+
+        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
+        component.style.width = this.dropComponentInfo.shadowStyle.width
+        component.style.height = this.dropComponentInfo.shadowStyle.height
+      }
+
+      component.id = newComponentId
+      component['canvasId'] = this.canvasId
+      component['canvasPid'] = this.canvasPid
+      // 新拖入的组件矩阵状态 和仪表板当前的矩阵状态 保持一致
+      component.auxiliaryMatrix = this.canvasStyleData.auxiliaryMatrix
+      // 统一设置背景信息
+      component.commonBackground = component.commonBackground || deepCopy(COMMON_BACKGROUND)
+
+      // 视图统一调整为复制
+      if (componentInfo.type === 'view') {
+        chartCopy(component.propValue.viewId, this.panelInfo.id).then(res => {
+          component.propValue.viewId = res.data
+          this.$store.commit('addComponent', { component })
+          this.$store.commit('recordSnapshot', 'handleDrop')
+        })
+      } else {
+        this.$store.commit('addComponent', { component })
+        this.$store.commit('recordSnapshot', 'handleDrop')
+      }
+      adaptCurThemeCommonStyle(component)
+      this.clearCurrentInfo()
+    },
+    goFile() {
+      this.$refs.files.click()
+    },
+    handleFileChange(e) {
+      const _this = this
+      const file = e.target.files[0]
+      if (!file.type.includes('image')) {
+        toast('只能插入图片')
+        return
+      }
+      const reader = new FileReader()
+      reader.onload = (res) => {
+        const fileResult = res.target.result
+        const img = new Image()
+        img.onload = () => {
+          const component = {
+            ...commonAttr,
+            id: generateID(),
+            component: 'Picture',
+            type: 'picture-add',
+            label: '图片',
+            icon: '',
+            hyperlinks: HYPERLINKS,
+            mobileStyle: BASE_MOBILE_STYLE,
+            propValue: fileResult,
+            commonBackground: deepCopy(COMMON_BACKGROUND),
+            style: {
+              ...PIC_STYLE
+            }
+          }
+          component.auxiliaryMatrix = false
+          component.style.top = _this.dropComponentInfo.shadowStyle.y
+          component.style.left = _this.dropComponentInfo.shadowStyle.x
+          component.style.width = _this.dropComponentInfo.shadowStyle.width
+          component.style.height = _this.dropComponentInfo.shadowStyle.height
+          component['canvasId'] = this.canvasId
+          component['canvasPid'] = this.canvasPid
+          this.$store.commit('addComponent', {
+            component: component
+          })
+          this.$store.commit('recordSnapshot', 'handleFileChange')
+        }
+
+        img.src = fileResult
+      }
+
+      reader.readAsDataURL(file)
+    },
+    clearCurrentInfo() {
+      this.currentWidget = null
+      this.currentFilterCom = null
+    },
+    openButtonDialog(fromDrag = false) {
+      this.buttonFromDrag = fromDrag
+      this.buttonVisible = true
+    },
+    closeButton() {
+      this.buttonVisible = false
+      this.currentWidget = null
+      this.clearCurrentInfo()
+    },
+    cancelButton() {
+      this.closeButton()
+      if (this.buttonFromDrag) {
+        bus.$emit('onRemoveLastItem')
+      }
+    },
+    sureButton() {
+
+    },
+    openFilterDialog(fromDrag = false) {
+      this.filterFromDrag = fromDrag
+      this.filterVisible = true
+    },
+    closeFilter() {
+      this.filterVisible = false
+      this.currentWidget = null
+      this.clearCurrentInfo()
+    },
+    cancelFilter() {
+      this.closeFilter()
+      if (this.filterFromDrag) {
+        bus.$emit('onRemoveLastItem')
+      }
+    },
+    sureFilter() {
+      this.currentFilterCom = this.$refs['filter-setting-' + this.currentFilterCom.id].getElementInfo()
+      if (this.editType !== 'update') {
+        adaptCurThemeCommonStyle(this.currentFilterCom)
+      }
+      this.$store.commit('setComponentWithId', this.currentFilterCom)
+      this.$store.commit('recordSnapshot', 'sureFilter')
+      this.$store.commit('setCurComponent', { component: this.currentFilterCom, index: this.curComponentIndex })
+      bus.$emit('reset-default-value', this.currentFilterCom.id)
+      this.closeFilter()
+    },
+    reFreshComponent(component) {
+      this.currentFilterCom = component
+      this.$forceUpdate()
+    },
+    editDialog(editType) {
+      // 主画布打开
+      if (this.isMainCanvas && this.curComponent && this.curComponent.serviceName) {
+        this.editType = editType
+        const serviceName = this.curComponent.serviceName
+        this.currentWidget = ApplicationContext.getService(serviceName)
+        this.currentFilterCom = this.curComponent
+        this.openFilterDialog()
+      }
+    },
+    editButtonDialog(editType) {
+      // 主画布打开
+      if (this.isMainCanvas && this.curComponent && this.curComponent.serviceName) {
+        this.editType = editType
+        const serviceName = this.curComponent.serviceName
+        this.currentWidget = ApplicationContext.getService(serviceName)
+        this.currentFilterCom = this.curComponent
+        this.openButtonDialog()
+      }
+    },
+    sureHandler() {
+      this.currentFilterCom = this.$refs['filter-setting-' + this.currentFilterCom.id].getElementInfo()
+      if (this.editType !== 'update') {
+        adaptCurThemeCommonStyle(this.currentFilterCom)
+      }
+      this.$store.commit('setComponentWithId', this.currentFilterCom)
+      this.$store.commit('recordSnapshot', 'sureFilter')
+      this.$store.commit('setCurComponent', { component: this.currentFilterCom, index: this.curComponentIndex })
+      bus.$emit('refresh-button-info')
+      this.closeButton()
+    },
+    cancelHandler() {
+      this.cancelButton()
+    },
+    sureStatusChange(status) {
+      this.enableSureButton = status
+    },
+    canvasDragging(mY, offsetY) {
+      // if (this.isMainCanvas && this.mobileLayoutStatus && this.curComponent && this.curComponent.optStatus.dragging) {
+      //   // 触发滚动的区域偏移量
+      //   const touchOffset = 100
+      //   const canvasInfoMobile = document.getElementById(this.canvasDomId)
+      //   // 获取子盒子（高度肯定比父盒子大）
+      //   // const editorMobile = document.getElementById('editorMobile')
+      //   // 画布区顶部到浏览器顶部距离
+      //   const canvasTop = canvasInfoMobile.offsetTop + 75
+      //   // 画布区有高度
+      //   const canvasHeight = canvasInfoMobile.offsetHeight
+      //   // 画布区域底部距离浏览器顶部距离
+      //   const canvasBottom = canvasTop + canvasHeight
+      //   if (mY > (canvasBottom - touchOffset) && offsetY > 0) {
+      //     // 触发底部滚动
+      //     this.scrollMove(this.autoMoveOffSet)
+      //   } else if (mY < (canvasTop + touchOffset) && offsetY < 0) {
+      //     // 触发顶部滚动
+      //     this.scrollMove(-this.autoMoveOffSet)
+      //   }
+      // }
+    },
+    scrollMove(offset) {
+      // const canvasInfoMobile = document.getElementById(this.canvasDomId)
+      // canvasInfoMobile.scrollTop = canvasInfoMobile.scrollTop + offset
+      // this.$store.commit('setScrollAutoMove', this.scrollAutoMove + offset)
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+.canvas_content {
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background-size: 100% 100% !important;
+}
+</style>

frontend/src/components/canvas/components/Editor/DateFormat.vue

@@ -84,11 +84,6 @@
           </el-select>
 
         </el-form-item>
-
-        <!-- <el-form-item>
-          <el-button type="primary" @click="onSubmit">{{ $t('panel.confirm') }}</el-button>
-          <el-button @click="onClose">{{ $t('panel.cancel') }}</el-button>
-        </el-form-item> -->
       </el-form>
     </el-row>
     <i
@@ -104,6 +99,10 @@ import { deepCopy } from '@/components/canvas/utils/utils'
 
 export default {
   props: {
+    canvasId: {
+      type: String,
+      require: true
+    },
     formatInfo: {
       type: Object,
       required: true
@@ -131,9 +130,12 @@ export default {
     }
   },
   computed: {
+    curCanvasScaleSelf(){
+      return this.curCanvasScaleMap[this.canvasId]
+    },
     ...mapState([
       'curComponent',
-      'curCanvasScale'
+      'curCanvasScaleMap'
     ])
   },
   watch: {
@@ -162,15 +164,13 @@ export default {
     modelChange(val) {
       if (val === '0') {
         this.curComponent.style.height = 100
-        this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScale.matrixStyleOriginHeight)
+        this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScaleSelf.matrixStyleOriginHeight)
       } else if (val === '1') {
         this.curComponent.style.height = 150
-        this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScale.matrixStyleOriginHeight)
+        this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScaleSelf.matrixStyleOriginHeight)
       } else {
-        // this.curComponent.style.width = this.curComponent.style.width / 2
         this.curComponent.style.height = this.curComponent.style.width + 50
-        this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScale.matrixStyleOriginHeight)
+        this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScaleSelf.matrixStyleOriginHeight)
-        // this.curComponent.sizex = Math.round(this.curComponent.style.width / this.curCanvasScale.matrixStyleOriginWidth)
       }
     }
   }

frontend/src/components/canvas/components/Editor/EditBar.vue

@@ -141,6 +141,38 @@
         </a>
       </span>
     </div>
+
+    <!--跳转设置-->
+    <el-dialog
+      :visible.sync="linkJumpSetVisible"
+      width="900px"
+      class="dialog-css"
+      :show-close="true"
+      :destroy-on-close="true"
+      :append-to-body="true"
+    >
+      <link-jump-set
+        v-if="linkJumpSetVisible"
+        :view-id="linkJumpSetViewId"
+        @closeJumpSetDialog="closeJumpSetDialog"
+      />
+    </el-dialog>
+
+    <!--背景设置-->
+    <el-dialog
+      :visible.sync="boardSetVisible"
+      width="750px"
+      class="dialog-css"
+      :close-on-click-modal="false"
+      :show-close="false"
+      :destroy-on-close="true"
+      :append-to-body="true"
+    >
+      <background
+        v-if="boardSetVisible"
+        @backgroundSetClose="backgroundSetClose"
+      />
+    </el-dialog>
   </div>
 </template>
 
@@ -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 toRight = (this.canvasStyleData.width - this.element.style.left - this.element.style.width) * this.curCanvasScaleSelf.scalePointWidth
-        const toLeft = this.element.style.left * this.curCanvasScale.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.x = Math.round(this.curComponent.style.left / this.curCanvasScaleSelf.matrixStyleOriginWidth) + 1
-        this.curComponent.y = Math.round(this.curComponent.style.top / this.curCanvasScale.matrixStyleOriginHeight) + 1
+        this.curComponent.y = Math.round(this.curComponent.style.top / this.curCanvasScaleSelf.matrixStyleOriginHeight) + 1
-        this.curComponent.sizex = Math.round(this.curComponent.style.width / this.curCanvasScale.matrixStyleOriginWidth)
+        this.curComponent.sizex = Math.round(this.curComponent.style.width / this.curCanvasScaleSelf.matrixStyleOriginWidth)
-        this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScale.matrixStyleOriginHeight)
+        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 left = (this.curComponent.x - 1) * this.curCanvasScaleSelf.matrixStyleWidth
-      const top = (this.curComponent.y - 1) * this.curCanvasScale.matrixStyleHeight
+      const top = (this.curComponent.y - 1) * this.curCanvasScaleSelf.matrixStyleHeight
-      const width = this.curComponent.sizex * this.curCanvasScale.matrixStyleWidth
+      const width = this.curComponent.sizex * this.curCanvasScaleSelf.matrixStyleWidth
-      const height = this.curComponent.sizey * this.curCanvasScale.matrixStyleHeight
+      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) {

frontend/src/components/canvas/components/Editor/PGrid.vue

@@ -1,20 +1,17 @@
 <template>
   <div class="grid">
-    <!--    positionBox:{{ positionBox.length }}-->
-    <!--    <div v-for="(yItem, index) in positionBox" v-if="index<positionBox.length-5" :key="index+'y'" style="float: left; width: 105%">-->
     <div
       v-for="(yItem, index) in positionBox"
       :key="index+'y'"
-      style="float: left; width: 105%"
+      class="outer-class"
     >
-      <!--      <div v-for="(xItem, index) in yItem" :key="index+'x'" :style="classInfo" style="float: left; border: 0.2px solid #b3d4fc ;color: #00feff">-->
       <div
-        v-for="(xItem, indx) in yItem"
+        v-for="(xItem, index) in yItem"
-        :key="indx+'x'"
+        :key="index+'x'"
         :style="classInfo"
-        style="float: left; border: 0.2px solid #b3d4fc ;"
+        class="inner-class"
       >
-        {{ xItem.el?1:0 }}
+        {{ xItem.el?'.':'' }}
       </div>
     </div>
   </div>
@@ -55,4 +52,11 @@ export default {
     top: 0;
     left: 0;
 }
+.outer-class{
+  float: left; width: 105%
+}
+
+.inner-class{
+  float: left; border: 1px solid #b3d4fc ;
+}
 </style>

frontend/src/components/canvas/components/Editor/Preview.vue

@@ -6,8 +6,8 @@
   >
     <canvas-opt-bar />
     <div
-      id="canvasInfoMain"
+      :id="previewDomId"
-      ref="canvasInfoMain"
+      :ref="previewRefId"
       :style="canvasInfoMainStyle"
     >
       <el-row
@@ -31,8 +31,8 @@
       </el-row>
       <div
         v-else
-        id="canvasInfoTemp"
+        :id="previewTempDomId"
-        ref="canvasInfoTemp"
+        :ref="previewTempRefId"
         :style="[canvasInfoTempStyle,screenShotStyle]"
         class="main-class"
         @mouseup="deselectCurComponent"
@@ -53,61 +53,6 @@
           :canvas-style-data="canvasStyleData"
           :show-position="showPosition"
         />
-        <!--视图详情-->
-        <el-dialog
-          :visible.sync="chartDetailsVisible"
-          width="80%"
-          class="dialog-css"
-          :destroy-on-close="true"
-          top="5vh"
-        >
-          <span
-            v-if="chartDetailsVisible"
-            style="position: absolute;right: 70px;top:15px"
-          >
-            <el-button
-              v-if="showChartInfoType==='enlarge' && showChartInfo && showChartInfo.type !== 'symbol-map'"
-              class="el-icon-picture-outline"
-              size="mini"
-              @click="exportViewImg"
-            >
-              {{ $t('chart.export_img') }}
-            </el-button>
-            <el-button
-              v-if="showChartInfoType==='details'"
-              size="mini"
-              @click="exportExcel"
-            >
-              <svg-icon
-                icon-class="ds-excel"
-                class="ds-icon-excel"
-              />{{ $t('chart.export') }}Excel
-            </el-button>
-          </span>
-          <UserViewDialog
-            v-if="chartDetailsVisible"
-            ref="userViewDialog"
-            :canvas-style-data="canvasStyleData"
-            :open-type="showChartInfoType"
-            :chart="showChartInfo"
-            :chart-table="showChartTableInfo"
-          />
-        </el-dialog>
-
-        <!--手机视图详情-->
-        <el-dialog
-          :visible.sync="mobileChartDetailsVisible"
-          :fullscreen="true"
-          class="mobile-dialog-css"
-          :destroy-on-close="true"
-        >
-          <UserViewMobileDialog
-            v-if="mobileChartDetailsVisible"
-            :canvas-style-data="canvasStyleData"
-            :chart="showChartInfo"
-            :chart-table="showChartTableInfo"
-          />
-        </el-dialog>
       </div>
     </div>
   </div>
@@ -187,10 +132,19 @@ export default {
     panelInfo: {
       type: Object,
       required: true
+    },
+    canvasId: {
+      type: String,
+      require: false,
+      default: 'canvas-main'
     }
   },
   data() {
     return {
+      previewDomId: 'preview-'+this.canvasId,
+      previewRefId: 'preview-ref-'+this.canvasId,
+      previewTempDomId: 'preview-temp-'+this.canvasId,
+      previewTempRefId: 'preview-temp-ref-'+this.canvasId,
       isShowPreview: false,
       panelId: '',
       needToChangeHeight: [
@@ -211,11 +165,6 @@ export default {
       mainWidth: '100%',
       mainHeight: '100%',
       searchCount: 0,
-      chartDetailsVisible: false,
-      mobileChartDetailsVisible: false,
-      showChartInfo: {},
-      showChartTableInfo: {},
-      showChartInfoType: 'details',
       // 布局展示 1.pc pc端布局 2.mobile 移动端布局
       terminal: 'pc',
       buttonFilterMap: null
@@ -353,10 +302,9 @@ export default {
     bus.$on('trigger-reset-button', this.triggerResetButton)
   },
   beforeDestroy() {
-    erd.uninstall(this.$refs.canvasInfoTemp)
+    erd.uninstall(this.$refs[this.previewTempRefId])
-    erd.uninstall(this.$refs.canvasInfoMain)
+    erd.uninstall(this.$refs[this.previewRefId])
     clearInterval(this.timer)
-    eventBus.$off('openChartDetailsDialog', this.openChartDetailsDialog)
     bus.$off('trigger-search-button', this.triggerSearchButton)
     bus.$off('trigger-reset-button', this.triggerResetButton)
   },
@@ -483,8 +431,8 @@ export default {
     changeStyleWithScale,
     getStyle,
     restore() {
-      const canvasHeight = document.getElementById('canvasInfoMain').offsetHeight
+      const canvasHeight = document.getElementById(this.previewDomId).offsetHeight
-      const canvasWidth = document.getElementById('canvasInfoMain').offsetWidth
+      const canvasWidth = document.getElementById(this.previewDomId).offsetWidth
       this.scaleWidth = (canvasWidth) * 100 / this.canvasStyleData.width // 获取宽度比
       // 如果是后端截图方式使用 的高度伸缩比例和宽度比例相同
       if (this.backScreenShot) {
@@ -527,16 +475,6 @@ export default {
         this.$nextTick(() => (eventBus.$emit('resizing', '')))
       }
     },
-    openChartDetailsDialog(chartInfo) {
-      this.showChartInfo = chartInfo.chart
-      this.showChartTableInfo = chartInfo.tableChart
-      this.showChartInfoType = chartInfo.openType
-      if (this.terminal === 'pc') {
-        this.chartDetailsVisible = true
-      } else {
-        this.mobileChartDetailsVisible = true
-      }
-    },
     exportExcel() {
       this.$refs['userViewDialog'].exportExcel()
     },
@@ -559,7 +497,7 @@ export default {
     },
     initListen() {
       const _this = this
-      const canvasMain = document.getElementById('canvasInfoMain')
+      const canvasMain = document.getElementById(this.previewDomId)
       // 监听主div变动事件
       if (canvasMain) {
         erd.listenTo(canvasMain, element => {
@@ -570,9 +508,9 @@ export default {
       }
       setTimeout(() => {
         // 监听画布div变动事件
-        const tempCanvas = document.getElementById('canvasInfoTemp')
+        const tempCanvas = document.getElementById(this.previewTempDomId)
         if (tempCanvas) {
-          erd.listenTo(document.getElementById('canvasInfoTemp'), element => {
+          erd.listenTo(document.getElementById(this.previewTempDomId), element => {
             _this.$nextTick(() => {
               // 将mainHeight 修改为px 临时解决html2canvas 截图不全的问题
               _this.mainHeight = tempCanvas.scrollHeight + 'px!important'
@@ -581,7 +519,6 @@ export default {
           })
         }
       }, 1500)
-      eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
     }
   }
 }

frontend/src/components/canvas/components/Editor/PreviewMobile.vue

@@ -32,32 +32,6 @@
           :canvas-style-data="canvasStyleData"
           :in-screen="inScreen"
         />
-        <!--视图详情-->
-        <el-dialog
-          :visible.sync="chartDetailsVisible"
-          width="70%"
-          class="dialog-css"
-          :destroy-on-close="true"
-        >
-          <span style="position: absolute;right: 70px;top:15px">
-            <el-button
-              size="mini"
-              @click="exportExcel"
-            >
-              <svg-icon
-                icon-class="ds-excel"
-                class="ds-icon-excel"
-              />
-              {{ $t('chart.export_details') }}
-            </el-button>
-          </span>
-          <UserViewDialog
-            ref="userViewDialog"
-            :canvas-style-data="canvasStyleData"
-            :chart="showChartInfo"
-            :chart-table="showChartTableInfo"
-          />
-        </el-dialog>
       </div>
     </div>
   </div>
@@ -122,10 +96,7 @@ export default {
       componentDataShow: [],
       mainWidth: '100%',
       mainHeight: '100%',
-      searchCount: 0,
+      searchCount: 0
-      chartDetailsVisible: false,
-      showChartInfo: {},
-      showChartTableInfo: {}
     }
   },
   computed: {
@@ -257,14 +228,6 @@ export default {
         this.$nextTick(() => (eventBus.$emit('resizing', '')))
       }
     },
-    openChartDetailsDialog(chartInfo) {
-      this.showChartInfo = chartInfo.chart
-      this.showChartTableInfo = chartInfo.tableChart
-      this.chartDetailsVisible = true
-    },
-    exportExcel() {
-      this.$refs['userViewDialog'].exportExcel()
-    },
     deselectCurComponent(e) {
       if (!this.isClickComponent) {
         this.$store.commit('setCurComponent', { component: null, index: null })

frontend/src/components/canvas/components/FilterTextAttr.vue

@@ -1,237 +0,0 @@
-<template>
-  <el-card
-    class="el-card-main"
-    :style="mainStyle"
-  >
-    <div style="position: relative;">
-      <el-tooltip :content="$t('panel.fontSize')">
-
-        <i
-          style="float: left;margin-top: 3px;margin-left: 2px;"
-          class="iconfont icon-font_size"
-        />
-      </el-tooltip>
-
-      <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input
-          v-model="styleInfo.fontSize"
-          type="number"
-          size="mini"
-          min="12"
-          max="128"
-          @change="styleChange"
-        />
-      </div>
-
-      <el-tooltip :content="$t('panel.fontWeight')">
-        <i
-          style="float: left;margin-top: 3px;margin-left: 2px;"
-          class="icon iconfont icon-font-weight-bold"
-        />
-      </el-tooltip>
-
-      <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input
-          v-model="styleInfo.fontWeight"
-          type="number"
-          size="mini"
-          min="100"
-          step="100"
-          max="900"
-          @change="styleChange"
-        />
-      </div>
-
-      <el-tooltip :content="$t('panel.letterSpacing')">
-        <i
-          style="float: left;margin-top: 3px;margin-left: 2px;"
-          class="icon iconfont icon-letter_spacing"
-        />
-      </el-tooltip>
-
-      <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input
-          v-model="styleInfo.letterSpacing"
-          type="number"
-          size="mini"
-          min="0"
-          max="99"
-          @change="styleChange"
-        />
-      </div>
-
-      <div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
-        <div style="width: 16px;height: 18px">
-          <el-tooltip :content="$t('panel.color')">
-            <i
-              class="icon iconfont icon-zimua"
-              @click="goColor"
-            />
-          </el-tooltip>
-          <div :style="letterDivColor" />
-          <el-color-picker
-            ref="colorPicker"
-            v-model="styleInfo.color"
-            style="margin-top: 7px;height: 0px"
-            size="mini"
-            @change="styleChange"
-          />
-        </div>
-      </div>
-
-      <div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
-        <div style="width: 16px;height: 18px">
-          <el-tooltip content="背景颜色">
-            <i
-              class="iconfont icon-beijingse1"
-              @click="goBackgroundColor"
-            />
-          </el-tooltip>
-          <div :style="backgroundDivColor" />
-          <el-color-picker
-            ref="backgroundColorPicker"
-            v-model="styleInfo.backgroundColor"
-            style="margin-top: 7px;height: 0px"
-            size="mini"
-            @change="styleChange"
-          />
-        </div>
-      </div>
-    </div>
-  </el-card>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-export default {
-  props: {
-    scrollLeft: {
-      type: Number,
-      default: 0
-    },
-    scrollTop: {
-      type: Number,
-      default: 0
-    }
-  },
-  data() {
-    return {
-      textAlignOptions: [
-        {
-          icon: 'iconfont icon-juzuo',
-          tooltip: this.$t('panel.text_align_left'),
-          label: 'left'
-        },
-        {
-          icon: 'iconfont icon-align-center',
-          tooltip: this.$t('panel.text_align_center'),
-          label: 'center'
-        },
-        {
-          icon: 'iconfont icon-juyou',
-          tooltip: this.$t('panel.text_align_right'),
-          label: 'right'
-        }
-      ] }
-  },
-  computed: {
-
-    letterDivColor() {
-      const style = {
-        height: '2px',
-        background: this.styleInfo.color
-      }
-      return style
-    },
-    backgroundDivColor() {
-      const style = {
-        height: '2px',
-        background: this.styleInfo.backgroundColor
-      }
-      return style
-    },
-
-    mainStyle() {
-      const style = {
-        left: (this.getPositionX(this.curComponent.style.left) - this.scrollLeft) + 'px',
-        top: (this.getPositionY(this.curComponent.style.top) - this.scrollTop - 3) + 'px'
-      }
-      return style
-    },
-    styleInfo() {
-      return this.$store.state.curComponent.style
-    },
-    canvasWidth() {
-      let scaleWidth = 1
-      if (this.canvasStyleData.selfAdaption) {
-        scaleWidth = this.curCanvasScale.scaleWidth / 100
-      }
-      return this.canvasStyleData.width * scaleWidth
-    },
-    ...mapState([
-      'curComponent',
-      'curCanvasScale',
-      'canvasStyleData'
-    ])
-
-  },
-  methods: {
-    goColor() {
-      this.$refs.colorPicker.handleTrigger()
-    },
-    goBackgroundColor() {
-      this.$refs.backgroundColorPicker.handleTrigger()
-    },
-    getPositionX(x) {
-      let ps = 0
-      if (this.canvasStyleData.selfAdaption) {
-        ps = (x * this.curCanvasScale.scaleWidth / 100) + 60
-      } else {
-        ps = x + 60
-      }
-      // 防止toolbar超出边界
-      const xGap = ps + 295 - this.canvasWidth
-      if (xGap > 0) {
-        return ps - xGap
-      } else {
-        return ps
-      }
-    },
-    getPositionY(y) {
-      if (this.canvasStyleData.selfAdaption) {
-        return y * this.curCanvasScale.scaleHeight / 100
-      } else {
-        return y
-      }
-    },
-    styleChange() {
-      this.$store.commit('canvasChange')
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  .attr-list {
-    overflow: auto;
-    padding: 20px;
-    padding-top: 0;
-    height: 100%;
-  }
-  .el-card-main {
-    height: 34px;
-    z-index: 10;
-    width: 350px;
-    position: absolute;
-
-  }
-  .el-card-main ::v-deep .el-card__body {
-    padding: 0px!important;
-
-  }
-
-  ::v-deep .el-radio-button__inner{
-    padding: 5px!important;
-    width: 30px!important;
-  }
-</style>

frontend/src/components/canvas/components/RectangleAttr.vue

@@ -1,284 +0,0 @@
-<template>
-  <el-card
-    class="el-card-main"
-    :style="mainStyle"
-  >
-    <div style="position: relative;">
-      <div style="width: 80px;margin-top: 2px;margin-left: 2px;float: left">
-        <el-tooltip content="边框风格">
-          <el-select
-            v-model="styleInfo.borderStyle"
-            size="mini"
-            @change="styleChange"
-          >
-            <el-option
-              v-for="item in lineStyle"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
-              <span style="float: left;">
-                <i :class="item.icon" />
-              </span>
-              <span style="float: right; color: #8492a6; font-size: 12px">{{ item.label }}</span>
-            </el-option>
-          </el-select>
-        </el-tooltip>
-      </div>
-
-      <div style="width: 55px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-tooltip content="边框宽度">
-          <el-select
-            v-model="styleInfo.borderWidth"
-            size="mini"
-            placeholder=""
-            @change="styleChange"
-          >
-            <el-option
-              v-for="item in lineFont"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-        </el-tooltip>
-      </div>
-
-      <el-tooltip :content="$t('panel.borderRadius')">
-        <i
-          style="float: left;margin-top: 3px;margin-left: 2px;"
-          class="icon iconfont icon-fangxing-"
-        />
-      </el-tooltip>
-
-      <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input
-          v-model="styleInfo.borderRadius"
-          type="number"
-          size="mini"
-          min="0"
-          max="100"
-          step="1"
-          @change="styleChange"
-        />
-      </div>
-
-      <el-tooltip :content="$t('panel.opacity')">
-        <i
-          style="float: left;margin-top: 3px;margin-left: 2px;"
-          class="icon iconfont icon-touming"
-        />
-      </el-tooltip>
-
-      <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input
-          v-model="innerOpacity"
-          type="number"
-          size="mini"
-          min="0"
-          max="100"
-          step="10"
-          @change="styleChange"
-        />
-      </div>
-
-      <div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
-        <div style="width: 16px;height: 18px">
-          <el-tooltip content="边框颜色">
-            <i
-              class="iconfont icon-huabi"
-              @click="goBoardColor"
-            />
-          </el-tooltip>
-          <div :style="boardDivColor" />
-          <el-color-picker
-            ref="boardColorPicker"
-            v-model="styleInfo.borderColor"
-            style="margin-top: 7px;height: 0px"
-            size="mini"
-            @change="styleChange"
-          />
-        </div>
-      </div>
-
-      <div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
-        <div style="width: 16px;height: 18px">
-          <el-tooltip content="背景颜色">
-            <i
-              class="iconfont icon-beijingse1"
-              @click="goBackgroundColor"
-            />
-          </el-tooltip>
-          <div :style="backgroundDivColor" />
-          <el-color-picker
-            ref="backgroundColorPicker"
-            v-model="styleInfo.backgroundColor"
-            style="margin-top: 7px;height: 0px"
-            size="mini"
-            @change="styleChange"
-          />
-        </div>
-      </div>
-
-    </div>
-  </el-card>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-export default {
-  props: {
-    scrollLeft: {
-      type: Number,
-      default: 0
-    },
-    scrollTop: {
-      type: Number,
-      default: 0
-    }
-  },
-  data() {
-    return {
-      lineStyle: [{
-        icon: 'iconfont icon-solid_line',
-        value: 'solid',
-        label: '实线'
-      }, {
-        icon: 'iconfont icon-xuxian',
-        value: 'dashed',
-        label: '虚线'
-      }, {
-        icon: 'iconfont icon-dianxian',
-        value: 'dotted',
-        label: '点线'
-      }],
-      lineFont: [{
-        value: '0',
-        label: '0'
-      }, {
-        value: '1',
-        label: '1'
-      }, {
-        value: '2',
-        label: '2'
-      }, {
-        value: '3',
-        label: '3'
-      }, {
-        value: '4',
-        label: '4'
-      }, {
-        value: '5',
-        label: '5'
-      }],
-      innerOpacity: 0
-    }
-  },
-
-  computed: {
-    boardDivColor() {
-      const style = {
-        height: '2px',
-        background: this.styleInfo.borderColor
-      }
-      return style
-    },
-    backgroundDivColor() {
-      const style = {
-        height: '2px',
-        background: this.styleInfo.backgroundColor
-      }
-      return style
-    },
-
-    mainStyle() {
-      const style = {
-        left: this.getPositionX(this.curComponent.style.left - this.scrollLeft) + 'px',
-        top: (this.getPositionY(this.curComponent.style.top) - this.scrollTop - 3) + 'px'
-      }
-      return style
-    },
-    styleInfo() {
-      return this.$store.state.curComponent.style
-    },
-    canvasWidth() {
-      let scaleWidth = 1
-      if (this.canvasStyleData.selfAdaption) {
-        scaleWidth = this.curCanvasScale.scaleWidth / 100
-      }
-      return this.canvasStyleData.width * scaleWidth
-    },
-    ...mapState([
-      'curComponent',
-      'curCanvasScale',
-      'canvasStyleData'
-    ])
-
-  },
-  watch: {
-    innerOpacity: {
-      handler(oldVal, newVal) {
-        this.styleInfo['opacity'] = this.innerOpacity / 100
-      }
-    }
-  },
-  mounted() {
-    if (this.styleInfo['opacity']) {
-      this.innerOpacity = this.styleInfo['opacity'] * 100
-    }
-  },
-  methods: {
-    goBoardColor() {
-      this.$refs.boardColorPicker.handleTrigger()
-    },
-    goBackgroundColor() {
-      this.$refs.backgroundColorPicker.handleTrigger()
-    },
-    getPositionX(x) {
-      let ps = 0
-      if (this.canvasStyleData.selfAdaption) {
-        ps = (x * this.curCanvasScale.scaleWidth / 100) + 60
-      } else {
-        ps = x + 60
-      }
-      // 防止toolbar超出边界
-      const xGap = ps + 345 - this.canvasWidth
-      if (xGap > 0) {
-        return ps - xGap
-      } else {
-        return ps
-      }
-    },
-    getPositionY(y) {
-      if (this.canvasStyleData.selfAdaption) {
-        return y * this.curCanvasScale.scaleHeight / 100
-      } else {
-        return y
-      }
-    },
-    styleChange() {
-      this.$store.commit('canvasChange')
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  .attr-list {
-    overflow: auto;
-    padding: 20px;
-    padding-top: 0;
-    height: 100%;
-  }
-  .el-card-main {
-    height: 34px;
-    z-index: 10;
-    width: 400px;
-    position: absolute;
-
-  }
-  .el-card-main ::v-deep .el-card__body {
-    padding: 0px!important;
-
-  }
-</style>

frontend/src/components/canvas/components/TextAttr.vue

@@ -319,7 +319,7 @@
         style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;"
       >
         <el-tooltip :content="$t('panel.data_format')">
-          <date-format :format-info="curComponent.formatInfo" />
+          <date-format :canvas-id="canvasId" :format-info="curComponent.formatInfo" />
         </el-tooltip>
       </div>
 
@@ -415,6 +415,10 @@ import FrameLinks from '@/components/canvas/components/Editor/FrameLinks'
 export default {
   components: { FrameLinks, DateFormat, VideoLinks, StreamMediaLinks },
   props: {
+    canvasId: {
+      type: String,
+      default: 'canvas-main'
+    },
     scrollLeft: {
       type: Number,
       default: 0
@@ -592,14 +596,17 @@ export default {
       return this.$store.state.curComponent.component
     },
     canvasWidth() {
-      return this.canvasStyleData.width * this.curCanvasScale.scalePointWidth
+      return this.canvasStyleData.width * this.curCanvasScaleSelf.scalePointWidth
     },
     showVertical() {
       return !['textSelectGridWidget', 'numberSelectGridWidget'].includes(this.curComponent.serviceName)
     },
+    curCanvasScaleSelf(){
+      return this.curCanvasScaleMap[this.canvasId]
+    },
     ...mapState([
       'curComponent',
-      'curCanvasScale',
+      'curCanvasScaleMap',
       'canvasStyleData',
       'curActiveTabInner'
     ])
@@ -675,7 +682,7 @@ export default {
     },
     getPositionX(x) {
       let ps = 0
-      ps = (x * this.curCanvasScale.scalePointWidth) + 60
+      ps = (x * this.curCanvasScaleSelf.scalePointWidth) + 60
       // 防止toolbar超出边界
       const xGap = ps + this.mainWidthOffset - this.canvasWidth
       if (xGap > 0) {
@@ -685,7 +692,7 @@ export default {
       }
     },
     getPositionY(y) {
-      return y * this.curCanvasScale.scalePointHeight
+      return y * this.curCanvasScaleSelf.scalePointHeight
     },
     styleChange() {
       this.$store.commit('canvasChange')

frontend/src/components/canvas/custom-component/UserView.vue

@@ -120,6 +120,66 @@
         @onDrillJump="drillJump"
       />
     </div>
+
+    <!--dialog-->
+    <!--视图详情-->
+    <el-dialog
+      :visible.sync="chartDetailsVisible"
+      width="80%"
+      class="dialog-css"
+      :destroy-on-close="true"
+      :show-close="true"
+      :append-to-body="true"
+      top="5vh"
+    >
+      <span
+        v-if="chartDetailsVisible"
+        style="position: absolute;right: 70px;top:15px"
+      >
+        <el-button
+          v-if="showChartInfoType==='enlarge' && showChartInfo && showChartInfo.type !== 'symbol-map'"
+          class="el-icon-picture-outline"
+          size="mini"
+          @click="exportViewImg"
+        >
+          {{ $t('chart.export_img') }}
+        </el-button>
+        <el-button
+          v-if="showChartInfoType==='details'"
+          size="mini"
+          @click="exportExcel"
+        >
+          <svg-icon
+            icon-class="ds-excel"
+            class="ds-icon-excel"
+          />{{ $t('chart.export') }}Excel
+        </el-button>
+      </span>
+      <user-view-dialog
+        v-if="chartDetailsVisible"
+        ref="userViewDialog"
+        :chart="showChartInfo"
+        :chart-table="showChartTableInfo"
+        :canvas-style-data="canvasStyleData"
+        :open-type="showChartInfoType"
+      />
+    </el-dialog>
+
+    <!--手机视图详情-->
+    <el-dialog
+      class="mobile-dialog-css"
+      :visible.sync="mobileChartDetailsVisible"
+      :fullscreen="true"
+      :append-to-body="true"
+      :destroy-on-close="true"
+    >
+      <UserViewMobileDialog
+        v-if="mobileChartDetailsVisible"
+        :canvas-style-data="canvasStyleData"
+        :chart="showChartInfo"
+        :chart-table="showChartTableInfo"
+      />
+    </el-dialog>
   </div>
 </template>
 
@@ -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) {

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,

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.left = (component.x - 1) * curCanvasScaleSelf.matrixStyleOriginWidth
-          component.style.top = (component.y - 1) * curCanvasScale.matrixStyleOriginHeight
+          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

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)
+}

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

frontend/src/components/widget/DeWidget/DeTabs.vue

@@ -63,6 +63,27 @@
             </el-dropdown-menu>
           </el-dropdown>
         </span>
+        <de-canvas-tab v-if="item.content && item.content.type==='canvas' && isEdit"
+                       :ref="'canvasTabRef-'+item.name"
+                       :parent-forbid="true"
+                       :canvas-style-data="canvasStyleData"
+                       :component-data="tabCanvasComponentData(item.name)"
+                       :canvas-id="element.id+'-'+item.name"
+                       class="tab_canvas"
+                       :class="moveActive ? 'canvas_move_in':''"
+        >
+        </de-canvas-tab>
+        <div style="width: 100%;height:100%">
+          <Preview
+            v-if="item.content && item.content.type==='canvas' && !isEdit"
+            :component-data="tabCanvasComponentData(item.name)"
+            :canvas-style-data="canvasStyleData"
+            :canvas-id="element.id+'-'+item.name"
+            :panel-info="panelInfo"
+            :in-screen="true"
+          />
+        </div>
+
         <component
           :is="item.content.component"
           v-if="item.content && item.content.type!=='view'"
@@ -195,10 +216,13 @@ import { chartCopy } from '@/api/chart/chart'
 import { buildFilterMap } from '@/utils/conditionUtil'
 import TabUseList from '@/views/panel/AssistComponent/tabUseList'
 import { findPanelElementInfo } from '@/api/panel/panel'
+import { getNowCanvasComponentData } from '@/components/canvas/utils/utils'
+import DeCanvasTab from '@/components/canvas/DeCanvas'
+import Preview from '@/components/canvas/components/Editor/Preview'
 
 export default {
-  name: 'DeTabls',
+  name: 'DeTabs',
-  components: { TabUseList, ViewSelect, DataeaseTabs },
+  components: { Preview, DeCanvasTab, TabUseList, ViewSelect, DataeaseTabs },
   props: {
     element: {
       type: Object,
@@ -236,9 +260,7 @@ export default {
   },
   data() {
     return {
-
       activeTabName: null,
-
       tabIndex: 1,
       dialogVisible: false,
       textarea: '',
@@ -250,6 +272,9 @@ export default {
     }
   },
   computed: {
+    moveActive() {
+      return this.tabMoveInActiveId && this.tabMoveInActiveId === this.element.id
+    },
     tabH() {
       return this.h - 50
     },
@@ -263,12 +288,12 @@ export default {
       const map = buildFilterMap(this.componentData)
       return map
     },
-
     ...mapState([
       'componentData',
       'curComponent',
       'mobileLayoutStatus',
-      'canvasStyleData'
+      'canvasStyleData',
+      'tabMoveInActiveId'
     ]),
     fontColor() {
       return this.element && this.element.style && this.element.style.headFontColor || 'none'
@@ -295,6 +320,7 @@ export default {
   watch: {
     activeTabName: {
       handler(newVal, oldVla) {
+        this.$store.commit('setTabActiveTabNameMap', { tabId: this.element.id, activeTabName: this.activeTabName })
         const _this = this
         _this.$nextTick(() => {
           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 {
 
 <style lang="scss" scoped>
 
-  .de-tabs-div {
+.de-tabs-div {
-    height: 100%;
+  height: 100%;
-    overflow: hidden;
+  overflow: hidden;
-  }
+}
 
-  .de-tabs-height {
+.de-tabs-height {
-    height: 100%;
+  height: 100%;
-  }
+}
 
-  .de-tab-content {
+.de-tab-content {
-    width: 100%;
+  width: 100%;
-    height: 100%;
+  height: 100%;
-  }
+}
+
+.tab_canvas {
+  height: calc(100% - 5px);
+  border: 2px dotted transparent;
+}
+
+.canvas_move_in {
+  border-color: blueviolet;
+}
 
 </style>

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) {
+    setCurCanvasScale(state, curCanvasScaleSelf) {
-      state.curCanvasScale = curCanvasScale
+      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 (top || top === 0) curComponent.style.top = (top / curCanvasScaleSelf.scalePointHeight) + 0.0000001
-        if (left || left === 0) curComponent.style.left = (left / curCanvasScale.scalePointWidth) + 0.0000001
+        if (left || left === 0) curComponent.style.left = (left / curCanvasScaleSelf.scalePointWidth) + 0.0000001
-        if (width || width === 0) curComponent.style.width = (width / curCanvasScale.scalePointWidth + 0.0000001)
+        if (width || width === 0) curComponent.style.width = (width / curCanvasScaleSelf.scalePointWidth + 0.0000001)
-        if (height || height === 0) curComponent.style.height = (height / curCanvasScale.scalePointHeight) + 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: {

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) {

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,

frontend/src/views/panel/edit/index.vue

@@ -161,32 +161,22 @@
           :modal-append-to-body="true"
         >
           <div style="width: 295px">
-            <filter-group v-show=" show &&showIndex===1" />
+            <filter-group :canvas-id="canvasId" v-show=" show &&showIndex===1"/>
-            <subject-setting v-show=" show &&showIndex===2" />
+            <subject-setting v-show=" show &&showIndex===2"/>
-            <assist-component v-show=" show &&showIndex===3" />
+            <assist-component v-show=" show &&showIndex===3"/>
           </div>
         </el-drawer>
         <!--PC端画布区域-->
-        <div
+        <de-canvas v-if="!previewVisible&&!mobileLayoutStatus"
-          v-if="!previewVisible&&!mobileLayoutStatus"
+                   class="canvas_main_content"
-          id="canvasInfo"
+                   ref="canvasMainRef"
-          class="this_canvas"
+                   :canvas-style-data="canvasStyleData"
-          :style="customCanvasStyle"
+                   :component-data="mainCanvasComponentData"
-          @drop="handleDrop"
+                   :canvas-id="canvasId"
-          @dragover="handleDragOver"
+                   :canvas-pid="'0'"
-          @mousedown="handleMouseDown"
-          @mouseup="deselectCurComponent"
-          @scroll="canvasScroll"
         >
-          <!-- 仪表板联动清除按钮-->
+          <canvas-opt-bar slot="optBar"/>
-          <canvas-opt-bar />
+        </de-canvas>
-          <Editor
-            ref="canvasEditor"
-            :matrix-count="pcMatrixCountBase"
-            :out-style="outStyle"
-            :scroll-top="scrollTop"
-          />
-        </div>
         <!--移动端画布区域 保持宽高比2.5-->
         <el-row
           v-if="mobileLayoutStatus"
@@ -200,13 +190,8 @@
               v-proportion="2.1"
               :style="customCanvasMobileStyle"
               class="this_mobile_canvas"
-              @drop="handleDrop"
-              @dragover="handleDragOver"
-              @mousedown="handleMouseDown"
-              @mouseup="deselectCurComponent"
-              @scroll="canvasScroll"
             >
-              <el-row class="this_mobile_canvas_top" />
+              <el-row class="this_mobile_canvas_top"/>
               <el-row class="this_mobile_canvas_inner_top">
                 {{ panelInfo.name }}
               </el-row>
@@ -215,15 +200,16 @@
                 class="this_mobile_canvas_main"
                 :style="mobileCanvasStyle"
               >
-                <Editor
+                <de-canvas v-if="!previewVisible&&mobileLayoutStatus"
-                  v-if="mobileEditorShow"
+                           ref="canvasMainRef"
-                  id="editorMobile"
+                           :canvas-style-data="canvasStyleData"
-                  ref="editorMobile"
+                           :component-data="mainCanvasComponentData"
-                  :matrix-count="mobileMatrixCount"
+                           :canvas-id="canvasId"
-                  :out-style="outStyle"
+                           :canvas-pid="'0'"
-                  :scroll-top="scrollTop"
+                           :mobile-layout-status="true"
-                  @canvasDragging="canvasDragging"
+                >
-                />
+                  <canvas-opt-bar slot="optBar"/>
+                </de-canvas>
               </el-row>
               <el-row class="this_mobile_canvas_inner_bottom">
                 <el-col :span="12">
@@ -252,7 +238,7 @@
                   />
                 </el-col>
               </el-row>
-              <el-row class="this_mobile_canvas_bottom" />
+              <el-row class="this_mobile_canvas_bottom"/>
             </div>
           </el-col>
           <el-col
@@ -260,7 +246,7 @@
             class="this_mobile_canvas_cell this_mobile_canvas_wait_cell"
             :style="mobileCanvasStyle"
           >
-            <component-wait />
+            <component-wait/>
           </el-col>
         </el-row>
       </de-main-container>
@@ -278,7 +264,7 @@
           />
         </div>
         <div v-if="showBatchViewToolsAside">
-          <chart-style-batch-set />
+          <chart-style-batch-set/>
         </div>
         <div v-if="!showViewToolsAside&&!showBatchViewToolsAside">
           <el-row style="height: 40px">
@@ -294,7 +280,8 @@
           </el-row>
           <el-row>
             <div class="view-selected-message-class">
-              <span style="font-size: 14px;margin-left: 10px;font-weight: bold;line-height: 20px">{{ $t('panel.select_view') }}</span>
+              <span style="font-size: 14px;margin-left: 10px;font-weight: bold;line-height: 20px"
+              >{{ $t('panel.select_view') }}</span>
             </div>
           </el-row>
         </div>
@@ -382,13 +369,6 @@
       @click="e => {e.target.value = '';}"
       @change="handleFileChange"
     >
-
-    <!--矩形样式组件-->
-    <TextAttr
-      v-if="showAttr"
-      :scroll-left="scrollLeft"
-      :scroll-top="scrollTop"
-    />
     <!--复用ChartGroup组件 不做显示-->
     <ChartGroup
       ref="chartGroup"
@@ -461,7 +441,8 @@
           />
         </el-col>
         <el-col :span="21">
-          <span style="font-size: 13px;margin-left: 10px;font-weight: bold;line-height: 20px">{{ $t('panel.panel_cache_use_tips') }}</span>
+          <span style="font-size: 13px;margin-left: 10px;font-weight: bold;line-height: 20px"
+          >{{ $t('panel.panel_cache_use_tips') }}</span>
         </el-col>
       </el-row>
       <div
@@ -471,12 +452,14 @@
         <el-button
           size="mini"
           @click="useCache(false)"
-        >{{ $t('panel.no') }}</el-button>
+        >{{ $t('panel.no') }}
+        </el-button>
         <el-button
           type="primary"
           size="mini"
           @click="useCache(true)"
-        >{{ $t('panel.yes') }}</el-button>
+        >{{ $t('panel.yes') }}
+        </el-button>
       </div>
     </el-dialog>
 
@@ -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('component-dialog-edit', this.editDialog)
-    bus.$off('button-dialog-edit', this.editButtonDialog)
+    // 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)
@@ -819,8 +814,8 @@ export default {
     },
     initEvents() {
       bus.$on('component-on-drag', this.componentOnDrag)
-      bus.$on('component-dialog-edit', this.editDialog)
+      // bus.$on('component-dialog-edit', this.editDialog)
-      bus.$on('button-dialog-edit', this.editButtonDialog)
+      // 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)
@@ -844,7 +839,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
         }
@@ -864,9 +861,7 @@ export default {
       }
       this.rightDrawOpen = param
       if (this.rightDrawOpen) {
-        setTimeout(() => {
+        this.$refs['canvasMainRef'].restore()
-          this.outStyle.width = this.outStyle.width + 0.000001
-        }, 0)
       }
     },
     init(panelId) {
@@ -940,11 +935,11 @@ export default {
     showPanel(type) {
       if (this.showIndex === -1 || this.showIndex === type) {
         this.$nextTick(() => {
-          if (this.show) {
+            if (this.show) {
-            this.showIndex === -1
+              this.showIndex === -1
+            }
+            this.show = !this.show
           }
-          this.show = !this.show
-        }
         )
       }
       this.showIndex = type
@@ -1014,15 +1009,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.left = (this.dragComponentInfo.x - 1) * this.curCanvasScaleSelf.matrixStyleOriginWidth
-          this.currentFilterCom.style.top = (this.dragComponentInfo.y - 1) * this.curCanvasScale.matrixStyleOriginHeight
+          this.currentFilterCom.style.top = (this.dragComponentInfo.y - 1) * this.curCanvasScaleSelf.matrixStyleOriginHeight
-          this.currentFilterCom.style.width = this.dragComponentInfo.sizex * this.curCanvasScale.matrixStyleOriginWidth
+          this.currentFilterCom.style.width = this.dragComponentInfo.sizex * this.curCanvasScaleSelf.matrixStyleOriginWidth
-          this.currentFilterCom.style.height = this.dragComponentInfo.sizey * this.curCanvasScale.matrixStyleOriginHeight
+          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
@@ -1053,10 +1050,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.left = (this.dragComponentInfo.x - 1) * this.curCanvasScaleSelf.matrixStyleOriginWidth
-        component.style.top = (this.dragComponentInfo.y - 1) * this.curCanvasScale.matrixStyleOriginHeight
+        component.style.top = (this.dragComponentInfo.y - 1) * this.curCanvasScaleSelf.matrixStyleOriginHeight
-        component.style.width = this.dragComponentInfo.sizex * this.curCanvasScale.matrixStyleOriginWidth
+        component.style.width = this.dragComponentInfo.sizex * this.curCanvasScaleSelf.matrixStyleOriginWidth
-        component.style.height = this.dragComponentInfo.sizey * this.curCanvasScale.matrixStyleOriginHeight
+        component.style.height = this.dragComponentInfo.sizey * this.curCanvasScaleSelf.matrixStyleOriginHeight
       } else {
         component.style.top = this.dropComponentInfo.shadowStyle.y
         component.style.left = this.dropComponentInfo.shadowStyle.x
@@ -1065,6 +1062,8 @@ export default {
       }
 
       component.id = newComponentId
+      component['canvasId'] = 'canvas-main'
+      component['canvasPid'] = '0'
       // 新拖入的组件矩阵状态 和仪表板当前的矩阵状态 保持一致
       component.auxiliaryMatrix = this.canvasStyleData.auxiliaryMatrix
       // 统一设置背景信息
@@ -1250,14 +1249,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
       }
@@ -1288,10 +1287,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.left = (component.x - 1) * this.curCanvasScaleSelf.matrixStyleOriginWidth
-        component.style.top = (component.y - 1) * this.curCanvasScale.matrixStyleOriginHeight
+        component.style.top = (component.y - 1) * this.curCanvasScaleSelf.matrixStyleOriginHeight
-        component.style.width = component.sizex * this.curCanvasScale.matrixStyleOriginWidth
+        component.style.width = component.sizex * this.curCanvasScaleSelf.matrixStyleOriginWidth
-        component.style.height = component.sizey * this.curCanvasScale.matrixStyleOriginHeight
+        component.style.height = component.sizey * this.curCanvasScaleSelf.matrixStyleOriginHeight
       } else {
         component.style.left = 0
         component.style.top = 0
@@ -1359,7 +1358,6 @@ export default {
         const touchOffset = 100
         const canvasInfoMobile = document.getElementById('canvasInfoMobile')
         // 获取子盒子（高度肯定比父盒子大）
-        // const editorMobile = document.getElementById('editorMobile')
         // 画布区顶部到浏览器顶部距离
         const canvasTop = canvasInfoMobile.offsetTop + 75
         // 画布区有高度
@@ -1394,266 +1392,271 @@ export default {
 </script>
 
 <style scoped>
-  .ms-aside-container {
+.ms-aside-container {
-    height: calc(100vh - 56px);
+  height: calc(100vh - 56px);
-    max-width: 60px;
+  max-width: 60px;
-    border: none;
+  border: none;
-    width: 60px;
+  width: 60px;
-  }
+}
 
-  .ms-main-container {
+.ms-main-container {
-    height: calc(100vh - 56px);
+  height: calc(100vh - 56px);
-  }
+}
 
-  .de-header {
+.de-header {
-    height: 56px !important;
+  height: 56px !important;
-    padding: 0px!important;
+  padding: 0px !important;
-    border-bottom: 1px solid #E6E6E6;
+  border-bottom: 1px solid #E6E6E6;
-    background-color: var(--SiderBG, white);
+  background-color: var(--SiderBG, white);
-  }
+}
 
-  .blackTheme .de-header {
+.blackTheme .de-header {
-    background-color: var(--SiderBG, white) !important;
+  background-color: var(--SiderBG, white) !important;
-    color: var(--TextActive);
+  color: var(--TextActive);
-  }
+}
 
-  .showLeftPanel {
+.showLeftPanel {
-    overflow: hidden;
+  overflow: hidden;
-    position: relative;
+  position: relative;
-    width: 100%;
+  width: 100%;
-  }
+}
 </style>
 
 <style lang="scss" scoped>
+.leftPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.leftPanel {
+  width: 100%;
+  max-width: 300px;
+  height: calc(100vh - 56px);
+  position: fixed;
+  top: 91px;
+  left: 60px;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: var(--SiderBG, #fff);
+  z-index: 1003;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
   .leftPanel-background {
-    position: fixed;
+    z-index: 1002;
-    top: 0;
+    opacity: 1;
-    left: 0;
+    width: 100%;
-    opacity: 0;
+    height: 100%;
-    transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
-    background: rgba(0, 0, 0, .2);
-    z-index: -1;
   }
 
   .leftPanel {
-    width: 100%;
+    transform: translate(0);
-    max-width: 300px;
-    height: calc(100vh - 56px);
-    position: fixed;
-    top: 91px;
-    left: 60px;
-    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
-    transition: all .25s cubic-bezier(.7, .3, .1, 1);
-    transform: translate(100%);
-    background: var(--SiderBG, #fff);
-    z-index: 1003;
   }
+}
 
-  .show {
+.mobile_canvas_main {
-    transition: all .3s cubic-bezier(.7, .3, .1, 1);
+  width: 80%;
+  height: 90%;
+  margin-left: 10%;
+  margin-top: 3%;
+}
 
-    .leftPanel-background {
+.this_mobile_canvas {
-      z-index: 1002;
+  border-radius: 30px;
-      opacity: 1;
+  min-width: 300px;
-      width: 100%;
+  max-width: 350px;
-      height: 100%;
+  min-height: 600px;
-    }
+  max-height: 700px;
+  overflow: hidden;
+  background-color: #000000;
+  background-size: 100% 100% !important;
+}
 
-    .leftPanel {
+.this_mobile_canvas_inner_top {
-      transform: translate(0);
+  vertical-align: middle;
+  text-align: center;
+  background-color: #f7f8fa;
+  height: 30px;
+  line-height: 30px;
+  font-size: 14px;
+  width: 100%;
+}
+
+.this_mobile_canvas_top {
+  height: 30px;
+  width: 100%;
+}
+
+.this_mobile_canvas_inner_bottom {
+  background-color: #f7f8fa;
+  line-height: 30px;
+  vertical-align: middle;
+  color: gray;
+  height: 30px;
+  width: 100%;
+}
+
+.this_mobile_canvas_bottom {
+  height: 30px;
+  width: 100%;
+}
+
+.this_mobile_canvas_main {
+  overflow-x: hidden;
+  overflow-y: auto;
+  height: calc(100% - 120px);;
+  background-color: #d7d9e3;
+  background-size: 100% 100% !important;
+}
+
+.this_mobile_canvas_cell {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.this_mobile_canvas_wait_cell {
+  background-size: 100% 100% !important;
+  border: 2px solid #9ea6b2
+}
+
+.canvas_main_content {
+  height: calc(100vh - 56px);
+}
+
+.this_canvas {
+  width: 100%;
+  height: calc(100vh - 56px);
+  overflow-x: hidden;
+  overflow-y: auto;
+  background-size: 100% 100% !important;
+}
+
+.el-main {
+  height: calc(100vh - 56px);
+  padding: 0 !important;
+  overflow: auto;
+  position: relative;
+}
+
+.el-main ::v-deep .el-drawer__wrapper {
+  width: 310px !important;
+}
+
+.el-main ::v-deep .el-drawer__body {
+  overflow-y: auto;
+}
+
+.button-show {
+  background-color: var(--ContentBG, #ebf2fe) !important;
+}
+
+.button-closed {
+  background-color: var(--SiderBG, #ffffff) !important;
+}
+
+.style-aside {
+  width: 250px;
+  max-width: 250px !important;
+  border: 1px solid var(--TableBorderColor, #E6E6E6);
+  padding: 10px;
+  transition: all 0.3s;
+
+}
+
+.placeholder {
+  font-size: 14px;
+  color: gray;
+}
+
+.show {
+  transform: translateX(0);
+}
+
+.hidden {
+  transform: translateX(100%);
+}
+
+.style-edit-dialog {
+  width: 300px !important;
+  height: 400px !important;
+
+  .el-dialog__header {
+    padding: 10px 20px !important;
+
+    .el-dialog__headerbtn {
+      top: 15px !important;
     }
   }
 
-  .mobile_canvas_main {
+  .el-dialog__body {
-    width: 80%;
+    padding: 1px 15px !important;
-    height: 90%;
-    margin-left: 10%;
-    margin-top: 3%;
   }
+}
 
-  .this_mobile_canvas {
+.style-hidden {
-    border-radius: 30px;
+  overflow-x: hidden;
-    min-width: 300px;
+}
-    max-width: 350px;
-    min-height: 600px;
-    max-height: 700px;
-    overflow: hidden;
-    background-color: #000000;
-    background-size: 100% 100% !important;
-  }
 
-  .this_mobile_canvas_inner_top {
+.button-text {
-    vertical-align: middle;
+  color: var(--TextActive);
-    text-align: center;
+}
-    background-color: #f7f8fa;
-    height: 30px;
-    line-height: 30px;
-    font-size: 14px;
-    width: 100%;
-  }
 
-  .this_mobile_canvas_top {
+.mobile-canvas {
-    height: 30px;
+  width: 300px;
-    width: 100%;
+  height: 600px;
-  }
+}
 
-  .this_mobile_canvas_inner_bottom {
+::-webkit-scrollbar {
-    background-color: #f7f8fa;
+  width: 2px !important;
-    line-height: 30px;
+  height: 2px !important;
-    vertical-align: middle;
+}
-    color: gray;
-    height: 30px;
-    width: 100%;
-  }
 
-  .this_mobile_canvas_bottom {
+.tools-window-main {
-    height: 30px;
+  width: 350px;
-    width: 100%;
+  background-color: #FFFFFF;
-  }
+  transition: 1s;
+}
 
-  .this_mobile_canvas_main {
+.tools-window-tabs {
-    overflow-x: hidden;
+  height: calc(100vh - 100px);
-    overflow-y: auto;
+  overflow: hidden;
-    height: calc(100% - 120px);;
+  overflow-y: auto;
-    background-color: #d7d9e3;
+  overflow-x: hidden;
-    background-size: 100% 100% !important;
+}
-  }
 
-  .this_mobile_canvas_cell {
+::v-deep .el-tabs__item {
-    height: 100%;
+  padding: 0 15px;
-    display: flex;
+}
-    align-items: center;
-    justify-content: center;
-  }
 
-  .this_mobile_canvas_wait_cell {
+.view-selected-message-class {
-    background-size: 100% 100% !important;
+  font-size: 12px;
-    border: 2px solid #9ea6b2
+  color: #9ea6b2;
-  }
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(100vh - 100px);
+}
 
-  .this_canvas {
+.dialog-css ::v-deep .el-dialog__title {
-    width: 100%;
+  font-size: 14px;
-    height: calc(100vh - 56px);
+}
-    overflow-x: hidden;
-    overflow-y: auto;
-    background-size: 100% 100% !important;
-  }
 
-  .el-main {
+.dialog-css ::v-deep .el-dialog__header {
-    height: calc(100vh - 56px);
+  padding: 20px 20px 0;
-    padding: 0 !important;
+}
-    overflow: auto;
-    position: relative;
-  }
 
-  .el-main ::v-deep .el-drawer__wrapper {
+.dialog-css ::v-deep .el-dialog__body {
-    width: 310px !important;
+  padding: 10px 20px 20px;
-  }
+}
-
-  .el-main ::v-deep .el-drawer__body {
-    overflow-y: auto;
-  }
-
-  .button-show {
-    background-color: var(--ContentBG, #ebf2fe) !important;
-  }
-
-  .button-closed {
-    background-color: var(--SiderBG, #ffffff) !important;
-  }
-
-  .style-aside {
-    width: 250px;
-    max-width: 250px !important;
-    border: 1px solid var(--TableBorderColor, #E6E6E6);
-    padding: 10px;
-    transition: all 0.3s;
-
-  }
-
-  .placeholder {
-    font-size: 14px;
-    color: gray;
-  }
-
-  .show {
-    transform: translateX(0);
-  }
-
-  .hidden {
-    transform: translateX(100%);
-  }
-
-  .style-edit-dialog {
-    width: 300px !important;
-    height: 400px !important;
-
-    .el-dialog__header {
-      padding: 10px 20px !important;
-
-      .el-dialog__headerbtn {
-        top: 15px !important;
-      }
-    }
-
-    .el-dialog__body {
-      padding: 1px 15px !important;
-    }
-  }
-
-  .style-hidden {
-    overflow-x: hidden;
-  }
-
-  .button-text {
-    color: var(--TextActive);
-  }
-
-  .mobile-canvas {
-    width: 300px;
-    height: 600px;
-  }
-
-  ::-webkit-scrollbar {
-    width: 2px !important;
-    height: 2px !important;
-  }
-
-  .tools-window-main {
-    width: 350px;
-    background-color: #FFFFFF;
-    transition: 1s;
-  }
-
-  .tools-window-tabs {
-    height: calc(100vh - 100px);
-    overflow: hidden;
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-
-  ::v-deep .el-tabs__item {
-    padding: 0 15px;
-  }
-  .view-selected-message-class {
-    font-size: 12px;
-    color: #9ea6b2;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: calc(100vh - 100px);
-  }
-
-  .dialog-css ::v-deep .el-dialog__title {
-    font-size: 14px;
-  }
-
-  .dialog-css ::v-deep .el-dialog__header {
-    padding: 20px 20px 0;
-  }
-
-  .dialog-css ::v-deep .el-dialog__body {
-    padding: 10px 20px 20px;
-  }
 </style>

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.sizex = Math.round(dragComponentInfo.style.width / this.curCanvasScaleSelf.matrixStyleOriginWidth)
-      dragComponentInfo.sizey = Math.round(dragComponentInfo.style.height / this.curCanvasScale.matrixStyleOriginHeight)
+      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 = {

frontend/src/views/panel/list/PanelViewShow.vue

@@ -205,7 +205,7 @@
           >
             <Preview
               v-if="showMainFlag"
-              :component-data="componentData"
+              :component-data="mainCanvasComponentData"
               :canvas-style-data="canvasStyleData"
               :active-tab="activeTab"
               :in-screen="!fullscreen"
@@ -289,7 +289,7 @@ import { queryAll } from '@/api/panel/pdfTemplate'
 import ShareHead from '@/views/panel/GrantAuth/ShareHead'
 import { export2AppCheck, initPanelData, updatePanelStatus } from '@/api/panel/panel'
 import { proxyInitPanelData } from '@/api/panel/shareProxy'
-import { dataURLToBlob } from '@/components/canvas/utils/utils'
+import { dataURLToBlob, getNowCanvasComponentData } from '@/components/canvas/utils/utils'
 import { findResourceAsBase64 } from '@/api/staticResource/staticResource'
 import PanelDetailInfo from '@/views/panel/list/common/PanelDetailInfo'
 
@@ -304,6 +304,7 @@ export default {
   },
   data() {
     return {
+      canvasId: 'canvas-main',
       showMain: true,
       pdfTemplateSelectedIndex: 0,
       pdfTemplateContent: '',
@@ -322,6 +323,9 @@ export default {
     }
   },
   computed: {
+    mainCanvasComponentData() {
+      return getNowCanvasComponentData(this.canvasId)
+    },
     imageWrapperStyle() {
       if (this.exporting) {
         return {