测量步骤放到上面，点击开始测量按钮，按钮应当变为重新测量，点击重新测量测量步骤应当还原初始状态

src/pages/measure/components/MeasureAction.tsx

@@ -29,17 +29,59 @@ export default function MeasureAction() {
 
 	const [angles, setAngles] = useState<AnalyzeAngle[]>([]);
 	const [taskStatus, setTaskStatus] = useState<MeasureState["data"]["taskStatus"]>("IDLE");
+	const [startBtnText, setStartBtnText] = useState("开始测量");
+
+	const initialStatusList = [
+		{
+			statusCode: 'START_RECORD_LEFT',
+			name: '请移动到顶部，停顿2秒',
+			background: '#ececec',
+			isReady: false,
+			color: 'h'
+		},
+		{
+			statusCode: 'START_RECORD_LEFT',
+			name: '开始测量左侧',
+			background: '#ececec',
+			isReady: false,
+			color: 'h'
+		},
+		{
+			statusCode: 'START_RECORD_LEFT',
+			name: '左测测量完成',
+			background: '#ececec',
+			isReady: false,
+			color: 'h'
+		},
+		{
+			statusCode: 'START_RECORD_LEFT',
+			name: '请移动到顶部，停顿2秒',
+			background: '#ececec',
+			isReady: false,
+			color: 'h'
+		},
+		{
+			statusCode: 'START_RECORD_LEFT',
+			name: '开始测量右侧',
+			background: '#ececec',
+			isReady: false,
+			color: 'h'
+		},
+		{
+			statusCode: 'START_RECORD_LEFT',
+			name: '右侧测量完成',
+			background: '#ececec',
+			isReady: false,
+			color: 'h'
+		}
+	];
+	let [statusList, setStatusList] = useState(initialStatusList);
 
 	const onAfterSaveChange: CheckboxProps["onChange"] = e => {
 		dispatch(switchMeasureAfterSave(e.target.checked));
 	};
 	const onAnalysisBtnClick = () => {
-		// navigate("../detail");
-		// if(taskStatus !== 'FINISHED'){
-		// 	message.error('测量还未结束')
-		// 	return;
-		// }
-		const params = {//静态数据 TODO 
+		const params = {
 			code: 6001
 		}
 		analysisReport(params).then(res => {
@@ -58,30 +100,27 @@ export default function MeasureAction() {
 				})
 				setAngles(angles);
 			} else {
-
 			}
 		})
-		// analyzeMeasurement().then(res => {
-		// 	if (res.success) {
-		// 		setAngles(res.data.angles);
-		// 	} else {
-		// 		message.error(res.data.info);
-		// 	}
-		// });
 	};
 
 	const onStart = () => {
+		if (startBtnText === "重新测量") {
+			setStatusList(initialStatusList);
+		}
 		startMeasurement().then(res => {
 			if (res.status !== 0) {
 				message.error(res.data.info);
 				let name = taskStatusDescMap['IDLE']
 				setTaskStatusName(name)
 			} else {
-				statusList[0].color = 'b';
-				setStatusList(statusList)
+				const newStatusList = [...initialStatusList];
+				newStatusList[0].color = 'b';
+				setStatusList(newStatusList);
 				message.success("已通知设备开始测量");
 				let name = taskStatusDescMap['IDLE']
 				setTaskStatusName(name)
+				setStartBtnText("重新测量")
 			}
 		});
 	};
