溶液容量小浮层

src/views/addLiquid/addLiquid.vue

@@ -71,7 +71,7 @@ function liquidOptionDisabled(liquidId: number) {
 	return !!settingStore.heatContainers.find(h => h.solutionId !== 0 && h.solutionId === liquidId);
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .liquid-container {
 	background-image: url("@/assets/container.svg");
 	background-size: cover;

src/views/components/Footer.vue

@@ -5,27 +5,12 @@
 			<span class="ins_text text_size">等待指令</span>
 		</div>
 
-		<div class="footer_waste">
-			<van-popover v-model:show="showContainerPopover" placement="top-end">
-				<template #reference>
-					<div class="footer_container">
-						<div class="circle" style="background-color: #f2652d"></div>
-						<div class="waste_status text_size" style="color: #f2652d">碱中和容器余量低</div>
-						<div class="waste_detail">
-							<button class="text_size"><van-icon name="arrow" /></button>
-						</div>
-					</div>
-				</template>
-				<Liquid></Liquid>
-			</van-popover>
-		</div>
-
 		<div class="footer_normal">
 			<van-popover v-model:show="showWastePopover" placement="top-end" class="waste_popover">
 				<template #reference>
 					<div class="footer_container">
 						<div class="circle"></div>
-						<div class="waste_status text_size">溶液正常</div>
+						<div class="waste_status text_size font-medium underline text-primary">溶液正常</div>
 						<div class="waste_detail">
 							<button class="text_size"><van-icon name="arrow" /></button>
 						</div>
@@ -64,7 +49,7 @@ const showWastePopover = ref(false);
 	display: flex;
 	align-items: center;
 	border-radius: 5px;
-	width: 13.4375rem;
+	min-width: 13.4375rem;
 	height: 2.5rem;
 	background: #ffffff;
 	margin-left: 1.5rem;
@@ -88,7 +73,7 @@ const showWastePopover = ref(false);
 	.circle {
 		width: 1rem;
 		height: 1rem;
-		background-color: green;
+		background-color: #26D574;
 		border-radius: 50%;
 		margin-left: 10px;
 	}

src/views/components/Liquid.vue

@@ -1,147 +1,44 @@
 <template>
-    <div class="liquid">
-        <div class="liquid_status">废液回收状态</div>
-        <div class="liquid_pos">
-            <div class="contail_percentage"></div>
-            <div class="liquid_percent" style="height: 50%;"></div>
-            <div class="percent_num">50%</div>
-        </div>
-        <div class="container_water_name">
-            碱中和容器
-        </div>
-        <br/>
+	<div class="w-[340px] py-4">
 		<div>
-            <div class="liquid_status">溶液容器状态</div>
-            <div class="solu_list">
-                <div v-for="solu in solutionList" :key="solu.id">
-                    <div class="liquid_pos">
-                        <div class="contail_percentage"></div>
-                        <div class="liquid_percent" :style="`height: ${solu.percentage};background-color:${solu.color}`"></div>
-                        <div class="percent_num">{{ solu.percentage }}</div>
-                    </div>
-                    <div class="solu_name">
-                        {{ solu.name }}
-                    </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="liquid-container 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="text-xs text-[#666] mt-2">{{ container.solution.name }}</div>
 				</div>
 			</div>
 		</div>
 	</div>
 </template>
 <script lang="ts" setup>
-    import { ref } from 'vue'
-    const solutionList = ref([{
-        id : 1,
-        name: '硫酸',
-        percentage: '10%',
-        color: 'red'
-    },{
-        id : 2,
-        name: '硫酸',
-        percentage: '20%',
-        color:"#07a16e"
-    },{
-        id : 3,
-        name: '硫酸',
-        percentage: '30%',
-        color:"#07a16e"
-    },{
-        id : 4,
-        name: '硫酸',
-        percentage: '40%',
-        color:"#aa8538"
-    },{
-        id : 5,
-        name: '硫酸',
-        percentage: '50%',
-        color:"#cf67e7"
-    },{
-        id : 6,
-        name: '硫酸',
-        percentage: '10%',
-        color:"#cf67e7"
-    },{
-        id : 7,
-        name: '硫酸',
-        percentage: '20%',
-        color:"#07a16e"
-    },{
-        id : 8,
-        name: '硫酸',
-        percentage: '30%',
-    }])
+import { useSettingStore } from "@/stores/setting";
 
+const settingStore = useSettingStore();
 </script>
-<style lang="css" scoped>
-    .liquid{
-        background: #EEEFF8;
-        width: 680px;
-        height: 690px;
-        
-        .liquid_pos{
-            position: relative;
-            width: 100px;
-            height: 116px;
-            margin-top: 36px;
-            margin-left: 50px;
-        }
-        .liquid_status{
-            height: 29px;
-            font-family: Source Han Sans;
-            font-size: 30px;
-            font-weight: 500;
-            color: #40474E;
-            padding-top: 19px;
-        }
-
-        .contail_percentage{
-            position: absolute;
-            width: 83px;
-            height: 116px;
-            background-image: url('@/assets/container.svg');
+<style lang="scss" scoped>
+.liquid-container {
+	background-image: url("@/assets/container.svg");
 	background-size: cover;
 	background-position: center;
-            z-index: 1;
-            border-radius: 10px;
-        }
-
-        .liquid_percent {
-            position: absolute;
-            bottom: 0;
-            width: 83px;
-            background-color: blue;
-            opacity: 0.5;
-            z-index: 2;
-            border-radius: 0 0 10px 10px;
-        }
-
-        .container_water_name{
-            font-family: 思源黑体;
-            font-size: 26px;
-            font-weight: 500;
-            color: #9E9E9E;
-            margin-left: 45px;
-        }
-    }
-    .solu_list{
-        display: flex;    
-        justify-content: center;
-        flex-wrap: wrap;
-        gap:2px
-    }
-
-    .solu_name{
-        font-family: 思源黑体;
-        font-size: 26px;
-        font-weight: 500;
-        color: #9E9E9E;
-        margin-left: 65px;
-    }
-
-    .percent_num{
-        font-size: 30px;
-        position: relative;
-        z-index: 2;
-        top: 60px;
-        left: 20px;
 }
 </style>