diff --git a/frontend/src/components/DeDrag/MoveInShadow.vue b/frontend/src/components/DeDrag/MoveInShadow.vue
deleted file mode 100644
index 68a8317fe9..0000000000
--- a/frontend/src/components/DeDrag/MoveInShadow.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<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>
diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue
index ffd15ea2ae..227387ac25 100644
--- a/frontend/src/components/DeDrag/index.vue
+++ b/frontend/src/components/DeDrag/index.vue
@@ -22,6 +22,7 @@
     @mouseleave="leave"
   >
     <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],
-          maxLeft: Math.floor((this.parentWidth - this.width - this.left) / this.grid[0]) * this.grid[0] + this.left,
+          // X方向余量向左右偏移this.parentWidthOffset 个余量，可以做到类型像移出canvas的效果，适配Tab的canvas组件
+          minLeft: this.left % this.grid[0] - this.parentWidthOffset,
+          maxLeft: (Math.floor((this.parentWidth - this.width - this.left) / this.grid[0]) * this.grid[0] + this.left) + this.parentWidthOffset,
           minRight: this.right % this.grid[0],
           maxRight: Math.floor((this.parentWidth - this.width - this.right) / this.grid[0]) * this.grid[0] + this.right,
           minTop: this.top % this.grid[1],
