From 11841d614d03311715e8b516a021a8c799c8fa32 Mon Sep 17 00:00:00 2001
From: zhangjiming <zhangjiming@costrip.cn>
Date: Thu, 27 Feb 2025 14:07:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B5=8B=E8=AF=95SVG=E6=B8=90=E5=8F=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/addLiquid/addLiquid.vue | 40 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/src/views/addLiquid/addLiquid.vue b/src/views/addLiquid/addLiquid.vue
index b227008..0f1b9a5 100644
--- a/src/views/addLiquid/addLiquid.vue
+++ b/src/views/addLiquid/addLiquid.vue
@@ -22,7 +22,8 @@
 					</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="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: ${
@@ -36,6 +37,43 @@
 						<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>
 					<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