From 3f4375827f1736de587e16741a2acc9f99414d67 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 16 Sep 2021 16:10:16 +0800
Subject: [PATCH 01/12] =?UTF-8?q?feat:=E4=BB=AA=E8=A1=A8=E6=9D=BF=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE=E6=94=B9=E5=8F=98=E5=A4=A7=E7=9F=A9=E9=98=B5=E5=BC=8F?=
 =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E9=A2=84=E5=88=A4=E8=A7=86=E5=9B=BE=E5=AE=9E?=
 =?UTF-8?q?=E9=99=85=E5=B0=BA=E5=AF=B8=E5=A4=A7=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/DeDrag/index.vue      | 43 ++++++++++++++++++-
 .../canvas/components/Editor/index.vue        |  7 +--
 .../canvas/custom-component/UserView.vue      |  2 +-
 3 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue
index 1d95915e4c..08b51318b8 100644
--- a/frontend/src/components/DeDrag/index.vue
+++ b/frontend/src/components/DeDrag/index.vue
@@ -32,7 +32,9 @@
     >
       <slot :name="handlei" />
     </div>
-    <slot />
+    <div :style="mainSlotStyle">
+      <slot />
+    </div>
   </div>
 </template>
 
@@ -445,7 +447,7 @@ export default {
       return {
         width: this.computedWidth,
         height: this.computedHeight,
-        opacity: 0.2,
+        opacity: 0.4,
         background: 'gray'
       }
     },
@@ -473,7 +475,44 @@ export default {
       return this.height + 'px'
     },
 
+    //  根据left right 算出元素的宽度
+    computedMainSlotWidth() {
+      if (this.w === 'auto') {
+        if (!this.widthTouched) {
+          return 'auto'
+        }
+      }
+      if (this.canvasStyleData.auxiliaryMatrix) {
+        const width = Math.round(this.width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
+        return width + 'px'
+      } else {
+        return this.width + 'px'
+      }
+    },
+    // 根据top bottom 算出元素的宽度
+    computedMainSlotHeight() {
+      if (this.h === 'auto') {
+        if (!this.heightTouched) {
+          return 'auto'
+        }
+      }
+      if (this.canvasStyleData.auxiliaryMatrix) {
+        const height = Math.round(this.height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
+        return height + 'px'
+      } else {
+        return this.height + 'px'
+      }
+    },
+
     // private
+    mainSlotStyle() {
+      const style = {
+        width: this.computedMainSlotWidth,
+        height: this.computedMainSlotHeight
+      }
+      console.log('style=>' + JSON.stringify(style))
+      return style
+    },
     ...mapState([
       'curComponent',
       'editor',
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index afd486554a..33fc9af320 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -12,7 +12,7 @@
     @mousedown="handleMouseDown"
   >
     <!-- 网格线 -->
-    <!--    <Grid v-if="canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />-->
+    <Grid v-if="canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />
 
     <!-- 仪表板联动清除按钮-->
     <canvas-opt-bar />
@@ -221,8 +221,8 @@ export default {
       },
       // 矩阵数量 默认 128 * 72
       matrixCount: {
-        x: 80,
-        y: 45
+        x: 36,
+        y: 18
       },
       customStyleHistory: null,
       showDrag: true,
@@ -636,6 +636,7 @@ export default {
     },
     resizeView(index, item) {
       if (item.type === 'view') {
+        console.log('view:resizeView')
         this.$refs.wrapperChild[index].chartResize()
       }
     }
diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index 74cf2d3f86..4aa962993b 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -435,7 +435,7 @@ export default {
             this.$refs[this.element.propValue.id].chartResize()
           }
           this.destroyTimeMachine()
-        }, 200)
+        }, 50)
       }
     },
 

From e35bb5c692adddffb932217bd2bb124be2055e88 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 16 Sep 2021 18:42:11 +0800
Subject: [PATCH 02/12] =?UTF-8?q?feat:=E4=BB=AA=E8=A1=A8=E6=9D=BF=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE=E6=8B=96=E6=8B=BD=E9=98=B4=E5=BD=B1=E8=B7=9F=E9=9A=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/DeDrag/index.vue      |  6 ++-
 frontend/src/components/DeDrag/shadow.vue     | 47 +++++++++++++++++++
 .../canvas/components/Editor/index.vue        |  6 +--
 frontend/src/store/index.js                   |  5 ++
 4 files changed, 60 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/DeDrag/shadow.vue

diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue
index 08b51318b8..17feeae9fd 100644
--- a/frontend/src/components/DeDrag/index.vue
+++ b/frontend/src/components/DeDrag/index.vue
@@ -52,7 +52,7 @@ import EditBar from '@/components/canvas/components/Editor/EditBar'
 
 export default {
   replace: true,
-  name: 'VueDragResizeRotate',
+  name: 'Dedrag',
   components: { EditBar },
   props: {
     className: {
@@ -1572,6 +1572,10 @@ export default {
       addEvent(document.documentElement, 'touchend touchcancel', this.deselect)
       //  窗口变化时，检查容器大小
       addEvent(window, 'resize', this.checkParentSize)
+
+      // private 记录当前组件的操作状态
+      this.curComponent.optStatus.resizing = this.resizing
+      this.curComponent.optStatus.dragging = this.dragging
     },
     createdFunction() {
       // minWidth不能大于maxWidth
diff --git a/frontend/src/components/DeDrag/shadow.vue b/frontend/src/components/DeDrag/shadow.vue
new file mode 100644
index 0000000000..e35a5376ce
--- /dev/null
+++ b/frontend/src/components/DeDrag/shadow.vue
@@ -0,0 +1,47 @@
+<template>
+  <div style="z-index:-1" :style="style" />
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  replace: true,
+  name: 'Shadow',
+  computed: {
+    style() {
+      // 当前默认为自适应
+      let left = this.curComponent.style.left * this.curCanvasScale.scaleWidth / 100
+      let top = this.curComponent.style.top * this.curCanvasScale.scaleHeight / 100
+      let width = this.curComponent.style.width * this.curCanvasScale.scaleWidth / 100
+      let height = this.curComponent.style.height * this.curCanvasScale.scaleHeight / 100
+      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'
+      }
+      console.log('style=>' + JSON.stringify(style))
+      return style
+    },
+    ...mapState([
+      'curComponent',
+      'editor',
+      'curCanvasScale',
+      'canvasStyleData',
+      'linkageSettingStatus'
+    ])
+  }
+
+}
+</script>
+<style scoped>
+
+</style>
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index 33fc9af320..c14151c562 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -104,9 +104,8 @@
         :active="item === curComponent"
       />
     </de-drag>
-
     <!--拖拽阴影部分-->
-
+    <drag-shadow v-if="curComponent&&this.curComponent.optStatus.dragging" />
     <!-- 右击菜单 -->
     <ContextMenu />
     <!-- 标线 (临时去掉标线 吸附等功能)-->
@@ -169,9 +168,10 @@ import { deepCopy } from '@/components/canvas/utils/utils'
 import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'
 import DeOutWidget from '@/components/dataease/DeOutWidget'
 import CanvasOptBar from '@/components/canvas/components/Editor/CanvasOptBar'
+import DragShadow from '@/components/DeDrag/shadow'
 
 export default {
-  components: { Shape, ContextMenu, MarkLine, Area, Grid, DeDrag, UserViewDialog, DeOutWidget, CanvasOptBar },
+  components: { Shape, ContextMenu, MarkLine, Area, Grid, DeDrag, UserViewDialog, DeOutWidget, CanvasOptBar, DragShadow },
   props: {
     isEdit: {
       type: Boolean,
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index ae045bcd1c..b11a051fd8 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -86,6 +86,11 @@ const data = {
     },
 
     setCurComponent(state, { component, index }) {
+      // 当前视图操作状态置空
+      component['optStatus'] = {
+        dragging: false,
+        resizing: false
+      }
       state.styleChangeTimes = 0
       state.curComponent = component
       state.curComponentIndex = index

From 486fd0f60545c07f653182fbbb72f97f293cda61 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Fri, 17 Sep 2021 10:51:22 +0800
Subject: [PATCH 03/12] =?UTF-8?q?feat:=E4=BB=AA=E8=A1=A8=E6=9D=BF=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE=E6=8B=96=E6=8B=BD=E9=98=B4=E5=BD=B1=E8=B7=9F=E9=9A=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/DeDrag/index.vue      | 22 ++++++++++++++-----
 frontend/src/components/DeDrag/shadow.vue     |  2 +-
 .../canvas/components/Editor/index.vue        |  4 ++--
 frontend/src/store/index.js                   |  8 ++++---
 4 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue
index 17feeae9fd..9c31fc37b3 100644
--- a/frontend/src/components/DeDrag/index.vue
+++ b/frontend/src/components/DeDrag/index.vue
@@ -510,11 +510,13 @@ export default {
         width: this.computedMainSlotWidth,
         height: this.computedMainSlotHeight
       }
-      console.log('style=>' + JSON.stringify(style))
+      // console.log('style=>' + JSON.stringify(style))
       return style
     },
+    curComponent() {
+      return this.$store.state.curComponent
+    },
     ...mapState([
-      'curComponent',
       'editor',
       'curCanvasScale',
       'canvasStyleData',
@@ -614,6 +616,18 @@ export default {
       this.beforeDestroyFunction()
       this.createdFunction()
       this.mountedFunction()
+    },
+    // private 监控dragging  resizing
+    dragging(val) {
+      if (this.enabled) {
+        this.curComponent.optStatus.dragging = val
+      }
+    },
+    // private 监控dragging  resizing
+    resizing(val) {
+      if (this.enabled) {
+        this.curComponent.optStatus.resizing = val
+      }
     }
   },
   created: function() {
@@ -1572,10 +1586,6 @@ export default {
       addEvent(document.documentElement, 'touchend touchcancel', this.deselect)
       //  窗口变化时，检查容器大小
       addEvent(window, 'resize', this.checkParentSize)
-
-      // private 记录当前组件的操作状态
-      this.curComponent.optStatus.resizing = this.resizing
-      this.curComponent.optStatus.dragging = this.dragging
     },
     createdFunction() {
       // minWidth不能大于maxWidth
diff --git a/frontend/src/components/DeDrag/shadow.vue b/frontend/src/components/DeDrag/shadow.vue
index e35a5376ce..e0a1d9993a 100644
--- a/frontend/src/components/DeDrag/shadow.vue
+++ b/frontend/src/components/DeDrag/shadow.vue
@@ -28,7 +28,7 @@ export default {
         background: 'gray',
         position: 'absolute'
       }
-      console.log('style=>' + JSON.stringify(style))
+      // console.log('style=>' + JSON.stringify(style))
       return style
     },
     ...mapState([
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index c14151c562..00fe06832b 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -12,7 +12,7 @@
     @mousedown="handleMouseDown"
   >
     <!-- 网格线 -->
-    <Grid v-if="canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />
+<!--    <Grid v-if="canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />-->
 
     <!-- 仪表板联动清除按钮-->
     <canvas-opt-bar />
@@ -636,7 +636,7 @@ export default {
     },
     resizeView(index, item) {
       if (item.type === 'view') {
-        console.log('view:resizeView')
+        // console.log('view:resizeView')
         this.$refs.wrapperChild[index].chartResize()
       }
     }
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index b11a051fd8..4fa489018c 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -87,9 +87,11 @@ const data = {
 
     setCurComponent(state, { component, index }) {
       // 当前视图操作状态置空
-      component['optStatus'] = {
-        dragging: false,
-        resizing: false
+      if (component) {
+        component['optStatus'] = {
+          dragging: false,
+          resizing: false
+        }
       }
       state.styleChangeTimes = 0
       state.curComponent = component

From 24589b12aa3254591fce2729a39a01abfa444aff Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Fri, 17 Sep 2021 11:25:15 +0800
Subject: [PATCH 04/12] =?UTF-8?q?refactor:=E4=BB=AA=E8=A1=A8=E6=9D=BF?=
 =?UTF-8?q?=E7=9F=A9=E5=BD=A2=EF=BC=8C=E6=96=87=E5=AD=97=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=8C=E9=97=B4=E9=9A=99=E7=AD=89=E9=BB=98=E8=AE=A4=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/DeDrag/index.vue               |  6 +++++-
 .../canvas/components/Editor/ComponentWrapper.vue      |  2 +-
 .../components/canvas/components/Editor/Preview.vue    |  2 +-
 .../src/components/canvas/components/Editor/index.vue  |  3 +--
 .../canvas/custom-component/component-list.js          | 10 +++++-----
 5 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue
index 9c31fc37b3..5828cae258 100644
--- a/frontend/src/components/DeDrag/index.vue
+++ b/frontend/src/components/DeDrag/index.vue
@@ -32,7 +32,7 @@
     >
       <slot :name="handlei" />
     </div>
-    <div :style="mainSlotStyle">
+    <div :style="mainSlotStyle" :class="{'gap_class':canvasStyleData.panel.gap==='yes'}">
       <slot />
     </div>
   </div>
@@ -1712,6 +1712,10 @@ export default {
   opacity: 0.5;
 }
 
+.gap_class{
+  padding:5px;
+}
+
 /*.mouseOn >>> .icon-shezhi{*/
 /*  z-index: 2;*/
 /*  display:block!important;*/
diff --git a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
index 51bc67d471..508622ff35 100644
--- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
@@ -127,7 +127,7 @@ export default {
   box-shadow:0px 0px 7px #0a7be0;
 }
 .gap_class{
-  padding:3px;
+  padding:5px;
 }
 .component-custom {
   outline: none;
diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue
index e73b426c00..1a36d8fc36 100644
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/frontend/src/components/canvas/components/Editor/Preview.vue
@@ -259,7 +259,7 @@ export default {
   color: #9ea6b2;
 }
 .gap_class{
-  padding:3px;
+  padding:5px;
 }
 .dialog-css>>>.el-dialog__title {
   font-size: 14px;
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index 00fe06832b..eb7655680a 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -32,7 +32,6 @@
       :active="item === curComponent"
       :element="item"
       class-name-active="de-drag-active"
-      :class="{'gap_class':canvasStyleData.panel.gap==='yes'}"
       :snap="true"
       :snap-tolerance="2"
       :change-style="customStyle"
@@ -671,7 +670,7 @@ export default {
 }
 
 .gap_class{
-   padding:3px;
+   padding:5px;
 }
 
 // 拖拽组件样式
diff --git a/frontend/src/components/canvas/custom-component/component-list.js b/frontend/src/components/canvas/custom-component/component-list.js
index 9a3ecfd7fc..391d1590ba 100644
--- a/frontend/src/components/canvas/custom-component/component-list.js
+++ b/frontend/src/components/canvas/custom-component/component-list.js
@@ -51,9 +51,9 @@ const list = [
     icon: 'wenben',
     type: 'v-text',
     style: {
-      width: 300,
+      width: 400,
       height: 100,
-      fontSize: 18,
+      fontSize: 22,
       fontWeight: 400,
       lineHeight: '',
       letterSpacing: 0,
@@ -120,10 +120,10 @@ const list = [
     icon: 'juxing',
     type: 'rect-shape',
     style: {
-      width: 200,
-      height: 200,
+      width: 400,
+      height: 300,
       borderStyle: 'solid',
-      borderWidth: 1,
+      borderWidth: 0,
       borderColor: '#000000',
       backgroundColor: '#ffffff',
       borderRadius: 0

From 26e2110434fea42148d176b0ce36bb436131306f Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Fri, 17 Sep 2021 17:48:58 +0800
Subject: [PATCH 05/12] =?UTF-8?q?refactor:=E4=BB=AA=E8=A1=A8=E6=9D=BF?=
 =?UTF-8?q?=E7=9F=A9=E5=BD=A2=EF=BC=8C=E6=96=87=E5=AD=97=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=8C=E9=97=B4=E9=9A=99=E7=AD=89=E9=BB=98=E8=AE=A4=E6=A0=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/DeDrag/MoveInShadow.vue    | 69 +++++++++++++++++++
 frontend/src/components/DeDrag/shadow.vue     |  2 +-
 .../canvas/components/Editor/index.vue        |  2 +-
 frontend/src/store/index.js                   | 10 ++-
 frontend/src/views/panel/ViewSelect/index.vue |  2 +
 frontend/src/views/panel/edit/index.vue       |  2 +
 6 files changed, 84 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/DeDrag/MoveInShadow.vue

diff --git a/frontend/src/components/DeDrag/MoveInShadow.vue b/frontend/src/components/DeDrag/MoveInShadow.vue
new file mode 100644
index 0000000000..366436c3aa
--- /dev/null
+++ b/frontend/src/components/DeDrag/MoveInShadow.vue
@@ -0,0 +1,69 @@
+<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'
+      }
+      // console.log('style=>' + JSON.stringify(style))
+      return style
+    },
+    ...mapState([
+      'curComponent',
+      'editor',
+      'curCanvasScale',
+      'canvasStyleData',
+      'linkageSettingStatus'
+    ])
+  }
+
+}
+</script>
+<style scoped>
+
+</style>
diff --git a/frontend/src/components/DeDrag/shadow.vue b/frontend/src/components/DeDrag/shadow.vue
index e0a1d9993a..f4c7796496 100644
--- a/frontend/src/components/DeDrag/shadow.vue
+++ b/frontend/src/components/DeDrag/shadow.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="z-index:-1" :style="style" />
+  <div style="z-index:1" :style="style" />
 </template>
 
 <script>
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index eb7655680a..2c95f1da12 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -670,7 +670,7 @@ export default {
 }
 
 .gap_class{
-   padding:5px;
+   padding:3px;
 }
 
 // 拖拽组件样式
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 4fa489018c..850cbfe545 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -58,7 +58,9 @@ const data = {
     // 和当前组件联动的目标组件
     targetLinkageInfo: [],
     // 当前仪表板联动 下钻 上卷等信息
-    nowPanelTrackInfo: {}
+    nowPanelTrackInfo: {},
+    // 拖拽的组件信息
+    dragComponentInfo: null
   },
   mutations: {
     ...animation.mutations,
@@ -254,6 +256,12 @@ const data = {
         }
       })
       // state.styleChangeTimes++
+    },
+    setDragComponentInfo(state, dragComponentInfo) {
+      state.dragComponentInfo = dragComponentInfo
+    },
+    clearDragComponentInfo(state) {
+      state.dragComponentInfo = null
     }
   },
   modules: {
diff --git a/frontend/src/views/panel/ViewSelect/index.vue b/frontend/src/views/panel/ViewSelect/index.vue
index 696f36b242..d12896fd44 100644
--- a/frontend/src/views/panel/ViewSelect/index.vue
+++ b/frontend/src/views/panel/ViewSelect/index.vue
@@ -105,11 +105,13 @@ export default {
       })
     },
     handleDragStart(node, ev) {
+      this.$store.commit('setDragComponentInfo', node)
       ev.dataTransfer.effectAllowed = 'copy'
       const dataTrans = {
         type: 'view',
         id: node.data.id
       }
+
       ev.dataTransfer.setData('componentInfo', JSON.stringify(dataTrans))
     },
 
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 8575355a59..4812dda47d 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -440,6 +440,7 @@ export default {
       return data
     },
     handleDrop(e) {
+      this.$store.commit('clearDragComponentInfo')
       this.currentDropElement = e
       e.preventDefault()
       e.stopPropagation()
@@ -509,6 +510,7 @@ export default {
     },
 
     handleDragOver(e) {
+      console.log('handleDragOver=>x:' + this.getPositionX(e.layerX) + ';y=' + this.getPositionY(e.layerY) + e.dataTransfer.getData('componentInfo'))
       e.preventDefault()
       e.dataTransfer.dropEffect = 'copy'
     },

From d3e2756b26f5d7d94046193bdcc5ed0c7de2aab3 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Sat, 18 Sep 2021 10:39:50 +0800
Subject: [PATCH 06/12] =?UTF-8?q?fix:=20=E6=97=A5=E6=9C=9F=E4=B8=8B?=
 =?UTF-8?q?=E9=92=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../main/java/io/dataease/provider/ch/CHQueryProvider.java | 6 ++++++
 .../io/dataease/provider/doris/DorisQueryProvider.java     | 6 ++++++
 .../main/java/io/dataease/provider/es/EsQueryProvider.java | 6 ++++++
 .../io/dataease/provider/mysql/MysqlQueryProvider.java     | 6 ++++++
 .../io/dataease/provider/oracle/OracleQueryProvider.java   | 6 ++++++
 .../main/java/io/dataease/provider/pg/PgQueryProvider.java | 6 ++++++
 .../provider/sqlserver/SqlserverQueryProvider.java         | 7 +++++++
 7 files changed, 43 insertions(+)

diff --git a/backend/src/main/java/io/dataease/provider/ch/CHQueryProvider.java b/backend/src/main/java/io/dataease/provider/ch/CHQueryProvider.java
index fd34f5ebc6..6e824b9830 100644
--- a/backend/src/main/java/io/dataease/provider/ch/CHQueryProvider.java
+++ b/backend/src/main/java/io/dataease/provider/ch/CHQueryProvider.java
@@ -872,6 +872,12 @@ public class CHQueryProvider extends QueryProvider {
             split = "-";
         } else if (StringUtils.equalsIgnoreCase(datePattern, "date_split")) {
             split = "/";
+        } else {
+            split = "-";
+        }
+
+        if (StringUtils.isEmpty(dateStyle)) {
+            return "%Y-%m-%d %H:%M:%S";
         }
 
         switch (dateStyle) {
diff --git a/backend/src/main/java/io/dataease/provider/doris/DorisQueryProvider.java b/backend/src/main/java/io/dataease/provider/doris/DorisQueryProvider.java
index a45b00a682..4e2edef89b 100644
--- a/backend/src/main/java/io/dataease/provider/doris/DorisQueryProvider.java
+++ b/backend/src/main/java/io/dataease/provider/doris/DorisQueryProvider.java
@@ -865,6 +865,12 @@ public class DorisQueryProvider extends QueryProvider {
             split = "-";
         } else if (StringUtils.equalsIgnoreCase(datePattern, "date_split")) {
             split = "/";
+        } else {
+            split = "-";
+        }
+
+        if (StringUtils.isEmpty(dateStyle)) {
+            return "%Y-%m-%d %H:%i:%S";
         }
 
         switch (dateStyle) {
diff --git a/backend/src/main/java/io/dataease/provider/es/EsQueryProvider.java b/backend/src/main/java/io/dataease/provider/es/EsQueryProvider.java
index dd8b7062da..9f8924c6eb 100644
--- a/backend/src/main/java/io/dataease/provider/es/EsQueryProvider.java
+++ b/backend/src/main/java/io/dataease/provider/es/EsQueryProvider.java
@@ -816,6 +816,12 @@ public class EsQueryProvider extends QueryProvider {
             split = "-";
         } else if (StringUtils.equalsIgnoreCase(datePattern, "date_split")) {
             split = "/";
+        } else {
+            split = "-";
+        }
+
+        if (StringUtils.isEmpty(dateStyle)) {
+            return "YYYY-MM-dd HH:mm:ss";
         }
 
         switch (dateStyle) {
diff --git a/backend/src/main/java/io/dataease/provider/mysql/MysqlQueryProvider.java b/backend/src/main/java/io/dataease/provider/mysql/MysqlQueryProvider.java
index 792e37a004..3e1e8448c8 100644
--- a/backend/src/main/java/io/dataease/provider/mysql/MysqlQueryProvider.java
+++ b/backend/src/main/java/io/dataease/provider/mysql/MysqlQueryProvider.java
@@ -859,6 +859,12 @@ public class MysqlQueryProvider extends QueryProvider {
             split = "-";
         } else if (StringUtils.equalsIgnoreCase(datePattern, "date_split")) {
             split = "/";
+        } else {
+            split = "-";
+        }
+
+        if (StringUtils.isEmpty(dateStyle)) {
+            return "%Y-%m-%d %H:%i:%S";
         }
 
         switch (dateStyle) {
diff --git a/backend/src/main/java/io/dataease/provider/oracle/OracleQueryProvider.java b/backend/src/main/java/io/dataease/provider/oracle/OracleQueryProvider.java
index 6eda02c29a..a37910e01e 100644
--- a/backend/src/main/java/io/dataease/provider/oracle/OracleQueryProvider.java
+++ b/backend/src/main/java/io/dataease/provider/oracle/OracleQueryProvider.java
@@ -899,6 +899,12 @@ public class OracleQueryProvider extends QueryProvider {
             split = "-";
         } else if (StringUtils.equalsIgnoreCase(datePattern, "date_split")) {
             split = "/";
+        } else {
+            split = "-";
+        }
+
+        if (StringUtils.isEmpty(dateStyle)) {
+            return OracleConstants.DEFAULT_DATE_FORMAT;
         }
 
         switch (dateStyle) {
diff --git a/backend/src/main/java/io/dataease/provider/pg/PgQueryProvider.java b/backend/src/main/java/io/dataease/provider/pg/PgQueryProvider.java
index d53b88f60e..67c89758b9 100644
--- a/backend/src/main/java/io/dataease/provider/pg/PgQueryProvider.java
+++ b/backend/src/main/java/io/dataease/provider/pg/PgQueryProvider.java
@@ -886,6 +886,12 @@ public class PgQueryProvider extends QueryProvider {
             split = "-";
         } else if (StringUtils.equalsIgnoreCase(datePattern, "date_split")) {
             split = "/";
+        } else {
+            split = "-";
+        }
+
+        if (StringUtils.isEmpty(dateStyle)) {
+            return "'YYYY-MM-DD HH24:MI:SS'";
         }
 
         switch (dateStyle) {
diff --git a/backend/src/main/java/io/dataease/provider/sqlserver/SqlserverQueryProvider.java b/backend/src/main/java/io/dataease/provider/sqlserver/SqlserverQueryProvider.java
index a5c115af2b..3fcb7b5824 100644
--- a/backend/src/main/java/io/dataease/provider/sqlserver/SqlserverQueryProvider.java
+++ b/backend/src/main/java/io/dataease/provider/sqlserver/SqlserverQueryProvider.java
@@ -13,6 +13,7 @@ import io.dataease.dto.chart.ChartViewFieldDTO;
 import io.dataease.dto.sqlObj.SQLObj;
 import io.dataease.provider.QueryProvider;
 import io.dataease.provider.SQLConstants;
+import io.dataease.provider.oracle.OracleConstants;
 import org.apache.commons.collections4.CollectionUtils;
 import org.apache.commons.lang3.ObjectUtils;
 import org.apache.commons.lang3.StringUtils;
@@ -825,6 +826,12 @@ public class SqlserverQueryProvider extends QueryProvider {
             split = "-";
         } else if (StringUtils.equalsIgnoreCase(datePattern, "date_split")) {
             split = "/";
+        } else {
+            split = "-";
+        }
+
+        if (StringUtils.isEmpty(dateStyle)) {
+            return "convert(varchar," + originField + ",120)";
         }
 
         switch (dateStyle) {

From a559cab9fbb071113af631b2955b4902a8afd776 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Wed, 22 Sep 2021 11:03:25 +0800
Subject: [PATCH 07/12] =?UTF-8?q?feat:=20=E5=85=A8=E9=83=A8=E5=B7=B2?=
 =?UTF-8?q?=E8=AF=BB=E6=88=96=E6=A0=87=E8=AE=B0=E5=B7=B2=E8=AF=BB=E5=AE=9E?=
 =?UTF-8?q?=E6=97=B6=E6=9B=B4=E6=96=B0=E9=A1=B6=E9=83=A8=E6=9C=AA=E8=AF=BB?=
 =?UTF-8?q?=E6=95=B0=E7=9B=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/msg/unread.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/views/msg/unread.vue b/frontend/src/views/msg/unread.vue
index c5500bc8b2..c322b7eb63 100644
--- a/frontend/src/views/msg/unread.vue
+++ b/frontend/src/views/msg/unread.vue
@@ -169,6 +169,7 @@ export default {
     allMarkReaded() {
       allRead().then(res => {
         this.$success(this.$t('webmsg.mark_success'))
+        bus.$emit('refresh-top-notification')
         this.search()
       })
     },
@@ -180,6 +181,7 @@ export default {
       const param = this.multipleSelection.map(item => item.msgId)
       batchRead(param).then(res => {
         this.$success(this.$t('webmsg.mark_success'))
+        bus.$emit('refresh-top-notification')
         this.search()
       })
     },

From d1e56b578455b3beeda7ec3215942e6fdf613a30 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Wed, 22 Sep 2021 15:40:12 +0800
Subject: [PATCH 08/12] =?UTF-8?q?fix:=20Doris=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../io/dataease/provider/doris/DorisConstants.java   |  2 ++
 .../dataease/provider/doris/DorisQueryProvider.java  | 12 ++++++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/backend/src/main/java/io/dataease/provider/doris/DorisConstants.java b/backend/src/main/java/io/dataease/provider/doris/DorisConstants.java
index 22792a429e..6f9a65f1c8 100644
--- a/backend/src/main/java/io/dataease/provider/doris/DorisConstants.java
+++ b/backend/src/main/java/io/dataease/provider/doris/DorisConstants.java
@@ -33,6 +33,8 @@ public class DorisConstants extends SQLConstants {
 
     public static final String WHERE_VALUE_VALUE = "'%s'";
 
+    public static final String WHERE_NUMBER_VALUE = "%s";
+
     public static final String AGG_COUNT = "COUNT(*)";
 
     public static final String AGG_FIELD = "%s(%s)";
diff --git a/backend/src/main/java/io/dataease/provider/doris/DorisQueryProvider.java b/backend/src/main/java/io/dataease/provider/doris/DorisQueryProvider.java
index 4e2edef89b..ce05913ede 100644
--- a/backend/src/main/java/io/dataease/provider/doris/DorisQueryProvider.java
+++ b/backend/src/main/java/io/dataease/provider/doris/DorisQueryProvider.java
@@ -785,7 +785,11 @@ public class DorisQueryProvider extends QueryProvider {
             } else if (StringUtils.containsIgnoreCase(request.getTerm(), "like")) {
                 whereValue = "'%" + value + "%'";
             } else {
-                whereValue = String.format(DorisConstants.WHERE_VALUE_VALUE, value);
+                if (field.getDeExtractType() == 2 || field.getDeExtractType() == 3 || field.getDeExtractType() == 4) {
+                    whereValue = String.format(DorisConstants.WHERE_NUMBER_VALUE, value);
+                } else {
+                    whereValue = String.format(DorisConstants.WHERE_VALUE_VALUE, value);
+                }
             }
             list.add(SQLObj.builder()
                     .whereField(whereName)
@@ -849,7 +853,11 @@ public class DorisQueryProvider extends QueryProvider {
                     whereValue = String.format(DorisConstants.WHERE_BETWEEN, value.get(0), value.get(1));
                 }
             } else {
-                whereValue = String.format(DorisConstants.WHERE_VALUE_VALUE, value.get(0));
+                if (field.getDeExtractType() == 2 || field.getDeExtractType() == 3 || field.getDeExtractType() == 4) {
+                    whereValue = String.format(DorisConstants.WHERE_NUMBER_VALUE, value.get(0));
+                } else {
+                    whereValue = String.format(DorisConstants.WHERE_VALUE_VALUE, value.get(0));
+                }
             }
             list.add(SQLObj.builder()
                     .whereField(whereName)

From 1b2115273ddbed01cb4b607f8b6e933021d3b9f4 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 22 Sep 2021 16:51:41 +0800
Subject: [PATCH 09/12] =?UTF-8?q?feat:=E7=BC=96=E8=BE=91=E4=BB=AA=E8=A1=A8?=
 =?UTF-8?q?=E6=9D=BF=E6=97=B6=EF=BC=8C=E5=A4=96=E9=83=A8=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=8B=96=E6=8B=BD=E8=BF=9B=E4=BB=AA=E8=A1=A8=E6=9D=BF=E6=97=B6?=
 =?UTF-8?q?=E5=8F=AF=E4=BB=A5=E9=80=9A=E8=BF=87=E9=99=84=E5=8A=A0=E6=8B=96?=
 =?UTF-8?q?=E6=8B=BD=E9=98=B4=E5=BD=B1=E5=8C=BA=E8=BF=9B=E8=A1=8C=E9=A2=84?=
 =?UTF-8?q?=E5=AE=9A=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/DeDrag/shadow.vue     | 50 ++++++++++++++++---
 .../canvas/components/Editor/index.vue        | 32 +++++++++++-
 .../canvas/custom-component/component-list.js |  9 +++-
 frontend/src/store/index.js                   |  6 +++
 .../src/views/panel/AssistComponent/index.vue | 16 +++++-
 frontend/src/views/panel/ViewSelect/index.vue | 23 +++++++--
 frontend/src/views/panel/edit/index.vue       | 29 ++++++-----
 frontend/src/views/panel/filter/index.vue     |  9 +++-
 8 files changed, 142 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/DeDrag/shadow.vue b/frontend/src/components/DeDrag/shadow.vue
index f4c7796496..53794f8950 100644
--- a/frontend/src/components/DeDrag/shadow.vue
+++ b/frontend/src/components/DeDrag/shadow.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="z-index:1" :style="style" />
+  <div style="z-index:-1" :style="styleInfo" />
 </template>
 
 <script>
@@ -8,12 +8,29 @@ export default {
   replace: true,
   name: 'Shadow',
   computed: {
-    style() {
+    styleInfo() {
+      // console.log('styleInfo==>')
+      // debugger
+      // console.log('dragComponentInfo==>' + this.dragComponentInfo.shadowStyle.x)
+      let left = 0
+      let top = 0
+      let width = 0
+      let height = 0
+      if (this.dragComponentInfo) {
+        // 组件移入
+        left = this.dragComponentInfo.shadowStyle.x
+        top = this.dragComponentInfo.shadowStyle.y
+        width = this.dragComponentInfo.style.width
+        height = this.dragComponentInfo.style.height
+        // console.log('left:' + left + 'top:' + top + 'width:' + width + 'height:' + height)
+      } else {
+        left = this.curComponent.style.left * this.curCanvasScale.scaleWidth / 100
+        top = this.curComponent.style.top * this.curCanvasScale.scaleHeight / 100
+        width = this.curComponent.style.width * this.curCanvasScale.scaleWidth / 100
+        height = this.curComponent.style.height * this.curCanvasScale.scaleHeight / 100
+        // console.log('curComponent left:' + left + 'top:' + top + 'width:' + width + 'height:' + height)
+      }
       // 当前默认为自适应
-      let left = this.curComponent.style.left * this.curCanvasScale.scaleWidth / 100
-      let top = this.curComponent.style.top * this.curCanvasScale.scaleHeight / 100
-      let width = this.curComponent.style.width * this.curCanvasScale.scaleWidth / 100
-      let height = this.curComponent.style.height * this.curCanvasScale.scaleHeight / 100
       if (this.canvasStyleData.auxiliaryMatrix) {
         left = Math.round(left / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
         width = Math.round(width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
@@ -29,8 +46,15 @@ export default {
         position: 'absolute'
       }
       // console.log('style=>' + JSON.stringify(style))
+      // 记录外部拖拽进入仪表板时阴影区域宽高
+      if (this.dragComponentInfo) {
+        this.recordShadowStyle(left, top, width, height)
+      }
       return style
     },
+    dragComponentInfo() {
+      return this.$store.state.dragComponentInfo
+    },
     ...mapState([
       'curComponent',
       'editor',
@@ -38,6 +62,20 @@ export default {
       'canvasStyleData',
       'linkageSettingStatus'
     ])
+  },
+  methods: {
+    recordShadowStyle(x, y, width, height) {
+      this.dragComponentInfo.shadowStyle.width = this.scaleW(width)
+      this.dragComponentInfo.shadowStyle.x = this.scaleW(x)
+      this.dragComponentInfo.shadowStyle.height = this.scaleH(height)
+      this.dragComponentInfo.shadowStyle.y = this.scaleH(y)
+    },
+    scaleH(h) {
+      return h * 100 / this.curCanvasScale.scaleHeight
+    },
+    scaleW(w) {
+      return w * 100 / this.curCanvasScale.scaleWidth
+    }
   }
 
 }
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index 2c95f1da12..7ca32d959e 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -9,10 +9,11 @@
       }
     ]"
     :style="customStyle"
+    @dragover="handleDragOver"
     @mousedown="handleMouseDown"
   >
     <!-- 网格线 -->
-<!--    <Grid v-if="canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />-->
+    <!--    <Grid v-if="canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />-->
 
     <!-- 仪表板联动清除按钮-->
     <canvas-opt-bar />
@@ -104,7 +105,7 @@
       />
     </de-drag>
     <!--拖拽阴影部分-->
-    <drag-shadow v-if="curComponent&&this.curComponent.optStatus.dragging" />
+    <drag-shadow v-if="(curComponent&&this.curComponent.optStatus.dragging)||dragComponentInfo" />
     <!-- 右击菜单 -->
     <ContextMenu />
     <!-- 标线 (临时去掉标线 吸附等功能)-->
@@ -262,6 +263,9 @@ export default {
     panelInfo() {
       return this.$store.state.panel.panelInfo
     },
+    dragComponentInfo() {
+      return this.$store.state.dragComponentInfo
+    },
     ...mapState([
       'componentData',
       'curComponent',
@@ -638,6 +642,30 @@ export default {
         // console.log('view:resizeView')
         this.$refs.wrapperChild[index].chartResize()
       }
+    },
+    handleDragOver(e) {
+      // console.log('handleDragOver=>layer:' + e.layerX + ':' + e.layerY + ';offSet=>' + e.offsetX + ':' + e.offsetY + ';page=' + e.pageX + ':' + e.pageY)
+      // console.log('e=>x=>' + JSON.stringify(e))
+      // 使用e.pageX 避免抖动的情况
+      this.dragComponentInfo.shadowStyle.x = e.pageX - 220
+      this.dragComponentInfo.shadowStyle.y = e.pageY - 90
+      // console.log('handleDragOver=>x=>' + this.dragComponentInfo.shadowStyle.x)
+      e.preventDefault()
+      e.dataTransfer.dropEffect = 'copy'
+    },
+    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
+      }
     }
   }
 }
diff --git a/frontend/src/components/canvas/custom-component/component-list.js b/frontend/src/components/canvas/custom-component/component-list.js
index 391d1590ba..18cca72236 100644
--- a/frontend/src/components/canvas/custom-component/component-list.js
+++ b/frontend/src/components/canvas/custom-component/component-list.js
@@ -137,7 +137,7 @@ const list = [
     icon: 'juxing',
     type: 'view',
     style: {
-      width: 200,
+      width: 400,
       height: 300,
       borderRadius: ''
     }
@@ -148,7 +148,12 @@ const list = [
     type: 'picture-add',
     label: '拖拽上传',
     icon: 'iconfont icon-picture',
-    defaultClass: 'text-filter'
+    defaultClass: 'text-filter',
+    style: {
+      width: 400,
+      height: 200,
+      borderRadius: ''
+    }
   }
 ]
 
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 850cbfe545..723e1bc851 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -258,6 +258,12 @@ const data = {
       // state.styleChangeTimes++
     },
     setDragComponentInfo(state, dragComponentInfo) {
+      dragComponentInfo['shadowStyle'] = {
+        x: 0,
+        y: 0,
+        height: 0,
+        width: 0
+      }
       state.dragComponentInfo = dragComponentInfo
     },
     clearDragComponentInfo(state) {
diff --git a/frontend/src/views/panel/AssistComponent/index.vue b/frontend/src/views/panel/AssistComponent/index.vue
index af3f5ffdac..a7da254372 100644
--- a/frontend/src/views/panel/AssistComponent/index.vue
+++ b/frontend/src/views/panel/AssistComponent/index.vue
@@ -55,10 +55,11 @@
 </template>
 
 <script>
-import { assistList, pictureList } from '@/components/canvas/custom-component/component-list'
+import componentList, { assistList, pictureList } from '@/components/canvas/custom-component/component-list'
 import toast from '@/components/canvas/utils/toast'
 import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list'
 import generateID from '@/components/canvas/utils/generateID'
+import { deepCopy } from '@/components/canvas/utils/utils'
 
 export default {
   name: 'FilterGroup',
@@ -71,6 +72,7 @@ export default {
 
   methods: {
     handleDragStart(ev) {
+      this.$store.commit('setDragComponentInfo', this.componentInfo(ev.target.dataset.id))
       ev.dataTransfer.effectAllowed = 'copy'
       const dataTrans = {
         type: 'assist',
@@ -115,13 +117,23 @@ export default {
             }
           })
 
-          this.$store.commit('recordSnapshot','handleFileChange')
+          this.$store.commit('recordSnapshot', 'handleFileChange')
         }
 
         img.src = fileResult
       }
 
       reader.readAsDataURL(file)
+    },
+    componentInfo(id) {
+    // 辅助设计组件
+      let component
+      componentList.forEach(componentTemp => {
+        if (id === componentTemp.id) {
+          component = deepCopy(componentTemp)
+        }
+      })
+      return component
     }
   }
 }
diff --git a/frontend/src/views/panel/ViewSelect/index.vue b/frontend/src/views/panel/ViewSelect/index.vue
index d12896fd44..402c2dccce 100644
--- a/frontend/src/views/panel/ViewSelect/index.vue
+++ b/frontend/src/views/panel/ViewSelect/index.vue
@@ -31,6 +31,7 @@
           :highlight-current="true"
           @node-drag-start="handleDragStart"
           @node-click="nodeClick"
+          @node-drag-end="dragEnd"
         >
           <span slot-scope="{ node, data }" class="custom-tree-node">
             <span>
@@ -62,6 +63,8 @@
 
 <script>
 import { tree, findOne } from '@/api/panel/view'
+import componentList from '@/components/canvas/custom-component/component-list'
+import { deepCopy } from '@/components/canvas/utils/utils'
 export default {
   name: 'ViewSelect',
   data() {
@@ -105,19 +108,21 @@ export default {
       })
     },
     handleDragStart(node, ev) {
-      this.$store.commit('setDragComponentInfo', node)
+      this.$store.commit('setDragComponentInfo', this.viewComponentInfo())
       ev.dataTransfer.effectAllowed = 'copy'
       const dataTrans = {
         type: 'view',
         id: node.data.id
       }
-
       ev.dataTransfer.setData('componentInfo', JSON.stringify(dataTrans))
     },
-
+    dragEnd() {
+      console.log('dragEnd')
+      this.$store.commit('clearDragComponentInfo')
+    },
     // 判断节点能否被拖拽
     allowDrag(draggingNode) {
-      if (draggingNode.data.type === 'scene') {
+      if (draggingNode.data.type === 'scene' || draggingNode.data.type === 'group') {
         return false
       } else {
         return true
@@ -128,6 +133,16 @@ export default {
     },
     newChart() {
       this.$emit('newChart')
+    },
+    viewComponentInfo() {
+      let component
+      // 用户视图设置 复制一个模板
+      componentList.forEach(componentTemp => {
+        if (componentTemp.type === 'view') {
+          component = deepCopy(componentTemp)
+        }
+      })
+      return component
     }
 
   }
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 4812dda47d..4114ed5afb 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -98,7 +98,6 @@
           id="canvasInfo"
           class="content this_canvas"
           @drop="handleDrop"
-          @dragover="handleDragOver"
           @mousedown="handleMouseDown"
           @mouseup="deselectCurComponent"
           @scroll="canvasScroll"
@@ -291,7 +290,8 @@ export default {
       'canvasStyleData',
       'curComponentIndex',
       'componentData',
-      'linkageSettingStatus'
+      'linkageSettingStatus',
+      'dragComponentInfo'
     ])
   },
 
@@ -440,7 +440,6 @@ export default {
       return data
     },
     handleDrop(e) {
-      this.$store.commit('clearDragComponentInfo')
       this.currentDropElement = e
       e.preventDefault()
       e.stopPropagation()
@@ -490,12 +489,18 @@ export default {
       }
 
       // position = absolution 或导致有偏移 这里中和一下偏移量
-      component.style.top = this.getPositionY(e.layerY)
-      component.style.left = this.getPositionX(e.layerX)
+      // component.style.top = this.getPositionY(e.layerY)
+      // component.style.left = this.getPositionX(e.layerX)
+      component.style.top = this.dragComponentInfo.shadowStyle.y
+      component.style.left = this.dragComponentInfo.shadowStyle.x
+      component.style.width = this.dragComponentInfo.shadowStyle.width
+      component.style.height = this.dragComponentInfo.shadowStyle.height
+
       component.id = newComponentId
       this.$store.commit('addComponent', { component })
       this.$store.commit('recordSnapshot', 'handleDrop')
       this.clearCurrentInfo()
+      // this.$store.commit('clearDragComponentInfo')
 
       // // 文字组件
       // if (component.type === 'v-text') {
@@ -509,12 +514,6 @@ export default {
       this.currentFilterCom = null
     },
 
-    handleDragOver(e) {
-      console.log('handleDragOver=>x:' + this.getPositionX(e.layerX) + ';y=' + this.getPositionY(e.layerY) + e.dataTransfer.getData('componentInfo'))
-      e.preventDefault()
-      e.dataTransfer.dropEffect = 'copy'
-    },
-
     handleMouseDown() {
       // console.log('handleMouseDown123')
 
@@ -619,10 +618,10 @@ export default {
               propValue: fileResult,
               style: {
                 ...commonStyle,
-                top: this.getPositionY(this.currentDropElement.layerY),
-                left: this.getPositionX(this.currentDropElement.layerX),
-                width: img.width / scale,
-                height: img.height / scale
+                top: this.dragComponentInfo.shadowStyle.y,
+                left: this.dragComponentInfo.shadowStyle.x,
+                width: this.dragComponentInfo.shadowStyle.width,
+                height: this.dragComponentInfo.shadowStyle.height
               }
             }
           })
diff --git a/frontend/src/views/panel/filter/index.vue b/frontend/src/views/panel/filter/index.vue
index 1f602f894b..75d95fae30 100644
--- a/frontend/src/views/panel/filter/index.vue
+++ b/frontend/src/views/panel/filter/index.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <div class="filter-container" @dragstart="handleDragStart">
+  <div class="filter-container" @dragstart="handleDragStart" @dragend="handleDragEnd()">
 
     <div v-for="(item, key) in widgetSubjects" :key="key" class="widget-subject">
       <div class="filter-header">
@@ -30,6 +30,7 @@
 
 <script>
 import { ApplicationContext } from '@/utils/ApplicationContext'
+import { deepCopy } from '@/components/canvas/utils/utils'
 export default {
   name: 'FilterGroup',
   data() {
@@ -80,12 +81,18 @@ export default {
 
   methods: {
     handleDragStart(ev) {
+      // 记录拖拽信息
+      this.$store.commit('setDragComponentInfo', deepCopy(ApplicationContext.getService(ev.target.dataset.id).getDrawPanel()))
       ev.dataTransfer.effectAllowed = 'copy'
       const dataTrans = {
         type: 'other',
         id: ev.target.dataset.id
       }
       ev.dataTransfer.setData('componentInfo', JSON.stringify(dataTrans))
+    },
+    handleDragEnd(ev) {
+      console.log('handleDragEnd==>')
+      this.$store.commit('clearDragComponentInfo')
     }
   }
 }

From 5e1a37794e9a4c875ec58f12c32e6fe101c44fdd Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 22 Sep 2021 17:34:36 +0800
Subject: [PATCH 10/12] =?UTF-8?q?refactor:=E4=BC=98=E5=8C=96=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E6=8B=96=E6=8B=BD=E8=BF=9B=E4=BB=AA=E8=A1=A8=E7=89=88?=
 =?UTF-8?q?=E7=9A=84=E5=B1=95=E7=A4=BA=E6=96=B9=E5=BC=8F=EF=BC=8C=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E4=B8=BA=E5=9B=BA=E5=AE=9A=E9=AB=98=E5=AE=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/panel/AssistComponent/index.vue |  5 ++++-
 frontend/src/views/panel/edit/index.vue       | 22 +++++++++++--------
 frontend/src/views/panel/filter/index.vue     |  1 -
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/frontend/src/views/panel/AssistComponent/index.vue b/frontend/src/views/panel/AssistComponent/index.vue
index a7da254372..5aed0a3198 100644
--- a/frontend/src/views/panel/AssistComponent/index.vue
+++ b/frontend/src/views/panel/AssistComponent/index.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <div class="filter-container" @dragstart="handleDragStart">
+  <div class="filter-container" @dragstart="handleDragStart" @dragend="handleDragEnd()">
 
     <div class="widget-subject">
       <div class="filter-header">
@@ -134,6 +134,9 @@ export default {
         }
       })
       return component
+    },
+    handleDragEnd(ev) {
+      this.$store.commit('clearDragComponentInfo')
     }
   }
 }
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 4114ed5afb..b88cbec477 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -275,7 +275,8 @@ export default {
       adviceGroupId: null,
       scrollLeft: 0,
       scrollTop: 0,
-      timeMachine: null
+      timeMachine: null,
+      dropComponentInfo: null
     }
   },
 
@@ -440,6 +441,8 @@ export default {
       return data
     },
     handleDrop(e) {
+      // 记录拖拽信息
+      this.dropComponentInfo = deepCopy(this.dragComponentInfo)
       this.currentDropElement = e
       e.preventDefault()
       e.stopPropagation()
@@ -491,10 +494,10 @@ export default {
       // position = absolution 或导致有偏移 这里中和一下偏移量
       // component.style.top = this.getPositionY(e.layerY)
       // component.style.left = this.getPositionX(e.layerX)
-      component.style.top = this.dragComponentInfo.shadowStyle.y
-      component.style.left = this.dragComponentInfo.shadowStyle.x
-      component.style.width = this.dragComponentInfo.shadowStyle.width
-      component.style.height = this.dragComponentInfo.shadowStyle.height
+      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
       this.$store.commit('addComponent', { component })
@@ -594,6 +597,7 @@ export default {
       this.$refs.files.click()
     },
     handleFileChange(e) {
+      const _this = this
       const file = e.target.files[0]
       if (!file.type.includes('image')) {
         toast('只能插入图片')
@@ -618,10 +622,10 @@ export default {
               propValue: fileResult,
               style: {
                 ...commonStyle,
-                top: this.dragComponentInfo.shadowStyle.y,
-                left: this.dragComponentInfo.shadowStyle.x,
-                width: this.dragComponentInfo.shadowStyle.width,
-                height: this.dragComponentInfo.shadowStyle.height
+                top: _this.dropComponentInfo.shadowStyle.y,
+                left: _this.dropComponentInfo.shadowStyle.x,
+                width: _this.dropComponentInfo.shadowStyle.width,
+                height: _this.dropComponentInfo.shadowStyle.height
               }
             }
           })
diff --git a/frontend/src/views/panel/filter/index.vue b/frontend/src/views/panel/filter/index.vue
index 75d95fae30..83e1389500 100644
--- a/frontend/src/views/panel/filter/index.vue
+++ b/frontend/src/views/panel/filter/index.vue
@@ -91,7 +91,6 @@ export default {
       ev.dataTransfer.setData('componentInfo', JSON.stringify(dataTrans))
     },
     handleDragEnd(ev) {
-      console.log('handleDragEnd==>')
       this.$store.commit('clearDragComponentInfo')
     }
   }

From 3ca7a5e02989688453d399f89ef77dbb70b357f0 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 22 Sep 2021 18:34:02 +0800
Subject: [PATCH 11/12] =?UTF-8?q?fix:=E4=BF=AE=E5=A4=8D=E5=87=BA=E7=8E=B0?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=9D=A1=EF=BC=8C=E6=A0=B7=E5=BC=8F=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E4=BD=8D=E7=BD=AE=E5=AE=9A=E4=BD=8D=E4=B8=8D=E5=87=86?=
 =?UTF-8?q?=E7=A1=AE=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/canvas/components/Editor/index.vue | 4 ++++
 frontend/src/views/panel/edit/index.vue                    | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index 7ca32d959e..1b307388dd 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -11,6 +11,7 @@
     :style="customStyle"
     @dragover="handleDragOver"
     @mousedown="handleMouseDown"
+    @scroll="canvasScroll"
   >
     <!-- 网格线 -->
     <!--    <Grid v-if="canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />-->
@@ -666,6 +667,9 @@ export default {
       } else {
         return y
       }
+    },
+    canvasScroll(event) {
+      this.$emit('canvasScroll', event)
     }
   }
 }
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index b88cbec477..5315426aa3 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -100,9 +100,8 @@
           @drop="handleDrop"
           @mousedown="handleMouseDown"
           @mouseup="deselectCurComponent"
-          @scroll="canvasScroll"
         >
-          <Editor v-if="!previewVisible" :out-style="outStyle" />
+          <Editor v-if="!previewVisible" :out-style="outStyle" @canvasScroll="canvasScroll" />
         </div>
       </de-main-container>
       <!--      <de-aside-container v-if="aidedButtonActive" :class="aidedButtonActive ? 'show' : 'hidden'" class="style-aside">-->
@@ -696,6 +695,7 @@ export default {
       }
     },
     canvasScroll(event) {
+      console.log('testTop' + event.target.scrollTop)
       this.scrollLeft = event.target.scrollLeft
       this.scrollTop = event.target.scrollTop
     },

From 08dcd230c69aae42284a68177b4cb0b4c105c573 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 22 Sep 2021 18:44:30 +0800
Subject: [PATCH 12/12] =?UTF-8?q?refactor:=E4=BC=98=E5=8C=96=E5=A4=96?=
 =?UTF-8?q?=E9=83=A8=E7=BB=84=E4=BB=B6=E9=A2=84=E5=AE=9A=E4=BD=8D=E9=98=B4?=
 =?UTF-8?q?=E5=BD=B1=E5=8C=BA=EF=BC=8C=E9=98=B2=E6=AD=A2=E9=98=B4=E5=BD=B1?=
 =?UTF-8?q?=E5=8C=BA=E6=8B=96=E6=8B=BD=E6=98=AF=E8=B6=85=E5=87=BA=E8=BE=B9?=
 =?UTF-8?q?=E7=95=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/DeDrag/shadow.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/frontend/src/components/DeDrag/shadow.vue b/frontend/src/components/DeDrag/shadow.vue
index 53794f8950..1277038296 100644
--- a/frontend/src/components/DeDrag/shadow.vue
+++ b/frontend/src/components/DeDrag/shadow.vue
@@ -37,6 +37,13 @@ export default {
         top = Math.round(top / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
         height = Math.round(height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
       }
+
+      // 防止阴影区超出边界
+      const xGap = left + width - this.canvasWidth
+      // console.log('canvasWidth:' + this.canvasWidth + ';xGap:' + xGap)
+      if (xGap > 0) {
+        left = left - xGap
+      }
       const style = {
         transform: `translate(${left}px, ${top}px) rotate(0deg)`,
         width: width + 'px',
@@ -55,6 +62,10 @@ export default {
     dragComponentInfo() {
       return this.$store.state.dragComponentInfo
     },
+    canvasWidth() {
+      const scaleWidth = this.curCanvasScale.scaleWidth / 100
+      return this.canvasStyleData.width * scaleWidth
+    },
     ...mapState([
       'curComponent',
       'editor',