加液配置重构

.env

@@ -1,3 +1,3 @@
-VITE_API_HOST=127.0.0.1
+VITE_API_HOST=192.168.1.125
 VITE_API_PORT=8080
 VITE_WS_PATH=/ws

src/App.vue

@@ -27,6 +27,8 @@ wsClient.dataOb.subscribe(data => {
 		});
 	} else if (data.type === "crafts") {
 		console.log("crafts:", data);
+	} else if (data.type === "container") {
+		settingStore.setContainerConf(data.data.containerList);
 	}
 });
 wsClient.connect();

src/assets/container.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="59" height="82.99996948242188" viewBox="0 0 59 82.99996948242188"><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="#FFFFFF" fill-opacity="1"/></g></svg>
+<svg 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"><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="#EEEEEE" fill-opacity="1"/></g></svg>

src/services/socket.ts

@@ -1,5 +1,6 @@
 import { Subject } from "rxjs";
 import type { StepCmd } from "./globalCmd/globalCmd";
+import type { Container } from "./sysConfig/sysConfig";
 
 export type CmdSuccess = "D0000";
 export type CmdFailure = "D1111";
@@ -115,7 +116,14 @@ export type StatusDatagram = {
 	};
 };
 
-export type Datagram = CmdDatagram | WarnDatagram | StatusDatagram | CraftDatagram;
+export type ContainerDatagram = {
+	type: "container",
+	data: {
+		containerList: Container[];
+	}
+}
+
+export type Datagram = CmdDatagram | WarnDatagram | StatusDatagram | CraftDatagram | ContainerDatagram;
 export type DatagramType = Datagram["type"];
 
 export type SocketState = "open" | "close" | "error";
@@ -171,7 +179,7 @@ class WebSocketClient {
 		this.ws.onmessage = (event: MessageEvent) => {
 			try {
 				const data = JSON.parse(event.data) as Datagram;
-				// console.log('🚀 ~ WebSocketClient ~ bindEvents ~ data:', data)
+				// console.log("🚀 ~ WebSocketClient ~ bindEvents ~ data:", data);
 				if (data.type === "cmd") {
 					this.dataSub.next({ type: data.type, data: { ...data.data, success: data.data.status === "D0000" } });
 				} else {

src/services/sysConfig/sysConfig.ts

@@ -33,6 +33,8 @@ export type Container = {
 	type: 0 | 1; // 0:酸液 1:废液
 	solutionId: number;
 	pumpId: number;
+	capacityTotal: number;
+	capacityUsed: number;
 };
 
 export function getContainerList() {

src/views/addLiquid/addLiquid.vue

@@ -1,15 +1,42 @@
 <template>
-	<div class="component-page">
-		<section class="overflow-auto">
-			<div v-for="container in settingStore.heatContainers" :key="container.id" class="flex items-center gap-4 p-2">
-				<p class="min-w-16">容器 {{ container.id }}:</p>
-				<el-select
-					v-model="container.solutionId"
-					placeholder="Select"
-					style="width: 200px"
-					@change="onChange($event, container)">
-					<el-option v-for="item in settingStore.liquidList" :key="item.id" :label="item.name" :value="item.id" />
-				</el-select>
+	<div class="component-page overflow-auto px-12 py-20">
+		<section class="flex flex-wrap gap-[3.75rem]">
+			<div
+				v-for="container in settingStore.heatContainers"
+				:key="container.id"
+				class="w-[12.5rem] h-[13.125rem] border border-[#275EFB] rounded-lg bg-[#F4F9FF] flex flex-col">
+				<div class="h-10 bg-[#1989FA]/[0.12] flex justify-center items-center">
+					<el-select
+						v-model="container.solutionId"
+						placeholder="Select"
+						style="width: 120px"
+						filterable
+						no-match-text="没有匹配数据"
+						@change="onChange($event, container)">
+						<el-option
+							v-for="item in liquidList"
+							:key="item.id"
+							:label="item.name"
+							:value="item.id"
+							:disabled="liquidOptionDisabled(item.id)" />
+					</el-select>
+				</div>
+				<div class="flex-auto flex flex-col items-center justify-center gap-[.625rem]">
+					<div class="liquid-container 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
+							}%`"></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="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
+						><span class="font-bold text-[#9E9E9E] ml-1">/ {{ container.capacityTotal }}</span>
+					</div>
+				</div>
 			</div>
 		</section>
 	</div>
@@ -18,9 +45,15 @@
 import { useSettingStore } from "@/stores/setting";
 import { updateContainer, type Container } from "@/services/sysConfig/sysConfig";
 import { showToast } from "vant";
-
+import { computed } from "vue";
+import type { Liquid } from "@/services/liquid/liquidManage";
 const settingStore = useSettingStore();
 
+const liquidList = computed(() => {
+	const dummy: Liquid = { id: 0, name: "空" };
+	return [dummy, ...(settingStore.liquidList || [])];
+});
+
 function onChange(value: number, container: Container) {
 	updateContainer(container.id, value).then(res => {
 		if (res.success) {
@@ -29,4 +62,14 @@ function onChange(value: number, container: Container) {
 		}
 	});
 }
+function liquidOptionDisabled(liquidId: number) {
+	return !!settingStore.heatContainers.find(h => h.solutionId !== 0 && h.solutionId === liquidId);
+}
 </script>
+<style lang="scss">
+.liquid-container {
+	background-image: url("@/assets/container.svg");
+	background-size: cover;
+	background-position: center;
+}
+</style>

src/views/debug/debug.vue

@@ -88,7 +88,7 @@
 						<div>
 							<label for="">当前温度：</label>
 							<span class="text-warn">{{
-								(statusStore.status?.heater || []).map(h => h.temperature).join(",")
+								(statusStore.status?.heatArea || []).map(h => h.temperature).join(",")
 							}}</span>
 						</div>
 					</div>

src/views/graphite/components/CraftList.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="craft px-5 py-[1.875rem]">
 		<p class="text-xl font-medium mb-5">选择工艺</p>
-		<el-select v-model="selectCraftId" placeholder="Select" style="width: 17.5rem">
+		<el-select v-model="selectCraftId" placeholder="Select" style="width: 17.5rem" filterable no-match-text="没有匹配数据">
 			<el-option-group v-for="ore in settingStore.oreList" :key="ore.id" :label="ore.oresName">
 				<el-option v-for="item in ore.craftsList" :key="item.id" :label="item.name" :value="item.id" />
 			</el-option-group>

src/views/liquidConfig/index.vue

@@ -40,7 +40,7 @@
 			</div>
 		</section>
 
-		<van-overlay :show="showEditDialog">
+		<van-overlay v-if="showEditDialog" :show="true">
 			<div class="flex justify-center items-center h-full">
 				<AddLiquid @confirm="addLiquid" @cancel="showEditDialog = false" />
 			</div>

vite.config.ts

@@ -18,7 +18,7 @@ export default defineConfig({
 		port: 5174,
 		proxy: {
 			"/api": {
-				target: "http://127.0.0.1:8080",
+				target: "http://192.168.1.125:8080",
 				changeOrigin: true,
 				// rewrite: (path) => path.replace(/^\/api/, ''),
 			},