feat: 增加辅助设计网格

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

@@ -1,20 +1,20 @@
 <template>
   <svg class="grid" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
     <defs>
-      <!--      <pattern id="smallGrid" width="5" height="5" patternUnits="userSpaceOnUse">-->
-      <!--        <path-->
-      <!--          d="M 5 0 L 0 0 0 5"-->
-      <!--          fill="none"-->
-      <!--          stroke="rgba(207, 207, 207, 0.3)"-->
-      <!--          stroke-width="1"-->
-      <!--        />-->
-      <!--      </pattern>-->
+      <pattern id="smallGrid" :width="smallGridW" :height="smallGridH" patternUnits="userSpaceOnUse">
+        <path
+          :d="smallGridPathD"
+          fill="none"
+          stroke="rgba(207, 207, 207, 0.6)"
+          stroke-width="1"
+        />
+      </pattern>
       <pattern id="grid" :width="matrixStyle.width" :height="matrixStyle.height" patternUnits="userSpaceOnUse">
         <rect :width="matrixStyle.width" :height="matrixStyle.height" fill="url(#smallGrid)" />
         <path
           :d="pathD"
           fill="none"
-          stroke="rgba(186, 186, 186, 0.5)"
+          stroke="rgba(64,158,255,0.8)"
           stroke-width="1"
         />
       </pattern>
@@ -41,6 +41,15 @@ export default {
   computed: {
     pathD: function() {
       return 'M ' + this.matrixStyle.width + ' 0 L 0 0 0 ' + this.matrixStyle.height
+    },
+    smallGridPathD: function() {
+      return 'M ' + this.smallGridW + ' 0 L 0 0 0 ' + this.smallGridH
+    },
+    smallGridW: function() {
+      return this.matrixStyle.width / 3
+    },
+    smallGridH: function() {
+      return this.matrixStyle.height / 3
     }
   }
 }

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

@@ -9,13 +9,14 @@
         ['parent_transform']:!dialogVisible
       }
     ]"
+    :style="editStyle"
     @mousedown="handleMouseDown"
     @scroll="canvasScroll"
   >
     <!-- 网格线 -->
-    <Grid v-if="psDebug&&canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />
+    <Grid v-if="showGrid" :matrix-style="matrixStyle" />
     <!--    positionBox:{{positionBoxInfo}}-->
-    <PGrid v-if="psDebug" :position-box="positionBoxInfoArray" :matrix-style="matrixStyle" />
+    <!--    <PGrid v-if="psDebug" :position-box="positionBoxInfoArray" :matrix-style="matrixStyle" />-->
 
     <!-- 仪表板联动清除按钮-->
     <canvas-opt-bar />
@@ -115,7 +116,9 @@
     </de-drag>
     <!--拖拽阴影部分-->
     <!--    <drag-shadow v-if="(curComponent&&this.curComponent.optStatus.dragging)||dragComponentInfo" />-->
-    <drag-shadow v-if="(curComponent&&curComponent.auxiliaryMatrix&&(curComponent.optStatus.dragging||curComponent.optStatus.resizing))||(dragComponentInfo)" />
+    <drag-shadow
+      v-if="(curComponent&&curComponent.auxiliaryMatrix&&(curComponent.optStatus.dragging||curComponent.optStatus.resizing))||(dragComponentInfo)"
+    />
     <!-- 右击菜单 -->
     <ContextMenu />
     <!-- 标线 (临时去掉标线 吸附等功能)-->
@@ -156,7 +159,12 @@
           {{ $t('chart.export_details') }}
         </el-button>
       </span>
-      <UserViewDialog v-if="chartDetailsVisible" ref="userViewDialog" :chart="showChartInfo" :chart-table="showChartTableInfo" />
+      <UserViewDialog
+        v-if="chartDetailsVisible"
+        ref="userViewDialog"
+        :chart="showChartInfo"
+        :chart-table="showChartTableInfo"
+      />
     </el-dialog>
 
     <el-dialog
