You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
2.9 KiB
106 lines
2.9 KiB
<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>
|