@@ -109,11 +148,11 @@ export default function MeasureAction() {
 				}
 				if (data.data.taskStatus === 'IDLE') {
 					setTaskStatusName('空闲')
-				}else if(!data.data.isMeasuringLeftEnd){//正在测量左边
+				} else if (!data.data.isMeasuringLeftEnd) {
 					setTaskStatusName('左侧正在测量')
 					statusList[0].isReady = true;
 					setStatusList(statusList)
-				}else if(data.data.isMeasuringLeftEnd && !data.data.isMeasuringRightEnd){//左边为true, 右边是false时表示左边已完成,右边准备
+				} else if (data.data.isMeasuringLeftEnd && !data.data.isMeasuringRightEnd) {
 					setTaskStatusName('右侧正在测量')
 				} else {
 					let name = taskStatusDescMap[data.data.taskStatus]
@@ -161,51 +200,13 @@ export default function MeasureAction() {
 	const onHandleIcon = (item: StatusCodeData, index: number) => {
 		if (item.color === 'g') {
 			return <img src={Gr_round} alt='' />
-		}else if(item.color === 'b'){//index > 0 && statusList[index-1].isReady
+		} else if (item.color === 'b') {
 			return <img src={Bl_round} alt='' />
 		} else if (item.color === 'h') {
 			return <div style={{ width: '22px', height: '22px', background: '#c0c0c0', borderRadius: "50%", marginTop: '10px' }}></div>
 		}
 	}
 
-	let [statusList,setStatusList] = useState([{
-		statusCode: 'START_RECORD_LEFT',
-		name:'请移动到顶部，停顿2秒',
-		background:'#ececec',
-		isReady:false,
-		color:'h'
-	},{
-		statusCode: 'START_RECORD_LEFT',
-		name:'开始测量左侧',
-		background:'#ececec',
-		isReady:false,
-		color:'h'
-	},{
-		statusCode: 'START_RECORD_LEFT',
-		name:'左测测量完成',
-		background:'#ececec',
-		isReady:false,
-		color:'h'
-	},{
-		statusCode: 'START_RECORD_LEFT',
-		name:'请移动到顶部，停顿2秒',
-		background:'#ececec',
-		isReady:false,
-		color:'h'
-	},{
-		statusCode: 'START_RECORD_LEFT',
-		name:'开始测量右侧',
-		background:'#ececec',
-		isReady:false,
-		color:'h'
-	},{
-		statusCode: 'START_RECORD_LEFT',
-		name:'右侧测量完成',
-		background:'#ececec',
-		isReady:false,
-		color:'h'
-	}])
-
 	return (
 		<div className="flex h-full ">
 			<div className="flex-none">
@@ -218,10 +219,6 @@ export default function MeasureAction() {
 						<Switch defaultChecked onChange={checked => setShowStandard(checked)} />
 						<span>标准线</span>
 					</div>
-					{/*<div className="flex gap-2 items-center">*/}
-					{/*	<Switch defaultChecked onChange={checked => setShowResult(checked)} />*/}
-					{/*	<span>对比线</span>*/}
-					{/*</div>*/}
 					{angles.length > 0 && (
 						<div className="flex gap-2 items-center">
 							<Switch defaultChecked onChange={checked => setShowMark(checked)} />
@@ -300,24 +297,8 @@ export default function MeasureAction() {
 					})}
 				</div>
 				<section className="flex flex-col items-center gap-4 mt-6 border-t border-[#D8D8D8] py-4">
-					{/* <div>测量状态: {taskStatusDescMap[taskStatus]}</div> */}
-					{/* <div className="w-[200px]">
-						{taskStatus !== 'FINISHED' && 
-							<div className="flex">
-								<img src={Gr_round} alt=''/>
-								<div className="ml-[2rem]">{taskStatusName}</div>
-							</div>
-						}
-						{
-							taskStatus === 'FINISHED' && 
-							<div className="flex mt-[10px]">
-								<img src={Bl_round} alt=''/>
-								<div className="ml-[2rem]">{taskStatusName}</div>
-							</div>
-						}
-					</div> */}
 					<Button style={{ width: 200 }} size="large" type="primary" onClick={onStart}>
-						开始测量
+						{startBtnText}
 					</Button>
 					<Button style={{ width: 200 }} size="large" type="primary" onClick={onAnalysisBtnClick}>
 						分析
@@ -329,7 +310,6 @@ export default function MeasureAction() {
 						保存后自动开始新测量
 					</Checkbox>
 				</section>
-
 			</div>
 		</div>
 	);