Merge pull request #13284 from dataease/pr@dev-v2@refactor_grid

refactor(数据大屏): 大屏辅助网格与刻度尺保持缩放一致

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

@@ -7,7 +7,12 @@
         :height="smallGridH"
         patternUnits="userSpaceOnUse"
       >
-        <path :d="smallGridPathD" fill="none" stroke="rgba(207, 207, 207, 0.3)" stroke-width="1" />
+        <path
+          :d="smallGridPathD"
+          fill="none"
+          stroke="rgba(207, 207, 207, 0.3)"
+          stroke-width="0.8"
+        />
       </pattern>
       <pattern
         id="middleGrid"
@@ -16,16 +21,11 @@
         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"
-        />
+        <path :d="middleGridPathD" fill="none" stroke="rgba(207, 207, 207, 0.3)" stroke-width="1" />
       </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" />
+        <path :d="pathD" fill="none" stroke="rgba(207, 207, 207, 0.3)" stroke-width="1.2" />
       </pattern>
     </defs>
     <rect width="100%" height="100%" fill="url(#grid)" />

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

@@ -0,0 +1,71 @@
+<template>
+  <svg class="grid" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <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.2)" stroke-width="0.5" />
+      </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.2)"
+          stroke-width="0.3"
+        />
+      </pattern>
+    </defs>
+    <rect width="100%" height="100%" fill="url(#grid)" />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+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 gridW = computed(() => {
+  return props.matrixStyle.width * 5
+})
+
+const gridH = computed(() => {
+  return props.matrixStyle.height * 5
+})
+
+const middleGridPathD = computed(() => {
+  return 'M ' + middleGridW.value + ' 0 L 0 0 0 ' + middleGridH.value
+})
+
+const middleGridW = computed(() => {
+  return props.matrixStyle.width
+})
+
+const middleGridH = computed(() => {
+  return props.matrixStyle.height
+})
+</script>
+
+<style lang="less" scoped>
+.grid {
+  position: absolute;
+  top: -1px;
+  left: -1px;
+}
+</style>

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

@@ -46,6 +46,7 @@ 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'
+import DeGridScreen from '@/components/data-visualization/DeGridScreen.vue'
 
 const snapshotStore = snapshotStoreWithOut()
 const dvMainStore = dvMainStoreWithOut()
@@ -1422,7 +1423,19 @@ const contextMenuShow = computed(() => {
 const markLineShow = computed(() => isMainCanvas(canvasId.value))
 
 const showGrid = computed(() => {
-  return Boolean(canvasStyleData.value.dashboard.showGrid) && isMainCanvas(canvasId.value)
+  return (
+    Boolean(canvasStyleData.value.dashboard.showGrid) &&
+    isMainCanvas(canvasId.value) &&
+    isDashboard()
+  )
+})
+
+const showGridScreen = computed(() => {
+  return (
+    Boolean(canvasStyleData.value.dashboard.showGrid) &&
+    isMainCanvas(canvasId.value) &&
+    !isDashboard()
+  )
 })
 
 // 批量设置
@@ -1557,6 +1570,11 @@ defineExpose({
     ></PopArea>
     <!-- 网格线 -->
     <de-grid v-if="showGrid" :matrix-style="matrixStyle" :themes="themes"></de-grid>
+    <de-grid-screen
+      v-if="showGridScreen"
+      :matrix-style="matrixStyle"
+      :themes="themes"
+    ></de-grid-screen>
     <drag-shadow
       v-if="infoBox && infoBox.moveItem && editMode !== 'preview'"
       :base-height="baseHeight"

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

@@ -1,37 +0,0 @@
-<template>
-  <svg class="grid" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
-    <defs>
-      <pattern
-        id="smallGrid"
-        width="7.236328125"
-        height="7.236328125"
-        patternUnits="userSpaceOnUse"
-      >
-        <path
-          d="M 7.236328125 0 L 0 0 0 7.236328125"
-          fill="none"
-          stroke="rgba(207, 207, 207, 0.3)"
-          stroke-width="1"
-        ></path>
-      </pattern>
-      <pattern id="grid" width="36.181640625" height="36.181640625" patternUnits="userSpaceOnUse">
-        <rect width="36.181640625" height="36.181640625" fill="url(#smallGrid)"></rect>
-        <path
-          d="M 36.181640625 0 L 0 0 0 36.181640625"
-          fill="none"
-          stroke="rgba(186, 186, 186, 0.5)"
-          stroke-width="1"
-        ></path>
-      </pattern>
-    </defs>
-    <rect width="100%" height="100%" fill="url(#grid)"></rect>
-  </svg>
-</template>
-
-<style lang="less" scoped>
-.grid {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-</style>

core/core-frontend/src/custom-component/common/DeRuler.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 const dvMainStore = dvMainStoreWithOut()
@@ -20,6 +20,7 @@ const props = defineProps({
 })
 
 const labelInterval = 5
+const emits = defineEmits(['update:tickSize'])
 
 const { canvasStyleData, curComponent, componentData } = storeToRefs(dvMainStore)
 
@@ -105,6 +106,16 @@ const outerStyle = computed(() => {
 
 const curShadowShow = computed(() => curComponent.value && curComponent.value.category !== 'hidden')
 
+const tickSizeScale = computed(() => (tickSize.value * canvasStyleData.value.scale) / 100)
+
+watch(
+  () => tickSizeScale.value,
+  () => {
+    emits('update:tickSize', tickSizeScale.value)
+  },
+  { immediate: true }
+)
+
 defineExpose({
   rulerScroll
 })

core/core-frontend/src/views/data-visualization/index.vue

@@ -102,7 +102,9 @@ const state = reactive({
   canvasInitStatus: false,
   sourcePid: null,
   resourceId: null,
-  opt: null
+  opt: null,
+  baseWidth: 10,
+  baseHeight: 10
 })
 
 // 启用拖动
@@ -484,8 +486,13 @@ eventBus.on('handleNew', handleNew)
             <Icon name="dv-ruler"><dvRuler class="svg-icon" /></Icon>
           </el-icon>
         </div>
-        <de-ruler ref="deWRulerRef"></de-ruler>
-        <de-ruler direction="vertical" :size="mainHeight" ref="deHRulerRef"></de-ruler>
+        <de-ruler ref="deWRulerRef" @update:tickSize="val => (state.baseWidth = val)"></de-ruler>
+        <de-ruler
+          direction="vertical"
+          @update:tickSize="val => (state.baseHeight = val)"
+          :size="mainHeight"
+          ref="deHRulerRef"
+        ></de-ruler>
         <el-scrollbar
           ref="canvasOut"
           @scroll="scrollCanvas"
@@ -516,6 +523,8 @@ eventBus.on('handleNew', handleNew)
                 :canvas-style-data="canvasStyleData"
                 :canvas-view-info="canvasViewInfo"
                 :canvas-id="state.canvasId"
+                :base-height="state.baseHeight"
+                :base-width="state.baseWidth"
               >
                 <template v-slot:canvasDragTips>
                   <div class="canvas-drag-tip">按住空格可拖动画布</div>