Merge branch 'dev' into pr@dev@ckes

backend/src/main/java/io/dataease/provider/ck/CKQueryProvider.java

@@ -891,6 +891,12 @@ public class CKQueryProvider 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) {

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)";

backend/src/main/java/io/dataease/provider/doris/DorisQueryProvider.java

@@ -784,9 +784,13 @@ public class DorisQueryProvider extends QueryProvider {
                 whereValue = "('" + StringUtils.join(value, "','") + "')";
             } else if (StringUtils.containsIgnoreCase(request.getTerm(), "like")) {
                 whereValue = "'%" + value + "%'";
+            } else {
+                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)
                     .whereTermAndValue(whereTerm + whereValue)
@@ -848,9 +852,13 @@ public class DorisQueryProvider extends QueryProvider {
                 } else {
                     whereValue = String.format(DorisConstants.WHERE_BETWEEN, value.get(0), value.get(1));
                 }
+            } else {
+                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)
                     .whereTermAndValue(whereTerm + whereValue)
@@ -865,6 +873,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) {

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

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

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

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

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

frontend/src/components/DeDrag/MoveInShadow.vue

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

frontend/src/components/DeDrag/index.vue

@@ -32,8 +32,10 @@
     >
       <slot :name="handlei" />
     </div>
+    <div :style="mainSlotStyle" :class="{'gap_class':canvasStyleData.panel.gap==='yes'}">
       <slot />
     </div>
+  </div>
 </template>
 
 <script>
@@ -50,7 +52,7 @@ import EditBar from '@/components/canvas/components/Editor/EditBar'
 
 export default {
   replace: true,
-  name: 'VueDragResizeRotate',
+  name: 'Dedrag',
   components: { EditBar },
   props: {
     className: {
@@ -445,7 +447,7 @@ export default {
       return {
         width: this.computedWidth,
         height: this.computedHeight,
-        opacity: 0.2,
+        opacity: 0.4,
         background: 'gray'
       }
     },
@@ -473,9 +475,48 @@ 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
+    },
+    curComponent() {
+      return this.$store.state.curComponent
+    },
     ...mapState([
-      'curComponent',
       'editor',
       'curCanvasScale',
       'canvasStyleData',
@@ -575,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() {
@@ -1659,6 +1712,10 @@ export default {
   opacity: 0.5;
 }
 
+.gap_class{
+  padding:5px;
+}
+
 /*.mouseOn >>> .icon-shezhi{*/
 /*  z-index: 2;*/
 /*  display:block!important;*/

frontend/src/components/DeDrag/shadow.vue

+<template>
+  <div style="z-index:-1" :style="styleInfo" />
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  replace: true,
+  name: 'Shadow',
+  computed: {
+    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)
+      }
+      // 当前默认为自适应
+      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 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',
+        height: height + 'px',
+        opacity: 0.4,
+        background: 'gray',
+        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
+    },
+    canvasWidth() {
+      const scaleWidth = this.curCanvasScale.scaleWidth / 100
+      return this.canvasStyleData.width * scaleWidth
+    },
+    ...mapState([
+      'curComponent',
+      'editor',
+      'curCanvasScale',
+      '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
+    }
+  }
+
+}
+</script>
+<style scoped>
+
+</style>

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;

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;

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

@@ -9,7 +9,9 @@
       }
     ]"
     :style="customStyle"
+    @dragover="handleDragOver"
     @mousedown="handleMouseDown"
+    @scroll="canvasScroll"
   >
     <!-- 网格线 -->
     <!--    <Grid v-if="canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />-->
@@ -32,7 +34,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"
@@ -104,9 +105,8 @@
         :active="item === curComponent"
       />
     </de-drag>
-
     <!--拖拽阴影部分-->
-
+    <drag-shadow v-if="(curComponent&&this.curComponent.optStatus.dragging)||dragComponentInfo" />
     <!-- 右击菜单 -->
     <ContextMenu />
     <!-- 标线 (临时去掉标线 吸附等功能)-->
@@ -169,9 +169,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,
@@ -221,8 +222,8 @@ export default {
       },
       // 矩阵数量 默认 128 * 72
       matrixCount: {
-        x: 80,
-        y: 45
+        x: 36,
+        y: 18
       },
       customStyleHistory: null,
       showDrag: true,
@@ -263,6 +264,9 @@ export default {
     panelInfo() {
       return this.$store.state.panel.panelInfo
     },
+    dragComponentInfo() {
+      return this.$store.state.dragComponentInfo
+    },
     ...mapState([
       'componentData',
       'curComponent',
@@ -636,8 +640,36 @@ export default {
     },
     resizeView(index, item) {
       if (item.type === 'view') {
+        // 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
+      }
+    },
+    canvasScroll(event) {
+      this.$emit('canvasScroll', event)
     }
   }
 }

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

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
@@ -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: ''
+    }
   }
 ]
 

