From 654a1a093deb9066d0428e94b2c27508a3e99026 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 13 Nov 2024 14:51:04 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):?=
 =?UTF-8?q?=20=E5=A4=A7=E5=B1=8F=E8=BE=85=E5=8A=A9=E7=BD=91=E6=A0=BC?=
 =?UTF-8?q?=E4=B8=8E=E5=88=BB=E5=BA=A6=E5=B0=BA=E4=BF=9D=E6=8C=81=E7=BC=A9?=
 =?UTF-8?q?=E6=94=BE=E4=B8=80=E8=87=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/data-visualization/DeGrid.vue  | 16 ++---
 .../data-visualization/DeGridScreen.vue       | 71 +++++++++++++++++++
 .../data-visualization/canvas/CanvasCore.vue  | 20 +++++-
 .../data-visualization/canvas/Grid.vue        | 37 ----------
 .../src/custom-component/common/DeRuler.vue   | 13 +++-
 .../src/views/data-visualization/index.vue    | 15 +++-
 6 files changed, 122 insertions(+), 50 deletions(-)
 create mode 100644 core/core-frontend/src/components/data-visualization/DeGridScreen.vue
 delete mode 100644 core/core-frontend/src/components/data-visualization/canvas/Grid.vue

diff --git a/core/core-frontend/src/components/data-visualization/DeGrid.vue b/core/core-frontend/src/components/data-visualization/DeGrid.vue
index b4673faddc..4c108e7d5e 100644
--- a/core/core-frontend/src/components/data-visualization/DeGrid.vue
+++ b/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)" />
diff --git a/core/core-frontend/src/components/data-visualization/DeGridScreen.vue b/core/core-frontend/src/components/data-visualization/DeGridScreen.vue
new file mode 100644
index 0000000000..286489da37
--- /dev/null
+++ b/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>
diff --git a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
index fe1e1ad056..063dd6c8d8 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
+++ b/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"
diff --git a/core/core-frontend/src/components/data-visualization/canvas/Grid.vue b/core/core-frontend/src/components/data-visualization/canvas/Grid.vue
deleted file mode 100644
index db48e15daf..0000000000
--- a/core/core-frontend/src/components/data-visualization/canvas/Grid.vue
+++ /dev/null
@@ -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>
diff --git a/core/core-frontend/src/custom-component/common/DeRuler.vue b/core/core-frontend/src/custom-component/common/DeRuler.vue
index 0022151e0f..6b1b074854 100644
--- a/core/core-frontend/src/custom-component/common/DeRuler.vue
+++ b/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
 })
diff --git a/core/core-frontend/src/views/data-visualization/index.vue b/core/core-frontend/src/views/data-visualization/index.vue
index 92362af0f5..636d39b8fe 100644
--- a/core/core-frontend/src/views/data-visualization/index.vue
+++ b/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>