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] =?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')
     }
   }
 }