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)
+      // 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=')
         // 组件移入
+        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) {
+        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))
     },

frontend/src/styles/deicon/demo_index.html

@@ -54,6 +54,42 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
 
+            <li class="dib">
+              <span class="icon iconfont">&#xe69c;</span>
+                <div class="name">符号-数据矩阵</div>
+                <div class="code-name">&amp;#xe69c;</div>
+              </li>
+
+            <li class="dib">
+              <span class="icon iconfont">&#xeb85;</span>
+                <div class="name">视图矩阵_o</div>
+                <div class="code-name">&amp;#xeb85;</div>
+              </li>
+
+            <li class="dib">
+              <span class="icon iconfont">&#xe62c;</span>
+                <div class="name">悬浮</div>
+                <div class="code-name">&amp;#xe62c;</div>
+              </li>
+
+            <li class="dib">
+              <span class="icon iconfont">&#xe6db;</span>
+                <div class="name">右悬浮-选中</div>
+                <div class="code-name">&amp;#xe6db;</div>
+              </li>
+
+            <li class="dib">
+              <span class="icon iconfont">&#xe6f6;</span>
+                <div class="name">悬浮</div>
+                <div class="code-name">&amp;#xe6f6;</div>
+              </li>
+
+            <li class="dib">
+              <span class="icon iconfont">&#xe8e6;</span>
+                <div class="name">悬浮按钮</div>
+                <div class="code-name">&amp;#xe8e6;</div>
+              </li>
+
             <li class="dib">
               <span class="icon iconfont">&#xe62a;</span>
                 <div class="name">44.tabs</div>
@@ -372,9 +408,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1632382166116') format('woff2'),
-       url('iconfont.woff?t=1632382166116') format('woff'),
-       url('iconfont.ttf?t=1632382166116') format('truetype');
+  src: url('iconfont.woff2?t=1633678290478') format('woff2'),
+       url('iconfont.woff?t=1633678290478') format('woff'),
+       url('iconfont.ttf?t=1633678290478') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -400,6 +436,60 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
 
+          <li class="dib">
+            <span class="icon iconfont icon-shujujuzhen"></span>
+            <div class="name">
+              符号-数据矩阵
+            </div>
+            <div class="code-name">.icon-shujujuzhen
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-shitujuzhen_o"></span>
+            <div class="name">
+              视图矩阵_o
+            </div>
+            <div class="code-name">.icon-shitujuzhen_o
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-xuanfu1"></span>
+            <div class="name">
+              悬浮
+            </div>
+            <div class="code-name">.icon-xuanfu1
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-youxuanfu-copy"></span>
+            <div class="name">
+              右悬浮-选中
+            </div>
+            <div class="code-name">.icon-youxuanfu-copy
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-xuanfu"></span>
+            <div class="name">
+              悬浮
+            </div>
+            <div class="code-name">.icon-xuanfu
+            </div>
+          </li>
+
+          <li class="dib">
+            <span class="icon iconfont icon-xuanfuanniu"></span>
+            <div class="name">
+              悬浮按钮
+            </div>
+            <div class="code-name">.icon-xuanfuanniu
+            </div>
+          </li>
+
           <li class="dib">
             <span class="icon iconfont icon-tabs"></span>
             <div class="name">
@@ -877,6 +967,54 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
 
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shujujuzhen"></use>
+                </svg>
+                <div class="name">符号-数据矩阵</div>
+                <div class="code-name">#icon-shujujuzhen</div>
+            </li>
+
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shitujuzhen_o"></use>
+                </svg>
+                <div class="name">视图矩阵_o</div>
+                <div class="code-name">#icon-shitujuzhen_o</div>
+            </li>
+
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xuanfu1"></use>
+                </svg>
+                <div class="name">悬浮</div>
+                <div class="code-name">#icon-xuanfu1</div>
+            </li>
+
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-youxuanfu-copy"></use>
+                </svg>
+                <div class="name">右悬浮-选中</div>
+                <div class="code-name">#icon-youxuanfu-copy</div>
+            </li>
+
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xuanfu"></use>
+                </svg>
+                <div class="name">悬浮</div>
+                <div class="code-name">#icon-xuanfu</div>
+            </li>
+
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xuanfuanniu"></use>
+                </svg>
+                <div class="name">悬浮按钮</div>
+                <div class="code-name">#icon-xuanfuanniu</div>
+            </li>
+
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-tabs"></use>

