From d40ed851c85dc9bbc2d1e1a5532bcd4b70fb3358 Mon Sep 17 00:00:00 2001 From: zhangjiming Date: Wed, 12 Mar 2025 10:40:57 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=86=E6=9E=90=E7=BB=93=E6=9E=9C=E5=9C=A8?= =?UTF-8?q?=E6=8A=BD=E5=B1=89=E4=B8=AD=E5=B1=95=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/measure/components/MeasureAction.scss | 2 +- src/pages/measure/components/MeasureAction.tsx | 279 ++++++++++++------------ 2 files changed, 145 insertions(+), 136 deletions(-) diff --git a/src/pages/measure/components/MeasureAction.scss b/src/pages/measure/components/MeasureAction.scss index 307ab80..1f11450 100644 --- a/src/pages/measure/components/MeasureAction.scss +++ b/src/pages/measure/components/MeasureAction.scss @@ -1,5 +1,5 @@ .analysis-table { - width: 300px; + width: 100%; height: calc(100% - 60px) ;// calc(100vh - var(--headerHeight) - var(--footerHeight) - 3rem - 60px); overflow: auto; } \ No newline at end of file diff --git a/src/pages/measure/components/MeasureAction.tsx b/src/pages/measure/components/MeasureAction.tsx index ab06787..bb6aff3 100644 --- a/src/pages/measure/components/MeasureAction.tsx +++ b/src/pages/measure/components/MeasureAction.tsx @@ -1,5 +1,5 @@ -import React, { useState, useEffect, useRef } from "react"; -import { Button, Checkbox, CheckboxProps, message, Switch } from "antd"; +import React, { useState, useEffect, useRef, useCallback, useMemo } from "react"; +import { Button, Checkbox, CheckboxProps, Drawer, message, Switch } from "antd"; import { useNavigate } from "react-router"; import { fetchAnalysisReport, @@ -9,8 +9,8 @@ import { } from "../../../services/measure/analysis"; import { createWebSocket, sharedWsUrl } from "../../../services/socket"; import { switchMeasureAfterSave } from "../../../store/features/contextSlice"; -import { AnalysisReport, AnalyzeAngle } from "../../../services/measure/type"; -import { MeasureState, TaskState, taskStatusDescMap, TrackRecordSig } from "../../../services/wsTypes"; +import { AnalysisReport } from "../../../services/measure/type"; +import { MeasureState, TaskState, TrackRecordSig } from "../../../services/wsTypes"; import { useAppDispatch, useAppSelector } from "../../../utils/hooks"; import Gr_round from "../../../assets/green_round.svg"; import Bl_round from "../../../assets/blue_round.svg"; @@ -34,28 +34,34 @@ export default function MeasureAction() { const [showGrid, setShowGrid] = useState(true); const [showStandard, setShowStandard] = useState(true); const [showMark, setShowMark] = useState(true); + // showMark的备份，记录showMark最近一次的值 const [angleMarkBackup, setAngleMarkBackup] = useState(true); const afterSave = useAppSelector(store => store.context.newMeasureAfterSave); // const [angles, setAngles] = useState([]); // const [taskStatus, setTaskStatus] = useState("IDLE"); const [startBtnText, setStartBtnText] = useState("开始测量"); const [measurementFinished, setMeasurementFinished] = useState(false); - const [analysisClicked, setAnalysisClicked] = useState(false); - const [saveClicked, setSaveClicked] = useState(false); + + // 【分析】之后，会得到分析报告 const [analysisReport, setAnalysisReport] = useState(null); - const [showAnalysisTable, setShowAnalysisTable] = useState(false); + // const [showAnalysisTable, setShowAnalysisTable] = useState(false); // const [taskStatusName, setTaskStatusName] = 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" }, - ]; + const initialStatusList = useMemo( + () => [ + { name: "请移动到顶部，停顿2秒", background: "#ececec", isReady: false, color: "h" }, + { name: "开始测量左侧", background: "#ececec", isReady: false, color: "h" }, + { name: "左侧测量完成", background: "#ececec", isReady: false, color: "h" }, + { name: "请移动到顶部，停顿2秒", background: "#ececec", isReady: false, color: "h" }, + { name: "开始测量右侧", background: "#ececec", isReady: false, color: "h" }, + { name: "右侧测量完成", background: "#ececec", isReady: false, color: "h" }, + ], + [] + ); const [statusList, setStatusList] = useState(initialStatusList); + // 打开抽屉（显示分析结果） + const [openDrawer, setOpenDrawer] = useState(false); /** ----------------------- 事件处理函数 ----------------------- */ // 切换保存后自动开始新测量 @@ -65,7 +71,10 @@ export default function MeasureAction() { // 分析按钮点击事件 const onAnalysisBtnClick = () => { - setAnalysisClicked(true); + if (analysisReport) { + setOpenDrawer(true); + return; + } fetchAnalysisReport("6001").then(res => { if (res.success) { const report: AnalysisReport = res.data; @@ -85,7 +94,7 @@ export default function MeasureAction() { canvasRef.current?.setAnalysisData(analysisData); } setAnalysisReport(report); - setShowAnalysisTable(true); + setOpenDrawer(true); } else { message.error("分析报告请求失败: " + res.data.info); } @@ -93,16 +102,11 @@ export default function MeasureAction() { }; // 开始/重新测量按钮点击事件 - const onStart = () => { - if (startBtnText === "新测量") { - navigate("../config"); - return; - } + const onStart = useCallback(() => { // 重置测量相关状态 - setShowAnalysisTable(false); setMeasurementFinished(false); - setAnalysisClicked(false); - setSaveClicked(false); + setAnalysisReport(null); + isLeftFinished.current = false; leftPoints.current = []; rightPoints.current = []; @@ -124,20 +128,17 @@ export default function MeasureAction() { setStartBtnText("重新测量"); } }); - }; + }, [initialStatusList, startBtnText]); // 保存按钮点击事件 const onSaveBtnClick = () => { - setSaveClicked(true); saveMeasurement().then(res => { if (res.status !== 0) { message.error(res.data.info); } else { message.success("保存成功"); if (afterSave) { - navigate("../config"); - } else { - setStartBtnText("新测量"); + navigate("../config", { replace: true }); } } }); @@ -279,7 +280,7 @@ export default function MeasureAction() { }); wsClient.connect(); return () => subscription.unsubscribe(); - }, []); + }, [onStart]); /** ----------------------- 页面加载获取基础图形数据 ----------------------- **/ useEffect(() => { @@ -294,112 +295,80 @@ export default function MeasureAction() { }); }, []); + const onExport = () => {}; /** ----------------------- 渲染 ----------------------- **/ return ( -
- {/* 左侧区域：包含开关区域和测量画布 */} -
-
- {/* 参考线开关 */} -
- setShowGrid(checked)} /> - 参考线 + <> +
+ {/* 左侧区域：包含开关区域和测量画布 */} +
+
+
navigate("../config", { replace: true })}> + + 返回 +
+
+ {/* 参考线开关 */} +
+ setShowGrid(checked)} /> + 参考线 +
+ {/* 标准线开关 */} +
+ { + setShowStandard(checked); + if (!checked) { + setAngleMarkBackup(showMark); + setShowMark(false); + } else { + setShowMark(angleMarkBackup); + } + }} + /> + 标准线 +
+ {/* 角度线开关，仅在点击分析按钮后显示 */} + {analysisReport && ( +
+ { + setShowMark(checked); + setAngleMarkBackup(checked); + }} + /> + 角度线 +
+ )} +
- {/* 标准线开关 */} -
- { - setShowStandard(checked); - if (!checked) { - setAngleMarkBackup(showMark); - setShowMark(false); - } else { - setShowMark(angleMarkBackup); - } - }} + +
+ - 标准线
- {/* 角度线开关，仅在点击分析按钮后显示 */} - {analysisClicked && ( -
- { - setShowMark(checked); - setAngleMarkBackup(checked); - }} - /> - 角度线 -
- )}
-
- -
-
- {/* 右侧区域：根据 showAnalysisTable 状态显示测量步骤或分析表格 */} -
- {showAnalysisTable && analysisReport ? ( - <> -
- 分析 -
-
- - - - - - - - - - - {analysisReport.angleAnalysisList.map((item, index) => ( - - - - - ))} - -
W1垂直磨耗{analysisReport.w1}
轨头宽度 - {analysisReport.railHeadWidth} -
{item.describe}{item.distance}
-
- - - - ) : ( + {/* 右侧区域：根据 showAnalysisTable 状态显示测量步骤或分析表格 */} +

测量步骤

@@ -424,7 +393,7 @@ export default function MeasureAction() { size="large" type="primary" onClick={onAnalysisBtnClick} - disabled={!measurementFinished || analysisClicked}> + disabled={!measurementFinished}> 分析 @@ -440,8 +409,48 @@ export default function MeasureAction() {
- )} +
-
+ + setOpenDrawer(false)} open={openDrawer}> + {analysisReport && ( + <> +
+ + + + + + + + + + + {analysisReport.angleAnalysisList.map((item, index) => ( + + + + + ))} + +
W1垂直磨耗{analysisReport.w1}
轨头宽度 + {analysisReport.railHeadWidth} +
{item.describe}{item.distance}
+
+
+ +
+ + )} + + ); }