优化刻度高度自适应

src/components/liquid/LiquidLevel.vue

@@ -8,7 +8,7 @@ import { computed, onMounted, ref, watchEffect } from 'vue'
 import { useLiquidStore } from '@/stores/liquidStore'
 
 const elementHeight = ref(200)
-const liquidContailRef = ref<HTMLElement | null>(null)
+const liquidContainelRef = ref<HTMLElement | null>(null)
 const rulerHeight = ref(0)
 
 onMounted(() => {
@@ -17,11 +17,11 @@ 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
+  if (liquidContainelRef.value) {
+    rulerHeight.value = liquidContainelRef.value.offsetHeight
   }
 })
+
 const liquidStore = useLiquidStore()
 const liquidStateData = ref(liquidStore.liquidStateData)
 const liquidTotal = ref(liquidStore.liquidTotal)
@@ -43,10 +43,9 @@ const liquidHeight = computed(() => {
 
 <template>
   <div class="liquid-level-main">
-    <ScaleRuler :max-scale="liquidTotal" :rulerHeight="rulerHeight" :key="rulerHeight"/>
-    <div class="liquid-level-container">
-      <div class="liquid-level" :style="{ height: `${liquidHeight}%` }" />
-      <img ref="liquidContailRef" :src="liquidLevelSvg" alt="液位图" class="liquid-level-img-r">
+    <ScaleRuler :key="rulerHeight" :max-scale="liquidTotal" :ruler-height="rulerHeight" />
+    <div ref="liquidContainelRef" class="liquid-level-container">
+      <img :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">
@@ -72,7 +71,7 @@ const liquidHeight = computed(() => {
   margin-top: -1.5vh;
 }
 .liquid-level-img-r {
-  height: 31rem;
+  height: 60vh;
 }
 .liquid-level {
   position: absolute;

src/components/liquid/ScaleRuler.vue

@@ -14,7 +14,7 @@ const props = defineProps<{
 }>()
 
 // 基础配置，可根据需求调整
-const baseInterval = 200 // 大刻度间隔（显示文字的刻度间隔）
+const baseInterval = 300 // 大刻度间隔（显示文字的刻度间隔）
 const smallInterval = 20 // 小刻度间隔
 const totalHeight = ref(props.rulerHeight) // 刻度标尺总高度（px）
 const markHeight = 2 // 刻度线高度（px）
@@ -27,8 +27,7 @@ watch(props.rulerHeight, (newVal) => {
 const renderedMarks = computed(() => {
   const marks: Liquid.Marks[] = []
   for (let value = 0; value <= Number(props.maxScale); value += smallInterval) {
-    const showText = value % baseInterval === 0
-    // 根据刻度值计算在总高度上的位置，这里简单做线性映射，可根据实际需求调整映射逻辑
+    const showText = value % baseInterval === 0 || value % Number(props.maxScale) === 0
     const startY = (value / Number(props.maxScale)) * totalHeight.value
     marks.push({ value, startY, showText })
   }
@@ -49,7 +48,7 @@ const rulerWidth = (mark) => {
 </script>
 
 <template>
-  <div class="scale-ruler-container" :style="{ height: `31rem` }">
+  <div class="scale-ruler-container" :style="{ height: `${totalHeight}px` }">
     <div
       v-for="(mark, index) in renderedMarks"
       :key="index"
@@ -63,7 +62,7 @@ const rulerWidth = (mark) => {
       <div
         v-if="mark.showText"
         class="mark-text"
-        :style="{ transform: 'translateX(-120%) translateY(-100%)' }"
+        :style="{ transform: 'translateX(-120%) translateY(-50%)' }"
       >
         <div>{{ mark.value }}g</div>
       </div>

src/stores/deviceStore.ts

@@ -40,7 +40,6 @@ export const useDeviceStore = defineStore('device', () => {
 
   const updateDeviceInfo = (info: Device.DeviceInfo) => {
     deviceInfo.value = info
-    console.log('info.projectType--', info.projectType)
     if (info.projectType === 'DT600B') {
       isLowCost.value = true
     }