frontend/src/store/index.js

@@ -58,7 +58,9 @@ const data = {
     // 和当前组件联动的目标组件
     targetLinkageInfo: [],
     // 当前仪表板联动 下钻 上卷等信息
-    nowPanelTrackInfo: {}
+    nowPanelTrackInfo: {},
+    // 拖拽的组件信息
+    dragComponentInfo: null
   },
   mutations: {
     ...animation.mutations,
@@ -86,6 +88,13 @@ const data = {
     },
 
     setCurComponent(state, { component, index }) {
+      // 当前视图操作状态置空
+      if (component) {
+        component['optStatus'] = {
+          dragging: false,
+          resizing: false
+        }
+      }
       state.styleChangeTimes = 0
       state.curComponent = component
       state.curComponentIndex = index
@@ -247,6 +256,18 @@ const data = {
         }
       })
       // state.styleChangeTimes++
+    },
+    setDragComponentInfo(state, dragComponentInfo) {
+      dragComponentInfo['shadowStyle'] = {
+        x: 0,
+        y: 0,
+        height: 0,
+        width: 0
+      }
+      state.dragComponentInfo = dragComponentInfo
+    },
+    clearDragComponentInfo(state) {
+      state.dragComponentInfo = null
     }
   },
   modules: {

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()
       })
     },

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

 <template>
 
-  <div class="filter-container" @dragstart="handleDragStart">
+  <div class="filter-container" @dragstart="handleDragStart" @dragend="handleDragEnd()">
 
     <div class="widget-subject">
       <div class="filter-header">
@@ -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,26 @@ 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
+    },
+    handleDragEnd(ev) {
+      this.$store.commit('clearDragComponentInfo')
     }
   }
 }

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,6 +108,7 @@ export default {
       })
     },
     handleDragStart(node, ev) {
+      this.$store.commit('setDragComponentInfo', this.viewComponentInfo())
       ev.dataTransfer.effectAllowed = 'copy'
       const dataTrans = {
         type: 'view',
@@ -112,10 +116,13 @@ export default {
       }
       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
@@ -126,6 +133,16 @@ export default {
     },
     newChart() {
       this.$emit('newChart')
+    },
+    viewComponentInfo() {
+      let component
+      // 用户视图设置 复制一个模板
+      componentList.forEach(componentTemp => {
+        if (componentTemp.type === 'view') {
+          component = deepCopy(componentTemp)
+        }
+      })
+      return component
     }
 
   }

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

@@ -98,12 +98,10 @@
           id="canvasInfo"
           class="content this_canvas"
           @drop="handleDrop"
-          @dragover="handleDragOver"
           @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">-->
@@ -276,7 +274,8 @@ export default {
       adviceGroupId: null,
       scrollLeft: 0,
       scrollTop: 0,
-      timeMachine: null
+      timeMachine: null,
+      dropComponentInfo: null
     }
   },
 
@@ -291,7 +290,8 @@ export default {
       'canvasStyleData',
       'curComponentIndex',
       'componentData',
-      'linkageSettingStatus'
+      'linkageSettingStatus',
+      'dragComponentInfo'
     ])
   },
 
@@ -440,6 +440,8 @@ export default {
       return data
     },
     handleDrop(e) {
+      // 记录拖拽信息
+      this.dropComponentInfo = deepCopy(this.dragComponentInfo)
       this.currentDropElement = e
       e.preventDefault()
       e.stopPropagation()
@@ -489,12 +491,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.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 })
       this.$store.commit('recordSnapshot', 'handleDrop')
       this.clearCurrentInfo()
+      // this.$store.commit('clearDragComponentInfo')
 
       // // 文字组件
       // if (component.type === 'v-text') {
@@ -508,11 +516,6 @@ export default {
       this.currentFilterCom = null
     },
 
-    handleDragOver(e) {
-      e.preventDefault()
-      e.dataTransfer.dropEffect = 'copy'
-    },
-
     handleMouseDown() {
       // console.log('handleMouseDown123')
 
@@ -593,6 +596,7 @@ export default {
       this.$refs.files.click()
     },
     handleFileChange(e) {
+      const _this = this
       const file = e.target.files[0]
       if (!file.type.includes('image')) {
         toast('只能插入图片')
@@ -617,10 +621,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.dropComponentInfo.shadowStyle.y,
+                left: _this.dropComponentInfo.shadowStyle.x,
+                width: _this.dropComponentInfo.shadowStyle.width,
+                height: _this.dropComponentInfo.shadowStyle.height
               }
             }
           })
@@ -691,6 +695,7 @@ export default {
       }
     },
     canvasScroll(event) {
+      console.log('testTop' + event.target.scrollTop)
       this.scrollLeft = event.target.scrollLeft
       this.scrollTop = event.target.scrollTop
     },

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

 <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,17 @@ 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) {
+      this.$store.commit('clearDragComponentInfo')
     }
   }
 }