@@ -1106,7 +1141,8 @@ export default {
       const bounds = this.bounds
       const mouseClickPosition = this.mouseClickPosition
       // 水平移动
-      const tmpDeltaX = axis && axis !== 'y' ? mouseClickPosition.mouseX - (e.touches ? e.touches[0].pageX : e.pageX) : 0
+      const mX = e.touches ? e.touches[0].pageX : e.pageX
+      const tmpDeltaX = axis && axis !== 'y' ? mouseClickPosition.mouseX - mX : 0
       // 垂直移动
       const mY = e.touches ? e.touches[0].pageY : e.pageY
       const tmpDeltaY = axis && axis !== 'x' ? mouseClickPosition.mouseY - mY : 0
@@ -1132,7 +1168,15 @@ export default {
       if (this.element.auxiliaryMatrix) {
         this.$emit('onDragging', e, this.element)
       }
-
+      if ((-left > (this.parentWidthOffset - 10) || left - bounds.maxRight > (this.parentWidthOffset - 10)) && this.canvasId !== 'canvas-main') {
+        this.contentDisplay = false
+        this.$store.commit('setMousePointShadowMap', { mouseX: mX, mouseY: mY, width: this.width, height: this.height })
+        this.$store.commit('setTabMoveOutComponentId', this.element.id)
+      } else {
+        this.$store.commit('setTabMoveOutComponentId', null)
+        this.contentDisplay = true
+      }
+      await this.tabMoveInCheck()
       // private 记录当前样式
       this.recordCurStyle()
     },
@@ -1365,9 +1409,6 @@ export default {
         this.resizing = false
         this.conflictCheck()
         this.$emit('refLineParams', refLine)
-        // this.$emit('resizestop', this.left, this.top, this.width, this.height)
-        // private
-        // this.$emit('resizestop')
       }
       if (this.dragging) {
         this.dragging = false
@@ -1384,9 +1425,14 @@ export default {
 
       // 如果辅助设计 需要最后调整矩阵
       if (this.element.auxiliaryMatrix) {
-        // this.recordMatrixCurStyle()
+        const _this = this
+        const historyTabMoveInActiveId = this.tabMoveInActiveId
+        const historyTabMoveOutComponentId = this.tabMoveOutComponentId
         setTimeout(() => {
-          this.recordMatrixCurShadowStyle()
+          // 移入组件移入Tab时 不需要计算根据阴影面积重置大小
+          if (!historyTabMoveInActiveId && !historyTabMoveOutComponentId) {
+            this.recordMatrixCurShadowStyle(this.curCanvasScaleSelf)
+          }
           this.hasMove && this.$store.commit('recordSnapshot', 'handleUp')
           // 记录snapshot后 移动已记录设置为false
           this.hasMove = false
@@ -1404,14 +1450,78 @@ export default {
 
       // 挤占式画布设计 handleUp
       this.element.auxiliaryMatrix && this.$emit('onHandleUp', e)
+      this.componentCanvasChange()
+      // 还原Tab画布状态
+      this.$store.commit('clearTabMoveInfo')
+      // 松开鼠标时 如果当前内容被隐藏，则需要进行显示出来
+      if (!this.contentDisplay) {
+        this.contentDisplay = true
+      }
     },
-    // 新增方法 ↓↓↓
-    // 设置属性
+    // 如果Tab移入状态还是Active 状态 则将当前的组件 放置到tab页中
+    componentCanvasChange() {
+      // 主画布移入Tab画布
+      if (this.tabMoveInActiveId) {
+        //从当前画布移除
+        this.$emit('amRemoveItem')
+        this.element.canvasPid = this.element.canvasId
+        //Tab内部的画布ID 为 tab组件id + '-' + tabActiveName
+        const targetCanvasId = this.tabMoveInActiveId + '-' + this.tabActiveTabNameMap[this.tabMoveInActiveId]
+        const targetCanvasScale = this.curCanvasScaleMap[targetCanvasId]
+        if (this.element.auxiliaryMatrix) {
+          this.element.x = 1
+          this.element.y = 108
+          this.element.sizex = Math.round(this.element.sizex * this.curCanvasScaleSelf.matrixStyleWidth / targetCanvasScale.matrixStyleWidth)
+          this.element.sizey = Math.round(this.element.sizey * this.curCanvasScaleSelf.matrixStyleHeight / targetCanvasScale.matrixStyleHeight)
+          this.element.style.width = this.element.sizex * targetCanvasScale.matrixStyleOriginWidth
+          this.element.style.height = this.element.sizey * targetCanvasScale.matrixStyleOriginHeight
+          this.element.style.left = 0
+          this.element.style.top = (this.element.y - 1) * targetCanvasScale.matrixStyleOriginHeight
+        } else {
+          this.element.style.left = 0
+          this.element.style.top = 0
+          this.element.style.width = this.element.style.width * this.curCanvasScaleSelf.matrixStyleWidth / targetCanvasScale.matrixStyleWidth
+          this.element.style.height = this.element.style.height * this.curCanvasScaleSelf.matrixStyleHeight / targetCanvasScale.matrixStyleHeight
+        }
+        this.element.canvasId = targetCanvasId
+      }
+      // Tab 画布 移入主画布
+      if (this.tabMoveOutComponentId) {
+        //从当前画布移除
+        this.$emit('amRemoveItem')
+        this.element.canvasPid = 0
+        this.element.canvasId = 'canvas-main'
+        //Tab内部的画布ID 为 tab组件id + '-' + tabActiveName
+        const targetCanvasScale = this.curCanvasScaleMap['canvas-main']
+        // 按照阴影位置定位
+        this.element.style.left = (this.mousePointShadowMap.mouseX - (this.mousePointShadowMap.width)) / targetCanvasScale.scalePointWidth
+        this.element.style.top = (this.mousePointShadowMap.mouseY - (this.mousePointShadowMap.height / 2))/ targetCanvasScale.scalePointHeight
+        this.element.style.width = this.mousePointShadowMap.width/ targetCanvasScale.scalePointWidth
+        this.element.style.height = this.mousePointShadowMap.height/ targetCanvasScale.scalePointHeight
+
+        if (this.element.auxiliaryMatrix) {
+          this.element.x = Math.round(this.element.style.left / targetCanvasScale.matrixStyleOriginWidth) + 1
+          this.element.y = Math.round(this.element.style.top / targetCanvasScale.matrixStyleOriginHeight) + 1
+          this.element.sizex = Math.round(this.element.style.width /targetCanvasScale.matrixStyleOriginWidth)
+          this.element.sizey = Math.round(this.element.style.height / targetCanvasScale.matrixStyleOriginHeight)
+          this.recordMatrixCurShadowStyle(targetCanvasScale)
+        }
+      }
+
+    },
+
+    // 设置属性(属性跟随所属canvas component类型 要做出改变)
     settingAttribute() {
       // 设置冲突检测
       this.$el.setAttribute('data-is-check', `${this.isConflictCheck}`)
       // 设置对齐元素
       this.$el.setAttribute('data-is-snap', `${this.snap}`)
+      // 设置Tab移入检测
+      this.$el.setAttribute('tab-is-check', `${this.isTabMoveCheck}`)
+      // 设置组件类型
+      this.$el.setAttribute('component-type', `${this.element.component}`)
+      // 设置组件ID
+      this.$el.setAttribute('component-id', `${this.element.id}`)
     },
     // 冲突检测
     conflictCheck() {
@@ -1688,10 +1798,10 @@ export default {
 
     // 记录当前样式 矩阵处理
     recordMatrixCurStyle() {
-      const left = Math.round(this.left / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
-      const top = Math.round(this.top / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
-      const width = Math.round(this.width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
-      const height = Math.round(this.height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
+      const left = Math.round(this.left / this.curCanvasScaleSelf.matrixStyleWidth) * this.curCanvasScaleSelf.matrixStyleWidth
+      const top = Math.round(this.top / this.curCanvasScaleSelf.matrixStyleHeight) * this.curCanvasScaleSelf.matrixStyleHeight
+      const width = Math.round(this.width / this.curCanvasScaleSelf.matrixStyleWidth) * this.curCanvasScaleSelf.matrixStyleWidth
+      const height = Math.round(this.height / this.curCanvasScaleSelf.matrixStyleHeight) * this.curCanvasScaleSelf.matrixStyleHeight
       const style = {
         ...this.defaultStyle
       }
@@ -1705,23 +1815,13 @@ export default {
 
       // resize
       self.$emit('resizeView')
-      // const self = this
-      // setTimeout(function() {
-      //   self.$emit('resizeView')
-      // }, 200)
     },
     // 记录当前样式 跟随阴影位置 矩阵处理
-    recordMatrixCurShadowStyle() {
-      const left = (this.element.x - 1) * this.curCanvasScale.matrixStyleWidth
-      const top = (this.element.y - 1) * this.curCanvasScale.matrixStyleHeight
-      const width = this.element.sizex * this.curCanvasScale.matrixStyleWidth
-      const height = this.element.sizey * this.curCanvasScale.matrixStyleHeight
-      // const t1 = Math.round(this.width / this.curCanvasScale.matrixStyleWidth)
-      // const left = Math.round(this.left / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
-      // const top = Math.round(this.top / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
-      // const width = t1 * this.curCanvasScale.matrixStyleWidth
-      // const height = Math.round(this.height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
-
+    recordMatrixCurShadowStyle(scaleSelf) {
+      const left = (this.element.x - 1) * scaleSelf.matrixStyleWidth
+      const top = (this.element.y - 1) * scaleSelf.matrixStyleHeight
+      const width = this.element.sizex * scaleSelf.matrixStyleWidth
+      const height = this.element.sizey * scaleSelf.matrixStyleHeight
       const style = {
         ...this.defaultStyle
       }
@@ -1730,16 +1830,10 @@ export default {
       style.width = width
       style.height = height
       style.rotate = this.rotate
-      // this.hasMove = true
-
       this.$store.commit('setShapeStyle', style)
-
       // resize
       const self = this
       self.$emit('resizeView')
-      // setTimeout(function() {
-      //   self.$emit('resizeView')
-      // }, 200)
     },
     mountedFunction() {
       // private 冲突检测 和水平设计值保持一致
@@ -1821,6 +1915,72 @@ export default {
     // 跳转设置
     boardSet() {
       this.$emit('boardSet')
+    },
+    // tab移入检测
+    async tabMoveInCheck() {
+      const top = this.top
+      const left = this.left
+      const width = this.width
+      const height = this.height
+      // tab 移入检测开启
+      if (this.isTabMoveCheck) {
+        const nodes = this.$el.parentNode.childNodes // 获取当前父节点下所有子节点
+        for (const item of nodes) {
+          if (
+            item.className !== undefined &&
+            !item.className.split(' ').includes(this.classNameActive) &&
+            item.getAttribute('tab-is-check') !== null &&
+            item.getAttribute('tab-is-check') !== 'false' &&
+            item.getAttribute('component-type') === 'de-tabs'
+          ) {
+            const tw = item.offsetWidth
+            const th = item.offsetHeight
+            // 正则获取left与right
+            const [tl, tt] = this.formatTransformVal(item.style.transform)
+            // 碰撞有效区域检查
+            const collisionT = tt + this.tabMoveInYOffset
+            const collisionL = tl + (this.curCanvasScaleSelf.matrixStyleWidth / 2) - width
+            const collisionW = tw + 2 * width - this.curCanvasScaleSelf.matrixStyleWidth
+            const collisionH = th + height - this.tabMoveInYOffset
+
+            // 左上角靠近左上角区域
+            const tfAndTf = collisionT <= top && collisionL <= left
+            // 左下角靠近左下角区域
+            const bfAndBf = (collisionT + collisionH) >= (top + height) && collisionL <= left
+            // 右上角靠近右上角区域
+            const trAndTr = collisionT <= top && (collisionL + collisionW) >= (left + width)
+            // 右下角靠近右下角区域
+            const brAndBr = (collisionT + collisionH) >= (top + height) && (collisionL + collisionW) >= (left + width)
+            if (tfAndTf && bfAndBf && trAndTr && brAndBr) {
+              this.$store.commit('setTabCollisionActiveId', item.getAttribute('component-id'))
+            } else {
+              this.$store.commit('setTabCollisionActiveId', null)
+            }
+
+            // 移入有效区域检查
+            // 碰撞有效区域检查
+            const activeT = tt + this.tabMoveInYOffset
+            const activeL = tl + (this.curCanvasScaleSelf.matrixStyleWidth * 10) - width
+            const activeW = tw + 2 * width - this.curCanvasScaleSelf.matrixStyleWidth * 20
+            const activeH = th + height - 2 * this.tabMoveInYOffset
+
+            // 左上角靠近左上角区域
+            const activeTfAndTf = activeT <= top && activeL <= left
+            // 左下角靠近左下角区域
+            const activeBfAndBf = (activeT + activeH) >= (top + height) && activeL <= left
+            // 右上角靠近右上角区域
+            const activeTrAndTr = activeT <= top && (activeL + activeW) >= (left + width)
+            // 右下角靠近右下角区域
+            const activeBrAndBr = (activeT + activeH) >= (top + height) && (activeL + activeW) >= (left + width)
+            if (activeTfAndTf && activeBfAndBf && activeTrAndTr && activeBrAndBr) {
+              this.$store.commit('setTabMoveInActiveId', item.getAttribute('component-id'))
+            } else {
+              this.$store.commit('setTabMoveInActiveId', null)
+            }
+
+          }
+        }
+      }
     }
   }
 
diff --git a/frontend/src/components/DeDrag/pointShadow.vue b/frontend/src/components/DeDrag/pointShadow.vue
new file mode 100644
index 0000000000..2a6591b714
--- /dev/null
+++ b/frontend/src/components/DeDrag/pointShadow.vue
@@ -0,0 +1,111 @@
+<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>
diff --git a/frontend/src/components/DeDrag/shadow.vue b/frontend/src/components/DeDrag/shadow.vue
index 9550c94f2f..26434ff922 100644
--- a/frontend/src/components/DeDrag/shadow.vue
+++ b/frontend/src/components/DeDrag/shadow.vue
@@ -10,8 +10,17 @@
 import { mapState } from 'vuex'
 export default {
   replace: true,
-  name: 'ShadowDe',
+  name: 'Shadow',
+  props: {
+    canvasId: {
+      type: String,
+      required: true
+    }
+  },
   computed: {
+    curCanvasScaleSelf(){
+      return this.curCanvasScaleMap[this.canvasId]
+    },
     styleInfo() {
       let left = 0
       let top = 0
@@ -21,11 +30,11 @@ export default {
       if (this.dragComponentInfo) {
         // 组件移入
         if (this.dragComponentInfo.auxiliaryMatrix) {
-          left = (this.dragComponentInfo.x - 1) * this.curCanvasScale.matrixStyleWidth
-          top = (this.dragComponentInfo.y - 1) * this.curCanvasScale.matrixStyleHeight
+          left = (this.dragComponentInfo.x - 1) * this.curCanvasScaleSelf.matrixStyleWidth
+          top = (this.dragComponentInfo.y - 1) * this.curCanvasScaleSelf.matrixStyleHeight
 
-          width = this.dragComponentInfo.sizex * this.curCanvasScale.matrixStyleWidth
-          height = this.dragComponentInfo.sizey * this.curCanvasScale.matrixStyleHeight
+          width = this.dragComponentInfo.sizex * this.curCanvasScaleSelf.matrixStyleWidth
+          height = this.dragComponentInfo.sizey * this.curCanvasScaleSelf.matrixStyleHeight
           transition = 0.1
         } else {
           left = this.dragComponentInfo.shadowStyle.x
@@ -34,14 +43,10 @@ export default {
           height = this.dragComponentInfo.style.height
         }
       } else {
-        // temp 临时测试
-        // left = this.curComponent.style.left * this.curCanvasScale.scaleWidth / 100
-        // top = this.curComponent.style.top * this.curCanvasScale.scaleHeight / 100
-        left = (this.curComponent.x - 1) * this.curCanvasScale.matrixStyleWidth
-        top = (this.curComponent.y - 1) * this.curCanvasScale.matrixStyleHeight
-
-        width = this.curComponent.style.width * this.curCanvasScale.scalePointWidth
-        height = this.curComponent.style.height * this.curCanvasScale.scalePointHeight
+        left = (this.curComponent.x - 1) * this.curCanvasScaleSelf.matrixStyleWidth
+        top = (this.curComponent.y - 1) * this.curCanvasScaleSelf.matrixStyleHeight
+        width = this.curComponent.style.width * this.curCanvasScaleSelf.scalePointWidth
+        height = this.curComponent.style.height * this.curCanvasScaleSelf.scalePointHeight
         if (this.curComponent.optStatus.dragging) {
           transition = 0.1
         }
@@ -70,13 +75,13 @@ export default {
       return this.$store.state.dragComponentInfo
     },
     canvasWidth() {
-      const scaleWidth = this.curCanvasScale.scaleWidth / 100
+      const scaleWidth = this.curCanvasScaleSelf.scaleWidth / 100
       return this.canvasStyleData.width * scaleWidth
     },
     ...mapState([
       'curComponent',
       'editor',
-      'curCanvasScale',
+      'curCanvasScaleMap',
       'canvasStyleData',
       'linkageSettingStatus'
     ])
@@ -89,10 +94,10 @@ export default {
       this.dragComponentInfo.shadowStyle.y = this.scaleH(y)
     },
     scaleH(h) {
-      return h / this.curCanvasScale.scalePointHeight
+      return h / this.curCanvasScaleSelf.scalePointHeight
     },
     scaleW(w) {
-      return w / this.curCanvasScale.scalePointWidth
+      return w / this.curCanvasScaleSelf.scalePointWidth
     }
   }
 
diff --git a/frontend/src/components/canvas/DeCanvas.vue b/frontend/src/components/canvas/DeCanvas.vue
new file mode 100644
index 0000000000..30dd77c57e
--- /dev/null
+++ b/frontend/src/components/canvas/DeCanvas.vue
@@ -0,0 +1,587 @@
+<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>
diff --git a/frontend/src/components/canvas/components/Editor/DateFormat.vue b/frontend/src/components/canvas/components/Editor/DateFormat.vue
index c827ffbb03..af04e16a9a 100644
--- a/frontend/src/components/canvas/components/Editor/DateFormat.vue
+++ b/frontend/src/components/canvas/components/Editor/DateFormat.vue
@@ -84,11 +84,6 @@
           </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.sizex = Math.round(this.curComponent.style.width / this.curCanvasScale.matrixStyleOriginWidth)
+        this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScaleSelf.matrixStyleOriginHeight)
       }
     }
   }
diff --git a/frontend/src/components/canvas/components/Editor/DeEditor.vue b/frontend/src/components/canvas/components/Editor/DeEditor.vue
new file mode 100644
index 0000000000..04f8c99dec
--- /dev/null
+++ b/frontend/src/components/canvas/components/Editor/DeEditor.vue
@@ -0,0 +1,1818 @@
+<template>
+  <div
+    v-if="editShow"
+    id="editor"
+    class="editor parent_transform"
+    :class="[
+      {
+        ['edit']: isEdit
+      }
+    ]"
+    :style="editStyle"
+    @mousedown="handleMouseDown"
+    @scroll="canvasScroll"
+  >
+    <!-- 网格线 -->
+    <Grid v-if="showGrid" :matrix-style="matrixStyle"/>
+    <PGrid v-if="psDebug" :position-box="positionBoxInfoArray" :matrix-style="matrixStyle"/>
+    <!--页面组件列表展示-->
+    <de-drag
+      v-for="(item, index) in componentData"
+      ref="deDragRef"
+      :key="item.id"
+      :class="{item:true,moveAnimation:moveAnimate,movingItem:item.isPlayer}"
+      :index="index"
+      :canvas-id="canvasId"
+      :x="getShapeStyleIntDeDrag(item.style,'left')"
+      :y="getShapeStyleIntDeDrag(item.style,'top')"
+      :w="getShapeStyleIntDeDrag(item.style,'width',item)"
+      :h="getShapeStyleIntDeDrag(item.style,'height')"
+      :r="item.style.rotate"
+      :parent="parentForbid"
+      :rotatable="rotatable"
+      :default-style="getShapeStyleInt(item.style)"
+      :active="item === curComponent"
+      :element="item"
+      class-name-active="de-drag-active"
+      :snap="true"
+      :snap-tolerance="2"
+      :change-style="customStyle"
+      :draggable="deDraggable"
+      :resizable="deResizable"
+      :linkage-active="linkageActiveCheck(item)"
+      :batch-opt-active="batchOptActiveCheck(item)"
+      @refLineParams="getRefLineParams"
+      @showViewDetails="showViewDetails($event,index)"
+      @resizeView="resizeView(index,item)"
+      @onResizeStart="startResize"
+      @onDragStart="onStartMove"
+      @onHandleUp="onMouseUp"
+      @onDragging="onDragging"
+      @onResizing="onResizing"
+      @elementMouseDown="containerMouseDown"
+      @amRemoveItem="removeItem(item._dragId)"
+      @amAddItem="addItemBox(item)"
+      @canvasDragging="canvasDragging"
+      @editComponent="editComponent(index,item)"
+    >
+      <de-out-widget
+        v-if="renderOk && item.type==='custom'"
+        :id="'component' + item.id"
+        ref="wrapperChild"
+        class="component"
+        :style="getComponentStyleDefault(item.style)"
+        :prop-value="item.propValue"
+        :element="item"
+        :is-relation="searchButtonInfo && searchButtonInfo.buttonExist && searchButtonInfo.relationFilterIds.includes(item.id)"
+        :out-style="getShapeStyleInt(item.style)"
+        :active="item === curComponent"
+        :h="getShapeStyleIntDeDrag(item.style,'height')"
+      />
+      <component
+        :is="item.component"
+        v-else-if="renderOk && item.type==='other'"
+        :id="'component' + item.id"
+        ref="wrapperChild"
+        class="component"
+        :style="getComponentStyle(item.style)"
+        :prop-value="item.propValue"
+        :element="item"
+        :out-style="getShapeStyleInt(item.style)"
+        :active="item === curComponent"
+      />
+      <component
+        :is="item.component"
+        v-else-if="renderOk"
+        :id="'component' + item.id"
+        ref="wrapperChild"
+        class="component"
+        :filters="filterMap[item.propValue && item.propValue.viewId]"
+        :style="getComponentStyleDefault(item.style)"
+        :prop-value="item.propValue"
+        :element="item"
+        :out-style="getShapeStyleInt(item.style)"
+        :active="item === curComponent"
+        :edit-mode="'edit'"
+        :h="getShapeStyleIntDeDrag(item.style,'height')"
+        :canvas-style-data="canvasStyleData"
+        @input="handleInput"
+        @trigger-plugin-edit="pluginEditHandler"
+      />
+    </de-drag>
+    <!--拖拽阴影部分-->
+    <drag-shadow :canvas-id="canvasId" v-if="shadowShow && dragShadowShow"/>
+    <!--切换canvas 拖拽阴影部分-->
+    <point-shadow :canvas-id="canvasId" v-if="pointShadowShow"></point-shadow>
+    <!-- 右击菜单 -->
+    <ContextMenu/>
+
+    <!-- 对齐标线 -->
+    <span
+      v-for="(item, index) in vLine"
+      v-show="item.display"
+      :key="'v_'+index"
+      class="ref-line v-line"
+      :style="{
+        left: item.position,
+        top: item.origin,
+        height: item.lineLength,
+      }"
+    />
+    <span
+      v-for="(item, index) in hLine"
+      :key="'h_'+index"
+      class="ref-line h-line"
+      :style="{ top: item.position, left: item.origin, width: item.lineLength }"
+    />
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import Shape from './Shape'
+import DeDrag from '@/components/DeDrag'
+
+// eslint-disable-next-line no-unused-vars
+import { getStyle, getComponentRotatedStyle } from '@/components/canvas/utils/style'
+import { _$, imgUrlTrans } from '@/components/canvas/utils/utils'
+import ContextMenu from './ContextMenu'
+import MarkLine from './MarkLine'
+import Area from './Area'
+import eventBus from '@/components/canvas/utils/eventBus'
+import Grid from './Grid'
+import PGrid from './PGrid'
+import { changeStyleWithScale } from '@/components/canvas/utils/translate'
+import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'
+import DeOutWidget from '@/components/dataease/DeOutWidget'
+import DragShadow from '@/components/DeDrag/shadow'
+import bus from '@/utils/bus'
+import LinkJumpSet from '@/views/panel/LinkJumpSet'
+import { buildFilterMap, buildViewKeyMap, formatCondition, valueValid, viewIdMatch } from '@/utils/conditionUtil'
+// 挤占式画布
+import _ from 'lodash'
+import _jq from 'jquery'
+import Background from '@/views/background/index'
+import PointShadow from '@/components/DeDrag/pointShadow'
+
+// let positionBox = []
+// let coordinates = [] // 坐标点集合
+
+let lastTask
+let isOverlay = false // 是否正在交换位置
+let moveTime = 80 // 移动动画时间
+
+let itemMaxY = 0
+let itemMaxX = 0
+
+function debounce(func, time) {
+  if (!isOverlay) {
+    (function(t) {
+      isOverlay = true
+      setTimeout(function() {
+        t()
+        setTimeout(function() {
+          isOverlay = false
+          if (lastTask !== undefined) {
+            debounce(lastTask, time)
+          }
+        }, moveTime)
+      }, time)
+    })(func)
+    lastTask = undefined
+  } else {
+    lastTask = func
+  }
+}
+
+function scrollScreen(e) {
+  if (e.clientY + 50 >= window.innerHeight) {
+    const body = _jq(document.body)
+    body.scrollTop(body.scrollTop() + 20)
+  } else if (e.clientY <= 150) {
+    const body = _jq(document.body)
+    body.scrollTop(body.scrollTop() - 20)
+  }
+}
+
+/**
+ * 重置位置盒子
+ *
+ */
+function resetPositionBox(_this) {
+  // 根据当前容器的宽度来决定多少列
+  itemMaxX = this.maxCell
+  const rows = this.matrixCount.y // 初始100行，后面根据需求会自动增加
+  for (let i = 0; i < rows; i++) {
+    const row = []
+    for (let j = 0; j < this.maxCell; j++) {
+      row.push({
+        el: false
+      })
+    }
+    this.positionBox.push(row)
+  }
+}
+
+/**
+ * 填充位置盒子
+ *
+ * @param {any} item
+ */
+function addItemToPositionBox(item) {
+  try {
+    const vm = this
+    const pb = vm.positionBox
+    if (item.x <= 0 || item.y <= 0) return
+
+    for (let i = item.x - 1; i < item.x - 1 + item.sizex; i++) {
+      for (let j = item.y - 1; j < item.y - 1 + item.sizey; j++) {
+        if (pb[j][i]) {
+          pb[j][i].el = item
+        }
+      }
+    }
+  } catch (e) {
+    // igonre
+  }
+}
+
+function fillPositionBox(maxY) {
+  const vm = this
+  const pb = vm.positionBox
+  maxY += 1
+  for (let j = 0; j < maxY; j++) {
+    if (pb[j] === undefined) {
+      const row = []
+      for (let i = 0; i < itemMaxX; i++) {
+        row.push({
+          el: false
+        })
+      }
+      pb.push(row)
+    }
+  }
+  itemMaxY = maxY
+}
+
+function removeItemFromPositionBox(item) {
+  const vm = this
+  const pb = vm.positionBox
+  if (!item || item.x <= 0 || item.y <= 0) return
+  for (let i = item.x - 1; i < item.x - 1 + item.sizex; i++) {
+    for (let j = item.y - 1; j < item.y - 1 + item.sizey; j++) {
+      if (pb[j][i]) {
+        pb[j][i].el = false
+      }
+    }
+  }
+}
+
+/**
+ * 重新计算宽度，使最小单元格能占满整个容器
+ *
+ */
+function recalcCellWidth() {
+  this.maxCell = this.matrixCount.x
+}
+
+function init() {
+  this.cellWidth = this.baseWidth + this.baseMarginLeft
+  this.cellHeight = this.baseHeight + this.baseMarginTop
+  this.yourList = this.getList()
+
+  this.positionBox = []
+  this.coordinates = [] // 坐标点集合
+
+  lastTask = undefined
+  isOverlay = false // 是否正在交换位置
+  moveTime = 80 // 移动动画时间
+
+  itemMaxY = 0
+  itemMaxX = 0
+
+  const vm = this
+  recalcCellWidth.call(this)
+  resetPositionBox.call(this)
+  initPosition(this)
+  let i = 0
+  const timeid = setInterval(function() {
+    if (i >= vm.yourList.length) {
+      clearInterval(timeid)
+      vm.$nextTick(function() {
+        vm.moveAnimate = true
+      })
+    } else {
+      const item = vm.yourList[i]
+      addItem.call(vm, item, i)
+      i++
+    }
+  }, 1)
+  vm.renderOk = true
+}
+
+function resizePlayer(item, newSize) {
+  const vm = this
+  removeItemFromPositionBox.call(vm, item)
+
+  const belowItems = findBelowItems.call(this, item)
+  _.forEach(belowItems, function(upItem) {
+    const canGoUpRows = canItemGoUp.call(vm, upItem)
+    if (canGoUpRows > 0) {
+      moveItemUp.call(vm, upItem, canGoUpRows)
+    }
+  })
+
+  item.sizex = newSize.sizex
+  item.sizey = newSize.sizey
+
+  // 还原到像素
+  item.style.width = item.sizex * this.matrixStyle.originWidth
+  item.style.height = item.sizey * this.matrixStyle.originHeight
+
+  if (item.sizex + item.x - 1 > itemMaxX) {
+    item.sizex = itemMaxX - item.x + 1
+  }
+
+  if (item.sizey + item.y > itemMaxY) {
+    fillPositionBox.call(this, item.y + item.sizey)
+  }
+
+  emptyTargetCell.call(this, item)
+  addItemToPositionBox.call(this, item)
+  changeItemCoord.call(this, item)
+  const canGoUpRows = canItemGoUp.call(this, item)
+  if (canGoUpRows > 0) {
+    moveItemUp.call(this, item, canGoUpRows)
+  }
+}
+
+/**
+ * 检查移动的位置，如果不合法，会自动修改
+ *
+ * @param {any} item
+ * @param {any} position
+ */
+function checkItemPosition(item, position) {
+  position = position || {}
+  position.x = position.x || item.x
+  position.y = position.y || item.y
+
+  // 检查位置
+  if (item.x < 1) {
+    item.x = 1
+  }
+
+  // 检查大小
+  if (item.sizex > itemMaxX) {
+    item.sizex = itemMaxX
+  }
+
+  if (item.sizex < 1) {
+    item.sizex = 1
+  }
+
+  if (item.x + item.sizex - 1 > itemMaxX) {
+    item.x = itemMaxX - item.sizex + 1
+    if (item.x < 1) {
+      item.x = 1
+    }
+  }
+
+  if (item.y < 1) {
+    item.y = 1
+  }
+
+  if (item.sizey < 1) {
+    item.sizey = 1
+  }
+
+  if (item.y + item.sizey > itemMaxY - 1) {
+    fillPositionBox.call(this, item.y + item.sizey - 1)
+  }
+}
+
+/**
+ * 移动正在拖动的元素
+ *
+ * @param {any} item
+ * @param {any} position
+ */
+function movePlayer(item, position) {
+  const vm = this
+  removeItemFromPositionBox.call(vm, item)
+
+  const belowItems = findBelowItems.call(this, item)
+  _.forEach(belowItems, function(upItem) {
+    const canGoUpRows = canItemGoUp.call(vm, upItem)
+    if (canGoUpRows > 0) {
+      moveItemUp.call(vm, upItem, canGoUpRows)
+    }
+  })
+
+  item.x = position.x
+  item.y = position.y
+  checkItemPosition.call(this, item, position)
+  emptyTargetCell.call(this, item)
+  addItemToPositionBox.call(this, item)
+  changeItemCoord.call(this, item)
+  const canGoUpRows = canItemGoUp.call(this, item)
+  if (canGoUpRows > 0) {
+    moveItemUp.call(this, item, canGoUpRows)
+  }
+}
+
+function removeItem(index) {
+  try {
+    const vm = this
+    const item = this.yourList[index]
+    removeItemFromPositionBox.call(vm, item)
+
+    const belowItems = findBelowItems.call(this, item)
+    _.forEach(belowItems, function(upItem) {
+      const canGoUpRows = canItemGoUp.call(vm, upItem)
+      if (canGoUpRows > 0) {
+        moveItemUp.call(vm, upItem, canGoUpRows)
+      }
+    })
+    this.yourList.splice(index, 1, {})
+  } catch (e) {
+  }
+}
+
+// 矩阵设计初始化的时候 预占位，防止编辑仪表板页面，初始化和视图编辑返回时出现组件位置变化问题
+function initPosition(_this) {
+  _this.yourList.forEach(item => {
+    fillPositionBox.call(_this, item.y + item.sizey)
+    addItemToPositionBox.call(_this, item)
+  })
+}
+
+function addItem(item, index) {
+  if (index < 0) {
+    index = this.yourList.length
+  }
+  item._dragId = index
+  checkItemPosition.call(this, item, {
+    x: item.x,
+    y: item.y
+  })
+
+  emptyTargetCell.call(this, item)
+  addItemToPositionBox.call(this, item)
+  const canGoUpRows = canItemGoUp.call(this, item)
+  if (canGoUpRows > 0) {
+    moveItemUp.call(this, item, canGoUpRows)
+  }
+  // 生成坐标点
+  // makeCoordinate.call(this, item);
+}
+
+// eslint-disable-next-line no-unused-vars
+function changeToCoord(left, top, width, height) {
+  return {
+    x1: left,
+    x2: left + width,
+    y1: top,
+    y2: top + height,
+    c1: left + width / 2,
+    c2: top + height / 2
+  }
+}
+
+/**
+ * 检测有无碰撞，并作出处理
+ *
+ * @param {any} tCoord 比对对象的坐标
+ */
+// eslint-disable-next-line no-unused-vars
+function findClosetCoords(item, tCoord) {
+  const vm = this
+  if (isOverlay) return
+  let i = vm.coordinates.length
+  let collisionsItem = []
+  while (i--) {
+    const nowCoord = vm.coordinates[i]
+    if (item._dragId === nowCoord.el._dragId) {
+      continue
+    }
+
+    if (tCoord.x2 < nowCoord.x1 || tCoord.x1 > nowCoord.x2 || tCoord.y2 < nowCoord.y1 || tCoord.y1 > nowCoord.y2) {
+      continue
+    } else {
+      collisionsItem.push({
+        centerDistance: Math.sqrt(Math.pow(tCoord.c1 - nowCoord.c1, 2) + Math.pow(tCoord.c2 - nowCoord.c2, 2)),
+        coord: nowCoord
+      })
+    }
+  }
+
+  if (collisionsItem.length <= 0) {
+    return
+  }
+
+  isOverlay = true
+
+  collisionsItem = _.sortBy(collisionsItem, 'area')
+
+  movePlayer.call(this, item, {
+    x: collisionsItem[0].coord.el.x,
+    y: collisionsItem[0].coord.el.y
+  })
+
+  setTimeout(function() {
+    isOverlay = false
+  }, 200)
+}
+
+/**
+ * 生成坐标点
+ *
+ * @param {any} item
+ */
+// eslint-disable-next-line no-unused-vars
+function makeCoordinate(item) {
+  const vm = this
+  const width = this.cellWidth * (item.sizex) - this.baseMarginLeft
+  const height = this.cellHeight * (item.sizey) - this.baseMarginTop
+  const left = this.cellWidth * (item.x - 1) + this.baseMarginLeft
+  const top = this.cellHeight * (item.y - 1) + this.baseMarginTop
+
+  const coord = {
+    x1: left,
+    x2: left + width,
+    y1: top,
+    y2: top + height,
+    c1: left + width / 2,
+    c2: top + height / 2,
+    el: item
+  }
+
+  vm.coordinates.push(coord)
+}
+
+function changeItemCoord(item) {
+  const vm = this
+  const width = this.cellWidth * (item.sizex) - this.baseMarginLeft
+  const height = this.cellHeight * (item.sizey) - this.baseMarginTop
+  const left = this.cellWidth * (item.x - 1) + this.baseMarginLeft
+  const top = this.cellHeight * (item.y - 1) + this.baseMarginTop
+
+  const coord = {
+    x1: left,
+    x2: left + width,
+    y1: top,
+    y2: top + height,
+    c1: left + width / 2,
+    c2: top + height / 2,
+    el: item
+  }
+
+  const index = _.findIndex(vm.coordinates, function(o) {
+    return o.el._dragId === item._dragId
+  })
+  if (index !== -1) {
+    vm.coordinates.splice(index, 1, coord)
+  }
+}
+
+/**
+ * 清空目标位置的元素
+ *
+ * @param {any} item
+ */
+function emptyTargetCell(item) {
+  const vm = this
+  const belowItems = findBelowItems.call(vm, item)
+
+  _.forEach(belowItems, function(downItem, index) {
+    if (downItem._dragId === item._dragId) return
+    const moveSize = item.y + item.sizey - downItem.y
+    if (moveSize > 0) {
+      moveItemDown.call(vm, downItem, moveSize)
+    }
+  })
+}
+
+/**
+ * 当前位置的item能否上浮
+ *
+ * @param {any} item
+ * @returns
+ */
+function canItemGoUp(item) {
+  const vm = this
+  let upperRows = 0
+  for (let row = item.y - 2; row >= 0; row--) {
+    for (let cell = item.x - 1; cell < item.x - 1 + item.sizex; cell++) {
+      if (vm.positionBox[row][cell] && vm.positionBox[row][cell].el) {
+        return upperRows
+      }
+    }
+    upperRows++
+  }
+
+  return upperRows
+}
+
+/**
+ * 在移动之前，找到当前下移的元素的下面的元素（递归）
+ *
+ * @param {any} items
+ * @param {any} size
+ */
+function moveItemDown(item, size) {
+  const vm = this
+  removeItemFromPositionBox.call(vm, item)
+  const belowItems = findBelowItems.call(vm, item)
+  _.forEach(belowItems, function(downItem, index) {
+    if (downItem._dragId === item._dragId) return
+    const moveSize = calcDiff.call(vm, item, downItem, size)
+    if (moveSize > 0) {
+      moveItemDown.call(vm, downItem, moveSize)
+    }
+  })
+  const targetPosition = {
+    y: item.y + size
+  }
+  setPlayerPosition.call(this, item, targetPosition)
+  checkItemPosition.call(this, item, targetPosition)
+  addItemToPositionBox.call(this, item)
+  changeItemCoord.call(this, item)
+}
+
+function setPlayerPosition(item, position) {
+  position = position || {}
+  const targetX = position.x || item.x
+  const targetY = position.y || item.y
+
+  item.x = targetX
+  item.y = targetY
+
+  // 还原到像素
+  item.style.left = ((item.x - 1) * this.matrixStyle.width) / this.scalePointWidth
+  item.style.top = ((item.y - 1) * this.matrixStyle.height) / this.scalePointHeight
+  if (item.y + item.sizey > itemMaxY) {
+    itemMaxY = item.y + item.sizey
+  }
+}
+
+/**
+ * 寻找子元素到父元素的最大距离
+ *
+ * @param {any} parent
+ * @param {any} son
+ * @param {any} size
+ */
+function calcDiff(parent, son, size) {
+  const diffs = []
+  const vm = this
+  for (let i = son.x - 1; i < son.x - 1 + son.sizex; i++) {
+    let temp_y = 0
+
+    for (let j = parent.y - 1 + parent.sizey; j < son.y - 1; j++) {
+      if (vm.positionBox[j][i] && vm.positionBox[j][i].el === false) {
+        temp_y++
+      }
+    }
+    diffs.push(temp_y)
+  }
+
+  const max_diff = Math.max.apply(Math, diffs)
+  size = size - max_diff
+
+  return size > 0 ? size : 0
+}
+
+function moveItemUp(item, size) {
+  const vm = this
+
+  removeItemFromPositionBox.call(vm, item)
+
+  const belowItems = findBelowItems.call(this, item)
+  setPlayerPosition.call(this, item, {
+    y: item.y - size
+  })
+
+  addItemToPositionBox.call(this, item)
+
+  changeItemCoord.call(this, item)
+
+  _.forEach(belowItems, function(upItem, index) {
+    const moveSize = canItemGoUp.call(vm, upItem)
+    if (moveSize > 0) {
+      moveItemUp.call(vm, upItem, moveSize)
+    }
+  })
+}
+
+function findBelowItems(item) {
+  const belowItems = {}
+  const vm = this
+  for (let cell = item.x - 1; cell < item.x - 1 + item.sizex; cell++) {
+    for (let row = item.y - 1; row < vm.positionBox.length; row++) {
+      try {
+        const target = vm.positionBox[row][cell]
+        if (target && target.el) {
+          belowItems[target.el._dragId] = target.el
+          break
+        }
+      } catch (e) {
+        console.error('positionBox igonre', e)
+      }
+    }
+  }
+
+  return _.sortBy(_.values(belowItems), 'y')
+}
+
+// eslint-disable-next-line no-unused-vars
+function getoPsitionBox() {
+  return this.positionBox
+}
+
+export default {
+  components: {
+    PointShadow,
+    Background,
+    Shape,
+    ContextMenu,
+    MarkLine,
+    Area,
+    Grid,
+    PGrid,
+    DeDrag,
+    UserViewDialog,
+    DeOutWidget,
+    DragShadow,
+    LinkJumpSet
+  },
+  props: {
+    parentForbid: {
+      type: Boolean,
+      require: false,
+      default: true
+    },
+    canvasStyleData: {
+      type: Object,
+      require: true
+    },
+    componentData: {
+      type: Array,
+      require: false,
+      default: []
+    },
+    canvasId: {
+      type: String,
+      require: true
+    },
+    isEdit: {
+      type: Boolean,
+      require: false,
+      default: true
+    },
+    outStyle: {
+      type: Object,
+      require: false,
+      default: null
+    },
+    // 挤占式画布设计
+    dragStart: {
+      required: false,
+      type: Function,
+      default: function() {
+      }
+    },
+    dragging: {
+      required: false,
+      type: Function,
+      default: function() {
+      }
+    },
+    dragEnd: {
+      required: false,
+      type: Function,
+      default: function() {
+      }
+    },
+    resizable: {
+      required: false,
+      type: Boolean,
+      default: true
+    },
+    resizeStart: {
+      required: false,
+      type: Function,
+      default: function() {
+      }
+    },
+    resizing: {
+      required: false,
+      type: Function,
+      default: function() {
+      }
+    },
+    resizeEnd: {
+      required: false,
+      type: Function,
+      default: function() {
+      }
+    },
+    matrixCount: {
+      required: true,
+      type: Object
+    },
+    scrollTop: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      dragShadowShow: true,
+      psDebug: false, // 定位调试模式
+      editorX: 0,
+      editorY: 0,
+      start: { // 选中区域的起点
+        x: 0,
+        y: 0
+      },
+      width: 0,
+      height: 0,
+      isShowArea: false,
+      conditions: [],
+
+      // 初始化 设置放大比例为3倍 防止在边框限制时 出现较小的父级支持造成组件位移
+      scaleWidth: 100,
+      scaleHeight: 100,
+      // 放大比例 小数
+      scalePointWidth: 1,
+      scalePointHeight: 1,
+
+      timer: null,
+      // private 是否可旋转
+      rotatable: false,
+      // 矩阵大小
+      matrixStyle: {
+        width: 80, // 当前尺寸
+        height: 20,
+        originWidth: 80, // 原始尺寸
+        originHeight: 20
+      },
+      showDrag: true,
+      vLine: [],
+      hLine: [],
+      changeIndex: 0,
+      timeMachine: null,
+      // 挤占式画布设计
+      baseWidth: 100,
+      baseHeight: 100,
+      baseMarginLeft: 0,
+      baseMarginTop: 0,
+      draggable: true,
+      renderOk: false,
+      moveAnimate: false,
+      list: [],
+      cellWidth: 100,
+      cellHeight: 100,
+      maxCell: 0,
+      lastComponentDataLength: 0,
+      positionBoxInfoArray: [],
+      positionBox: [],
+      coordinates: [],
+      yourList: [],
+      infoBox: null,
+      editShow: false,
+      buttonFilterMap: null,
+      autoTrigger: true
+    }
+  },
+  computed: {
+    moveTabCollisionActive() {
+      return this.tabCollisionActiveId
+    },
+    pointShadowShow(){
+      return this.canvasId==='canvas-main'
+        && this.curComponent
+        && this.curComponent.canvasId !== 'canvas-main'
+        && this.tabMoveOutComponentId
+    },
+    shadowShow() {
+      return ((this.curComponent
+          && this.curComponent.auxiliaryMatrix
+          && this.curComponent.canvasId === this.canvasId
+          && (this.curComponent.optStatus.dragging || this.curComponent.optStatus.resizing))
+        || (this.dragComponentInfo && this.dragComponentInfo.canvasId ===this.canvasId )) && !this.tabMoveInActive
+    },
+    tabMoveInActive() {
+      return this.tabMoveInActiveId
+    },
+    deDraggable() {
+      return !this.linkageSettingStatus && !this.batchOptStatus
+    },
+    deResizable() {
+      return !this.linkageSettingStatus && !this.batchOptStatus
+    },
+    showGrid() {
+      if (this.canvasStyleData && this.canvasStyleData.aidedDesign) {
+        return this.canvasStyleData.aidedDesign.showGrid
+      } else {
+        return false
+      }
+    },
+    editStyle() {
+      return {
+        height: this.outStyle.height + this.scrollTop + 'px !important'
+      }
+    },
+    // 挤占式画布设计
+    coordinates() {
+      return this.coordinates
+    },
+    customStyle() {
+      let style = {
+        width: '100%',
+        height: '100%'
+      }
+
+      if (this.canvasStyleData.openCommonStyle) {
+        if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
+          style = {
+            background: `url(${imgUrlTrans(this.canvasStyleData.panel.imageUrl)}) no-repeat`,
+            ...style
+          }
+        } else if (this.canvasStyleData.panel.backgroundType === 'color') {
+          style = {
+            background: this.canvasStyleData.panel.color,
+            ...style
+          }
+        }
+      }
+      return style
+    },
+    panelInfo() {
+      return this.$store.state.panel.panelInfo
+    },
+    dragComponentInfo() {
+      return this.$store.state.dragComponentInfo
+    },
+    curCanvasScaleSelf() {
+      return this.curCanvasScaleMap[this.canvasId]
+    },
+    ...mapState([
+      'curComponent',
+      'editor',
+      'linkageSettingStatus',
+      'curLinkageView',
+      'doSnapshotIndex',
+      'componentGap',
+      'mobileLayoutStatus',
+      'curCanvasScaleMap',
+      'batchOptStatus',
+      'tabMoveInActiveId',
+      'tabCollisionActiveId',
+      'tabMoveOutComponentId'
+    ]),
+
+    searchButtonInfo() {
+      const result = this.buildButtonFilterMap(this.componentData)
+      return result
+    },
+    filterMap() {
+      const result = buildFilterMap(this.componentData)
+      if (this.searchButtonInfo && this.searchButtonInfo.buttonExist && !this.searchButtonInfo.autoTrigger && this.searchButtonInfo.relationFilterIds) {
+        for (const key in result) {
+          if (Object.hasOwnProperty.call(result, key)) {
+            let filters = result[key]
+            filters = filters.filter(item => !this.searchButtonInfo.relationFilterIds.includes(item.componentId))
+            result[key] = filters
+          }
+        }
+      }
+      return result
+    }
+
+  },
+  watch: {
+    'curComponent.id': {
+      handler(newVal) {
+        // curComponent.id 变动刷新dragShadow组件 防止出现连续的阴影动画移动
+        this.dragShadowShow = false
+        this.$nextTick(() => {
+          this.dragShadowShow = true
+        })
+      },
+      deep: true
+    },
+    outStyle: {
+      handler(newVal, oldVla) {
+        this.resizeParentBoundsRef()
+        this.changeScale()
+      },
+      deep: true
+    },
+    componentData: {
+      handler(newVal, oldVla) {
+        // 初始化时componentData 加载可能出现慢的情况 此时重新初始化一下matrix
+        if (newVal.length !== this.lastComponentDataLength) {
+          this.lastComponentDataLength = newVal.length
+          this.initMatrix()
+        }
+      },
+      deep: true
+    },
+    // 镜像索引有变化 刷新一下矩阵（撤销重做等）
+    doSnapshotIndex: {
+      handler(newVal, oldVla) {
+        this.initMatrix()
+      },
+      deep: true
+    },
+    autoTrigger: {
+      handler(val, old) {
+        if (val === old) return
+        const result = buildFilterMap(this.componentData)
+        for (const key in result) {
+          if (Object.hasOwnProperty.call(result, key)) {
+            let filters = result[key]
+            if (this.searchButtonInfo && this.searchButtonInfo.buttonExist && !this.searchButtonInfo.autoTrigger && this.searchButtonInfo.relationFilterIds) {
+              filters = filters.filter(item => !this.searchButtonInfo.relationFilterIds.includes(item.componentId))
+            }
+
+            this.filterMap[key] = filters
+
+            this.componentData.forEach(item => {
+              if (item.type === 'view' && item.propValue.viewId === key) {
+                item.filters = filters
+              }
+            })
+          }
+        }
+      },
+      deep: true
+    }
+  },
+
+  mounted() {
+    this.canvasInit()
+    // 获取编辑器元素
+    this.$store.commit('getEditor')
+    const _this = this
+    eventBus.$on('hideArea', this.hideArea)
+    eventBus.$on('startMoveIn', this.startMoveIn)
+    bus.$on('onRemoveLastItem', this.removeLastItem)
+    bus.$on('trigger-search-button', this.triggerSearchButton)
+    bus.$on('trigger-reset-button', this.triggerResetButton)
+    bus.$on('refresh-button-info', this.refreshButtonInfo)
+
+    // 矩阵定位调试模式
+    if (this.psDebug) {
+      setInterval(() => {
+        _this.positionBoxInfoArray = _this.positionBox
+      }, 500)
+    }
+  },
+  beforeDestroy() {
+    eventBus.$off('hideArea', this.hideArea)
+    eventBus.$off('startMoveIn', this.startMoveIn)
+    bus.$off('onRemoveLastItem', this.removeLastItem)
+    bus.$off('trigger-search-button', this.triggerSearchButton)
+    bus.$off('refresh-button-info', this.refreshButtonInfo)
+    bus.$off('trigger-reset-button', this.triggerResetButton)
+  },
+  created() {
+  },
+  methods: {
+    triggerResetButton() {
+      this.triggerSearchButton(true)
+    },
+    refreshButtonInfo(isClear = false) {
+      const result = this.buildButtonFilterMap(this.componentData, isClear)
+      this.searchButtonInfo.buttonExist = result.buttonExist
+      this.searchButtonInfo.relationFilterIds = result.relationFilterIds
+      this.searchButtonInfo.filterMap = result.filterMap
+      this.searchButtonInfo.autoTrigger = result.autoTrigger
+      this.buttonFilterMap = this.searchButtonInfo.filterMap
+    },
+    triggerSearchButton(isClear = false) {
+      this.refreshButtonInfo(isClear)
+      this.buttonFilterMap = this.searchButtonInfo.filterMap
+
+      this.componentData.forEach(component => {
+        if (component.type === 'view' && this.buttonFilterMap[component.propValue.viewId]) {
+          component.filters = this.buttonFilterMap[component.propValue.viewId]
+        }
+        if (component.type === 'de-tabs') {
+          for (let idx = 0; idx < component.options.tabList.length; idx++) {
+            const ele = component.options.tabList[idx].content
+            if (!ele.type || ele.type !== 'view') continue
+            ele.filters = this.buttonFilterMap[ele.propValue.viewId]
+          }
+        }
+      })
+    },
+    buildButtonFilterMap(panelItems, isClear = false) {
+      const result = {
+        buttonExist: false,
+        relationFilterIds: [],
+        autoTrigger: true,
+        filterMap: {}
+      }
+      if (!panelItems || !panelItems.length) return result
+      let sureButtonItem = null
+      result.buttonExist = panelItems.some(item => {
+        if (item.type === 'custom-button' && item.serviceName === 'buttonSureWidget') {
+          sureButtonItem = item
+          return true
+        }
+      })
+
+      if (!result.buttonExist) return result
+
+      const customRange = sureButtonItem.options.attrs.customRange
+      result.autoTrigger = sureButtonItem.options.attrs.autoTrigger
+      this.autoTrigger = result.autoTrigger
+
+      const allFilters = panelItems.filter(item => item.type === 'custom')
+
+      const matchFilters = customRange && allFilters.filter(item => sureButtonItem.options.attrs.filterIds.includes(item.id)) || allFilters
+
+      result.relationFilterIds = matchFilters.map(item => item.id)
+
+      let viewKeyMap = buildViewKeyMap(panelItems)
+      viewKeyMap = this.buildViewKeyFilters(matchFilters, viewKeyMap, isClear)
+      result.filterMap = viewKeyMap
+      return result
+    },
+    buildViewKeyFilters(panelItems, result, isClear = false) {
+      const refs = this.$refs
+      if (!this.$refs['wrapperChild'] || !this.$refs['wrapperChild'].length) return result
+      const len = this.$refs['wrapperChild'].length
+      panelItems.forEach((element) => {
+        if (element.type !== 'custom') {
+          return true
+        }
+
+        let param = null
+        const index = this.getComponentIndex(element.id)
+        if (index < 0 || index >= len) {
+          return true
+        }
+        const wrapperChild = refs['wrapperChild'][index]
+        if (!wrapperChild || !wrapperChild.getCondition) return true
+        if (isClear) {
+          wrapperChild.clearHandler && wrapperChild.clearHandler()
+        }
+        param = wrapperChild.getCondition && wrapperChild.getCondition()
+        const condition = formatCondition(param)
+        const vValid = valueValid(condition)
+        const filterComponentId = condition.componentId
+        Object.keys(result).forEach(viewId => {
+          const vidMatch = viewIdMatch(condition.viewIds, viewId)
+          const viewFilters = result[viewId]
+          let j = viewFilters.length
+          while (j--) {
+            const filter = viewFilters[j]
+            if (filter.componentId === filterComponentId) {
+              viewFilters.splice(j, 1)
+            }
+          }
+          vidMatch && vValid && viewFilters.push(condition)
+        })
+      })
+      return result
+    },
+    getComponentIndex(id) {
+      for (let index = 0; index < this.componentData.length; index++) {
+        const item = this.componentData[index]
+        if (item.id === id) return index
+      }
+      return -1
+    },
+    pluginEditHandler({ e, id }) {
+      let index = -1
+      for (let i = 0; i < this.componentData.length; i++) {
+        const item = this.componentData[i]
+        const itemId = item.id
+        if (id === itemId) {
+          index = i
+          break
+        }
+      }
+      if (index >= 0) {
+        const _this = this
+        _this.$refs.deDragRef && _this.$refs.deDragRef[index] && _this.$refs.deDragRef[index].triggerPluginEdit && _this.$refs.deDragRef[index].triggerPluginEdit(e)
+      }
+    },
+    linkageActiveCheck(item) {
+      return this.linkageSettingStatus && item === this.curLinkageView
+    },
+    batchOptActiveCheck(item) {
+      return this.batchOptStatus && item.type === 'view'
+    },
+    canvasInit() {
+      this.editShow = false
+      setTimeout(() => {
+        this.changeScale()
+        this.editShow = true
+      }, 500)
+    },
+    changeStyleWithScale,
+    handleMouseDown(e) {
+      // 如果没有选中组件 在画布上点击时需要调用 e.preventDefault() 防止触发 drop 事件
+      if (!this.curComponent || (this.curComponent.component !== 'v-text' && this.curComponent.component !== 'rect-shape')) {
+        e.preventDefault()
+      }
+      this.hideArea()
+      // 挤占式画布设计
+      this.containerMouseDown(e)
+    },
+
+    hideArea() {
+      this.isShowArea = 0
+      this.width = 0
+      this.height = 0
+    },
+
+    createGroup() {
+      // 获取选中区域的组件数据
+      const areaData = this.getSelectArea()
+      if (areaData.length <= 1) {
+        this.hideArea()
+        return
+      }
+
+      // 根据选中区域和区域中每个组件的位移信息来创建 Group 组件
+      // 要遍历选择区域的每个组件，获取它们的 left top right bottom 信息来进行比较
+      let top = Infinity
+      let left = Infinity
+      let right = -Infinity
+      let bottom = -Infinity
+      areaData.forEach(component => {
+        let style = {}
+        if (component.component === 'Group') {
+          component.propValue.forEach(item => {
+            const rectInfo = _$(`#component${item.id}`).getBoundingClientRect()
+            style.left = rectInfo.left - this.editorX
+            style.top = rectInfo.top - this.editorY
+            style.right = rectInfo.right - this.editorX
+            style.bottom = rectInfo.bottom - this.editorY
+
+            if (style.left < left) left = style.left
+            if (style.top < top) top = style.top
+            if (style.right > right) right = style.right
+            if (style.bottom > bottom) bottom = style.bottom
+          })
+        } else {
+          style = getComponentRotatedStyle(component.style)
+        }
+
+        if (style.left < left) left = style.left
+        if (style.top < top) top = style.top
+        if (style.right > right) right = style.right
+        if (style.bottom > bottom) bottom = style.bottom
+      })
+
+      this.start.x = left
+      this.start.y = top
+      this.width = right - left
+      this.height = bottom - top
+
+      // 设置选中区域位移大小信息和区域内的组件数据
+      this.$store.commit('setAreaData', {
+        style: {
+          left,
+          top,
+          width: this.width,
+          height: this.height
+        },
+        components: areaData
+      })
+    },
+
+    getSelectArea() {
+      const result = []
+      // 区域起点坐标
+      const { x, y } = this.start
+      // 计算所有的组件数据，判断是否在选中区域内
+      this.componentData.forEach(component => {
+        if (component.isLock) return
+
+        const { left, top, width, height } = component.style
+        if (x <= left && y <= top && (left + width <= x + this.width) && (top + height <= y + this.height)) {
+          result.push(component)
+        }
+      })
+
+      // 返回在选中区域内的所有组件
+      return result
+    },
+
+    getShapeStyle(style) {
+      const result = {};
+      ['width', 'left'].forEach(attr => {
+        result[attr] = this.format(style[attr], this.scaleWidth) + 'px'
+      });
+      ['height', 'top'].forEach(attr => {
+        result[attr] = this.format(style[attr], this.scaleHeight) + 'px'
+      })
+      result.transform = 'rotate(' + style['rotate'] + 'deg)'
+
+      return result
+    },
+
+    getShapeStyleInt(style) {
+      const result = {};
+      ['width', 'left'].forEach(attr => {
+        result[attr] = this.format(style[attr], this.scaleWidth)
+      });
+      ['height', 'top'].forEach(attr => {
+        result[attr] = this.format(style[attr], this.scaleHeight)
+      })
+      result['rotate'] = style['rotate']
+      result['borderWidth'] = style['borderWidth']
+      result['opacity'] = style['opacity']
+
+      return result
+    },
+
+    getComponentStyleDefault(style) {
+      return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
+      // return style
+    },
+
+    getComponentStyle(style) {
+      //   return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
+      return style
+    },
+
+    handleInput(element, value) {
+      // 根据文本组件高度调整 shape 高度
+      // remain -自适应画布会导致一些问题 暂时不修改
+      // this.$store.commit('setShapeStyle', { height: this.getTextareaHeight(element, value) })
+    },
+
+    getTextareaHeight(element, text) {
+      // eslint-disable-next-line prefer-const
+      let { lineHeight, fontSize, height } = element.style
+      if (lineHeight === '') {
+        lineHeight = 1.5
+      }
+
+      const newHeight = (text.split('<br>').length - 1) * lineHeight * fontSize
+      return height > newHeight ? height : newHeight
+    },
+
+    format(value, scale) {
+      // 自适应画布区域 返回原值
+      return value * scale / 100
+    },
+    // 修改矩阵点
+    changeComponentSizePoint(pointScale) {
+      if (pointScale) {
+        this.componentData.forEach((item, index) => {
+          item.x = (item.x - 1) * pointScale + 1
+          item.y = (item.y - 1) * pointScale + 1
+          item.sizex = item.sizex * pointScale
+          item.sizey = item.sizey * pointScale
+        })
+        this.changeScale()
+      }
+    },
+
+    changeScale() {
+      // 1.3 版本重新设计仪表板定位方式，基准画布宽高为 1600*900 宽度自适应当前画布获取缩放比例scaleWidth
+      // 高度缩放比例scaleHeight = scaleWidth 基础矩阵为128*72 矩阵原始宽度12.5*12.5 矩阵高度可以调整
+
+      if (this.outStyle.width && this.outStyle.height) {
+        // 矩阵计算
+        this.matrixStyle.originWidth = this.canvasStyleData.width / this.matrixCount.x
+        this.matrixStyle.originHeight = this.canvasStyleData.height / this.matrixCount.y
+        if (!this.canvasStyleData.selfAdaption) {
+          this.matrixStyle.width = this.canvasStyleData.width / this.matrixCount.x
+          this.matrixStyle.height = this.canvasStyleData.height / this.matrixCount.y
+        } else {
+          this.matrixStyle.width = this.outStyle.width / this.matrixCount.x
+          this.matrixStyle.height = this.outStyle.height / this.matrixCount.y
+        }
+        this.baseWidth = this.matrixStyle.width
+        this.baseHeight = this.matrixStyle.height
+        this.cellWidth = this.matrixStyle.width
+        this.cellHeight = this.matrixStyle.height
+        this.initMatrix()
+
+        this.scaleWidth = this.outStyle.width * 100 / this.canvasStyleData.width
+        this.scaleHeight = this.outStyle.height * 100 / this.canvasStyleData.height
+        this.scalePointWidth = this.scaleWidth / 100
+        this.scalePointHeight = this.scaleHeight / 100
+        this.$store.commit('setCurCanvasScale',
+          {
+            canvasId: this.canvasId,
+            scaleWidth: this.scaleWidth,
+            scaleHeight: this.scaleHeight,
+            scalePointWidth: this.scalePointWidth,
+            scalePointHeight: this.scalePointHeight,
+            matrixStyleWidth: this.matrixStyle.width,
+            matrixStyleHeight: this.matrixStyle.height,
+            matrixStyleOriginWidth: this.matrixStyle.originWidth,
+            matrixStyleOriginHeight: this.matrixStyle.originHeight
+          })
+        this.$store.commit('setPreviewCanvasScale', {
+          scaleWidth: this.scalePointWidth,
+          scaleHeight: this.scalePointHeight
+        })
+      }
+    },
+    getShapeStyleIntDeDrag(style, prop, item) {
+      if (prop === 'rotate') {
+        return style['rotate']
+      }
+      if (prop === 'width') {
+        const result = this.format(style['width'], this.scaleWidth)
+        return result
+      }
+      if (prop === 'left') {
+        return this.format(style['left'], this.scaleWidth)
+      }
+      if (prop === 'height') {
+        return this.format(style['height'], this.scaleHeight)
+      }
+      if (prop === 'top') {
+        const top = this.format(style['top'], this.scaleHeight)
+        return top
+      }
+    },
+    getRefLineParams(params) {
+      const { vLine, hLine } = params
+      this.vLine = vLine
+      this.hLine = hLine
+    },
+    resizeParentBounds() {
+      this.destroyTimeMachine()
+      this.changeIndex++
+      this.parentBoundsChange(this.changeIndex)
+    },
+    parentBoundsChange(index) {
+      this.timeMachine = setTimeout(() => {
+        if (index === this.changeIndex) {
+          this.changeScale()
+        }
+        this.destroyTimeMachine()
+      }, 1500)
+    },
+    destroyTimeMachine() {
+      this.timeMachine && clearTimeout(this.timeMachine)
+      this.timeMachine = null
+    },
+    showViewDetails(params, index) {
+      this.$refs.wrapperChild[index].openChartDetailsDialog(params)
+    },
+
+    resizeView(index, item) {
+      if (item.type === 'view' || item.type === 'de-show-date') {
+        try {
+          this.$refs.wrapperChild[index].chartResize()
+        } catch (e) {
+          // ignore error
+        }
+      }
+    },
+    editComponent(index, item) {
+      if (item.type === 'view') {
+        this.$refs.wrapperChild[index].editChart()
+      }
+    },
+    handleDragOver(e) {
+      console.log('handleDragOver--x='+e.pageX+';y='+e.pageY)
+      this.dragComponentInfo.shadowStyle.x = e.pageX - 220
+      this.dragComponentInfo.shadowStyle.y = e.pageY - 90 + this.scrollTop
+      this.dragComponentInfo.style.left = this.dragComponentInfo.shadowStyle.x / this.scalePointWidth
+      this.dragComponentInfo.style.top = this.dragComponentInfo.shadowStyle.y / this.scalePointHeight
+      if (this.dragComponentInfo.auxiliaryMatrix) {
+        this.onDragging(e, this.dragComponentInfo)
+      }
+    },
+    getPositionX(x) {
+      if (this.canvasStyleData.selfAdaption) {
+        return x * 100 / this.curCanvasScale.scaleWidth
+      } else {
+        return x
+      }
+    },
+    getPositionY(y) {
+      if (this.canvasStyleData.selfAdaption) {
+        return y * 100 / this.curCanvasScale.scaleHeight
+      } else {
+        return y
+      }
+    },
+    canvasScroll(event) {
+      this.$emit('canvasScroll', event)
+    },
+
+    // 挤占式画布设计
+    startResize(e, item, index) {
+      if (!this.resizable) return
+      this.resizeStart.call(null, e, item, index)
+
+      // e.preventDefault();
+      // eslint-disable-next-line no-unused-vars
+      const target = _jq(e.target)
+
+      if (!this.infoBox) {
+        this.infoBox = {}
+      }
+      this.infoBox.resizeItem = item
+      this.infoBox.resizeItemIndex = index
+      // this.onStartMove(e, item, index)
+
+      return true
+    },
+    containerMouseDown(e) {
+      // e.preventDefault();
+      if (!this.infoBox) {
+        this.infoBox = {}
+      }
+      this.infoBox.startX = e.pageX
+      this.infoBox.startY = e.pageY
+    },
+    onStartMove(e, item, index) {
+      if (!this.infoBox) {
+        this.infoBox = {}
+      }
+      const infoBox = this.infoBox
+      this.dragStart.call(null, e, item, index)
+      infoBox.moveItem = item
+      infoBox.moveItemIndex = index
+
+      infoBox.orignX = 0 // 克隆对象原始X位置
+      infoBox.orignY = 0
+      infoBox.startX = 0
+      infoBox.startY = 0
+
+      infoBox.oldX = item.x // 实际对象原始X位置
+      infoBox.oldY = item.y
+      infoBox.oldSizeX = item.sizex
+      infoBox.oldSizeY = item.sizey
+    },
+    onMouseUp(e) {
+      const vm = this
+      if (_.isEmpty(vm.infoBox)) return
+      if (vm.infoBox.cloneItem) {
+        vm.infoBox.cloneItem.remove()
+      }
+      if (vm.infoBox.resizeItem) {
+        vm.$delete(vm.infoBox.resizeItem, 'isPlayer')
+        vm.resizeEnd.call(null, e, vm.infoBox.resizeItem, vm.infoBox.resizeItem._dragId)
+      }
+      if (vm.infoBox.moveItem) {
+        vm.dragEnd.call(null, e, vm.infoBox.moveItem, vm.infoBox.moveItem._dragId)
+        vm.$set(vm.infoBox.moveItem, 'show', true)
+        vm.$delete(vm.infoBox.moveItem, 'isPlayer')
+      }
+      vm.infoBox = {}
+    },
+    onResizing(e, item) {
+      // this.onDragging(e, item)
+      const infoBox = this.infoBox
+      const resizeItem = _.get(infoBox, 'resizeItem')
+      const vm = this
+      vm.$set(resizeItem, 'isPlayer', true)
+      const startX = infoBox.startX
+      const startY = infoBox.startY
+      const moveXSize = e.pageX - startX // X方向移动的距离
+      const moveYSize = e.pageY - startY // Y方向移动的距离
+
+      const addSizex = (moveXSize) % vm.cellWidth > (vm.cellWidth / 4 * 1) ? parseInt(((moveXSize) / vm.cellWidth + 1)) : parseInt(((moveXSize) / vm.cellWidth))
+      const addSizey = (moveYSize) % vm.cellHeight > (vm.cellHeight / 4 * 1) ? parseInt(((moveYSize) / vm.cellHeight + 1)) : parseInt(((moveYSize) / vm.cellHeight))
+      let nowX = Math.round((item.style.width * this.scalePointWidth) / this.matrixStyle.width)
+      let nowY = Math.round((item.style.height * this.scalePointHeight) / this.matrixStyle.height)
+      nowX = nowX > 0 ? nowX : 1
+      nowY = nowY > 0 ? nowY : 1
+
+      const oldX = infoBox.oldX
+      const oldY = infoBox.oldY
+      let newX = Math.round((item.style.left * this.scalePointWidth) / this.matrixStyle.width) + 1
+      let newY = Math.round((item.style.top * this.scalePointHeight) / this.matrixStyle.height) + 1
+      newX = newX > 0 ? newX : 1
+      newY = newY > 0 ? newY : 1
+      debounce((function(newX, oldX, newY, oldY, addSizex, addSizey) {
+        return function() {
+          if (newX !== oldX || oldY !== newY) {
+            movePlayer.call(vm, resizeItem, {
+              x: newX,
+              y: newY
+            })
+
+            infoBox.oldX = newX
+            infoBox.oldY = newY
+          }
+          resizePlayer.call(vm, resizeItem, {
+            sizex: nowX,
+            sizey: nowY
+          })
+        }
+      })(newX, oldX, newY, oldY, addSizex, addSizey), 10)
+    },
+    onDragging(e, item) {
+      const infoBox = this.infoBox
+      const moveItem = _.get(infoBox, 'moveItem')
+      const vm = this
+      scrollScreen(e)
+      if (!vm.draggable) return
+      vm.dragging.call(null, e, moveItem, moveItem._dragId)
+
+      vm.$set(moveItem, 'isPlayer', true)
+      const oldX = infoBox.oldX
+      const oldY = infoBox.oldY
+      let newX = Math.round((item.style.left * this.scalePointWidth) / this.matrixStyle.width) + 1
+      let newY = Math.round((item.style.top * this.scalePointHeight) / this.matrixStyle.height) + 1
+      newX = newX > 0 ? newX : 1
+      newY = newY > 0 ? newY : 1
+      console.log("moveTabCollisionActive="+this.moveTabCollisionActive)
+      if (this.moveTabCollisionActive) {
+        return
+      }
+      debounce((function(newX, oldX, newY, oldY) {
+        return function() {
+          if (newX !== oldX || oldY !== newY) {
+            movePlayer.call(vm, moveItem, {
+              x: newX,
+              y: newY
+            })
+
+            infoBox.oldX = newX
+            infoBox.oldY = newY
+          }
+        }
+      })(newX, oldX, newY, oldY), 10)
+    },
+    endMove(e) {
+
+    },
+    moving(e) {
+
+    },
+    /**
+     * 计算当前item的位置和大小
+     *
+     * @param {any} item
+     * @returns
+     */
+    nowItemStyle(item, index) {
+      return {
+        width: (this.cellWidth * (item.sizex) - this.baseMarginLeft) + 'px',
+        height: (this.cellHeight * (item.sizey) - this.baseMarginTop) + 'px',
+        left: (this.cellWidth * (item.x - 1) + this.baseMarginLeft) + 'px',
+        top: (this.cellHeight * (item.y - 1) + this.baseMarginTop) + 'px'
+      }
+    },
+    getList() {
+      // 不使用copy 保持原有对象
+      const finalList = []
+      const _this = this
+      _.forEach(this.componentData, function(item, index) {
+        if (_.isEmpty(item)) return
+        if (_this.canvasId === item.canvasId) {
+          delete item['_dragId']
+          delete item['show']
+          if (item['auxiliaryMatrix']) {
+            finalList.push(item)
+          }
+        }
+      })
+      return finalList
+    },
+    /**
+     * 获取x最大值
+     *
+     * @returns
+     */
+    getMaxCell() {
+      return this.maxCell
+    },
+    /**
+     * 获取渲染状态
+     *
+     * @returns
+     */
+    getRenderState() {
+      return this.moveAnimate
+    },
+    addItem: addItem,
+    removeItem: removeItem,
+    initMatrix: init,
+    afterInitOk(func) {
+      const timeid = setInterval(() => {
+        if (this.moveAnimate) {
+          clearInterval(timeid)
+          func()
+        }
+      }, 100)
+    },
+    addItemBox(item) {
+      this.yourList.push(item)
+
+      this.$nextTick(function() {
+        addItem.call(this, item, this.yourList.length - 1)
+      })
+    },
+    removeLastItem() {
+      if (this.canvasStyleData.auxiliaryMatrix) {
+        this.removeItem(this.yourList.length - 1)
+      }
+    },
+    startMoveIn() {
+      if (this.$store.state.dragComponentInfo.auxiliaryMatrix && this.canvasId === 'canvas-main') {
+        const moveInItemInfo = this.$store.state.dragComponentInfo
+        this.addItemBox(moveInItemInfo)
+        // e.preventDefault();
+        if (!this.infoBox) {
+          this.infoBox = {}
+        }
+        const infoBox = this.infoBox
+
+        infoBox.moveItem = moveInItemInfo
+        infoBox.moveItemIndex = this.yourList.length - 1
+
+        infoBox.oldX = 1 // 实际对象原始X位置
+        infoBox.oldY = 1
+        infoBox.oldSizeX = moveInItemInfo.sizex
+        infoBox.oldSizeY = moveInItemInfo.sizey
+      }
+    },
+    // 调整父级组件边界
+    resizeParentBoundsRef() {
+      const _this = this
+      _this.componentData.forEach(function(data, index) {
+        _this.$refs.deDragRef && _this.$refs.deDragRef[index] && _this.$refs.deDragRef[index].checkParentSize()
+      })
+    },
+    canvasDragging(mY, offsetY) {
+      this.$emit('canvasDragging', mY, offsetY)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.editor {
+  width: 100%;
+  position: relative;
+  /*background: #fff;*/
+  margin: auto;
+  /*会影响设置组件不能出现在最高层*/
+  /*overflow-x: hidden;*/
+  background-size: 100% 100% !important;
+  /*transform-style:preserve-3d;*/
+  .lock {
+    opacity: .5;
+  }
+}
+
+.parent_transform {
+  //transform transform 会使z-index 失效；为了使编辑仪表板时 按钮一直在上面 采用transform-style 的方式
+  // transform-style 会导致 dialog 遮罩有问题 此处暂时用这个样式做控制
+  transform-style: preserve-3d;
+}
+
+.edit {
+  /*outline: 1px solid gainsboro;*/
+  .component {
+    outline: none;
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+}
+
+.gap_class {
+  padding: 3px;
+}
+
+.ref-line {
+  position: absolute;
+  background-color: #70c0ff;;
+  z-index: 9999;
+}
+
+.v-line {
+  width: 1px;
+}
+
+.h-line {
+  height: 1px;
+}
+
+.dialog-css ::v-deep .el-dialog__title {
+  font-size: 14px;
+}
+
+.dialog-css ::v-deep .el-dialog__header {
+  padding: 40px 20px 0;
+}
+
+.dialog-css ::v-deep .el-dialog__body {
+  padding: 10px 20px 20px;
+}
+
+</style>
diff --git a/frontend/src/components/canvas/components/Editor/EditBar.vue b/frontend/src/components/canvas/components/Editor/EditBar.vue
index e85008ec54..d111132bc2 100644
--- a/frontend/src/components/canvas/components/Editor/EditBar.vue
+++ b/frontend/src/components/canvas/components/Editor/EditBar.vue
@@ -141,6 +141,38 @@
         </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 toLeft = this.element.style.left * this.curCanvasScale.scalePointWidth
+        const toRight = (this.canvasStyleData.width - this.element.style.left - this.element.style.width) * this.curCanvasScaleSelf.scalePointWidth
+        const toLeft = this.element.style.left * this.curCanvasScaleSelf.scalePointWidth
         if (this.barWidth < toRight) {
           return 'bar-main-right'
         } else if (this.barWidth > toRight && this.barWidth > toLeft) {
@@ -278,6 +319,9 @@ export default {
     miniWidth() {
       return this.mobileLayoutStatus ? 1 : 4
     },
+    curCanvasScaleSelf(){
+      return this.curCanvasScaleMap[this.canvasId]
+    },
     ...mapState([
       'menuTop',
       'menuLeft',
@@ -288,7 +332,7 @@ export default {
       'linkageSettingStatus',
       'targetLinkageInfo',
       'curLinkageView',
-      'curCanvasScale',
+      'curCanvasScaleMap',
       'batchOptStatus',
       'mobileLayoutStatus',
       'curBatchOptComponents',
@@ -302,6 +346,16 @@ export default {
     }
   },
   methods: {
+    backgroundSetClose() {
+      this.boardSetVisible = false
+    },
+    linkJumpSet() {
+      this.linkJumpSetViewId = this.element.propValue.viewId
+      this.linkJumpSetVisible = true
+    },
+    closeJumpSetDialog() {
+      this.linkJumpSetVisible = false
+    },
     fieldsAreaDown(e) {
       // ignore
       e.preventDefault()
@@ -347,10 +401,10 @@ export default {
         this.curComponent.auxiliaryMatrix = false
         this.$emit('amRemoveItem')
       } else {
-        this.curComponent.x = Math.round(this.curComponent.style.left / this.curCanvasScale.matrixStyleOriginWidth) + 1
-        this.curComponent.y = Math.round(this.curComponent.style.top / this.curCanvasScale.matrixStyleOriginHeight) + 1
-        this.curComponent.sizex = Math.round(this.curComponent.style.width / this.curCanvasScale.matrixStyleOriginWidth)
-        this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScale.matrixStyleOriginHeight)
+        this.curComponent.x = Math.round(this.curComponent.style.left / this.curCanvasScaleSelf.matrixStyleOriginWidth) + 1
+        this.curComponent.y = Math.round(this.curComponent.style.top / this.curCanvasScaleSelf.matrixStyleOriginHeight) + 1
+        this.curComponent.sizex = Math.round(this.curComponent.style.width / this.curCanvasScaleSelf.matrixStyleOriginWidth)
+        this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScaleSelf.matrixStyleOriginHeight)
         this.curComponent.sizey = this.curComponent.sizey > this.miniHeight ? this.curComponent.sizey : this.miniHeight
         this.curComponent.sizex = this.curComponent.sizex > this.miniWidth ? this.curComponent.sizex : this.miniWidth
         this.curComponent.auxiliaryMatrix = true
@@ -364,10 +418,10 @@ export default {
     },
     // 记录当前样式 跟随阴影位置 矩阵处理
     recordMatrixCurShadowStyle() {
-      const left = (this.curComponent.x - 1) * this.curCanvasScale.matrixStyleWidth
-      const top = (this.curComponent.y - 1) * this.curCanvasScale.matrixStyleHeight
-      const width = this.curComponent.sizex * this.curCanvasScale.matrixStyleWidth
-      const height = this.curComponent.sizey * this.curCanvasScale.matrixStyleHeight
+      const left = (this.curComponent.x - 1) * this.curCanvasScaleSelf.matrixStyleWidth
+      const top = (this.curComponent.y - 1) * this.curCanvasScaleSelf.matrixStyleHeight
+      const width = this.curComponent.sizex * this.curCanvasScaleSelf.matrixStyleWidth
+      const height = this.curComponent.sizey * this.curCanvasScaleSelf.matrixStyleHeight
       const style = {
         left: left,
         top: top,
@@ -409,9 +463,6 @@ export default {
       })
       bus.$emit('clear_panel_linkage', { viewId: this.element.propValue.viewId })
     },
-    linkJumpSet() {
-      this.$emit('linkJumpSet')
-    },
     goFile() {
       this.$refs.files.click()
     },
@@ -435,7 +486,7 @@ export default {
       reader.readAsDataURL(file)
     },
     boardSet() {
-      this.$emit('boardSet')
+      this.boardSetVisible = true
     },
     batchOptChange(val) {
       if (val) {
diff --git a/frontend/src/components/canvas/components/Editor/PGrid.vue b/frontend/src/components/canvas/components/Editor/PGrid.vue
index 8a1e8756f0..c2df81e89b 100644
--- a/frontend/src/components/canvas/components/Editor/PGrid.vue
+++ b/frontend/src/components/canvas/components/Editor/PGrid.vue
@@ -1,20 +1,17 @@
 <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"
-        :key="indx+'x'"
+        v-for="(xItem, index) in yItem"
+        :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>
diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue
index 07eb624dc4..8cbdc8b2ba 100644
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/frontend/src/components/canvas/components/Editor/Preview.vue
@@ -6,8 +6,8 @@
   >
     <canvas-opt-bar />
     <div
-      id="canvasInfoMain"
-      ref="canvasInfoMain"
+      :id="previewDomId"
+      :ref="previewRefId"
       :style="canvasInfoMainStyle"
     >
       <el-row
@@ -31,8 +31,8 @@
       </el-row>
       <div
         v-else
-        id="canvasInfoTemp"
-        ref="canvasInfoTemp"
+        :id="previewTempDomId"
+        :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.canvasInfoMain)
+    erd.uninstall(this.$refs[this.previewTempRefId])
+    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 canvasWidth = document.getElementById('canvasInfoMain').offsetWidth
+      const canvasHeight = document.getElementById(this.previewDomId).offsetHeight
+      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)
     }
   }
 }
diff --git a/frontend/src/components/canvas/components/Editor/PreviewMobile.vue b/frontend/src/components/canvas/components/Editor/PreviewMobile.vue
index aaf2ec1935..866a97716e 100644
--- a/frontend/src/components/canvas/components/Editor/PreviewMobile.vue
+++ b/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,
-      chartDetailsVisible: false,
-      showChartInfo: {},
-      showChartTableInfo: {}
+      searchCount: 0
     }
   },
   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 })
diff --git a/frontend/src/components/canvas/components/FilterTextAttr.vue b/frontend/src/components/canvas/components/FilterTextAttr.vue
deleted file mode 100644
index 8ea39c4760..0000000000
--- a/frontend/src/components/canvas/components/FilterTextAttr.vue
+++ /dev/null
@@ -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>
diff --git a/frontend/src/components/canvas/components/RectangleAttr.vue b/frontend/src/components/canvas/components/RectangleAttr.vue
deleted file mode 100644
index 57ed0d730c..0000000000
--- a/frontend/src/components/canvas/components/RectangleAttr.vue
+++ /dev/null
@@ -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>
diff --git a/frontend/src/components/canvas/components/TextAttr.vue b/frontend/src/components/canvas/components/TextAttr.vue
index ac15062e93..ab657a25fa 100644
--- a/frontend/src/components/canvas/components/TextAttr.vue
+++ b/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')
diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index 3312f4898a..a47f7cf719 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/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) {
diff --git a/frontend/src/components/canvas/custom-component/component-list.js b/frontend/src/components/canvas/custom-component/component-list.js
index 7f07d11b07..844f31a2a7 100644
--- a/frontend/src/components/canvas/custom-component/component-list.js
+++ b/frontend/src/components/canvas/custom-component/component-list.js
@@ -394,7 +394,7 @@ const list = [
       tabList: [{
         title: 'Tab1',
         name: '1',
-        content: null
+        content: { type: 'canvas' }
       }]
     },
     x: 1,
diff --git a/frontend/src/components/canvas/store/copy.js b/frontend/src/components/canvas/store/copy.js
index 902e3f98ea..afb3f9e91f 100644
--- a/frontend/src/components/canvas/store/copy.js
+++ b/frontend/src/components/canvas/store/copy.js
@@ -35,7 +35,7 @@ export default {
         }
       })
       const canvasStyleData = state.canvasStyleData
-      const curCanvasScale = state.curCanvasScale
+      const curCanvasScaleSelf = state.curCanvasScaleMap['canvas-main']
       const componentGap = state.componentGap
       Object.keys(state.curMultiplexingComponents).forEach(function(componentId, index) {
         const component =
@@ -53,15 +53,15 @@ export default {
         const tilePosition = index % 3
         const divisiblePosition = parseInt(index / 3)
         if (canvasStyleData.auxiliaryMatrix) {
-          const width = component.sizex * curCanvasScale.matrixStyleOriginWidth
+          const width = component.sizex * curCanvasScaleSelf.matrixStyleOriginWidth
           // 取余 平铺4个 此处x 位置偏移
           component.x = component.x + component.sizex * tilePosition
           // Y 方向根据当前应该放置的最大值 加上50矩阵余量
           component.y = pYMax + 50 + state.viewBase.sizex * divisiblePosition
-          component.style.left = (component.x - 1) * curCanvasScale.matrixStyleOriginWidth
-          component.style.top = (component.y - 1) * curCanvasScale.matrixStyleOriginHeight
+          component.style.left = (component.x - 1) * curCanvasScaleSelf.matrixStyleOriginWidth
+          component.style.top = (component.y - 1) * curCanvasScaleSelf.matrixStyleOriginHeight
           component.style.width = width
-          component.style.height = component.sizey * curCanvasScale.matrixStyleOriginHeight
+          component.style.height = component.sizey * curCanvasScaleSelf.matrixStyleOriginHeight
         } else {
           const width = component.style.width
           const height = component.style.height
diff --git a/frontend/src/components/canvas/utils/utils.js b/frontend/src/components/canvas/utils/utils.js
index cd002ea3a0..319232a686 100644
--- a/frontend/src/components/canvas/utils/utils.js
+++ b/frontend/src/components/canvas/utils/utils.js
@@ -133,6 +133,10 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
     if (item.component && item.component === 'Picture') {
       item.style.adaptation = item.style.adaptation || 'adaptation'
     }
+    // 增加所属画布ID（canvasId）当前所在画布的父ID（canvasPid） 主画布ID为main-canvas, PID = 0 表示当前所属canvas为最顶层
+    item.canvasId = (item.canvasId || 'canvas-main')
+    item.canvasPid = (item.canvasPid || '0')
+
   })
   // 初始化密度为最高密度
   componentStyle.aidedDesign.matrixBase = 4
@@ -145,7 +149,7 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
 export function resetID(data) {
   if (data) {
     data.forEach(item => {
-      item.type !== 'custom' && (item.id = uuid.v1())
+      item.type !== 'custom' && item.type !== 'de-tabs'&& (item.id = uuid.v1())
     })
   }
   return data
@@ -224,3 +228,7 @@ export function imgUrlTrans(url) {
     return url
   }
 }
+
+export function getNowCanvasComponentData(canvasId){
+  return store.state.componentData.filter(item => item.canvasId===canvasId)
+}
diff --git a/frontend/src/components/dataease/DeOutWidget.vue b/frontend/src/components/dataease/DeOutWidget.vue
index 739b538b52..46aa53326e 100644
--- a/frontend/src/components/dataease/DeOutWidget.vue
+++ b/frontend/src/components/dataease/DeOutWidget.vue
@@ -118,9 +118,6 @@ export default {
       }
       return size
     },
-    ...mapState([
-      'curCanvasScale'
-    ]),
     deSelectGridBg() {
       if (this.element.component !== 'de-select-grid') return null
       const { backgroundColorSelect, color } = this.element.commonBackground
diff --git a/frontend/src/components/widget/DeWidget/DeTabs.vue b/frontend/src/components/widget/DeWidget/DeTabs.vue
index b9c32f817a..da1c648dc1 100644
--- a/frontend/src/components/widget/DeWidget/DeTabs.vue
+++ b/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',
-  components: { TabUseList, ViewSelect, DataeaseTabs },
+  name: 'DeTabs',
+  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 {
-    height: 100%;
-    overflow: hidden;
-  }
+.de-tabs-div {
+  height: 100%;
+  overflow: hidden;
+}
 
-  .de-tabs-height {
-    height: 100%;
-  }
+.de-tabs-height {
+  height: 100%;
+}
 
-  .de-tab-content {
-    width: 100%;
-    height: 100%;
-  }
+.de-tab-content {
+  width: 100%;
+  height: 100%;
+}
+
+.tab_canvas {
+  height: calc(100% - 5px);
+  border: 2px dotted transparent;
+}
+
+.canvas_move_in {
+  border-color: blueviolet;
+}
 
 </style>
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 854bf30cc5..d6ea9912fa 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -63,6 +63,7 @@ const data = {
     // 当前点击组件
     curComponent: null,
     curCanvasScale: null,
+    curCanvasScaleMap: {},
     curComponentIndex: null,
     // 预览仪表板缩放信息
     previewCanvasScale: {
@@ -95,6 +96,10 @@ const data = {
     mobileLayoutStatus: false,
     // 公共链接状态(当前是否是公共链接打开)
     publicLinkStatus: false,
+    pcTabMatrixCount: {
+      x: 36,
+      y: 36
+    },
     pcMatrixCount: {
       x: 36,
       y: 18
@@ -134,7 +139,20 @@ const data = {
       customAttr: {}
     },
     allViewRender: [],
-    isInEditor: false // 是否在编辑器中，用于判断复制、粘贴组件时是否生效，如果在编辑器外，则无视这些操作
+    isInEditor: false, // 是否在编辑器中，用于判断复制、粘贴组件时是否生效，如果在编辑器外，则无视这些操作
+    tabCollisionActiveId: null, // 当前在碰撞的Tab组件ID
+    tabMoveInActiveId: null, // 当前在移入的Tab ID
+    tabMoveOutActiveId: null, // 当前在移出的Tab ID
+    tabMoveOutComponentId: null, // 当前在移出Tab de组件ID
+    tabActiveTabNameMap: {}, // 编辑器中 tab组件中的活动tab页,
+    // 鼠标处于drag状态的坐标点
+    mousePointShadowMap: {
+      mouseX: 0,
+      mouseY: 0,
+      width: 0,
+      height: 0
+    }
+
   },
   mutations: {
     ...animation.mutations,
@@ -146,6 +164,10 @@ const data = {
     ...snapshot.mutations,
     ...lock.mutations,
 
+    setTabActiveTabNameMap(state, tabActiveInfo){
+      state.tabActiveTabNameMap[tabActiveInfo.tabId] = tabActiveInfo.activeTabName
+    },
+
     setClickComponentStatus(state, status) {
       state.isClickComponent = status
     },
@@ -186,8 +208,9 @@ const data = {
       state.curActiveTabInner = curActiveTabInner
     },
 
-    setCurCanvasScale(state, curCanvasScale) {
-      state.curCanvasScale = curCanvasScale
+    setCurCanvasScale(state, curCanvasScaleSelf) {
+      Vue.set(state.curCanvasScaleMap, curCanvasScaleSelf.canvasId, curCanvasScaleSelf)
+      state.curCanvasScale = curCanvasScaleSelf
     },
     setPreviewCanvasScale(state, scale) {
       if (scale.scaleWidth) {
@@ -197,14 +220,16 @@ const data = {
         state.previewCanvasScale.scalePointHeight = scale.scaleHeight
       }
     },
-    setShapeStyle({ curComponent, canvasStyleData, curCanvasScale }, { top, left, width, height, rotate }) {
+    setShapeStyle({ curComponent, canvasStyleData, curCanvasScaleMap }, { top, left, width, height, rotate }) {
+      const curCanvasScaleSelf = curCanvasScaleMap[curComponent.canvasId]
       if (curComponent) {
-        if (top || top === 0) curComponent.style.top = (top / curCanvasScale.scalePointHeight) + 0.0000001
-        if (left || left === 0) curComponent.style.left = (left / curCanvasScale.scalePointWidth) + 0.0000001
-        if (width || width === 0) curComponent.style.width = (width / curCanvasScale.scalePointWidth + 0.0000001)
-        if (height || height === 0) curComponent.style.height = (height / curCanvasScale.scalePointHeight) + 0.0000001
+        if (top || top === 0) curComponent.style.top = (top / curCanvasScaleSelf.scalePointHeight) + 0.0000001
+        if (left || left === 0) curComponent.style.left = (left / curCanvasScaleSelf.scalePointWidth) + 0.0000001
+        if (width || width === 0) curComponent.style.width = (width / curCanvasScaleSelf.scalePointWidth + 0.0000001)
+        if (height || height === 0) curComponent.style.height = (height / curCanvasScaleSelf.scalePointHeight) + 0.0000001
         if (rotate || rotate === 0) curComponent.style.rotate = rotate
       }
+      // console.log("setShapeStyle==="+curComponent.style.width)
     },
 
     setShapeSingleStyle({ curComponent }, { key, value }) {
@@ -715,6 +740,31 @@ const data = {
           item.needAdaptor = false
         }
       })
+    },
+    setTabMoveInActiveId(state, tabId) {
+      state.tabMoveInActiveId = tabId
+    },
+    setTabCollisionActiveId(state, tabId) {
+      state.tabCollisionActiveId = tabId
+    },
+    setTabMoveOutActiveId(state, tabId) {
+      state.tabMoveOutActiveId = tabId
+    },
+    setTabMoveOutComponentId(state, componentId) {
+      state.tabMoveOutComponentId = componentId
+    },
+    clearTabMoveInfo(state){
+      state.tabMoveInActiveId = null
+      state.tabCollisionActiveId = null
+      state.tabMoveOutActiveId = null
+      state.tabMoveOutComponentId = null
+    },
+    setMousePointShadowMap(state,mousePoint){
+      state.mousePointShadowMap.mouseX = mousePoint.mouseX
+      state.mousePointShadowMap.mouseY = mousePoint.mouseY
+      state.mousePointShadowMap.width = mousePoint.width
+      state.mousePointShadowMap.height = mousePoint.height
+      // console.log("mousePointMap:"+JSON.stringify(state.mousePointMap))
     }
   },
   modules: {
diff --git a/frontend/src/views/panel/AssistComponent/index.vue b/frontend/src/views/panel/AssistComponent/index.vue
index 5bfa37cf75..7f08ce4c50 100644
--- a/frontend/src/views/panel/AssistComponent/index.vue
+++ b/frontend/src/views/panel/AssistComponent/index.vue
@@ -120,6 +120,7 @@ export default {
         type: 'assist',
         id: ev.target.dataset.id
       }
+      this.$store.commit('clearTabMoveInfo')
       ev.dataTransfer.setData('componentInfo', JSON.stringify(dataTrans))
       eventBus.$emit('startMoveIn')
     },
@@ -183,6 +184,8 @@ export default {
         component.auxiliaryMatrix = false
       }
       component.moveStatus = 'start'
+      component['canvasId'] = 'canvas-main'
+      component['canvasPid'] = '0'
       return component
     },
     handleDragEnd(ev) {
diff --git a/frontend/src/views/panel/LinkJumpSet/index.vue b/frontend/src/views/panel/LinkJumpSet/index.vue
index d42104e1a9..75563f28a4 100644
--- a/frontend/src/views/panel/LinkJumpSet/index.vue
+++ b/frontend/src/views/panel/LinkJumpSet/index.vue
@@ -408,6 +408,7 @@ import { imgUrlTrans } from '@/components/canvas/utils/utils'
 
 export default {
   components: { codemirror, draggable },
+  name: 'LinkJumpSet',
   props: {
     viewId: {
       type: String,
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index a8899c3cf1..f14c8c6664 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -161,32 +161,22 @@
           :modal-append-to-body="true"
         >
           <div style="width: 295px">
-            <filter-group v-show=" show &&showIndex===1" />
-            <subject-setting v-show=" show &&showIndex===2" />
-            <assist-component v-show=" show &&showIndex===3" />
+            <filter-group :canvas-id="canvasId" v-show=" show &&showIndex===1"/>
+            <subject-setting v-show=" show &&showIndex===2"/>
+            <assist-component v-show=" show &&showIndex===3"/>
           </div>
         </el-drawer>
         <!--PC端画布区域-->
-        <div
-          v-if="!previewVisible&&!mobileLayoutStatus"
-          id="canvasInfo"
-          class="this_canvas"
-          :style="customCanvasStyle"
-          @drop="handleDrop"
-          @dragover="handleDragOver"
-          @mousedown="handleMouseDown"
-          @mouseup="deselectCurComponent"
-          @scroll="canvasScroll"
+        <de-canvas v-if="!previewVisible&&!mobileLayoutStatus"
+                   class="canvas_main_content"
+                   ref="canvasMainRef"
+                   :canvas-style-data="canvasStyleData"
+                   :component-data="mainCanvasComponentData"
+                   :canvas-id="canvasId"
+                   :canvas-pid="'0'"
         >
-          <!-- 仪表板联动清除按钮-->
-          <canvas-opt-bar />
-          <Editor
-            ref="canvasEditor"
-            :matrix-count="pcMatrixCountBase"
-            :out-style="outStyle"
-            :scroll-top="scrollTop"
-          />
-        </div>
+          <canvas-opt-bar slot="optBar"/>
+        </de-canvas>
         <!--移动端画布区域 保持宽高比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
-                  v-if="mobileEditorShow"
-                  id="editorMobile"
-                  ref="editorMobile"
-                  :matrix-count="mobileMatrixCount"
-                  :out-style="outStyle"
-                  :scroll-top="scrollTop"
-                  @canvasDragging="canvasDragging"
-                />
+                <de-canvas v-if="!previewVisible&&mobileLayoutStatus"
+                           ref="canvasMainRef"
+                           :canvas-style-data="canvasStyleData"
+                           :component-data="mainCanvasComponentData"
+                           :canvas-id="canvasId"
+                           :canvas-pid="'0'"
+                           :mobile-layout-status="true"
+                >
+                  <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('button-dialog-edit', this.editButtonDialog)
+    // bus.$off('component-dialog-edit', this.editDialog)
+    // bus.$off('button-dialog-edit', this.editButtonDialog)
     bus.$off('component-dialog-style', this.componentDialogStyle)
     bus.$off('previewFullScreenClose', this.previewFullScreenClose)
     bus.$off('change_panel_right_draw', this.changeRightDrawOpen)
@@ -819,8 +814,8 @@ export default {
     },
     initEvents() {
       bus.$on('component-on-drag', this.componentOnDrag)
-      bus.$on('component-dialog-edit', this.editDialog)
-      bus.$on('button-dialog-edit', this.editButtonDialog)
+      // bus.$on('component-dialog-edit', this.editDialog)
+      // bus.$on('button-dialog-edit', this.editButtonDialog)
       bus.$on('component-dialog-style', this.componentDialogStyle)
       bus.$on('previewFullScreenClose', this.previewFullScreenClose)
       bus.$on('change_panel_right_draw', this.changeRightDrawOpen)
@@ -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.outStyle.width = this.outStyle.width + 0.000001
-        }, 0)
+        this.$refs['canvasMainRef'].restore()
       }
     },
     init(panelId) {
@@ -940,11 +935,11 @@ export default {
     showPanel(type) {
       if (this.showIndex === -1 || this.showIndex === type) {
         this.$nextTick(() => {
-          if (this.show) {
-            this.showIndex === -1
+            if (this.show) {
+              this.showIndex === -1
+            }
+            this.show = !this.show
           }
-          this.show = !this.show
-        }
         )
       }
       this.showIndex = type
@@ -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.top = (this.dragComponentInfo.y - 1) * this.curCanvasScale.matrixStyleOriginHeight
-          this.currentFilterCom.style.width = this.dragComponentInfo.sizex * this.curCanvasScale.matrixStyleOriginWidth
-          this.currentFilterCom.style.height = this.dragComponentInfo.sizey * this.curCanvasScale.matrixStyleOriginHeight
+          this.currentFilterCom.style.left = (this.dragComponentInfo.x - 1) * this.curCanvasScaleSelf.matrixStyleOriginWidth
+          this.currentFilterCom.style.top = (this.dragComponentInfo.y - 1) * this.curCanvasScaleSelf.matrixStyleOriginHeight
+          this.currentFilterCom.style.width = this.dragComponentInfo.sizex * this.curCanvasScaleSelf.matrixStyleOriginWidth
+          this.currentFilterCom.style.height = this.dragComponentInfo.sizey * this.curCanvasScaleSelf.matrixStyleOriginHeight
         } else {
           this.currentFilterCom.style.left = this.dragComponentInfo.shadowStyle.x
           this.currentFilterCom.style.top = this.dragComponentInfo.shadowStyle.y
@@ -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.top = (this.dragComponentInfo.y - 1) * this.curCanvasScale.matrixStyleOriginHeight
-        component.style.width = this.dragComponentInfo.sizex * this.curCanvasScale.matrixStyleOriginWidth
-        component.style.height = this.dragComponentInfo.sizey * this.curCanvasScale.matrixStyleOriginHeight
+        component.style.left = (this.dragComponentInfo.x - 1) * this.curCanvasScaleSelf.matrixStyleOriginWidth
+        component.style.top = (this.dragComponentInfo.y - 1) * this.curCanvasScaleSelf.matrixStyleOriginHeight
+        component.style.width = this.dragComponentInfo.sizex * this.curCanvasScaleSelf.matrixStyleOriginWidth
+        component.style.height = this.dragComponentInfo.sizey * this.curCanvasScaleSelf.matrixStyleOriginHeight
       } else {
         component.style.top = this.dropComponentInfo.shadowStyle.y
         component.style.left = this.dropComponentInfo.shadowStyle.x
@@ -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.top = (component.y - 1) * this.curCanvasScale.matrixStyleOriginHeight
-        component.style.width = component.sizex * this.curCanvasScale.matrixStyleOriginWidth
-        component.style.height = component.sizey * this.curCanvasScale.matrixStyleOriginHeight
+        component.style.left = (component.x - 1) * this.curCanvasScaleSelf.matrixStyleOriginWidth
+        component.style.top = (component.y - 1) * this.curCanvasScaleSelf.matrixStyleOriginHeight
+        component.style.width = component.sizex * this.curCanvasScaleSelf.matrixStyleOriginWidth
+        component.style.height = component.sizey * this.curCanvasScaleSelf.matrixStyleOriginHeight
       } else {
         component.style.left = 0
         component.style.top = 0
@@ -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 {
-    height: calc(100vh - 56px);
-    max-width: 60px;
-    border: none;
-    width: 60px;
-  }
+.ms-aside-container {
+  height: calc(100vh - 56px);
+  max-width: 60px;
+  border: none;
+  width: 60px;
+}
 
-  .ms-main-container {
-    height: calc(100vh - 56px);
-  }
+.ms-main-container {
+  height: calc(100vh - 56px);
+}
 
-  .de-header {
-    height: 56px !important;
-    padding: 0px!important;
-    border-bottom: 1px solid #E6E6E6;
-    background-color: var(--SiderBG, white);
-  }
+.de-header {
+  height: 56px !important;
+  padding: 0px !important;
+  border-bottom: 1px solid #E6E6E6;
+  background-color: var(--SiderBG, white);
+}
 
-  .blackTheme .de-header {
-    background-color: var(--SiderBG, white) !important;
-    color: var(--TextActive);
-  }
+.blackTheme .de-header {
+  background-color: var(--SiderBG, white) !important;
+  color: var(--TextActive);
+}
 
-  .showLeftPanel {
-    overflow: hidden;
-    position: relative;
-    width: 100%;
-  }
+.showLeftPanel {
+  overflow: hidden;
+  position: relative;
+  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;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
-    background: rgba(0, 0, 0, .2);
-    z-index: -1;
+    z-index: 1002;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
   }
 
   .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;
+    transform: translate(0);
   }
+}
 
-  .show {
-    transition: all .3s cubic-bezier(.7, .3, .1, 1);
+.mobile_canvas_main {
+  width: 80%;
+  height: 90%;
+  margin-left: 10%;
+  margin-top: 3%;
+}
 
-    .leftPanel-background {
-      z-index: 1002;
-      opacity: 1;
-      width: 100%;
-      height: 100%;
-    }
+.this_mobile_canvas {
+  border-radius: 30px;
+  min-width: 300px;
+  max-width: 350px;
+  min-height: 600px;
+  max-height: 700px;
+  overflow: hidden;
+  background-color: #000000;
+  background-size: 100% 100% !important;
+}
 
-    .leftPanel {
-      transform: translate(0);
+.this_mobile_canvas_inner_top {
+  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 {
-    width: 80%;
-    height: 90%;
-    margin-left: 10%;
-    margin-top: 3%;
+  .el-dialog__body {
+    padding: 1px 15px !important;
   }
+}
 
-  .this_mobile_canvas {
-    border-radius: 30px;
-    min-width: 300px;
-    max-width: 350px;
-    min-height: 600px;
-    max-height: 700px;
-    overflow: hidden;
-    background-color: #000000;
-    background-size: 100% 100% !important;
-  }
+.style-hidden {
+  overflow-x: hidden;
+}
 
-  .this_mobile_canvas_inner_top {
-    vertical-align: middle;
-    text-align: center;
-    background-color: #f7f8fa;
-    height: 30px;
-    line-height: 30px;
-    font-size: 14px;
-    width: 100%;
-  }
+.button-text {
+  color: var(--TextActive);
+}
 
-  .this_mobile_canvas_top {
-    height: 30px;
-    width: 100%;
-  }
+.mobile-canvas {
+  width: 300px;
+  height: 600px;
+}
 
-  .this_mobile_canvas_inner_bottom {
-    background-color: #f7f8fa;
-    line-height: 30px;
-    vertical-align: middle;
-    color: gray;
-    height: 30px;
-    width: 100%;
-  }
+::-webkit-scrollbar {
+  width: 2px !important;
+  height: 2px !important;
+}
 
-  .this_mobile_canvas_bottom {
-    height: 30px;
-    width: 100%;
-  }
+.tools-window-main {
+  width: 350px;
+  background-color: #FFFFFF;
+  transition: 1s;
+}
 
-  .this_mobile_canvas_main {
-    overflow-x: hidden;
-    overflow-y: auto;
-    height: calc(100% - 120px);;
-    background-color: #d7d9e3;
-    background-size: 100% 100% !important;
-  }
+.tools-window-tabs {
+  height: calc(100vh - 100px);
+  overflow: hidden;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
 
-  .this_mobile_canvas_cell {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
+::v-deep .el-tabs__item {
+  padding: 0 15px;
+}
 
-  .this_mobile_canvas_wait_cell {
-    background-size: 100% 100% !important;
-    border: 2px solid #9ea6b2
-  }
+.view-selected-message-class {
+  font-size: 12px;
+  color: #9ea6b2;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(100vh - 100px);
+}
 
-  .this_canvas {
-    width: 100%;
-    height: calc(100vh - 56px);
-    overflow-x: hidden;
-    overflow-y: auto;
-    background-size: 100% 100% !important;
-  }
+.dialog-css ::v-deep .el-dialog__title {
+  font-size: 14px;
+}
 
-  .el-main {
-    height: calc(100vh - 56px);
-    padding: 0 !important;
-    overflow: auto;
-    position: relative;
-  }
+.dialog-css ::v-deep .el-dialog__header {
+  padding: 20px 20px 0;
+}
 
-  .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;
-      }
-    }
-
-    .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;
-  }
+.dialog-css ::v-deep .el-dialog__body {
+  padding: 10px 20px 20px;
+}
 </style>
diff --git a/frontend/src/views/panel/filter/index.vue b/frontend/src/views/panel/filter/index.vue
index cc0a1ec8cf..8a8cec5c49 100644
--- a/frontend/src/views/panel/filter/index.vue
+++ b/frontend/src/views/panel/filter/index.vue
@@ -40,6 +40,12 @@ import eventBus from '@/components/canvas/utils/eventBus'
 import { mapState } from 'vuex'
 export default {
   name: 'FilterGroup',
+  props: {
+    canvasId: {
+      type: String,
+      require: true
+    }
+  },
   data() {
     return {
       panelInfo: this.$store.state.panel.panelInfo,
@@ -73,9 +79,12 @@ export default {
   computed: {
     ...mapState([
       'canvasStyleData',
-      'curCanvasScale',
+      'curCanvasScaleMap',
       'componentData'
     ]),
+    curCanvasScaleSelf(){
+      return this.curCanvasScaleMap[this.canvasId]
+    },
     searchButtonExist() {
       return this.componentData && this.componentData.some(component => component.type === 'custom-button' && component.serviceName === 'buttonSureWidget')
     },
@@ -119,10 +128,12 @@ export default {
       // 设置矩阵标记点
       dragComponentInfo.x = 1
       dragComponentInfo.y = 1
-      dragComponentInfo.sizex = Math.round(dragComponentInfo.style.width / this.curCanvasScale.matrixStyleOriginWidth)
-      dragComponentInfo.sizey = Math.round(dragComponentInfo.style.height / this.curCanvasScale.matrixStyleOriginHeight)
+      dragComponentInfo.sizex = Math.round(dragComponentInfo.style.width / this.curCanvasScaleSelf.matrixStyleOriginWidth)
+      dragComponentInfo.sizey = Math.round(dragComponentInfo.style.height / this.curCanvasScaleSelf.matrixStyleOriginHeight)
       dragComponentInfo.auxiliaryMatrix = this.canvasStyleData.auxiliaryMatrix
       dragComponentInfo.moveStatus = 'start'
+      dragComponentInfo['canvasId'] = 'canvas-main'
+      dragComponentInfo['canvasPid'] = '0'
       this.$store.commit('setDragComponentInfo', dragComponentInfo)
       ev.dataTransfer.effectAllowed = 'copy'
       const dataTrans = {
diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue
index 4aa8a8d006..106a7dbb4a 100644
--- a/frontend/src/views/panel/list/PanelViewShow.vue
+++ b/frontend/src/views/panel/list/PanelViewShow.vue
@@ -205,7 +205,7 @@
           >
             <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 {