diff --git a/.env b/.env index 7d3aae3..2ebbfbe 100644 --- a/.env +++ b/.env @@ -1 +1 @@ -REACT_APP_WS_URL=192.168.1.127:8080/ws \ No newline at end of file +REACT_APP_WS_URL=192.168.1.121:8080/ws \ No newline at end of file diff --git a/package.json b/package.json index ce1a638..2f58afd 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "outline", "version": "0.1.0", "private": true, - "proxy": "http://192.168.1.127:8080", + "proxy": "http://192.168.1.121:8080", "dependencies": { "@ant-design/icons": "^6.0.0", "@babel/core": "^7.16.0", diff --git a/public/audio/measure_end.mp3 b/public/audio/measure_end.mp3 new file mode 100644 index 0000000..83c8634 Binary files /dev/null and b/public/audio/measure_end.mp3 differ diff --git a/public/audio/measuring.mp3 b/public/audio/measuring.mp3 new file mode 100644 index 0000000..9c52945 Binary files /dev/null and b/public/audio/measuring.mp3 differ diff --git a/public/audio/ready.mp3 b/public/audio/ready.mp3 new file mode 100644 index 0000000..0db85af Binary files /dev/null and b/public/audio/ready.mp3 differ diff --git a/public/audio/side_end.mp3 b/public/audio/side_end.mp3 new file mode 100644 index 0000000..0df0a16 Binary files /dev/null and b/public/audio/side_end.mp3 differ diff --git a/src/pages/measure/components/MeasureAction.tsx b/src/pages/measure/components/MeasureAction.tsx index 734f35e..5106958 100644 --- a/src/pages/measure/components/MeasureAction.tsx +++ b/src/pages/measure/components/MeasureAction.tsx @@ -13,7 +13,7 @@ import { createWebSocket, sharedWsUrl } from "../../../services/socket"; import { switchMeasureAfterSave } from "../../../store/features/contextSlice"; import measureState, { updateGxState, updateMeasureData } from "../../../store/measure/measureState"; import { AnalysisReport, trackItem } from "../../../services/measure/type"; -import { MeasureState, TaskState, TrackRecordSig } from "../../../services/wsTypes"; +import { MeasureState, ResultRecordData, 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"; @@ -59,12 +59,12 @@ export default function MeasureAction() { // 初始状态列表 const initialStatusList = useMemo( () => [ - { name: "请移动到顶部，停顿2秒", background: "#ececec", isReady: false, color: STEP_COLOR_GREY }, - { name: "开始测量左侧", background: "#ececec", isReady: false, color: STEP_COLOR_GREY }, - { name: "左侧测量完成", background: "#ececec", isReady: false, color: STEP_COLOR_GREY }, - { name: "请移动到顶部，停顿2秒", background: "#ececec", isReady: false, color: STEP_COLOR_GREY }, - { name: "开始测量右侧", background: "#ececec", isReady: false, color: STEP_COLOR_GREY }, - { name: "右侧测量完成", background: "#ececec", isReady: false, color: STEP_COLOR_GREY }, + { name: "等待测量", background: "#ececec", isReady: false, color: STEP_COLOR_GREY }, + { name: "正在进行测量", background: "#ececec", isReady: false, color: STEP_COLOR_GREY }, + { name: "一侧测量完成", background: "#ececec", isReady: false, color: STEP_COLOR_GREY }, + { name: "等待测量另一侧", background: "#ececec", isReady: false, color: STEP_COLOR_GREY }, + { name: "正在进行测量", background: "#ececec", isReady: false, color: STEP_COLOR_GREY }, + { name: "测量已完成", background: "#ececec", isReady: false, color: STEP_COLOR_GREY }, ], [] ); @@ -133,6 +133,7 @@ export default function MeasureAction() { message.error("请先连接设备"); return; } + setAudioList([]) // if(deviceInfo.power < 20){ // message.error('电量低于20%，请充电后再测量！') // return @@ -162,6 +163,16 @@ export default function MeasureAction() { setStatusList(list); message.success("已通知设备开始测量"); setStartBtnText("重新测量"); + const audioReady = new Audio("/audio/ready.mp3"); + // 播放音频 + audioReady + .play() + .then(() => { + console.log("音频开始播放 已准备好"); + }) + .catch(err => { + console.error("播放音频时出错:", err); + }); } }); }, [initialStatusList, startBtnText, deviceInfo]); @@ -187,10 +198,13 @@ export default function MeasureAction() { //校准 const [showCalibration, setshowCalibration] = useState(false) + const [caloading, setCaLoading] = useState(false) + const [loadingText, setLoadingText] = useState('正在校准...') const [calibrationData, setCalibrationData] = useState([]) const onCalibrationBtnClick = () => { setCaLoading(true) + setLoadingText('正在校准...') //获取校准数据 getAlignPointsByRailSize({railSize:railSize}).then(res => { if(res.success){ @@ -201,6 +215,7 @@ export default function MeasureAction() { message.error('校准失败！') } setCaLoading(false) + setLoadingText('') }).catch(e=>{ setCaLoading(false) message.error('校准失败！') @@ -228,19 +243,36 @@ export default function MeasureAction() { } }; + const [audioList, setAudioList] = useState([]) + const pauseAudio = () => { + audioList.forEach(audio => { + console.log('-----------111-------------') + audio.pause() + }) + } /** ----------------------- WebSocket 消息处理 ----------------------- **/ useEffect(() => { // 处理任务状态消息 const handleStateMessage = (state: MeasureState["data"]) => {}; // 处理事件消息 const handleEventMessage = (type: TaskState["data"]) => { + /** + * IDLE： 空闲 + * START_MEASURE: 开始测量 + * WAITING_FOR_RECORD_THE_1ST_SIDE: 等待测量 + * RECORD_THE_FIRST_SIDE: 测量第一条曲线 + * RECORD_THE_1ST_SIDE_FINISHED: 第一条曲线测量完成 + * WAITING_FOR_RECORD_THE_2ND_SIDE: 等待测量第二条曲线 + * RECORD_THE_2ND_SIDE: 测量第二线曲线 + * FINISHED: 第二条曲线测量完成 + */ setStatusList(prev => { const updated = [...prev]; switch (type) { case "START_RECORD_LEFT": updated[0].color = STEP_COLOR_GREEN; updated[1].color = STEP_COLOR_BLUE; - const audio1 = new Audio("/audio/begin_left.mp3"); + const audio1 = new Audio("/audio/measuring.mp3"); // 播放音频 audio1 .play() @@ -250,13 +282,15 @@ export default function MeasureAction() { .catch(err => { console.error("播放音频时出错:", err); }); + setAudioList([...audioList, audio1]) break; case "FINISH_RECORD_LEFT": updated[1].color = STEP_COLOR_GREEN; updated[2].color = STEP_COLOR_GREEN; updated[3].color = STEP_COLOR_BLUE; isLeftFinished.current = true; - const audio2 = new Audio("/audio/end_left.mp3"); + pauseAudio() + const audio2 = new Audio("/audio/side_end.mp3"); // 播放音频 audio2 .play() @@ -266,11 +300,13 @@ export default function MeasureAction() { .catch(err => { console.error("播放音频时出错:", err); }); + setAudioList([...audioList, audio2]) break; case "START_RECORD_RIGHT": updated[3].color = STEP_COLOR_GREEN; updated[4].color = STEP_COLOR_BLUE; - const audio3 = new Audio("/audio/begin_right.mp3"); + pauseAudio() + const audio3 = new Audio("/audio/measuring.mp3"); // 播放音频 audio3 .play() @@ -280,12 +316,14 @@ export default function MeasureAction() { .catch(err => { console.error("播放音频时出错:", err); }); + setAudioList([...audioList, audio3]) break; case "FINISH_RECORD_RIGHT": updated[4].color = STEP_COLOR_GREEN; updated[5].color = STEP_COLOR_GREEN; setMeasurementFinished(true); - const audio4 = new Audio("/audio/end_right.mp3"); + pauseAudio() + const audio4 = new Audio("/audio/measure_end.mp3"); // 播放音频 audio4 .play() @@ -295,6 +333,8 @@ export default function MeasureAction() { .catch(err => { console.error("播放音频时出错:", err); }); + setCaLoading(true) + setLoadingText('正在处理测量数据...') break; case "WRONG_SIDE": const audio5 = new Audio("/audio/alert_left.mp3"); @@ -330,6 +370,12 @@ export default function MeasureAction() { } }; + // 处理测量后的数据 + const handleMeasureResult = (pointData: ResultRecordData["data"]) => { + canvasRef.current?.setMeasurementDataLeft([...pointData.outline1]); + canvasRef.current?.setMeasurementDataRight([...pointData.outline2]); + } + const subscription = wsClient.dataOb.subscribe(data => { if (data.path === "/api/measurement-task/get-task-state") { handleStateMessage(data.data); @@ -337,6 +383,9 @@ export default function MeasureAction() { handleEventMessage(data.data); } else if (data.path === "/api/measurement-task/point-report") { handlePointReport(data.data); + } else if (data.path === "/api/measurement-task/measure-finished") { + setCaLoading(false) + handleMeasureResult(data.data) } }); wsClient.connect(); @@ -517,7 +566,7 @@ export default function MeasureAction() { )} - +