支持测量任务状态

src/pages/measure/components/MeasureAction.tsx

@@ -9,6 +9,10 @@ import ResultLayer from "./graph/ResultLayer";
 import MarkLayer from "./graph/MarkLayer";
 import { useDispatch, useSelector } from "react-redux";
 import { switchMeasureAfterSave } from "../../../store/features/contextSlice";
+import { AnalyzeAngle } from "../../../services/measure/type";
+import { MeasureState, taskStatusDescMap } from "../../../services/wsTypes";
+
+const wsClient = createWebSocket(sharedWsUrl);
 
 export default function MeasureAction() {
 	const dispatch = useDispatch();
@@ -23,6 +27,9 @@ export default function MeasureAction() {
 
 	const navigate = useNavigate();
 
+	const [angles, setAngles] = useState<AnalyzeAngle[]>([]);
+	const [taskStatus, setTaskStatus] = useState<MeasureState["data"]["taskStatus"]>("IDLE");
+
 	const onAfterSaveChange: CheckboxProps["onChange"] = e => {
 		dispatch(switchMeasureAfterSave(e.target.checked));
 	};
@@ -30,12 +37,11 @@ export default function MeasureAction() {
 		// navigate("../detail");
 		analyzeMeasurement().then(res => {
 			if (res.success) {
-				// mask
-				
+				setAngles(res.data.angles);
 			} else {
 				message.error(res.data.info);
 			}
-		})
+		});
 	};
 
 	const onStart = () => {
@@ -61,6 +67,15 @@ export default function MeasureAction() {
 		});
 	};
 
+	useEffect(() => {
+		const subscription = wsClient.dataOb.subscribe(data => {
+			if (data.messageType === "STATE" && data.path === "/measurement-task/get-task-state") {
+				setTaskStatus(data.data.taskStatus);
+			}
+		});
+		wsClient.connect();
+		return () => subscription.unsubscribe();
+	});
 	return (
 		<div className="flex h-full ">
 			<div className="flex-none">
@@ -77,10 +92,12 @@ export default function MeasureAction() {
 						<Switch defaultChecked onChange={checked => setShowResult(checked)} />
 						<span>对比线</span>
 					</div>
-					<div className="flex gap-2 items-center">
-						<Switch defaultChecked onChange={checked => setShowMark(checked)} />
-						<span>角度线</span>
-					</div>
+					{angles.length > 0 && (
+						<div className="flex gap-2 items-center">
+							<Switch defaultChecked onChange={checked => setShowMark(checked)} />
+							<span>角度线</span>
+						</div>
+					)}
 				</div>
 				<div className="relative">
 					<GridLayer
@@ -122,25 +139,28 @@ export default function MeasureAction() {
 							visibility={showResult ? "visible" : "hidden"}
 						/>
 					</div>
-					<div className="absolute top-0">
-						<MarkLayer
-							width={840}
-							height={600}
-							leftPadding={30}
-							rightPadding={10}
-							topPadding={10}
-							bottomPadding={30}
-							columns={10}
-							rows={7}
-							visibility={showMark ? "visible" : "hidden"}
-						/>
-					</div>
+					{angles.length > 0 && (
+						<div className="absolute top-0">
+							<MarkLayer
+								width={840}
+								height={600}
+								leftPadding={30}
+								rightPadding={10}
+								topPadding={10}
+								bottomPadding={30}
+								columns={10}
+								rows={7}
+								visibility={showMark ? "visible" : "hidden"}
+								angles={angles}
+							/>
+						</div>
+					)}
 				</div>
 			</div>
 			<div className="w-[300px] flex-none py-6">
 				<h1 className="font-medium text-xl text-center">测量步骤</h1>
 				<section className="flex flex-col items-center gap-4 mt-6 border-t border-[#D8D8D8] py-4">
-					<div>正在测量的状态</div>
+					<div>测量状态: {taskStatusDescMap[taskStatus]}</div>
 					<Button style={{ width: 200 }} size="large" type="primary" onClick={onStart}>
 						开始测量
 					</Button>

src/pages/measure/components/graph/ResultLayer.tsx

@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import points from "../../../../utils/measure.json";
 import { createWebSocket, sharedWsUrl } from "../../../../services/socket";
+
 const wsClient = createWebSocket(sharedWsUrl);
-console.log(sharedWsUrl);
 
 const pointArr: { x: number; y: number }[] = [];
 

src/services/wsTypes.ts

@@ -18,15 +18,21 @@ export type TrackRecordSig = {
 };
 
 export const defaultContext: ContextMessage["data"] = {
-	loginFlag: false,
-	loginUser: {},
-	newMeasureAfterSave: false
+	loginFlag: true,
+	loginUser: {
+		id: 3, //数据主键id
+		account: "test001", //用户账户
+		nickname: "测试账户001", //用户昵称
+		userRole: "User", //用户角色，可用值:User,Admin,Dev
+		isBuiltInUser: false, //是否内置用户(内置用户不可删除)
+	},
+	newMeasureAfterSave: false,
 };
 
 export type ContextMessage = {
 	messageType: "DeviceContext";
 	data: {
-		loginFlag: boolean;
+		loginFlag: Boolean;
 		loginUser: Partial<{
 			id: number;
 			account: string;
@@ -40,8 +46,15 @@ export type ContextMessage = {
 	path: "/deviceContext";
 };
 
+export const taskStatusDescMap: { [k in MeasureState["data"]["taskStatus"]]: string } = {
+	IDLE: "空闲",
+	MEASURING: "测量中",
+	WAITING_FOR_MEASURING: "等待测量",
+	FINISHED: "测量完成",
+};
+
 export type MeasureState = {
-	messageType: "EVENT";
+	messageType: "STATE";
 	data: {
 		taskStatus: "IDLE" | "MEASURING" | "WAITING_FOR_MEASURING" | "FINISHED";
 		measureSideCnt: 0 | 1 | 2; //已测量数量，0，1，2 最多两边（左边和右边）
@@ -54,4 +67,13 @@ export type MeasureState = {
 	path: "/measurement-task/get-task-state";
 };
 
+export const defaultMeasureState = {
+	taskStatus: "IDLE",
+	measureSideCnt: 0, //已测量数量，0，1，2 最多两边（左边和右边）
+	isMeasuringLeftEnd: false, //测量左侧完成
+	isMeasuringRightEnd: false, //测量右侧完成
+	motionlessSigFlag: true, //滑轮质心是否静止
+	inStartMeasuringPos: true, //是否在允许开始测量的位置
+};
+
 export type Datagram = TrackRecordSig | TaskState | ContextMessage | MeasureState;