frontend/src/styles/deicon/iconfont.css

 @font-face {
   font-family: "iconfont"; /* Project id 2459092 */
-  src: url('iconfont.woff2?t=1632382166116') format('woff2'),
-       url('iconfont.woff?t=1632382166116') format('woff'),
-       url('iconfont.ttf?t=1632382166116') format('truetype');
+  src: url('iconfont.woff2?t=1633678290478') format('woff2'),
+       url('iconfont.woff?t=1633678290478') format('woff'),
+       url('iconfont.ttf?t=1633678290478') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,30 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-shujujuzhen:before {
+  content: "\e69c";
+}
+
+.icon-shitujuzhen_o:before {
+  content: "\eb85";
+}
+
+.icon-xuanfu1:before {
+  content: "\e62c";
+}
+
+.icon-youxuanfu-copy:before {
+  content: "\e6db";
+}
+
+.icon-xuanfu:before {
+  content: "\e6f6";
+}
+
+.icon-xuanfuanniu:before {
+  content: "\e8e6";
+}
+
 .icon-tabs:before {
   content: "\e62a";
 }

frontend/src/styles/deicon/iconfont.json

@@ -5,6 +5,48 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "1766500",
+      "name": "符号-数据矩阵",
+      "font_class": "shujujuzhen",
+      "unicode": "e69c",
+      "unicode_decimal": 59036
+    },
+    {
+      "icon_id": "5387898",
+      "name": "视图矩阵_o",
+      "font_class": "shitujuzhen_o",
+      "unicode": "eb85",
+      "unicode_decimal": 60293
+    },
+    {
+      "icon_id": "21505923",
+      "name": "悬浮",
+      "font_class": "xuanfu1",
+      "unicode": "e62c",
+      "unicode_decimal": 58924
+    },
+    {
+      "icon_id": "6331823",
+      "name": "右悬浮-选中",
+      "font_class": "youxuanfu-copy",
+      "unicode": "e6db",
+      "unicode_decimal": 59099
+    },
+    {
+      "icon_id": "10788831",
+      "name": "悬浮",
+      "font_class": "xuanfu",
+      "unicode": "e6f6",
+      "unicode_decimal": 59126
+    },
+    {
+      "icon_id": "14541134",
+      "name": "悬浮按钮",
+      "font_class": "xuanfuanniu",
+      "unicode": "e8e6",
+      "unicode_decimal": 59622
+    },
     {
       "icon_id": "15196968",
       "name": "44.tabs",

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

@@ -60,6 +60,8 @@ 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'
+import eventBus from '@/components/canvas/utils/eventBus'
+import { mapState } from 'vuex'
 
 export default {
   name: 'AssisComponent',
@@ -69,6 +71,11 @@ export default {
       pictureList
     }
   },
+  computed: {
+    ...mapState([
+      'canvasStyleData'
+    ])
+  },
 
   methods: {
     handleDragStart(ev) {
@@ -79,6 +86,7 @@ export default {
         id: ev.target.dataset.id
       }
       ev.dataTransfer.setData('componentInfo', JSON.stringify(dataTrans))
+      eventBus.$emit('startMoveIn')
     },
     goFile() {
       this.$refs.files.click()
@@ -133,6 +141,7 @@ export default {
           component = deepCopy(componentTemp)
         }
       })
+      component.auxiliaryMatrix = this.canvasStyleData.auxiliaryMatrix
       return component
     },
     handleDragEnd(ev) {

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

@@ -69,6 +69,9 @@
 import { tree, findOne } from '@/api/panel/view'
 import componentList from '@/components/canvas/custom-component/component-list'
 import { deepCopy } from '@/components/canvas/utils/utils'
+import eventBus from '@/components/canvas/utils/eventBus'
+import { mapState } from 'vuex'
+
 export default {
   name: 'ViewSelect',
   props: {
@@ -92,6 +95,11 @@ export default {
       loading: false
     }
   },
+  computed: {
+    ...mapState([
+      'canvasStyleData'
+    ])
+  },
   watch: {
     templateFilterText(val) {
       this.$refs.templateTree.filter(val)
@@ -130,6 +138,7 @@ export default {
         id: node.data.id
       }
       ev.dataTransfer.setData('componentInfo', JSON.stringify(dataTrans))
+      eventBus.$emit('startMoveIn')
     },
     dragEnd() {
       console.log('dragEnd')
@@ -178,6 +187,7 @@ export default {
           component = deepCopy(componentTemp)
         }
       })
+      component.auxiliaryMatrix = this.canvasStyleData.auxiliaryMatrix
       return component
     }
 

frontend/src/views/panel/drag/base.vue

+<template>
+  <div id="demo">
+    <!-- <button @click="getList">getList</button> -->
+    <div class="head">
+      <router-link to="/" class="arrow">&larr;</router-link>
+      <span>基本应用</span>
+    </div>
+    <power-drag
+      ref="cyGridster"
+      :your-list="myList"
+      :base-margin-left="baseMarginLeft"
+      :base-margin-top="baseMarginTop"
+      :base-width="baseWidth"
+      :base-height="baseHeight"
+    >
+      <!-- <div v-for="(item,index) in myList" :slot="'slot'+index">
+
+            </div> -->
+      <div draggable="true" style="width: 200px;height: 200px;background: #1b6d85">
+        this is test
+      </div>
+    </power-drag>
+  </div>
+</template>
+
+<script>
+import drag from '@/components/DeDrag/drag.vue'
+import mock from 'mockjs'
+import _ from 'lodash'
+
+export default {
+  name: 'App',
+  components: {
+    'power-drag': drag
+  },
+  data() {
+    const list = mock.mock({
+      // "myList|10": [{
+      //     "id|+1": 1,
+      //     x: '@integer(1,5)',
+      //     y: '@integer(1,5)',
+      //     sizex: '@integer(1,3)',
+      //     sizey: '@integer(1,3)',
+      // }]
+      myList: [{
+        'id': 3,
+        'x': 6,
+        'y': 2,
+        'sizex': 1,
+        'sizey': 1
+      }, {
+        'id': 5,
+        'x': 4,
+        'y': 2,
+        'sizex': 2,
+        'sizey': 1
+      }, {
+        'id': 7,
+        'x': 1,
+        'y': 2,
+        'sizex': 1,
+        'sizey': 1
+      }, {
+        'id': 9,
+        'x': 7,
+        'y': 2,
+        'sizex': 1,
+        'sizey': 1
+      }]
+    })
+    return {
+      myList: list.myList,
+      baseWidth: 0,
+      baseHeight: 0
+    }
+  },
+  created() {
+    // 屏幕适配，使得当前布局能在所有分辨率下适用，示例是在1366*638分辨率下完成
+    const screenWidth = window.innerWidth
+    const screenHeight = window.innerHeight
+    this.baseWidth = 90.8333 * (screenWidth / 1366)
+    this.baseHeight = 100 * (screenHeight / 638)
+    this.baseMarginLeft = 0
+    this.baseMarginTop = 0
+
+    this.$nextTick(function() {
+      $('.dragAndResize').css('width', 'calc(100% - ' + (this.baseMarginLeft) + 'px)')
+    })
+  },
+  mounted() {
+    const gridster = this.$refs['cyGridster'] // 获取gridster实例
+    gridster.init() // 在适当的时候初始化布局组件
+  },
+  methods: {
+    getList() {
+      const gridster = this.$refs['cyGridster'] // 获取gridster实例
+      console.log(JSON.stringify(gridster.getList()))
+    }
+  }
+}
+
+</script>
+
+<style lang='less' scoped>
+    body {
+        overflow-x: hidden;
+        & * {
+            box-sizing: border-box;
+        }
+    }
+
+    #demo {
+        width: 100%;
+        padding: 1.5em 0 1.5em 0;
+
+        .head {
+            border-bottom: 1px dashed;
+            width: 100%;
+
+            padding-left: 20px;
+
+            height: 50px;
+
+            a {
+                text-decoration: none;
+                color: black;
+            }
+        }
+
+        .arrow {
+            font-size: 20px;
+
+            position: relative;
+            margin-right: 10px;
+            top: 2px;
+        }
+    }
+
+</style>

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

