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

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

 <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/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

+<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 = {