Merge pull request #2132 from dataease/pr@dev@refactor_aided-design-matrix

refactor: 去掉矩阵密度选项，适配新的矩阵密度

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

@@ -5,16 +5,25 @@
         <path
           :d="smallGridPathD"
           fill="none"
-          stroke="rgba(207, 207, 207, 0.6)"
+          stroke="rgba(207, 207, 207, 0.5)"
           stroke-width="1"
         />
       </pattern>
+      <pattern id="middleGrid" :width="middleGridW" :height="middleGridH" patternUnits="userSpaceOnUse">
+        <rect :width="middleGridW" :height="middleGridH" fill="url(#smallGrid)" />
+        <path
+          :d="middleGridPathD"
+          fill="none"
+          stroke="rgba(207, 207, 207, 0.7)"
+          stroke-width="1.5"
+        />
+      </pattern>
       <pattern id="grid" :width="gridW" :height="gridH" patternUnits="userSpaceOnUse">
-        <rect :width="gridW" :height="gridH" fill="url(#smallGrid)" />
+        <rect :width="gridW" :height="gridH" fill="url(#middleGrid)" />
         <path
           :d="pathD"
           fill="none"
-          stroke="rgba(64,158,255,0.6)"
+          stroke="rgba(64,158,255,0.8)"
           stroke-width="1"
         />
       </pattern>
