Merge pull request #10446 from dataease/pr@dev-v2@feat_screen-rule2

feat(数据大屏): 数据大屏增加刻度尺指示功能,优化横向标尺定位

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

@@ -1,59 +1,87 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-
+import { computed, ref } from 'vue'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { storeToRefs } from 'pinia'
+const dvMainStore = dvMainStoreWithOut()
+const wRuleRef = ref(null)
 const props = defineProps({
-  width: {
-    type: Number,
-    required: true
-  },
-  tickSize: {
-    type: Number,
-    default: 10 // 刻度大小，可以根据需要调整
-  },
-  labelInterval: {
-    type: Number,
-    default: 5 // 长刻度线的间隔（多少个小刻度线之后）
-  },
   tickLabelFormatter: {
     type: Function,
     default: value => value.toString() // 刻度标签格式化函数，默认直接转为字符串
   }
 })
 
+const labelInterval = 5
+
+const { canvasStyleData } = storeToRefs(dvMainStore)
+
 const ticks = computed(() => {
   const result = []
   let currentValue = 0
-  while (currentValue <= props.width) {
-    const isLong = currentValue % (props.labelInterval * props.tickSize) === 0
+  while (currentValue <= canvasStyleData.value.width) {
+    const isLong = currentValue % (labelInterval * tickSize.value) === 0
     const label = isLong ? props.tickLabelFormatter(currentValue) : ''
-    result.push({ position: currentValue, label, isLong })
-    currentValue += props.tickSize
+    result.push({ position: (currentValue * canvasStyleData.value.scale) / 100, label, isLong })
+    currentValue += tickSize.value
   }
   return result
 })
+
+const wStyle = computed(() => {
+  return {
+    width: canvasStyleData.value.width * 1.5 + 'px'
+  }
+})
+const tickSize = computed(
+  () =>
+    10 *
+    Math.max(Math.floor(200000 / (canvasStyleData.value.width * canvasStyleData.value.scale)), 1)
+)
+
+const scaleWidth = computed(() => (canvasStyleData.value.width * canvasStyleData.value.scale) / 100)
+
+const rulerScroll = e => {
+  wRuleRef.value.scrollTo(e.scrollLeft, 0)
+}
+
+defineExpose({
+  rulerScroll
+})
 </script>
 
 <template>
-  <div class="ruler-outer">
-    <div class="ruler">
-      <div class="ruler-line" :style="{ width: `${width}px` }"></div>
-      <div
-        v-for="(tick, index) in ticks"
-        :key="index"
-        class="ruler-tick"
-        :class="{ 'long-tick': tick.isLong }"
-        :style="{ left: `${tick.position}px` }"
-      >
-        <span v-if="tick.isLong" class="tick-label">{{ tick.label }}</span>
+  <div class="ruler-outer" ref="wRuleRef">
+    <div :style="wStyle" class="ruler-outer-scroll">
+      <div class="ruler" :style="{ width: `${scaleWidth}px` }">
+        <div class="ruler-line" :style="{ width: `${scaleWidth}px` }"></div>
+        <div
+          v-for="(tick, index) in ticks"
+          :key="index"
+          class="ruler-tick"
+          :class="{ 'long-tick': tick.isLong }"
+          :style="{ left: `${tick.position}px` }"
+        >
+          <span v-if="tick.isLong" class="tick-label">{{ tick.label }}</span>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <style scoped lang="less">
+::-webkit-scrollbar {
+  width: 0px !important;
+  height: 0px !important;
+}
 .ruler-outer {
   width: 100%;
   overflow-x: auto;
+  background-color: #2c2c2c;
+}
+
+.ruler-outer-scroll {
+  display: flex;
+  justify-content: center;
 }
 .ruler {
   position: relative;

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

@@ -64,6 +64,7 @@ const snapshotStore = snapshotStoreWithOut()
 const contextmenuStore = contextmenuStoreWithOut()
 const composeStore = composeStoreWithOut()
 const canvasCacheOutRef = ref(null)
+const deWRulerRef = ref(null)
 
 const {
   fullscreenFlag,
@@ -357,6 +358,10 @@ const canvasPropertiesShow = computed(
 const viewsPropertiesShow = computed(
   () => !!(curComponent.value && ['UserView', 'VQuery'].includes(curComponent.value.component))
 )
+
+const scrollCanvas = e => {
+  deWRulerRef.value.rulerScroll(e)
+}
 eventBus.on('handleNew', handleNew)
 </script>
 
@@ -388,7 +393,13 @@ eventBus.on('handleNew', handleNew)
       </dv-sidebar>
       <!-- 中间画布 -->
       <main id="dv-main-center" class="center" ref="canvasCenterRef">
-        <el-scrollbar ref="canvasOut" class="content" :class="{ 'preview-content': previewStatus }">
+        <de-ruler ref="deWRulerRef"></de-ruler>
+        <el-scrollbar
+          ref="canvasOut"
+          @scroll="scrollCanvas"
+          class="content"
+          :class="{ 'preview-content': previewStatus }"
+        >
           <div
             id="canvas-dv-outer"
             ref="canvasInner"