调试命令基本结构

src/App.vue

@@ -10,13 +10,6 @@ exceptionOb.subscribe(exp => {
 	}
 });
 
-console.log("ws url: ", sharedWsUrl);
-const wsClient = createWebSocket(sharedWsUrl);
-wsClient.dataOb.subscribe(data => {
-	console.log(data);
-});
-wsClient.connect();
-
 </script>
 
 <template>

src/services/debug/debugApi.ts

@@ -1,5 +1,23 @@
 import httpRequest, { type BaseResponse } from "../httpRequest";
 
+export const CmdDescMap: { [k in DebugCmd]: string } = {
+	upTray: "抬起托盘",
+	downTray: "降下托盘",
+	injectFluid: "注入溶液",
+	moveToActionArea: "移至操作区",
+	shakeUp: "摇匀",
+	startHeat: "开始加热",
+	stopHeat: "停止加热",
+	keepHeat: "恒温",
+	takePhoto: "拍照",
+	moveToUnusual: "移至异常区",
+	moveToHeatArea: "移至加热区",
+	takeOffCap: "取下拍子",
+	putBackCap: "装回拍子",
+	moveMachineArm: "移动机械臂",
+	moveTube: "移动试管",
+};
+
 export type DebugCmd =
 	| "upTray" // 抬起托盘
 	| "downTray" // 降下托盘

src/services/socket.ts

@@ -1,4 +1,33 @@
 import { Subject } from "rxjs";
+import type { DebugCmd } from "./debug/debugApi";
+
+export type CmdSuccess = "D0000";
+export type CmdFailure = "D1111";
+export type CmdDatagram = {
+	type: "cmd"; // 指令
+	data: {
+		commandId: string;
+		commandName: DebugCmd;
+		status: CmdSuccess | CmdFailure;
+		message: string;
+	};
+};
+
+export type WarnDatagram = {
+	type: "warn"; // 报警
+	data: {
+		message: string;
+	};
+};
+export type StatusDatagram = {
+	type: "status"; // 状态
+	data: {
+		message: string;
+	};
+};
+
+export type Datagram = CmdDatagram | WarnDatagram | StatusDatagram;
+export type DatagramType = Datagram['type']
 
 export type SocketState = "open" | "close" | "error";
 
@@ -9,7 +38,7 @@ class WebSocketClient {
 	private maxReconnectAttempts: number = 5;
 	private reconnectInterval: number = 3000;
 
-	private dataSub = new Subject();
+	private dataSub = new Subject<Datagram>();
 	get dataOb() {
 		return this.dataSub.asObservable();
 	}

src/views/debug/debug.vue

@@ -76,13 +76,32 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { debugCmd, type DebugCmd } from "@/services/debug/debugApi";
+import { CmdDescMap, debugCmd, type DebugCmd } from "@/services/debug/debugApi";
+import { createWebSocket, sharedWsUrl } from "@/services/socket";
 import { showToast } from "vant";
+import { onMounted, onUnmounted } from "vue";
+
+onMounted(() => {
+	const wsClient = createWebSocket(sharedWsUrl);
+	const subscription = wsClient.dataOb.subscribe(data => {
+		console.log(data);
+		if (data.type === "cmd") {
+			const cmdName = CmdDescMap[data.data.commandName];
+			const result = data.data.status === "D0000" ? "执行完毕" : "执行失败";
+			showToast(`${cmdName} ${result}`);
+		}
+	});
+	wsClient.connect();
+
+	onUnmounted(() => {
+		subscription.unsubscribe();
+	});
+});
 
 function onCmdClick(command: DebugCmd) {
 	debugCmd({ command, params: {} }).then(res => {
 		if (res.success) {
-			showToast('已执行，请稍等')
+			// showToast("已执行，请稍等");
 		} else {
 			showToast(res.msg);
 		}

src/views/home/index.vue

@@ -5,11 +5,7 @@
 		<div class="flex">
 			<Menu></Menu>
 			<main>
-				<router-view v-slot="{ Component }">
-					<keep-alive :exclude="['Home']">
-						<component :is="Component" />
-					</keep-alive>
-				</router-view>
+				<router-view />
 			</main>
 		</div>