disinfector_vue/src/components/liquid/LiquidLevel.vue

<script lang="ts" setup>
import liquidLevelSvg from 'assets/images/liquid/liquid-container.svg'
import ScaleRuler from 'components/liquid/ScaleRuler.vue'
// import liquidScaleSvg from 'assets/images/liquid/liquid-scale.svg'
import { roundNumber } from 'libs/utils'
import { computed, onMounted, ref, watchEffect } from 'vue'

import { useLiquidStore } from '@/stores/liquidStore'

const elementHeight = ref(200)
const liquidContainelRef = ref<HTMLElement | null>(null)
const rulerHeight = ref(0)

onMounted(() => {
  const element = document.querySelector('.liquid-level-img')
  if (element) {
    elementHeight.value = element.clientHeight
    console.log('元素高度:', elementHeight.value)
  }
  if (liquidContainelRef.value) {
    rulerHeight.value = liquidContainelRef.value.offsetHeight
  }
})

const liquidStore = useLiquidStore()
const liquidStateData = ref(liquidStore.liquidStateData)
const liquidTotal = ref(liquidStore.liquidTotal)

watchEffect(() => {
  liquidTotal.value = liquidStore.liquidTotal
  liquidStateData.value = liquidStore.liquidStateData
})

const nowLiquid = computed(() => {
  return roundNumber(liquidStateData.value.nowLiquid, 0)
})

// 计算液位高度（根据比例计算，假设图片高度固定为200px，可根据实际调整）
const liquidHeight = computed(() => {
  return ((Number(nowLiquid.value) / Number(liquidTotal.value)) * 100).toFixed(2)
})
</script>

<template>
  <div class="liquid-level-main">
    <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">
        <span>当前液位</span>
        <span class="text">{{ nowLiquid }}</span>
        <span class="text">g</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.liquid-level-main {
  display: flex;
  gap: 5px;
}
.liquid-level-container{
  position: relative;
  height: 60vh;; /* 根据实际调整 */
}
.liquid-level-img-l {
  height: 62.5vh;
  margin-top: -1.5vh;
}
.liquid-level-img-r {
  height: 60vh;
}
.liquid-level {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, #0099ff, #7fc8fa); /* 颜色渐变，可按需调整 */
  min-height: .8rem;
  border-radius: 0 0 20px 20px;
}
.liquid-level-middle{
    background: linear-gradient(352deg, #0093f5, #effafe);
    bottom: 0;
    left: 0;
    position: absolute;
    width: 50%;
    z-index: 1;
    margin-left: 23%
}
.current-level {
  position: absolute;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.3rem;
  font-weight: bold;
  .text{
    color: #007bff;
    padding: 3px;
  }
}
</style>