接收警告上报

src/App.vue

@@ -1,17 +1,61 @@
 <script setup lang="ts">
-import { RouterView } from "vue-router";
+import { RouterView, useRouter } from "vue-router";
 import { createWebSocket, sharedWsUrl } from "./services/socket";
 import { useEquipmentStatusStore } from "@/stores/equipmentStatus";
-import { onMounted } from "vue";
+import { onMounted, ref } from "vue";
 import { getList } from "./services/matrix/manage";
 import { useSettingStore } from "./stores/setting";
+import Dialog, { type DialogParam } from "./components/Dialog.vue";
+
 const equipmentStatusStore = useEquipmentStatusStore();
 const settingStore = useSettingStore();
+const router = useRouter();
 
 const wsClient = createWebSocket(sharedWsUrl);
-wsClient.dataOb.subscribe((data: any) => {
+wsClient.dataOb.subscribe(data => {
 	if (data.type === "status") {
 		equipmentStatusStore.setEquipmentStatus(data["data"]);
+	} else if (data.type === "warn") {
+		if (data.data.code === "wash_complete") {
+			dialogContent.value = {
+				title: "提示",
+				desc: "清洗管道已经完成",
+				type: "alert",
+			};
+			showDialog.value = true;
+		} else if (data.data.code === "prefill_complete") {
+			dialogContent.value = {
+				title: "提示",
+				desc: "预充管道已经完成",
+				type: "alert",
+			};
+			showDialog.value = true;
+		} else if (data.data.code === "dehumidify_complete") {
+			dialogContent.value = {
+				title: "提示",
+				desc: "除湿已完成",
+				type: "confirm",
+				okText: "去喷涂",
+				_brand: "dehumidify_complete",
+			};
+			showDialog.value = true;
+		} else if (data.data.code === "spray_complete") {
+			dialogContent.value = {
+				title: "提示",
+				desc: "喷涂结束，建议回首页清洗管道",
+				type: "confirm",
+				okText: "去清洗",
+				_brand: "spray_complete",
+			};
+			showDialog.value = true;
+		} else if (data.data.code === "error") {
+			dialogContent.value = {
+				title: "错误",
+				desc: data.data.msg,
+				type: "alert",
+			};
+			showDialog.value = true;
+		}
 	}
 });
 wsClient.connect();
@@ -24,9 +68,34 @@ onMounted(() => {
 		}
 	});
 });
+
+const dialogContent = ref<DialogParam>({ desc: "描述" });
+
+const showDialog = ref(false);
+
+function onOk() {
+	showDialog.value = false;
+	if (dialogContent.value._brand === "dehumidify_complete") {
+		router.push("/spray");
+	} else if (dialogContent.value._brand === "spray_complete") {
+		router.replace("/home");
+	}
+}
 </script>
 
 <template>
 	<RouterView />
+	<van-overlay v-if="showDialog" :show="true">
+		<div class="flex justify-center items-center h-full">
+			<Dialog
+				:title="dialogContent.title"
+				:desc="dialogContent.desc"
+				:type="dialogContent.type"
+				:ok-text="dialogContent.okText"
+				:cancel-text="dialogContent.cancelText"
+				@on-ok="onOk"
+				@on-cancel="showDialog = false"></Dialog>
+		</div>
+	</van-overlay>
 </template>
-<style scoped></style>
+<style lang="scss" scoped></style>

src/components/Dialog.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="min-w-[420px] max-w-[540px] text-primary bg-white rounded-lg">
-		<h1 class="my-8 text-lg font-medium text-center px-8">{{ props.title }}</h1>
+		<h1 class="my-8 text-lg font-medium text-center px-8">{{ props.title || "提示" }}</h1>
 		<div class="text-lg px-4 text-center">
 			{{ props.desc }}
 		</div>
@@ -15,11 +15,11 @@
 <script setup lang="ts">
 
 export type DialogParam = {
-    title: string;
+    title?: string; // 默认 「提示」
 	desc: string;
-	type: "alert" | "confirm"; // alert 一个按钮，confirm：两个按钮
-	okText: string;
-	cancelText: string;
+	type?: "alert" | "confirm"; // alert 一个按钮，confirm：两个按钮
+	okText?: string;
+	cancelText?: string;
     _brand?: string;
 }
 const props = defineProps<DialogParam>();

src/services/wsTypes.ts

@@ -1,16 +1,15 @@
-
 export type CmdDatagram = {
 	type: "cmd"; // 指令
 	data: {
-		commandId: string;
+		// commandId: string;
 		commandName: string;
 		status: "D0000" | "D1111";
-		message: string;
+		message?: string;
 		success: boolean;
 	};
 };
 
-type WarnType = "wash_complete" | "prefill_complete" | "dehumidify_complete" | "spray_complete" | "error";
+export type WarnType = "wash_complete" | "prefill_complete" | "dehumidify_complete" | "spray_complete" | "error";
 
 export type WarnDatagram = {
 	type: "warn"; // 报警
@@ -103,4 +102,4 @@ export const defaultStatus: EquipmentStatusType = {
 	syringePumpNormal: false,
 };
 
-export type Datagram = CmdDatagram | WarnDatagram | StatusDatagram ;
+export type Datagram = CmdDatagram | WarnDatagram | StatusDatagram;