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.
40 lines
1.5 KiB
40 lines
1.5 KiB
<template>
|
|
<div class="w-[340px] py-4">
|
|
<div>
|
|
<div class="text-sm font-medium text-text px-6">溶液容器状态</div>
|
|
<div class="flex flex-wrap px-6 py-3 gap-x-8 gap-y-4">
|
|
<div
|
|
v-for="container in settingStore.heatContainerWithLiquid"
|
|
:key="container.id"
|
|
class="flex flex-col items-center justify-center">
|
|
<div class="bg-[url(@/assets/container.svg)] bg-cover relative w-[42px] h-[58px]">
|
|
<div class="absolute top-[8px] bottom-0 w-full rounded overflow-hidden">
|
|
<div
|
|
class="absolute left-0 w-full bottom-0 bg-[#26D574]"
|
|
:style="`height:${
|
|
((container.capacityTotal - container.capacityUsed) / container.capacityTotal) * 100
|
|
}%; background: ${
|
|
container.capacityTotal - container.capacityUsed <
|
|
(settingStore.liquidWarningSetting ? +settingStore.liquidWarningSetting.value : 0)
|
|
? '#EE8223'
|
|
: '#26D574'
|
|
}`"></div>
|
|
<span
|
|
class="absolute text-xs left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 font-medium text-white"
|
|
>{{
|
|
`${Math.round(((container.capacityTotal - container.capacityUsed) / container.capacityTotal) * 100)}%`
|
|
}}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="text-xs text-[#666] mt-2">{{ container.solution.name }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { useSettingStore } from "@/stores/setting";
|
|
|
|
const settingStore = useSettingStore();
|
|
</script>
|