Merge pull request #10437 from dataease/pr@dev-v2@feat_screen-rule

feat(数据大屏): 数据大屏增加刻度尺指示功能

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

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+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 ticks = computed(() => {
+  const result = []
+  let currentValue = 0
+  while (currentValue <= props.width) {
+    const isLong = currentValue % (props.labelInterval * props.tickSize) === 0
+    const label = isLong ? props.tickLabelFormatter(currentValue) : ''
+    result.push({ position: currentValue, label, isLong })
+    currentValue += props.tickSize
+  }
+  return result
+})
+</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>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.ruler-outer {
+  width: 100%;
+  overflow-x: auto;
+}
+.ruler {
+  position: relative;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  background-color: #2c2c2c;
+}
+
+.ruler-line {
+  position: absolute;
+  bottom: 0;
+  height: 1px;
+  background-color: #ac2a2a;
+}
+
+.ruler-tick {
+  position: absolute;
+  bottom: 1px;
+  height: 3px;
+  width: 1px;
+  background-color: #e38a8a;
+}
+
+.long-tick {
+  width: 1px;
+  height: 15px;
+}
+
+.tick-label {
+  position: absolute;
+  bottom: 2px;
+  font-size: 8px;
+  left: 50%;
+  transform: translateX(2%);
+  white-space: nowrap;
+}
+</style>

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

@@ -39,6 +39,7 @@ import { Base64 } from 'js-base64'
 import CanvasCacheDialog from '@/components/visualization/CanvasCacheDialog.vue'
 import { deepCopy } from '@/utils/utils'
 import DvPreview from '@/views/data-visualization/DvPreview.vue'
+import DeRuler from '@/custom-component/common/DeRuler.vue'
 const interactiveStore = interactiveStoreWithOut()
 const embeddedStore = useEmbedded()
 const { wsCache } = useCache()
@@ -100,9 +101,6 @@ const contentStyle = computed(() => {
     }
   } else {
     return {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
       width: width * 1.5 + 'px',
       height: height * 1.5 + 'px'
     }
@@ -400,15 +398,17 @@ eventBus.on('handleNew', handleNew)
             @mousedown="handleMouseDown"
             @mouseup="deselectCurComponent"
           >
-            <canvas-core
-              class="canvas-area-shadow editor-main"
-              v-if="state.canvasInitStatus"
-              ref="mainCanvasCoreRef"
-              :component-data="componentData"
-              :canvas-style-data="canvasStyleData"
-              :canvas-view-info="canvasViewInfo"
-              :canvas-id="state.canvasId"
-            ></canvas-core>
+            <div class="canvas-dv-inner">
+              <canvas-core
+                class="canvas-area-shadow editor-main"
+                v-if="state.canvasInitStatus"
+                ref="mainCanvasCoreRef"
+                :component-data="componentData"
+                :canvas-style-data="canvasStyleData"
+                :canvas-view-info="canvasViewInfo"
+                :canvas-id="state.canvasId"
+              ></canvas-core>
+            </div>
           </div>
         </el-scrollbar>
         <ComponentToolBar :class="{ 'preview-aside-x': previewStatus }"></ComponentToolBar>
@@ -535,4 +535,12 @@ eventBus.on('handleNew', handleNew)
   height: 1px;
   background: #000;
 }
+
+.canvas-dv-inner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>