feat:画板优化

backend/src/main/java/io/dataease/controller/panel/PanelViewLinkageController.java

@@ -26,14 +26,14 @@ public class PanelViewLinkageController {
     @Resource
     private PanelViewLinkageService panelViewLinkageService;
 
-    @ApiOperation("获取仪表板视图联动信息")
+    @ApiOperation("获取仪表板所有视图联动信息")
     @PostMapping("/getViewLinkageGather")
     public Map getViewLinkageGather(@RequestBody PanelLinkageRequest request){
         return panelViewLinkageService.getViewLinkageGather(request);
     }
 
 
-    @ApiOperation("获取仪表板视图联动信息")
+    @ApiOperation("保存仪表板视图联动信息")
     @PostMapping("/saveLinkage")
     public void saveLinkage(@RequestBody PanelLinkageRequest request){
         panelViewLinkageService.saveLinkage(request);

frontend/package.json

@@ -45,14 +45,15 @@
     "vue-codemirror": "^4.0.6",
     "vue-fullscreen": "^2.5.2",
     "vue-i18n": "7.3.2",
-    "vue-power-drag": "^0.2.0",
     "vue-router": "3.0.6",
     "vue-to-pdf": "^1.0.0",
     "vue-uuid": "2.0.2",
     "vuedraggable": "^2.24.3",
     "vuex": "3.1.0",
     "webpack": "^4.46.0",
-    "xlsx": "^0.17.0"
+    "xlsx": "^0.17.0",
+    "lodash": "^4.17.4",
+    "jquery": "^3.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.4.0-0",

frontend/src/components/DeDrag/drag.less

+.dragAndResize
+{
+    position: relative;
+
+    user-select: none;
+
+    *
+    {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+    }
+
+    .item
+    {
+        position: absolute;
+
+        width: 100px;
+        height: 100px;
+
+        cursor: move;
+
+        border: 1px solid;
+        background-color: #fff;
+
+        .resizeHandle
+        {
+            position: absolute;
+            right: 2px;
+            bottom: 2px;
+
+            width: 0;
+            height: 0;
+
+            cursor: nw-resize;
+
+            opacity: .5;
+            border-bottom: 10px solid black;
+            border-left: 10px solid transparent;
+        }
+    }
+
+    .moveAnimation
+    {
+        transition: top 80ms ease;
+    }
+
+    .canNotDrag
+    {
+        cursor: default!important;
+    }
+
+    .cloneNode
+    {
+        z-index: 3;
+
+        transition: none;
+
+        background-color: #bec1c9;
+        opacity: 0.5;
+
+    }
+
+    .movingItem
+    {
+        position: absolute;
+
+        border: none;
+        &:before
+        {
+            position: absolute;
+            z-index: 2;
+            top: 0;
+            left: 0;
+
+            width: 100%;
+            height: 100%;
+
+            content: 'movingItem';
+
+            background-color: #3d66e7;
+        }
+    }
+
+    .positionBox
+    {
+        position: fixed;
+        top: 0;
+        right: 100px;
+
+        overflow: auto;
+
+        width: 500px;
+        height: 500px;
+
+        border: 1px solid;
+    }
+
+    .coords
+    {
+        position: fixed;
+        right: 100px;
+        bottom: 200px;
+
+        overflow: auto;
+
+        width: 200px;
+        height: 200px;
+
+        border: 1px solid;
+    }
+}

frontend/src/components/DeDrag/index.vue

@@ -434,6 +434,7 @@ export default {
       }
     },
     style() {
+      // console.log('style-top:' + this.y + '--' + this.top)
       return {
         transform: `translate(${this.left}px, ${this.top}px) rotate(${this.rotate}deg)`,
         width: this.computedWidth,
@@ -482,7 +483,7 @@ export default {
           return 'auto'
         }
       }
-      if (this.canvasStyleData.auxiliaryMatrix) {
+      if (this.element.auxiliaryMatrix) {
         const width = Math.round(this.width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
         return width + 'px'
       } else {
@@ -496,7 +497,7 @@ export default {
           return 'auto'
         }
       }
-      if (this.canvasStyleData.auxiliaryMatrix) {
+      if (this.element.auxiliaryMatrix) {
         const height = Math.round(this.height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
         return height + 'px'
       } else {
@@ -594,13 +595,15 @@ export default {
       this.maxH = val
     },
     w(val) {
+      console.log('changeWidthCK：' + this.resizing)
+
       if (this.resizing || this.dragging) {
         return
       }
       if (this.parent) {
         this.bounds = this.calcResizeLimits()
       }
-      // console.log('changeWidth：' + val)
+      console.log('changeWidth：' + val)
       this.changeWidth(val)
     },
     h(val) {
@@ -696,6 +699,8 @@ export default {
       }
       // 阻止冒泡事件
       e.stopPropagation()
+      // 此处阻止冒泡 但是外层需要获取pageX pageY
+      this.element.auxiliaryMatrix && this.$emit('elementMouseDown', e)
       this.$store.commit('setCurComponent', { component: this.element, index: this.index })
       eventsFor = events.mouse
       this.elementDown(e)
@@ -707,6 +712,8 @@ export default {
       }
       const target = e.target || e.srcElement
       if (this.$el.contains(target)) {
+        // 挤压式画布设计 drag start 通知
+        this.element.auxiliaryMatrix && this.$emit('onDragStart', e, this.element, this.index)
         if (this.onDragStart(e) === false) {
           return
         }
@@ -800,6 +807,7 @@ export default {
       if (e instanceof MouseEvent && e.which !== 1) {
         return false
       }
+      this.element.auxiliaryMatrix && this.$emit('onResizeStart', e, this.element, this.index)
       if (this.onResizeStart(handle, e) === false) {
         return false
       }
@@ -982,6 +990,10 @@ export default {
       this.bottom = bottom
       await this.snapCheck()
       this.$emit('dragging', this.left, this.top)
+      // 如果当前视图遵循矩阵设计则 进行位置挤压检查
+      if (this.element.auxiliaryMatrix) {
+        this.$emit('onDragging', e, this.element)
+      }
 
       // private 记录当前样式
       this.recordCurStyle()
@@ -1156,7 +1168,8 @@ export default {
       // console.log('width2:' + this.width)
       this.height = newH
 
-      this.$emit('resizing', this.left, this.top, this.width, this.height)
+      // this.$emit('resizing', this.left, this.top, this.width, this.height)
+      this.element.auxiliaryMatrix && this.$emit('onResizing', e, this.element)
 
       // private 记录当前组件样式
       this.recordCurStyle()
@@ -1179,7 +1192,7 @@ export default {
       this.right = right
       this.bottom = bottom
       this.width = width
-      // console.log('width3:' + this.width)
+      console.log('width3:' + this.width)
       this.height = height
     },
     changeHeight(val) {
@@ -1201,7 +1214,7 @@ export default {
       this.height = height
     },
     // 从控制柄松开
-    async handleUp(e) {
+    handleUp(e) {
       this.handle = null
       // 初始化辅助线数据
       const temArr = new Array(3).fill({ display: false, position: '', origin: '', lineLength: '' })
@@ -1215,7 +1228,8 @@ export default {
       this.lastMouseY = mouseY
       if (this.resizing) {
         this.resizing = false
-        await this.conflictCheck()
+        console.log('resizing2:' + this.resizing)
+        this.conflictCheck()
         this.$emit('refLineParams', refLine)
         // this.$emit('resizestop', this.left, this.top, this.width, this.height)
         // private
@@ -1223,7 +1237,7 @@ export default {
       }
       if (this.dragging) {
         this.dragging = false
-        await this.conflictCheck()
+        this.conflictCheck()
         this.$emit('refLineParams', refLine)
         this.$emit('dragstop', this.left, this.top)
       }
@@ -1235,8 +1249,9 @@ export default {
       // private 记录snapshot
 
       // 如果辅助设计 需要最后调整矩阵
-      if (this.canvasStyleData.auxiliaryMatrix) {
-        this.recordMatrixCurStyle()
+      if (this.element.auxiliaryMatrix) {
+        // this.recordMatrixCurStyle()
+        this.recordMatrixCurShadowStyle()
       }
       this.hasMove && this.$store.commit('recordSnapshot', 'handleUp')
       // 记录snapshot后 移动已记录设置为false
@@ -1246,6 +1261,9 @@ export default {
 
       // private 删除handle Up事件 防止重复recordSnapshot
       removeEvent(document.documentElement, eventsFor.stop, this.handleUp)
+
+      // 挤占式画布设计 handleUp
+      this.element.auxiliaryMatrix && this.$emit('onHandleUp', e)
     },
     // 新增方法 ↓↓↓
     // 设置属性
@@ -1549,11 +1567,38 @@ export default {
       // this.hasMove = true
       this.$store.commit('setShapeStyle', style)
 
+      // resize
+      self.$emit('resizeView')
+      // const self = this
+      // setTimeout(function() {
+      //   self.$emit('resizeView')
+      // }, 200)
+    },
+    // 记录当前样式 跟随阴影位置 矩阵处理
+    recordMatrixCurShadowStyle() {
+      console.log('recordMatrixCurShadowStyle')
+      // debugger
+      const left = (this.element.x - 1) * this.curCanvasScale.matrixStyleWidth
+      const top = (this.element.y - 1) * this.curCanvasScale.matrixStyleHeight
+      const width = this.element.sizex * this.curCanvasScale.matrixStyleWidth
+      const height = this.element.sizey * this.curCanvasScale.matrixStyleHeight
+      const style = {
+        ...this.defaultStyle
+      }
+      style.left = left
+      style.top = top
+      style.width = width
+      style.height = height
+      style.rotate = this.rotate
+      // this.hasMove = true
+      this.$store.commit('setShapeStyle', style)
+
       // resize
       const self = this
-      setTimeout(function() {
-        self.$emit('resizeView')
-      }, 200)
+      self.$emit('resizeView')
+      // setTimeout(function() {
+      //   self.$emit('resizeView')
+      // }, 200)
     },
     mountedFunction() {
       // private 冲突检测 和水平设计值保持一致

frontend/src/components/DeDrag/shadow.vue

 <template>
-  <div style="z-index:-1" :style="styleInfo" />
+  <div style="z-index:-1" :style="styleInfo">
+    <!--    {{ curComponent }}-->
+  </div>
 </template>
 
 <script>
@@ -16,27 +18,42 @@ export default {
       let top = 0
       let width = 0
       let height = 0
+      // if (this.dragComponentInfo && !this.dragComponentInfo.auxiliaryMatrix) {
       if (this.dragComponentInfo) {
+        console.log('shadowDrag=')
         // 组件移入
-        left = this.dragComponentInfo.shadowStyle.x
-        top = this.dragComponentInfo.shadowStyle.y
-        width = this.dragComponentInfo.style.width
-        height = this.dragComponentInfo.style.height
+        if (this.dragComponentInfo.auxiliaryMatrix) {
+          left = (this.dragComponentInfo.x - 1) * this.curCanvasScale.matrixStyleWidth
+          top = (this.dragComponentInfo.y - 1) * this.curCanvasScale.matrixStyleHeight
+
+          width = this.dragComponentInfo.sizex * this.curCanvasScale.matrixStyleWidth
+          height = this.dragComponentInfo.sizey * this.curCanvasScale.matrixStyleHeight
+        } else {
+          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
+        // temp 临时测试
+        // left = this.curComponent.style.left * this.curCanvasScale.scaleWidth / 100
+        // top = this.curComponent.style.top * this.curCanvasScale.scaleHeight / 100
+        left = (this.curComponent.x - 1) * this.curCanvasScale.matrixStyleWidth
+        top = (this.curComponent.y - 1) * this.curCanvasScale.matrixStyleHeight
+
+        width = this.curComponent.style.width * this.curCanvasScale.scalePointWidth
+        height = this.curComponent.style.height * this.curCanvasScale.scalePointHeight
         // 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
-      }
+      // 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
@@ -82,10 +99,10 @@ export default {
       this.dragComponentInfo.shadowStyle.y = this.scaleH(y)
     },
     scaleH(h) {
-      return h * 100 / this.curCanvasScale.scaleHeight
+      return h / this.curCanvasScale.scalePointHeight
     },
     scaleW(w) {
-      return w * 100 / this.curCanvasScale.scaleWidth
+      return w / this.curCanvasScale.scalePointWidth
     }
   }
 

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

@@ -14,6 +14,12 @@
       <span :title="$t('panel.edit')">
         <i v-if="activeModel==='edit'&&curComponent&&editFilter.includes(curComponent.type)" class="icon iconfont icon-edit" @click.stop="edit" />
       </span>
+      <span :title="$t('panel.matrix')">
+        <i v-if="activeModel==='edit'&&curComponent.auxiliaryMatrix" class="icon iconfont icon-shujujuzhen" @click.stop="auxiliaryMatrixChange" />
+      </span>
+      <span :title="$t('panel.suspension')">
+        <i v-if="activeModel==='edit'&&!curComponent.auxiliaryMatrix" class="icon iconfont icon-xuanfuanniu" @click.stop="auxiliaryMatrixChange" />
+      </span>
       <span :title="$t('panel.details')">
         <i v-if="curComponent.type==='view'" class="icon iconfont icon-fangda" @click.stop="showViewDetails" />
       </span>
@@ -87,13 +93,31 @@ export default {
       'canvasStyleData',
       'linkageSettingStatus',
       'targetLinkageInfo',
-      'curLinkageView'
+      'curLinkageView',
+      'curCanvasScale'
     ])
   },
   methods: {
     showViewDetails() {
       this.$emit('showViewDetails')
     },
+    auxiliaryMatrixChange() {
+      if (this.curComponent.auxiliaryMatrix) {
+        this.curComponent.style.left = (this.curComponent.x - 1) * this.curCanvasScale.matrixStyleOriginWidth
+        this.curComponent.style.top = (this.curComponent.y - 1) * this.curCanvasScale.matrixStyleOriginHeight
+        this.curComponent.style.width = this.curComponent.sizex * this.curCanvasScale.matrixStyleOriginWidth
+        this.curComponent.style.height = this.curComponent.sizey * this.curCanvasScale.matrixStyleOriginHeight
+        this.curComponent.auxiliaryMatrix = false
+      } else {
+        this.curComponent.x = Math.round(this.curComponent.style.left / this.curCanvasScale.matrixStyleOriginWidth) + 1
+        this.curComponent.y = Math.round(this.curComponent.style.top / this.curCanvasScale.matrixStyleOriginHeight) + 1
+        this.curComponent.sizex = Math.round(this.curComponent.style.width / this.curCanvasScale.matrixStyleOriginWidth)
+        this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScale.matrixStyleOriginHeight)
+        this.curComponent.auxiliaryMatrix = true
+      }
+      this.$store.state.styleChangeTimes++
+      bus.$emit('auxiliaryMatrixChange')
+    },
     edit() {
       // 编辑时临时保存 当前修改的画布
       this.$store.dispatch('panel/setComponentDataTemp', JSON.stringify(this.componentData))

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

+<template>
+  <div class="grid">
+    <!--    positionBox:{{ positionBox.length }}-->
+    <div v-for="(yItem, index) in positionBox" :key="index+'y'" style="float: left; width: 105%">
+      <div v-for="(xItem, index) in yItem" :key="index+'x'" :style="classInfo" style="float: left; border: 0.2px solid #b3d4fc ">
+        {{ xItem.el?1:0 }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    // eslint-disable-next-line vue/require-default-prop
+    positionBox: {
+      type: Array
+    },
+    matrixStyle: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+
+  computed: {
+    classInfo: function() {
+      return {
+        width: this.matrixStyle.width + 'px',
+        height: this.matrixStyle.height + 'px'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+</style>

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

@@ -173,15 +173,15 @@ export default {
     'hw': {
       handler(newVal, oldVla) {
         // console.log('hw:' + newVal + '---' + oldVla)
-        if (newVal !== oldVla) {
-          this.destroyTimeMachine()
-          this.changeIndex++
-          this.chartResize(this.changeIndex)
+        if (newVal !== oldVla && this.$refs[this.element.propValue.id]) {
+          if (this.chart.type === 'map') {
+            this.destroyTimeMachine()
+            this.changeIndex++
+            this.chartResize(this.changeIndex)
+          } else {
+            this.$refs[this.element.propValue.id].chartResize()
+          }
         }
-        //
-        // if (this.$refs[this.element.propValue.id]) {
-        //   this.$refs[this.element.propValue.id].chartResize()
-        // }
       },
       deep: true
     },

frontend/src/components/canvas/custom-component/component-list.js

@@ -70,7 +70,11 @@ const list = [
       verticalAlign: 'middle',
       backgroundColor: '#ffffff',
       borderRadius: 0
-    }
+    },
+    x: 1,
+    y: 1,
+    sizex: 10,
+    sizey: 2
   },
   {
     id: '10002',
@@ -105,7 +109,11 @@ const list = [
       width: 300,
       height: 200,
       borderRadius: ''
-    }
+    },
+    x: 1,
+    y: 1,
+    sizex: 10,
+    sizey: 6
   },
   {
     id: '10003-1',
@@ -128,14 +136,18 @@ const list = [
     icon: 'juxing',
     type: 'rect-shape',
     style: {
-      width: 400,
-      height: 300,
+      width: 300,
+      height: 200,
       borderStyle: 'solid',
       borderWidth: 0,
       borderColor: '#000000',
       backgroundColor: '#ffffff',
       borderRadius: 0
-    }
+    },
+    x: 1,
+    y: 1,
+    sizex: 10,
+    sizey: 6
   },
   {
     id: '10005',
@@ -145,10 +157,15 @@ const list = [
     icon: 'juxing',
     type: 'view',
     style: {
-      width: 400,
-      height: 300,
+      width: 300,
+      height: 200,
       borderRadius: ''
-    }
+    },
+    x: 1,
+    y: 1,
+    sizex: 10,
+    sizey: 6,
+    auxiliaryMatrix: true
   },
   {
     id: '10006',
@@ -172,7 +189,11 @@ const list = [
         name: '1',
         content: null
       }]
-    }
+    },
+    x: 1,
+    y: 1,
+    sizex: 10,
+    sizey: 10
   },
   {
     id: '20001',
@@ -185,7 +206,11 @@ const list = [
       width: 400,
       height: 200,
       borderRadius: ''
-    }
+    },
+    x: 1,
+    y: 1,
+    sizex: 10,
+    sizey: 5
   }
 ]
 

frontend/src/lang/en.js

@@ -1311,7 +1311,9 @@ export default {
     exit_un_march_linkage_field: 'Exit Un March Linkage Field',
     details: 'Details',
     setting: 'Setting',
-    no_drill_field: 'Miss relation field'
+    no_drill_field: 'Miss relation field',
+    matrix: 'matrix',
+    suspension: 'suspension'
   },
   plugin: {
     local_install: 'Local installation',

frontend/src/lang/tw.js

@@ -1314,7 +1314,9 @@ export default {
     exit_un_march_linkage_field: '存在未匹配聯動關系的字段',
     details: '詳情',
     setting: '設置',
-    no_drill_field: '缺少關聯字段'
+    no_drill_field: '缺少關聯字段',
+    matrix: '矩阵分布',
+    suspension: '悬浮'
   },
   plugin: {
     local_install: '本地安裝',

frontend/src/lang/zh.js

@@ -1319,7 +1319,9 @@ export default {
     exit_un_march_linkage_field: '存在未匹配联动关系的字段',
     details: '详情',
     setting: '设置',
-    no_drill_field: '缺少关联字段'
+    no_drill_field: '缺少关联字段',
+    matrix: '矩阵分布',
+    suspension: '悬浮'
   },
   plugin: {
     local_install: '本地安装',

frontend/src/store/index.js

@@ -104,11 +104,21 @@ const data = {
       state.curCanvasScale = curCanvasScale
     },
 
+    // setShapeStyle({ curComponent, canvasStyleData, curCanvasScale }, { top, left, width, height, rotate }) {
+    //   if (top || top === 0) curComponent.style.top = canvasStyleData.selfAdaption ? (top * 100 / curCanvasScale.scaleHeight) : top
+    //   if (left || left === 0) curComponent.style.left = canvasStyleData.selfAdaption ? (left * 100 / curCanvasScale.scaleWidth) : left
+    //   if (width || width === 0) curComponent.style.width = canvasStyleData.selfAdaption ? (width * 100 / curCanvasScale.scaleWidth) : width
+    //   if (height || height === 0) curComponent.style.height = canvasStyleData.selfAdaption ? (height * 100 / curCanvasScale.scaleHeight) : height
+    //   if (rotate || rotate === 0) curComponent.style.rotate = rotate
+    //   // console.log('setShapeStyle:curComponent' + 'top:' + top + ';left:' + left + '====' + JSON.stringify(curComponent))
+    // },
+
     setShapeStyle({ curComponent, canvasStyleData, curCanvasScale }, { top, left, width, height, rotate }) {
-      if (top || top === 0) curComponent.style.top = canvasStyleData.selfAdaption ? (top * 100 / curCanvasScale.scaleHeight) : top
-      if (left || left === 0) curComponent.style.left = canvasStyleData.selfAdaption ? (left * 100 / curCanvasScale.scaleWidth) : left
-      if (width || width === 0) curComponent.style.width = canvasStyleData.selfAdaption ? (width * 100 / curCanvasScale.scaleWidth) : width
-      if (height || height === 0) curComponent.style.height = canvasStyleData.selfAdaption ? (height * 100 / curCanvasScale.scaleHeight) : height
+      console.log('setShapeStyle:width=' + width + ';height=' + height)
+      if (top || top === 0) curComponent.style.top = top / curCanvasScale.scalePointHeight
+      if (left || left === 0) curComponent.style.left = left / curCanvasScale.scalePointWidth
+      if (width || width === 0) curComponent.style.width = width / curCanvasScale.scalePointWidth
+      if (height || height === 0) curComponent.style.height = height / curCanvasScale.scalePointHeight
       if (rotate || rotate === 0) curComponent.style.rotate = rotate
       // console.log('setShapeStyle:curComponent' + 'top:' + top + ';left:' + left + '====' + JSON.stringify(curComponent))
     },