Merge pull request #13272 from dataease/pr@dev-v2@feat_grid

feat(仪表板、数据大屏): 设计面板支持辅助网格线 #12591

core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue

@@ -200,6 +200,15 @@
         </span>
       </el-checkbox>
     </el-form-item>
+    <el-form-item class="form-item" :class="'form-item-' + themes">
+      <el-checkbox
+        :effect="themes"
+        size="small"
+        v-model="canvasStyleData.dashboard.showGrid"
+        @change="themeChange"
+        >显示辅助网格</el-checkbox
+      >
+    </el-form-item>
   </el-form>
 </template>
 

core/core-frontend/src/components/data-visualization/DeGrid.vue

@@ -0,0 +1,92 @@
+<template>
+  <svg class="grid" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <pattern
+        id="smallGrid"
+        :width="smallGridW"
+        :height="smallGridH"
+        patternUnits="userSpaceOnUse"
+      >
+        <path :d="smallGridPathD" fill="none" stroke="rgba(207, 207, 207, 0.3)" 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.3)"
+          stroke-width="1.5"
+        />
+      </pattern>
+      <pattern id="grid" :width="gridW" :height="gridH" patternUnits="userSpaceOnUse">
+        <rect :width="gridW" :height="gridH" fill="url(#middleGrid)" />
+        <path :d="pathD" fill="none" stroke="rgba(207, 207, 207, 0.7)" stroke-width="2.5" />
+      </pattern>
+    </defs>
+    <rect width="100%" height="100%" fill="url(#grid)" />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+const matrixBase = 2
+
+const props = defineProps({
+  matrixStyle: {
+    type: Object
+  },
+  themes: {
+    type: String,
+    default: 'dark'
+  }
+})
+
+const pathD = computed(() => {
+  return 'M ' + gridW.value + ' 0 L 0 0 0 ' + gridH.value
+})
+
+const middleGridPathD = computed(() => {
+  return 'M ' + middleGridW.value + ' 0 L 0 0 0 ' + middleGridH.value
+})
+
+const smallGridPathD = computed(() => {
+  return 'M ' + smallGridW.value + ' 0 L 0 0 0 ' + smallGridH.value
+})
+
+const gridW = computed(() => {
+  return props.matrixStyle.width * 2 * matrixBase
+})
+
+const gridH = computed(() => {
+  return props.matrixStyle.height * 2 * matrixBase
+})
+
+const middleGridW = computed(() => {
+  return props.matrixStyle.width * matrixBase
+})
+
+const middleGridH = computed(() => {
+  return props.matrixStyle.height * matrixBase
+})
+
+const smallGridW = computed(() => {
+  return props.matrixStyle.width
+})
+
+const smallGridH = computed(() => {
+  return props.matrixStyle.height
+})
+</script>
+
+<style lang="less" scoped>
+.grid {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+</style>

core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue

@@ -45,6 +45,7 @@ import DragInfo from '@/components/visualization/common/DragInfo.vue'
 import { activeWatermarkCheckUser } from '@/components/watermark/watermark'
 import PopArea from '@/custom-component/pop-area/Component.vue'
 import DatasetParamsComponent from '@/components/visualization/DatasetParamsComponent.vue'
+import DeGrid from '@/components/data-visualization/DeGrid.vue'
 
 const snapshotStore = snapshotStoreWithOut()
 const dvMainStore = dvMainStoreWithOut()
@@ -56,6 +57,10 @@ const { curComponent, dvInfo, editMode, tabMoveOutComponentId, canvasState } =
 const { editorMap, areaData } = storeToRefs(composeStore)
 const emits = defineEmits(['scrollCanvasToTop'])
 const props = defineProps({
+  themes: {
+    type: String,
+    default: 'dark'
+  },
   isEdit: {
     type: Boolean,
     default: true
@@ -168,7 +173,6 @@ const props = defineProps({
     default: true
   }
 })
-const userInfo = ref(null)
 
 const {
   baseWidth,
@@ -187,7 +191,8 @@ const {
   canvasId,
   canvasStyleData,
   componentData,
-  canvasViewInfo
+  canvasViewInfo,
+  themes
 } = toRefs(props)
 
 const editorX = ref(0)
@@ -275,6 +280,13 @@ const initWatermark = (waterDomId = 'editor-canvas-main') => {
   }
 }
 
+const matrixStyle = computed(() => {
+  return {
+    width: baseWidth.value,
+    height: baseHeight.value
+  }
+})
+
 const dragInfoShow = computed(() => {
   return (
     dvInfo.value.type === 'dashboard' &&
@@ -1409,6 +1421,10 @@ const contextMenuShow = computed(() => {
 
 const markLineShow = computed(() => isMainCanvas(canvasId.value))
 
+const showGrid = computed(() => {
+  return Boolean(canvasStyleData.value.dashboard.showGrid) && isMainCanvas(canvasId.value)
+})
+
 // 批量设置
 
 const dataVBatchOptAdaptor = () => {
@@ -1540,6 +1556,7 @@ defineExpose({
       :show-position="'popEdit'"
     ></PopArea>
     <!-- 网格线 -->
+    <de-grid v-if="showGrid" :matrix-style="matrixStyle" :themes="themes"></de-grid>
     <drag-shadow
       v-if="infoBox && infoBox.moveItem && editMode !== 'preview'"
       :base-height="baseHeight"

core/core-frontend/src/components/visualization/CanvasBaseSetting.vue

@@ -6,7 +6,7 @@
           size="small"
           :effect="themes"
           v-model="canvasStyleData.popupButtonAvailable"
-          @change="onPopButtonChange"
+          @change="onThemeChange"
         >
           <div style="display: flex; line-height: 14px">
             <span style="margin-right: 4px">显示弹窗区查询按钮</span>
@@ -27,7 +27,7 @@
           size="small"
           :effect="themes"
           v-model="canvasStyleData.suspensionButtonAvailable"
-          @change="onPopButtonChange"
+          @change="onThemeChange"
         >
           <div style="display: flex; line-height: 14px">
             <span style="margin-right: 4px">显示放大、导出等悬浮按钮</span>
@@ -42,6 +42,16 @@
           </div>
         </el-checkbox>
       </el-form-item>
+
+      <el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
+        <el-checkbox
+          :effect="themes"
+          size="small"
+          v-model="canvasStyleData.dashboard.showGrid"
+          @change="onThemeChange"
+          >显示辅助网格</el-checkbox
+        >
+      </el-form-item>
     </el-form>
   </div>
 </template>
@@ -51,14 +61,14 @@ import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
-import { ElIcon } from 'element-plus-secondary'
+import { ElFormItem, ElIcon } from 'element-plus-secondary'
 import Icon from '../icon-custom/src/Icon.vue'
 const snapshotStore = snapshotStoreWithOut()
 
 const dvMainStore = dvMainStoreWithOut()
 const { canvasStyleData } = storeToRefs(dvMainStore)
 
-const onPopButtonChange = () => {
+const onThemeChange = () => {
   snapshotStore.recordSnapshotCache()
 }
 

core/core-frontend/src/utils/canvasUtils.ts

@@ -227,6 +227,8 @@ export function historyAdaptor(
   canvasVersion
 ) {
   //历史字段适配
+  canvasStyleResult.dashboard['showGrid'] = canvasStyleResult.dashboard['showGrid'] || false
+  canvasStyleResult.dashboard['matrixBase'] = canvasStyleResult.dashboard['matrixBase'] || 4
   canvasStyleResult.component['seniorStyleSetting'] =
     canvasStyleResult.component['seniorStyleSetting'] || deepCopy(SENIOR_STYLE_SETTING_LIGHT)
   canvasStyleResult['suspensionButtonAvailable'] =

core/core-frontend/src/views/chart/components/editor/util/dataVisualization.ts

@@ -61,6 +61,8 @@ export const MOBILE_SETTING_DARK = {
 export const DEFAULT_DASHBOARD_STYLE_BASE = {
   gap: 'yes',
   gapSize: 5,
+  showGrid: false,
+  matrixBase: 4, // 当前matrix的基数 （是pcMatrixCount的几倍）
   resultMode: 'all', // 图表结果显示模式 all 图表 custom 仪表板自定义
   resultCount: 1000 // 图表结果显示条数
 }