zhangjiming
/
Outline
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化测量页面

feature/0607-opt
LiLongLong 3 months ago
parent
2abaf9385b
commit
56068edbe2
8 changed files with 84 additions and 15 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      .env
  2. 2
      package.json
  3. BIN
      public/audio/measure_end.mp3
  4. BIN
      public/audio/measuring.mp3
  5. BIN
      public/audio/ready.mp3
  6. BIN
      public/audio/side_end.mp3
  7. 73
      src/pages/measure/components/MeasureAction.tsx
  8. 22
      src/services/wsTypes.ts

2
.env
View File

@ -1 +1 @@
REACT_APP_WS_URL=192.168.1.127:8080/ws
REACT_APP_WS_URL=192.168.1.121:8080/ws

2
package.json
View File

@ -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",

BIN
public/audio/measure_end.mp3
View File

BIN
public/audio/measuring.mp3
View File

BIN
public/audio/ready.mp3
View File

BIN
public/audio/side_end.mp3
View File

73
src/pages/measure/components/MeasureAction.tsx
View File

@ -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<HTMLAudioElement[]>([])
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() {
)}
</section>
</div>
<Spin spinning={caloading} tip="正在校准...">
<Spin spinning={caloading} tip={ loadingText }>
<div className="relative">
<MeasurementCanvas
width={800}

22
src/services/wsTypes.ts
View File

@ -29,6 +29,26 @@ export type TrackRecordSig = {
path: "/api/measurement-task/point-report";
};
type Points = {
x: number;
y: number;
}
type MeasureResult = {
outline1: Points[];
outline2: Points[];
}
// 测量结果
export type ResultRecordData = {
messageType: "EVENT";
data: {
outline1: Points[];
outline2: Points[];
};
path: "/api/measurement-task/measure-finished";
};
export const defaultContext: ContextMessage["data"] = {
loginFlag: true,
loginUser: {
@ -162,4 +182,4 @@ export type bleStatus = {
path: "/api/ble/ble-list";
};
export type Datagram = TrackRecordSig | TaskState | ContextMessage | MeasureState | ChannelMessage | DeviceStatus | ProgressStatus;
export type Datagram = TrackRecordSig | TaskState | ContextMessage | MeasureState | ChannelMessage | DeviceStatus | ProgressStatus | ResultRecordData;
Write Preview
Loading…
Cancel
Save