优化加液刻度

src/components/liquid/LiquidLevel.vue

@@ -8,6 +8,8 @@ import { computed, onMounted, ref, watchEffect } from 'vue'
 import { useLiquidStore } from '@/stores/liquidStore'
 
 const elementHeight = ref(200)
+const liquidContailRef = ref<HTMLElement | null>(null)
+const rulerHeight = ref(0)
 
 onMounted(() => {
   const element = document.querySelector('.liquid-level-img')
@@ -15,6 +17,10 @@ onMounted(() => {
     elementHeight.value = element.clientHeight
     console.log('元素高度:', elementHeight.value)
   }
+  if (liquidContailRef.value) {
+    console.log('liquidContailRef=offsetHeight==', liquidContailRef.value.offsetHeight)
+    rulerHeight.value = liquidContailRef.value.offsetHeight + 5
+  }
 })
 const liquidStore = useLiquidStore()
 const liquidStateData = ref(liquidStore.liquidStateData)
@@ -37,10 +43,10 @@ const liquidHeight = computed(() => {
 
 <template>
   <div class="liquid-level-main">
-    <ScaleRuler :max-scale="liquidTotal" />
-    <div class="liquid-level-contailner">
+    <ScaleRuler :max-scale="liquidTotal" :rulerHeight="rulerHeight" :key="rulerHeight"/>
+    <div class="liquid-level-container">
       <div class="liquid-level" :style="{ height: `${liquidHeight}%` }" />
-      <img :src="liquidLevelSvg" alt="液位图" class="liquid-level-img-r">
+      <img ref="liquidContailRef" :src="liquidLevelSvg" alt="液位图" class="liquid-level-img-r">
       <!-- <div class="liquid-level-middle" :style="{ height: `${liquidHeight}px` }" /> -->
       <div class="liquid-level" :style="{ height: `${liquidHeight}%` }" />
       <div class="current-level">
@@ -57,7 +63,7 @@ const liquidHeight = computed(() => {
   display: flex;
   gap: 5px;
 }
-.liquid-level-contailner{
+.liquid-level-container{
   position: relative;
   height: 60vh;; /* 根据实际调整 */
 }
@@ -66,7 +72,7 @@ const liquidHeight = computed(() => {
   margin-top: -1.5vh;
 }
 .liquid-level-img-r {
-  height: 60vh;
+  height: 31rem;
 }
 .liquid-level {
   position: absolute;

src/components/liquid/ScaleRuler.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 // 接收外部传入的最大刻度值参数，比如 3000、5000 等
 const props = defineProps<{
@@ -7,21 +7,29 @@ const props = defineProps<{
     type: number
     default: 2500
   } // 最大刻度，如 3000、5000
+  rulerHeight: {
+    type: number
+    default: 0
+  }
 }>()
 
 // 基础配置，可根据需求调整
 const baseInterval = 200 // 大刻度间隔（显示文字的刻度间隔）
 const smallInterval = 20 // 小刻度间隔
-const totalHeight = 430 // 刻度标尺总高度（px），可按需调整
+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
     // 根据刻度值计算在总高度上的位置，这里简单做线性映射，可根据实际需求调整映射逻辑
-    const startY = (value / Number(props.maxScale)) * totalHeight
+    const startY = (value / Number(props.maxScale)) * totalHeight.value
     marks.push({ value, startY, showText })
   }
   return marks
@@ -41,7 +49,7 @@ const rulerWidth = (mark) => {
 </script>
 
 <template>
-  <div class="scale-ruler-container" :style="{ height: `${totalHeight}px` }">
+  <div class="scale-ruler-container" :style="{ height: `31rem` }">
     <div
       v-for="(mark, index) in renderedMarks"
       :key="index"
@@ -55,9 +63,9 @@ const rulerWidth = (mark) => {
       <div
         v-if="mark.showText"
         class="mark-text"
-        :style="{ transform: `translateX(-50%) translateY(-100%)` }"
+        :style="{ transform: 'translateX(-120%) translateY(-100%)' }"
       >
-        <div style="margin-left: -2.5rem">{{ mark.value }}g</div>
+        <div>{{ mark.value }}g</div>
       </div>
     </div>
   </div>