@@ -44,6 +53,9 @@ export default {
     pathD: function() {
       return 'M ' + this.gridW + ' 0 L 0 0 0 ' + this.gridH
     },
+    middleGridPathD: function() {
+      return 'M ' + this.middleGridW + ' 0 L 0 0 0 ' + this.middleGridH
+    },
     smallGridPathD: function() {
       return 'M ' + this.smallGridW + ' 0 L 0 0 0 ' + this.smallGridH
     },
@@ -53,6 +65,12 @@ export default {
     gridH: function() {
       return this.matrixStyle.height * 2 * this.matrixBase
     },
+    middleGridW: function() {
+      return this.matrixStyle.width * this.matrixBase
+    },
+    middleGridH: function() {
+      return this.matrixStyle.height * this.matrixBase
+    },
     smallGridW: function() {
       return this.matrixStyle.width
     },

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

@@ -1011,12 +1011,12 @@ export default {
     }
   },
   watch: {
-    'canvasStyleData.aidedDesign.matrixBase': {
+    // 'canvasStyleData.aidedDesign.matrixBase': {
-      handler(newVal, oldVal) {
+    //   handler(newVal, oldVal) {
-        this.changeComponentSizePoint(newVal / oldVal)
+    //     this.changeComponentSizePoint(newVal / oldVal)
-      },
+    //   },
-      deep: true
+    //   deep: true
-    },
+    // },
     customStyle: {
       handler(newVal) {
         // 获取当前宽高（宽高改变后重新渲染画布）

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

@@ -317,7 +317,7 @@ const list = [
     },
     x: 1,
     y: 36,
-    sizex: 10,
+    sizex: 12,
     sizey: 6,
     auxiliaryMatrix: true,
     miniSizex: 1,
@@ -347,7 +347,7 @@ const list = [
     },
     x: 1,
     y: 1,
-    sizex: 10,
+    sizex: 12,
     sizey: 10,
     miniSizex: 1,
     miniSizey: 1

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

@@ -67,6 +67,15 @@ export function mobile2MainCanvas(mainSource, mobileSource) {
 }
 
 export function panelInit(componentData, componentStyle) {
+  // style初始化
+  componentStyle.refreshTime = (componentStyle.refreshTime || 5)
+  componentStyle.refreshViewLoading = (componentStyle.refreshViewLoading || false)
+  componentStyle.refreshUnit = (componentStyle.refreshUnit || 'minute')
+  componentStyle.aidedDesign = (componentStyle.aidedDesign || deepCopy(AIDED_DESIGN))
+  // // // 初始化密度为最高密度
+  // const matrixChange = 2 / componentStyle.aidedDesign.matrixBase
+  // componentStyle.aidedDesign.matrixBase = 2
+
   componentData.forEach((item, index) => {
     if (item.component && item.component === 'de-date') {
       if (item.options.attrs &&
@@ -96,12 +105,6 @@ export function panelInit(componentData, componentStyle) {
     }
     item.commonBackground = item.commonBackground || deepCopy(COMMON_BACKGROUND_NONE)
   })
-  // style初始化
-  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))
   store.commit('setCanvasStyle', componentStyle)
@@ -115,3 +118,15 @@ export function resetID(data) {
   }
   return data
 }
+
+export function matrixBaseChange(component) {
+  const matrixBase = store.state.canvasStyleData.aidedDesign.matrixBase
+  if (component) {
+    component.x = (component.x - 1) * matrixBase
+    component.y = (component.y - 1) * matrixBase
+    component.sizex = component.sizex * matrixBase
+    component.sizey = component.sizey * matrixBase
+  }
+  return component
+}
+

frontend/src/components/widget/DeWidget/DeTabs.vue

@@ -39,6 +39,10 @@
                 {{ $t('detabs.selectview') }}
               </el-dropdown-item>
 
+              <el-dropdown-item :command="beforeHandleCommond('selectOthers', item)">
+                添加其他组件
+              </el-dropdown-item>
+
               <el-dropdown-item v-if=" element.options.tabList.length > 1" :command="beforeHandleCommond('deleteCur', item)">
                 {{ $t('table.delete') }}
               </el-dropdown-item>

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

@@ -83,7 +83,7 @@ import componentList, { assistList, pictureList, otherList } from '@/components/
 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 { deepCopy, matrixBaseChange } from '@/components/canvas/utils/utils'
 import eventBus from '@/components/canvas/utils/eventBus'
 import { mapState } from 'vuex'
 
@@ -163,7 +163,7 @@ export default {
       let component
       componentList.forEach(componentTemp => {
         if (id === componentTemp.id) {
-          component = deepCopy(componentTemp)
+          component = matrixBaseChange(deepCopy(componentTemp))
         }
       })
       // 图片移入是 不支持矩阵 暂时无法监听窗口取消事件

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

@@ -11,13 +11,13 @@
             <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-form-item :label="'矩阵密度'" class="form-item form-item-slider">-->
-              <el-radio-group v-model="aidedDesign.matrixBase" size="mini">
+<!--              <el-radio-group v-model="aidedDesign.matrixBase" size="mini" @change="onChangePanelStyle">-->
-                <el-radio-button :label="1">普通</el-radio-button>
+<!--                <el-radio-button :label="1">普通</el-radio-button>-->
-                <el-radio-button :label="2">适中</el-radio-button>
+<!--                <el-radio-button :label="2">适中</el-radio-button>-->
-                <el-radio-button :label="4">密集</el-radio-button>
+<!--                <el-radio-button :label="4">密集</el-radio-button>-->
-              </el-radio-group>
+<!--              </el-radio-group>-->
-            </el-form-item>
+<!--            </el-form-item>-->
           </el-form>
         </el-col>
         <el-button slot="reference" size="mini" class="shape-item">辅助设计 <i

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

@@ -75,6 +75,7 @@ import { mapState } from 'vuex'
 import { queryPanelViewTree } from '@/api/panel/panel'
 import { deleteCircle } from '@/api/chart/chart'
 import { pluginTypes } from '@/api/chart/chart'
+import { matrixBaseChange } from '@/components/canvas/utils/utils'
 
 export default {
   name: 'ViewSelect',
@@ -201,7 +202,7 @@ export default {
       // 用户视图设置 复制一个模板
       componentList.forEach(componentTemp => {
         if (componentTemp.type === 'view') {
-          component = deepCopy(componentTemp)
+          component = matrixBaseChange(deepCopy(componentTemp))
         }
       })
       component.auxiliaryMatrix = this.canvasStyleData.auxiliaryMatrix

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

@@ -338,7 +338,7 @@ import ViewSelect from '../ViewSelect'
 import SubjectSetting from '../SubjectSetting'
 import bus from '@/utils/bus'
 import Editor from '@/components/canvas/components/Editor/index'
-import { deepCopy, panelInit } from '@/components/canvas/utils/utils'
+import { deepCopy, matrixBaseChange, panelInit } from '@/components/canvas/utils/utils'
 import componentList, {
   BASE_MOBILE_STYLE,
   COMMON_BACKGROUND,
@@ -992,7 +992,7 @@ export default {
       // 用户视图设置 复制一个模板
       componentList.forEach(componentTemp => {
         if (componentTemp.type === 'view') {
-          component = deepCopy(componentTemp)
+          component = matrixBaseChange(deepCopy(componentTemp))
           const propValue = {
             id: newComponentId,
             viewId: newViewInfo.id

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

@@ -30,7 +30,7 @@
 
 <script>
 import { ApplicationContext } from '@/utils/ApplicationContext'
-import { deepCopy } from '@/components/canvas/utils/utils'
+import { deepCopy, matrixBaseChange } from '@/components/canvas/utils/utils'
 import eventBus from '@/components/canvas/utils/eventBus'
 import { mapState } from 'vuex'
 export default {

frontend/src/views/panel/list/PanelList.vue

@@ -419,6 +419,7 @@ export default {
       this.editPanel.optType = param.optType
       this.editPanel.panelInfo.nodeType = param.type
       this.editPanel.visible = true
+      const temp = DEFAULT_COMMON_CANVAS_STYLE_STRING
       switch (param.optType) {
         case 'new':
           this.editPanel.titlePre = this.$t('commons.create')

frontend/src/views/panel/panel.js

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