disinfector_vue/src/components/liquid/ScaleRuler.vue

<script lang="ts" setup>
import { computed, ref, watch } from 'vue'

// 接收外部传入的最大刻度值参数，比如 3000、5000 等
// const props = defineProps({
//   maxScale: {
//     type: number
//     default: 2500
//   },
//   rulerHeight: {
//     type: number
//     default: 0
//   }
// })

const props = defineProps({
  maxScale: {
    type: Number,
    default: 2500,
  },
  rulerHeight: {
    type: Number,
    default: 0,
  },
})

// 基础配置，可根据需求调整
const baseInterval = 300 // 大刻度间隔（显示文字的刻度间隔）
const smallInterval = 20 // 小刻度间隔
const totalHeight = ref(props.rulerHeight) // 刻度标尺总高度（px）
const markHeight = 2 // 刻度线高度（px）

watch(props.rulerHeight, (newVal) => {
  totalHeight.value = newVal
})

// 计算要渲染的刻度数据
const renderedMarks = computed(() => {
  const marks: Liquid.Marks[] = []
  for (let value = 0; value <= Number(props.maxScale); value += smallInterval) {
    const showText = value % baseInterval === 0 || value % Number(props.maxScale) === 0
    const startY = (value / Number(props.maxScale)) * totalHeight.value
    marks.push({ value, startY, showText })
  }
  return marks
})

const rulerWidth = (mark) => {
  console.log('mark--', mark)
  if (mark.value % 100 === 0) {
    return 80
  }

  if (mark.value % 5 === 0) {
    return 40
  }
  return 20
}
</script>

<template>
  <div class="scale-ruler-container" :style="{ height: `${totalHeight}px` }">
    <div
      v-for="(mark, index) in renderedMarks"
      :key="index"
      class="scale-mark"
      :style="{
        height: `${markHeight}px`,
        top: `${totalHeight - mark.startY}` + 'px',
        width: `${rulerWidth(mark)}%`,
      }"
    >
      <div v-if="mark.showText" class="mark-text" :style="{ transform: 'translateX(-120%) translateY(-50%)' }">
        <div>{{ mark.value }}g</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.scale-ruler-container {
  position: relative;
  width: 40px; /* 刻度容器宽度，可按需调整 */
  border-left: 1px solid #000; /* 刻度标尺边框 */
  margin-left: 20px; /* 给文字留出显示空间，可按需调整 */
}

.scale-mark {
  position: absolute;
  background-color: #000;
}

.mark-text {
  position: absolute;
  font-size: 12px;
  white-space: nowrap;
}
</style>