@@ -96,7 +96,7 @@
 
         <div
           id="canvasInfo"
-          class="content this_canvas"
+          class="this_canvas"
           @drop="handleDrop"
           @mousedown="handleMouseDown"
           @mouseup="deselectCurComponent"
@@ -479,9 +479,21 @@ export default {
         this.currentWidget = ApplicationContext.getService(componentInfo.id)
 
         this.currentFilterCom = this.currentWidget.getDrawPanel()
-        this.currentFilterCom.style.top = this.getPositionY(e.layerY)
-        this.currentFilterCom.style.left = this.getPositionX(e.layerX)
+
+        if (this.canvasStyleData.auxiliaryMatrix) {
+          this.currentFilterCom.x = this.dropComponentInfo.x
+          this.currentFilterCom.y = this.dropComponentInfo.y
+          this.currentFilterCom.sizex = this.dropComponentInfo.sizex
+          this.currentFilterCom.sizey = this.dropComponentInfo.sizey
+
+          this.currentFilterCom.style.left = (this.dragComponentInfo.x - 1) * this.curCanvasScale.matrixStyleOriginWidth
+          this.currentFilterCom.style.top = (this.dragComponentInfo.y - 1) * this.curCanvasScale.matrixStyleOriginHeight
+          this.currentFilterCom.style.width = this.dragComponentInfo.sizex * this.curCanvasScale.matrixStyleOriginWidth
+          this.currentFilterCom.style.height = this.dragComponentInfo.sizey * this.curCanvasScale.matrixStyleOriginHeight
+        }
         this.currentFilterCom.id = newComponentId
+        this.currentFilterCom.auxiliaryMatrix = this.canvasStyleData.auxiliaryMatrix
+
         if (this.currentWidget.filterDialog) {
           this.show = false
           this.openFilterDialog()
@@ -493,12 +505,27 @@ export default {
       // position = absolution 或导致有偏移 这里中和一下偏移量
       // component.style.top = this.getPositionY(e.layerY)
       // component.style.left = this.getPositionX(e.layerX)
+
+      if (this.canvasStyleData.auxiliaryMatrix) {
+        component.x = this.dropComponentInfo.x
+        component.y = this.dropComponentInfo.y
+        component.sizex = this.dropComponentInfo.sizex
+        component.sizey = this.dropComponentInfo.sizey
+
+        component.style.left = (this.dragComponentInfo.x - 1) * this.curCanvasScale.matrixStyleOriginWidth
+        component.style.top = (this.dragComponentInfo.y - 1) * this.curCanvasScale.matrixStyleOriginHeight
+        component.style.width = this.dragComponentInfo.sizex * this.curCanvasScale.matrixStyleOriginWidth
+        component.style.height = this.dragComponentInfo.sizey * this.curCanvasScale.matrixStyleOriginHeight
+      } else {
         component.style.top = this.dropComponentInfo.shadowStyle.y
         component.style.left = this.dropComponentInfo.shadowStyle.x
         component.style.width = this.dropComponentInfo.shadowStyle.width
         component.style.height = this.dropComponentInfo.shadowStyle.height
+      }
 
       component.id = newComponentId
+      // 新拖入的组件矩阵状态 和仪表板当前的矩阵状态 保持一致
+      component.auxiliaryMatrix = this.canvasStyleData.auxiliaryMatrix
       this.$store.commit('addComponent', { component })
       this.$store.commit('recordSnapshot', 'handleDrop')
       this.clearCurrentInfo()
@@ -611,8 +638,7 @@ export default {
           const scaleHeight = img.height / 200
           let scale = scaleWith > scaleHeight ? scaleWith : scaleHeight
           scale = scale > 1 ? scale : 1
-          this.$store.commit('addComponent', {
-            component: {
+          const component = {
             ...commonAttr,
             id: generateID(),
             component: 'Picture',
@@ -620,13 +646,27 @@ export default {
             icon: '',
             propValue: fileResult,
             style: {
-                ...commonStyle,
-                top: _this.dropComponentInfo.shadowStyle.y,
-                left: _this.dropComponentInfo.shadowStyle.x,
-                width: _this.dropComponentInfo.shadowStyle.width,
-                height: _this.dropComponentInfo.shadowStyle.height
-              }
+              ...commonStyle
+            }
+          }
+          component.auxiliaryMatrix = _this.canvasStyleData.auxiliaryMatrix
+          if (_this.canvasStyleData.auxiliaryMatrix) {
+            component.x = _this.dropComponentInfo.x
+            component.y = _this.dropComponentInfo.y
+            component.sizex = _this.dropComponentInfo.sizex
+            component.sizey = _this.dropComponentInfo.sizey
+            component.style.left = (_this.dropComponentInfo.x - 1) * _this.curCanvasScale.matrixStyleOriginWidth
+            component.style.top = (_this.dropComponentInfo.y - 1) * _this.curCanvasScale.matrixStyleOriginHeight
+            component.style.width = _this.dropComponentInfo.sizex * _this.curCanvasScale.matrixStyleOriginWidth
+            component.style.height = _this.dropComponentInfo.sizey * _this.curCanvasScale.matrixStyleOriginHeight
+          } else {
+            component.style.top = _this.dropComponentInfo.shadowStyle.y
+            component.style.left = _this.dropComponentInfo.shadowStyle.x
+            component.style.width = _this.dropComponentInfo.shadowStyle.width
+            component.style.height = _this.dropComponentInfo.shadowStyle.height
           }
+          this.$store.commit('addComponent', {
+            component: component
           })
 
           this.$store.commit('recordSnapshot', 'handleFileChange')
@@ -784,7 +824,8 @@ export default {
 
 .this_canvas{
   height: calc(100vh - 91px);
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 .el-main{
   height: calc(100vh - 91px);

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

@@ -31,6 +31,8 @@
 <script>
 import { ApplicationContext } from '@/utils/ApplicationContext'
 import { deepCopy } from '@/components/canvas/utils/utils'
+import eventBus from '@/components/canvas/utils/eventBus'
+import { mapState } from 'vuex'
 export default {
   name: 'FilterGroup',
   data() {
@@ -66,6 +68,12 @@ export default {
       }
     }
   },
+  computed: {
+    ...mapState([
+      'canvasStyleData',
+      'curCanvasScale'
+    ])
+  },
   created() {
     for (const key in this.widgetSubjects) {
       const widgetNames = this.widgetSubjects[key]
@@ -82,13 +90,22 @@ export default {
   methods: {
     handleDragStart(ev) {
       // 记录拖拽信息
-      this.$store.commit('setDragComponentInfo', deepCopy(ApplicationContext.getService(ev.target.dataset.id).getDrawPanel()))
+      const dragComponentInfo = deepCopy(ApplicationContext.getService(ev.target.dataset.id).getDrawPanel())
+      // 设置矩阵标记点
+      dragComponentInfo.x = 1
+      dragComponentInfo.y = 1
+      dragComponentInfo.sizex = Math.round(dragComponentInfo.style.width / this.curCanvasScale.matrixStyleOriginWidth)
+      dragComponentInfo.sizey = Math.round(dragComponentInfo.style.height / this.curCanvasScale.matrixStyleOriginHeight)
+      dragComponentInfo.auxiliaryMatrix = this.canvasStyleData.auxiliaryMatrix
+
+      this.$store.commit('setDragComponentInfo', dragComponentInfo)
       ev.dataTransfer.effectAllowed = 'copy'
       const dataTrans = {
         type: 'other',
         id: ev.target.dataset.id
       }
       ev.dataTransfer.setData('componentInfo', JSON.stringify(dataTrans))
+      eventBus.$emit('startMoveIn')
     },
     handleDragEnd(ev) {
       this.$store.commit('clearDragComponentInfo')