优化音频

.env

@@ -1,2 +1,2 @@
-# REACT_APP_WS_URL=192.168.1.170:8080/ws
-REACT_APP_WS_URL=127.1.1.0:8080/ws
+REACT_APP_WS_URL=192.168.1.170:8080/ws
+# REACT_APP_WS_URL=127.1.1.0:8080/ws

src/pages/Measure.tsx

@@ -161,16 +161,16 @@ export default function Measure() {
   };
 
   const openAudio = () => {
-    const audioReady = new Audio('/audio/ready.mp3');
-    // 播放音频
-    audioReady
-      .play()
-      .then(() => {
-        console.log('音频开始播放  已准备好');
-      })
-      .catch((err) => {
-        console.error('播放音频时出错:', err);
-      });
+    // const audioReady = new Audio('/audio/ticking.wav');
+    // // 播放音频
+    // audioReady
+    //   .play()
+    //   .then(() => {
+    //     console.log('音频开始播放  已准备好');
+    //   })
+    //   .catch((err) => {
+    //     console.error('播放音频时出错:', err);
+    //   });
   };
 
   const onOrgBarClick = async () => {
@@ -203,7 +203,6 @@ export default function Measure() {
   });
   const [status, setStatus] = useState(0)
   useEffect(() => {
-    console.log(measureState.taskState, status,state);
     switch (measureState.taskState) {
       case 'WAITING_FOR_RECORD_THE_1ST_SIDE':
         setStatus(1);
@@ -545,14 +544,14 @@ export default function Measure() {
             </button>
             <button
               className="btn-contained rounded-md text-sm h-10 flex-1"
-              disabled={measureState.taskState !== 'FINISH_RECORD_RIGHT'}
+              disabled={measureState.taskState !== 'FINISH_RECORD'}
               onClick={onSaveClick}
             >
               保存
             </button>
             <button
               className="btn-contained rounded-md text-sm h-10 flex-1"
-              disabled={measureState.taskState !== 'FINISH_RECORD_RIGHT'}
+              disabled={measureState.taskState !== 'FINISH_RECORD'}
               onClick={onCalibrationBtnClick}
             >
               校准

src/services/wsTypes.ts

@@ -80,6 +80,8 @@ export const taskStatusDescMap: { [k in MeasureState['data']['taskStatus']]: str
   END_RECORD_SIG: '',
   END_RECORD: '',
   START_RECORD_RIGHT: '',
+  WAITING_FOR_RECORD_THE_1ST_SIDE: '',
+  WAITING_FOR_RECORD_THE_2ND_SIDE: '',
 };
 // 测量任务状态
 export type MeasureState = {
@@ -96,7 +98,11 @@ export type MeasureState = {
       | 'FINISH_RECORD_LEFT'
       | 'END_RECORD_SIG'
       | 'END_RECORD'
-      | 'START_RECORD_RIGHT';
+      | 'START_RECORD_RIGHT'
+      | 'WAITING_FOR_RECORD_THE_1ST_SIDE'
+      | 'WAITING_FOR_RECORD_THE_2ND_SIDE'
+      // | 'WAITING_FOR_RECORD_THE_1ST_SIDE'
+      // | 'WAITING_FOR_RECORD_THE_2ND_SIDE'
     measureSideCnt: 0 | 1 | 2; //已测量数量，0，1，2 最多两边（左边和右边）
     isMeasuringLeftEnd: boolean; //测量左侧完成
     isMeasuringRightEnd: boolean; //测量右侧完成

src/setupProxy.js

@@ -19,8 +19,8 @@ module.exports = function (app) {
   app.use(
     '/api',
     createProxyMiddleware({
-      // target: 'http://192.168.1.170:8080/api',
-      target: 'http://127.1.1.0:8080/api',
+      target: 'http://192.168.1.170:8080/api',
+      // target: 'http://127.1.1.0:8080/api',
       changeOrigin: true,
     })
   );

src/store/features/measureSlice.ts

@@ -25,14 +25,18 @@ function isLeftFinished(state: MeasureState) {
     return true;
   return false;
 }
-
+const audioList: HTMLAudioElement[] = []
+function pauseAudio(){
+  audioList.forEach(audio => {
+    audio.pause()
+  })
+}
 
 export const measureSlice = createSlice({
   name: 'measure',
   initialState,
   reducers: {
     updateTaskState: (state, action: PayloadAction<TaskState['data']>) => {
-      // console.log('action.payload---', action.payload)
       if (
         action.payload === 'SPEED_DETECTED' ||
         action.payload === 'END_RECORD'
@@ -44,24 +48,27 @@ export const measureSlice = createSlice({
         state.leftPoints = [];
         state.rightPoints = [];
       }
-      if (action.payload === 'START_RECORD_LEFT') {
-        const audio1 = new Audio('/audio/measuring.mp3');
-        audio1.play().then(() => {});
-      } else if (action.payload === 'FINISH_RECORD_LEFT') {
-        const audio2 = new Audio('/audio/side_end.mp3');
-        audio2.play().then(() => {});
-      } else if (action.payload === 'START_RECORD_RIGHT') {
-        const audio3 = new Audio('/audio/measuring.mp3');
+      if(action.payload === 'WAITING_FOR_RECORD_THE_2ND_SIDE'){
+        const audio3 = new Audio('/audio/ticking.wav');
         audio3.play().then(() => {});
-      } else if (action.payload === 'FINISH_RECORD_RIGHT') {
-        const audio4 = new Audio('/audio/side_end.mp3');
-        audio4.play().then(() => {});
-      } else if (action.payload === 'FINISH_RECORD') {
-        const audio4 = new Audio('/audio/measure_end.mp3');
-        audio4.play().then(() => {});
-      } else if (action.payload === 'WRONG_SIDE') {
-        const audio5 = new Audio('/audio/alert_left.mp3');
-        audio5.play().then(() => {});
+        audioList.push(audio3)
+      } else {
+        if (action.payload === 'START_RECORD_LEFT') {
+          const audio1 = new Audio('/audio/ticking.wav');
+          audio1.play().then(() => {});
+          audioList.push(audio1)
+        } else if (action.payload === 'START_RECORD_RIGHT') {
+          // const audio3 = new Audio('/audio/ticking.wav');
+          // audio3.play().then(() => {});
+          // audioList.push(audio3)
+        } else if (action.payload === 'FINISH_RECORD') {
+          const audio4 = new Audio('/audio/ticking.wav');
+          audio4.play().then(() => {});
+          audioList.push(audio4)
+        } else if (action.payload === 'WRONG_SIDE') {
+          const audio5 = new Audio('/audio/ticking.wav');
+          audio5.play().then(() => {});
+        }
       }
     },
     addNewPoint: (state, action: PayloadAction<TrackRecordSig['data']>) => {
@@ -83,10 +90,10 @@ export const measureSlice = createSlice({
 
     updateMeasureFinish: (state, { payload })=>{
       if(payload.outline1 && payload.outline1.length){
-        state.leftPoints = payload.outline1
+        state.rightPoints = payload.outline1
       }
       if(payload.outline2 && payload.outline2.length){
-        state.rightPoints = payload.outline2
+        state.leftPoints = payload.outline2
       }
     },
   },