From e3618983c7483138ca1ed16db667dcfcea329a40 Mon Sep 17 00:00:00 2001
From: zhangjiming <zhangjiming@costrip.cn>
Date: Thu, 27 Feb 2025 14:45:31 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=AE=B9=E5=99=A8=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=EF=BC=88=E7=93=B6=E5=98=B4=E4=BB=A5=E4=B8=8B=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/addLiquid/addLiquid.vue | 68 +++++++++------------------------------
 src/views/components/Liquid.vue   | 38 +++++++++++-----------
 2 files changed, 36 insertions(+), 70 deletions(-)

diff --git a/src/views/addLiquid/addLiquid.vue b/src/views/addLiquid/addLiquid.vue
index 0f1b9a5..1407b8d 100644
--- a/src/views/addLiquid/addLiquid.vue
+++ b/src/views/addLiquid/addLiquid.vue
@@ -22,58 +22,22 @@
 					</el-select>
 				</div>
 				<div class="flex-auto flex flex-col items-center justify-center gap-[.625rem]">
-					<!-- <div
-						class="bg-[url(@/assets/container.svg)] bg-cover relative w-[5rem] h-[7.125rem] rounded-lg 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 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 font-medium text-white">{{
-							container.capacityTotal - container.capacityUsed
-						}}</span>
-					</div> -->
-					<div class="relative self-center">
-						<svg
-						:key="container.id"
-							xmlns="http://www.w3.org/2000/svg"
-							xmlns:xlink="http://www.w3.org/1999/xlink"
-							version="1.1"
-							fill="none"
-							width="59"
-							height="82.99996948242188"
-							viewBox="0 0 59 82.99996948242188">
-							<defs>
-								<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
-									<stop
-										:offset="`${(container.capacityUsed / container.capacityTotal) * 100}%`"
-										style="stop-color: #ccc; stop-opacity: 1" />
-										<stop
-										:offset="`${(container.capacityUsed / container.capacityTotal) * 100}%`"
-										style="stop-color: #26D574; stop-opacity: 1" />
-									<stop
-										offset="100%"
-										:style="`stop-color: ${
-											container.capacityTotal - container.capacityUsed <
-											(settingStore.liquidWarningSetting ? +settingStore.liquidWarningSetting.value : 0)
-												? '#EE8223'
-												: '#26D574'
-										}; stop-opacity: 1`" />
-								</linearGradient>
-							</defs>
-							<g>
-								<path
-									d="M0,19.6804L0,23.3883C0,23.7034,0.253993,23.9588,0.567308,23.9588C0.880623,23.9588,1.13462,24.2142,1.13462,24.5292L1.13462,26.811C1.13462,27.126,0.880623,27.3814,0.567308,27.3814C0.253993,27.3814,0,27.6368,0,27.9519L0,33.0859C0,33.4009,0.253993,33.6563,0.567308,33.6563C0.880623,33.6563,1.13462,33.9117,1.13462,34.2268L1.13462,36.5086C1.13462,36.8236,0.880623,37.079,0.567308,37.079C0.253993,37.079,0,37.3344,0,37.6495L0,44.4948C0,44.8099,0.253993,45.0653,0.567308,45.0653C0.880623,45.0653,1.13462,45.3207,1.13462,45.6357L1.13462,47.9175C1.13462,48.2326,0.880623,48.488,0.567308,48.488C0.253993,48.488,0,48.7434,0,49.0584L0,55.9038C0,56.2188,0.253993,56.4742,0.567308,56.4742C0.880623,56.4742,1.13462,56.7296,1.13462,57.0446L1.13462,59.3264C1.13462,59.6415,0.880623,59.8969,0.567308,59.8969C0.253993,59.8969,0,60.1523,0,60.4673L0,66.7422C0,67.0573,0.253993,67.3127,0.567308,67.3127C0.880623,67.3127,1.13462,67.5681,1.13462,67.8831L1.13462,70.4501C1.13462,70.7652,0.880623,71.0206,0.567308,71.0206C0.253993,71.0206,0,71.276,0,71.591L0,75.0137C0,79.4244,3.55589,83,7.94231,83L51.0577,83C55.4441,83,59,79.4244,59,75.0137L59,71.591C59,71.276,58.746,71.0206,58.4327,71.0206C58.1194,71.0206,57.8654,70.7652,57.8654,70.4501L57.8654,67.8831C57.8654,67.5681,58.1194,67.3127,58.4327,67.3127C58.746,67.3127,59,67.0573,59,66.7422L59,60.4673C59,60.1523,58.746,59.8969,58.4327,59.8969C58.1194,59.8969,57.8654,59.6415,57.8654,59.3264L57.8654,57.0446C57.8654,56.7296,58.1194,56.4742,58.4327,56.4742C58.746,56.4742,59,56.2188,59,55.9038L59,49.0584C59,48.7434,58.746,48.488,58.4327,48.488C58.1194,48.488,57.8654,48.2326,57.8654,47.9175L57.8654,45.6357C57.8654,45.3207,58.1194,45.0653,58.4327,45.0653C58.746,45.0653,59,44.8099,59,44.4948L59,37.6495C59,37.3344,58.746,37.079,58.4327,37.079C58.1194,37.079,57.8654,36.8236,57.8654,36.5086L57.8654,34.2268C57.8654,33.9117,58.1194,33.6563,58.4327,33.6563C58.746,33.6563,59,33.4009,59,33.0859L59,27.9519C59,27.6368,58.746,27.3814,58.4327,27.3814C58.1194,27.3814,57.8654,27.126,57.8654,26.811L57.8654,24.5292C57.8654,24.2142,58.1194,23.9588,58.4327,23.9588C58.746,23.9588,59,23.7034,59,23.3883L59,19.6804C59,15.2697,55.4441,11.6942,51.0577,11.6942L49.0186,11.6942C48.2009,11.6942,47.7915,10.7001,48.3696,10.1188C50.0908,8.38809,51.0577,6.04079,51.0577,3.59325L51.0577,1.71134C51.0577,0.766193,50.2957,0,49.3558,0L9.64423,0C8.70429,0,7.94231,0.766193,7.94231,1.71134L7.94231,3.59325C7.94231,6.04079,8.90924,8.38809,10.6304,10.1188C11.2086,10.7001,10.7991,11.6942,9.98143,11.6942L7.94231,11.6942C3.55589,11.6942,0,15.2697,0,19.6804Z"
-									fill="url(#grad1)"
-									fill-opacity="1" />
-							</g>
-						</svg>
-						<p class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-white">XX</p>
+					<div class="bg-[url(@/assets/container.svg)] bg-cover relative w-[5rem] h-[7.125rem]">
+						<div class="absolute top-[1rem] bottom-0 w-full rounded-lg 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 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 font-medium text-white">{{
+								container.capacityTotal - container.capacityUsed
+							}}</span>
+						</div>
 					</div>
 					<div class="h-6 bg-white rounded-full px-3 flex justify-center items-center text-xs min-w-20">
 						<span class="font-bold">{{ container.capacityTotal - container.capacityUsed }}</span
diff --git a/src/views/components/Liquid.vue b/src/views/components/Liquid.vue
index 17a2c8f..1409b2b 100644
--- a/src/views/components/Liquid.vue
+++ b/src/views/components/Liquid.vue
@@ -7,23 +7,26 @@
 					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] rounded-lg 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">{{
-							`${
-								((container.capacityTotal - container.capacityUsed) / container.capacityTotal) * 100
-							}%`
-						}}</span>
-                    </div>
+					<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"
+								>{{
+									`${((container.capacityTotal - container.capacityUsed) / container.capacityTotal) * 100}%`
+								}}</span
+							>
+						</div>
+					</div>
 					<div class="text-xs text-[#666] mt-2">{{ container.solution.name }}</div>
 				</div>
 			</div>
@@ -35,4 +38,3 @@ import { useSettingStore } from "@/stores/setting";
 
 const settingStore = useSettingStore();
 </script>
-