@@ -255,9 +263,9 @@ function scrollScreen(e) {
 }
 
 /**
- * 重置位置盒子
- *
- */
+   * 重置位置盒子
+   *
+   */
 function resetPositionBox() {
   // 根据当前容器的宽度来决定多少列
   itemMaxX = this.maxCell
@@ -274,10 +282,10 @@ function resetPositionBox() {
 }
 
 /**
- * 填充位置盒子
- *
- * @param {any} item
- */
+   * 填充位置盒子
+   *
+   * @param {any} item
+   */
 function addItemToPositionBox(item) {
   const pb = positionBox
   if (item.x <= 0 || item.y <= 0) return
@@ -321,9 +329,9 @@ function removeItemFromPositionBox(item) {
 }
 
 /**
- * 重新计算宽度，使最小单元格能占满整个容器
- *
- */
+   * 重新计算宽度，使最小单元格能占满整个容器
+   *
+   */
 function recalcCellWidth() {
   this.maxCell = this.matrixCount.x
 }
@@ -400,11 +408,11 @@ function resizePlayer(item, newSize) {
 }
 
 /**
- * 检查移动的位置，如果不合法，会自动修改
- *
- * @param {any} item
- * @param {any} position
- */
+   * 检查移动的位置，如果不合法，会自动修改
+   *
+   * @param {any} item
+   * @param {any} position
+   */
 function checkItemPosition(item, position) {
   position = position || {}
   position.x = position.x || item.x
@@ -445,11 +453,11 @@ function checkItemPosition(item, position) {
 }
 
 /**
- * 移动正在拖动的元素
- *
- * @param {any} item
- * @param {any} position
- */
+   * 移动正在拖动的元素
+   *
+   * @param {any} item
+   * @param {any} position
+   */
 function movePlayer(item, position) {
   const vm = this
   removeItemFromPositionBox(item)
@@ -532,10 +540,10 @@ function changeToCoord(left, top, width, height) {
 }
 
 /**
- * 检测有无碰撞，并作出处理
- *
- * @param {any} tCoord 比对对象的坐标
- */
+   * 检测有无碰撞，并作出处理
+   *
+   * @param {any} tCoord 比对对象的坐标
+   */
 // eslint-disable-next-line no-unused-vars
 function findClosetCoords(item, tCoord) {
   if (isOverlay) return
@@ -576,10 +584,10 @@ function findClosetCoords(item, tCoord) {
 }
 
 /**
- * 生成坐标点
- *
- * @param {any} item
- */
+   * 生成坐标点
+   *
+   * @param {any} item
+   */
 // eslint-disable-next-line no-unused-vars
 function makeCoordinate(item) {
   const width = this.cellWidth * (item.sizex) - this.baseMarginLeft
@@ -625,10 +633,10 @@ function changeItemCoord(item) {
 }
 
 /**
- * 清空目标位置的元素
- *
- * @param {any} item
- */
+   * 清空目标位置的元素
+   *
+   * @param {any} item
+   */
 function emptyTargetCell(item) {
   const vm = this
   const belowItems = findBelowItems(item)
@@ -643,11 +651,11 @@ function emptyTargetCell(item) {
 }
 
 /**
- * 当前位置的item能否上浮
- *
- * @param {any} item
- * @returns
- */
+   * 当前位置的item能否上浮
+   *
+   * @param {any} item
+   * @returns
+   */
 function canItemGoUp(item) {
   let upperRows = 0
   for (let row = item.y - 2; row >= 0; row--) {
@@ -663,11 +671,11 @@ function canItemGoUp(item) {
 }
 
 /**
- * 在移动之前，找到当前下移的元素的下面的元素（递归）
- *
- * @param {any} items
- * @param {any} size
- */
+   * 在移动之前，找到当前下移的元素的下面的元素（递归）
+   *
+   * @param {any} items
+   * @param {any} size
+   */
 function moveItemDown(item, size) {
   const vm = this
   removeItemFromPositionBox(item)
@@ -705,12 +713,12 @@ function setPlayerPosition(item, position) {
 }
 
 /**
- * 寻找子元素到父元素的最大距离
- *
- * @param {any} parent
- * @param {any} son
- * @param {any} size
- */
+   * 寻找子元素到父元素的最大距离
+   *
+   * @param {any} parent
+   * @param {any} son
+   * @param {any} size
+   */
 function calcDiff(parent, son, size) {
   const diffs = []
 
@@ -771,13 +779,28 @@ function findBelowItems(item) {
 
   return _.sortBy(_.values(belowItems), 'y')
 }
+
 // eslint-disable-next-line no-unused-vars
 function getoPsitionBox() {
   return positionBox
 }
 
 export default {
-  components: { Background, Shape, ContextMenu, MarkLine, Area, Grid, PGrid, DeDrag, UserViewDialog, DeOutWidget, CanvasOptBar, DragShadow, LinkJumpSet },
+  components: {
+    Background,
+    Shape,
+    ContextMenu,
+    MarkLine,
+    Area,
+    Grid,
+    PGrid,
+    DeDrag,
+    UserViewDialog,
+    DeOutWidget,
+    CanvasOptBar,
+    DragShadow,
+    LinkJumpSet
+  },
   props: {
     isEdit: {
       type: Boolean,
@@ -793,17 +816,20 @@ export default {
     dragStart: {
       required: false,
       type: Function,
-      default: function() {}
+      default: function() {
+      }
     },
     dragging: {
       required: false,
       type: Function,
-      default: function() {}
+      default: function() {
+      }
     },
     dragEnd: {
       required: false,
       type: Function,
-      default: function() {}
+      default: function() {
+      }
     },
     resizable: {
       required: false,
@@ -813,17 +839,20 @@ export default {
     resizeStart: {
       required: false,
       type: Function,
-      default: function() {}
+      default: function() {
+      }
     },
     resizing: {
       required: false,
       type: Function,
-      default: function() {}
+      default: function() {
+      }
     },
     resizeEnd: {
       required: false,
       type: Function,
-      default: function() {}
+      default: function() {
+      }
     },
     matrixCount: {
       required: false,
@@ -913,6 +942,14 @@ export default {
     }
   },
   computed: {
+    showGrid() {
+      return this.canvasStyleData.aidedDesign.showGrid
+    },
+    editStyle() {
+      return {
+        height: this.outStyle.height + this.scrollTop + 'px !important'
+      }
+    },
     dialogVisible() {
       return this.chartDetailsVisible || this.linkJumpSetVisible
     },
@@ -1226,7 +1263,10 @@ export default {
             matrixStyleOriginWidth: this.matrixStyle.originWidth,
             matrixStyleOriginHeight: this.matrixStyle.originHeight
           })
-        this.$store.commit('setPreviewCanvasScale', { scaleWidth: this.scalePointWidth, scaleHeight: this.scalePointHeight })
+        this.$store.commit('setPreviewCanvasScale', {
+          scaleWidth: this.scalePointWidth,
+          scaleHeight: this.scalePointHeight
+        })
       }
     },
     getShapeStyleIntDeDrag(style, prop) {
@@ -1464,11 +1504,11 @@ export default {
 
     },
     /**
-     * 计算当前item的位置和大小
-     *
-     * @param {any} item
-     * @returns
-     */
+       * 计算当前item的位置和大小
+       *
+       * @param {any} item
+       * @returns
+       */
     nowItemStyle(item, index) {
       return {
         width: (this.cellWidth * (item.sizex) - this.baseMarginLeft) + 'px',
@@ -1491,20 +1531,20 @@ export default {
       return finalList
     },
     /**
-     * 获取x最大值
-     *
-     * @returns
-     */
+       * 获取x最大值
+       *
+       * @returns
+       */
     getMaxCell() {
       // console.log('getMaxCell:')
 
       return this.maxCell
     },
     /**
-     * 获取渲染状态
-     *
-     * @returns
-     */
+       * 获取渲染状态
+       *
+       * @returns
+       */
     getRenderState() {
       // console.log('getRenderState:')
 
@@ -1576,55 +1616,63 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.editor {
+  .editor {
+    width: 100%;
     position: relative;
     /*background: #fff;*/
     margin: auto;
     /*会影响设置组件不能出现在最高层*/
     /*overflow-x: hidden;*/
-    background-size:100% 100% !important;
+    background-size: 100% 100% !important;
     /*transform-style:preserve-3d;*/
     .lock {
-        opacity: .5;
+      opacity: .5;
     }
-}
-.parent_transform {
-  //transform transform 会使z-index 失效；为了使编辑仪表板时 按钮一直在上面 采用transform-style 的方式
-  // transform-style 会导致 dialog 遮罩有问题 此处暂时用这个样式做控制
-  transform-style:preserve-3d;
-}
-.edit {
+  }
+
+  .parent_transform {
+    //transform transform 会使z-index 失效；为了使编辑仪表板时 按钮一直在上面 采用transform-style 的方式
+    // transform-style 会导致 dialog 遮罩有问题 此处暂时用这个样式做控制
+    transform-style: preserve-3d;
+  }
+
+  .edit {
     /*outline: 1px solid gainsboro;*/
     .component {
-        outline: none;
-        width: 100%;
-        height: 100%;
+      outline: none;
+      width: 100%;
+      height: 100%;
     }
-}
+  }
 
-.gap_class{
-   padding:3px;
-}
+  .gap_class {
+    padding: 3px;
+  }
 
-.ref-line {
-  position: absolute;
-  background-color: #70c0ff;;
-  z-index: 9999;
-}
-.v-line {
-  width: 1px;
-}
-.h-line {
-  height: 1px;
-}
-.dialog-css>>>.el-dialog__title {
-  font-size: 14px;
-}
-.dialog-css >>> .el-dialog__header {
-  padding: 20px 20px 0;
-}
-.dialog-css >>> .el-dialog__body {
-  padding: 10px 20px 20px;
-}
+  .ref-line {
+    position: absolute;
+    background-color: #70c0ff;;
+    z-index: 9999;
+  }
+
+  .v-line {
+    width: 1px;
+  }
+
+  .h-line {
+    height: 1px;
+  }
+
+  .dialog-css > > > .el-dialog__title {
+    font-size: 14px;
+  }
+
+  .dialog-css > > > .el-dialog__header {
+    padding: 20px 20px 0;
+  }
+
+  .dialog-css > > > .el-dialog__body {
+    padding: 10px 20px 20px;
+  }
 
 </style>

frontend/src/components/canvas/utils/utils.js

@@ -8,6 +8,7 @@ import {
 } from '@/utils/ApplicationContext'
 import { uuid } from 'vue-uuid'
 import store from '@/store'
+import { AIDED_DESIGN } from '@/views/panel/panel'
 
 export function deepCopy(target) {
   if (typeof target === 'object') {
@@ -99,6 +100,7 @@ export function panelInit(componentData, componentStyle) {
   componentStyle.refreshTime = (componentStyle.refreshTime || 5)
   componentStyle.refreshViewLoading = (componentStyle.refreshViewLoading || false)
   componentStyle.refreshUnit = (componentStyle.refreshUnit || 'minute')
+  componentStyle.aidedDesign = (componentStyle.aidedDesign || deepCopy(AIDED_DESIGN))
 
   // 将data 和 style 数据设置到全局store中
   store.commit('setComponentData', resetID(componentData))

frontend/src/views/panel/SubjectSetting/PanelStyle/PanelAidedDesign.vue

@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <div style="width: 100%;">
+      <el-popover
+        placement="right"
+        width="400"
+        trigger="click"
+      >
+        <el-col>
+          <el-form ref="aidedForm" label-width="110px" size="mini">
+            <el-form-item :label="'显示辅助网格'" class="form-item form-item-slider">
+              <el-checkbox v-model="aidedDesign.showGrid" size="mini" @change="onChangePanelStyle" />
+            </el-form-item>
+          </el-form>
+        </el-col>
+        <el-button slot="reference" size="mini" class="shape-item">辅助设计 <i
+          class="el-icon-setting el-icon--right"
+        /></el-button>
+      </el-popover>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'PanelAidedDesign',
+  props: {},
+  computed: {
+    aidedDesign() {
+      return this.$store.state.canvasStyleData.aidedDesign
+    }
+  },
+  created() {
+  },
+  methods: {
+    onChangePanelStyle() {
+      this.$store.state.styleChangeTimes++
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .avatar-uploader >>> .el-upload {
+    width: 100px;
+    height: 60px;
+    line-height: 70px;
+  }
+
+  .avatar-uploader >>> .el-upload-list li {
+    width: 100px !important;
+    height: 60px !important;
+  }
+
+  .disabled >>> .el-upload--picture-card {
+    display: none;
+  }
+
+  .shape-item {
+    padding: 6px;
+    border: none;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  /*.form-item-slider >>> .el-form-item__label {*/
+  /*  font-size: 12px;*/
+  /*  line-height: 38px;*/
+  /*}*/
+
+  .form-item >>> .el-form-item__label {
+    font-size: 12px;
+  }
+
+  .el-select-dropdown__item {
+    padding: 0 20px;
+  }
+
+  span {
+    font-size: 12px
+  }
+
+  .el-form-item {
+    margin-bottom: 6px;
+  }
+</style>

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

@@ -17,6 +17,7 @@
         <el-collapse-item :title="$t('panel.panel')" name="panel">
           <el-row class="selector-div">
             <background-selector class="attr-selector" />
+            <panel-aided-design class="attr-selector" />
             <component-gap class="attr-selector" />
             <panel-refresh-time class="attr-selector" />
             <panel-view-result class="attr-selector" />
@@ -70,9 +71,11 @@ import { mapState } from 'vuex'
 import { deepCopy } from '@/components/canvas/utils/utils'
 import bus from '@/utils/bus'
 import PanelViewResult from '@/views/panel/SubjectSetting/PanelStyle/PanelViewResult'
+import PanelAidedDesign from '@/views/panel/SubjectSetting/PanelStyle/PanelAidedDesign'
 
 export default {
   components: {
+    PanelAidedDesign,
     PanelViewResult,
     slider,
     BackgroundSelector,

frontend/src/views/panel/panel.js

@@ -23,7 +23,13 @@ export const CANVAS_STYLE = {
   panel: DEFAULT_PANEL_STYLE,
   refreshViewLoading: true, // 仪表板视图loading提示
   refreshUnit: 'minute', // 仪表板刷新时间带外 默认 分钟
-  refreshTime: 5 // 仪表板刷新时间 默认5分钟
+  refreshTime: 5, // 仪表板刷新时间 默认5分钟
+  aidedDesign: AIDED_DESIGN // 辅助设计
+}
+
+export const AIDED_DESIGN = {
+  showGrid: false,
+  matrixBase: 1 // 当前matrix的基数 （是pcMatrixCount的几倍）
 }
 
 export const DEFAULT_COMMON_CANVAS_STYLE_STRING = {