Merge pull request #2123 from dataease/pr@dev@feat_panel-aided-design

feat: 可选择调节矩阵密度

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

@@ -219,6 +219,12 @@ import { buildFilterMap } from '@/utils/conditionUtil'
 import _ from 'lodash'
 import $ from 'jquery'
 import Background from '@/views/background/index'
+import { ApplicationContext } from '@/utils/ApplicationContext'
+import {
+  BASE_MOBILE_STYLE,
+  COMMON_BACKGROUND_NONE,
+  HYPERLINKS
+} from '@/components/canvas/custom-component/component-list'
 
 let positionBox = []
 let coordinates = [] // 坐标点集合
@@ -943,7 +949,11 @@ export default {
   },
   computed: {
     showGrid() {
-      return this.canvasStyleData.aidedDesign.showGrid
+      if (this.canvasStyleData && this.canvasStyleData.aidedDesign) {
+        return this.canvasStyleData.aidedDesign.showGrid
+      } else {
+        return false
+      }
     },
     editStyle() {
       return {
@@ -1002,6 +1012,12 @@ export default {
     }
   },
   watch: {
+    matrixCount: {
+      handler(newVal, oldVal) {
+        const pointScale = newVal.x / oldVal.x
+        this.changeScale(pointScale)
+      }
+    },
     customStyle: {
       handler(newVal) {
         // 获取当前宽高（宽高改变后重新渲染画布）
@@ -1223,10 +1239,19 @@ export default {
       // 自适应画布区域 返回原值
       return value * scale / 100
     },
-    changeScale() {
-      if (this.canvasStyleData.matrixCount) {
-        this.matrixCount = this.canvasStyleData.matrixCount
-      }
+    // 修改矩阵点
+    changeComponentSizePoint(pointScale) {
+      this.componentData.forEach((item, index) => {
+        item.x = (item.x - 1) * pointScale + 1
+        item.y = (item.y - 1) * pointScale + 1
+        item.sizex = item.sizex * pointScale
+        item.sizey = item.sizey * pointScale
+        // this.componentData[index] = item
+      })
+    },
+
+    changeScale(pointScale) {
+      this.changeComponentSizePoint(pointScale)
       // 1.3 版本重新设计仪表板定位方式，基准画布宽高为 1600*900 宽度自适应当前画布获取缩放比例scaleWidth
       // 高度缩放比例scaleHeight = scaleWidth 基础矩阵为128*72 矩阵原始宽度12.5*12.5 矩阵高度可以调整
 

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

@@ -67,7 +67,7 @@ export function mobile2MainCanvas(mainSource, mobileSource) {
 }
 
 export function panelInit(componentData, componentStyle) {
-  componentData.forEach(item => {
+  componentData.forEach((item, index) => {
     if (item.component && item.component === 'de-date') {
       if (item.options.attrs &&
         (!item.options.attrs.default || (item.serviceName === 'timeYearWidget' && item.options.attrs.default.dynamicInfill !== 'year') || (item.serviceName === 'timeMonthWidget' && item.options.attrs.default.dynamicInfill !== 'month'))) {
@@ -95,6 +95,7 @@ export function panelInit(componentData, componentStyle) {
       item.hyperlinks = (item.hyperlinks || HYPERLINKS)
     }
     item.commonBackground = item.commonBackground || deepCopy(COMMON_BACKGROUND_NONE)
+    componentData[index] = item
   })
   // style初始化
   componentStyle.refreshTime = (componentStyle.refreshTime || 5)

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

@@ -8,9 +8,16 @@
       >
         <el-col>
           <el-form ref="aidedForm" label-width="110px" size="mini">
-            <el-form-item :label="'显示辅助网格'" class="form-item form-item-slider">
+            <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-item :label="'矩阵密度'" class="form-item form-item-slider">
+              <el-radio-group v-model="aidedDesign.matrixBase" size="mini">
+                <el-radio-button :label="1">普通</el-radio-button>
+                <el-radio-button :label="2">适中</el-radio-button>
+                <el-radio-button :label="3">密集</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
           </el-form>
         </el-col>
         <el-button slot="reference" size="mini" class="shape-item">辅助设计 <i

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

@@ -168,7 +168,7 @@
           @mouseup="deselectCurComponent"
           @scroll="canvasScroll"
         >
-          <Editor ref="canvasEditor" :matrix-count="pcMatrixCount" :out-style="outStyle" :scroll-top="scrollTop" />
+          <Editor ref="canvasEditor" :matrix-count="pcMatrixCountBase" :out-style="outStyle" :scroll-top="scrollTop" />
         </div>
         <!--移动端画布区域 保持宽高比2.5-->
         <el-row v-if="mobileLayoutStatus" class="mobile_canvas_main">
@@ -547,6 +547,16 @@ export default {
     panelInfo() {
       return this.$store.state.panel.panelInfo
     },
+    pcMatrixCountBase() {
+      if (this.canvasStyleData.aidedDesign) {
+        return {
+          x: this.pcMatrixCount.x * this.canvasStyleData.aidedDesign.matrixBase,
+          y: this.pcMatrixCount.y * this.canvasStyleData.aidedDesign.matrixBase
+        }
+      } else {
+        return this.pcMatrixCount
+      }
+    },
     ...mapState([
       'curComponent',
       'curCanvasScale',

frontend/src/views/panel/panel.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line no-unused-vars
-import { BASE_CHART, BASE_CHART_STRING } from '@/views/chart/chart/chart'
+import { BASE_CHART_STRING } from '@/views/chart/chart/chart'
 import { deepCopy } from '@/components/canvas/utils/utils'
 
 export const DEFAULT_PANEL_STYLE = {