优化测量页面

src/App.tsx

@@ -4,7 +4,7 @@ import { Toast } from 'antd-mobile';
 
 import Bridge, { bridgeOb, emitBridgeEvent } from './utils/bridge';
 import { useAppDispatch, useAppSelector } from './utils/hooks';
-import { addNewPoint, updateTaskState } from './store/features/measureSlice';
+import { addNewPoint, updateTaskState, updateMeasureFinish } from './store/features/measureSlice';
 import {
   refreshStationList,
   updateBleList,
@@ -46,6 +46,9 @@ function App() {
         dispatch(updateSyncProgress(datagram.data));
       } else if (datagram.type === 'update-base-progress') {
         dispatch(updateSyncBaseProgress(datagram.data));
+      }else if (datagram.type === 'measure-finished') {
+        console.log('measure-finished---------', datagram.data)
+        dispatch(updateMeasureFinish(datagram.data));
       }
     });
     return () => subscription.unsubscribe();

src/pages/Measure.tsx

@@ -466,12 +466,12 @@ export default function Measure() {
 
           {/**测量状态区 */}
           <section className="grid grid-cols-2 gap-[10px]">
-            <StepItem state={stepState('left_ready')} text={'移到顶部停留2秒'} />
-            <StepItem state={stepState('right_ready')} text={'移到顶部停留2秒'} />
-            <StepItem state={stepState('left_begin')} text={'开始测量左侧'} />
-            <StepItem state={stepState('right_begin')} text={'开始测量右侧'} />
-            <StepItem state={stepState('left_end')} text={'左侧测量完成'} />
-            <StepItem state={stepState('right_end')} text={'右侧测量完成'} />
+            <StepItem state={stepState('left_ready')} text={'等待测量'} />
+            <StepItem state={stepState('right_ready')} text={'等待测量另一侧'} />
+            <StepItem state={stepState('left_begin')} text={'正在进行测量'} />
+            <StepItem state={stepState('right_begin')} text={'正在进行测量'} />
+            <StepItem state={stepState('left_end')} text={'一侧测量完成'} />
+            <StepItem state={stepState('right_end')} text={'测量已完成'} />
           </section>
         </main>
       </div>

src/services/mobileWsType.ts

@@ -66,6 +66,18 @@ export type SyncBaseStatus = {
   type: 'update-base-progress';
 };
 
+type Points = {
+  x: number;
+  y: number;
+}
+export type MeasurePointFinish = {
+  type: 'measure-finished';
+  data: {
+    outline1: Points[];
+    outline2: Points[];
+  };
+};
+
 export type MobileDatagram =
   | PeripheralStatus
   | MeasureEvent
@@ -73,4 +85,5 @@ export type MobileDatagram =
   | BleList
   | SyncProgress
   | SyncItemFinish
-  | SyncBaseStatus;
+  | SyncBaseStatus
+  | MeasurePointFinish;

src/store/features/measureSlice.ts

@@ -44,16 +44,16 @@ export const measureSlice = createSlice({
         state.rightPoints = [];
       }
       if (action.payload === 'START_RECORD_LEFT') {
-        const audio1 = new Audio('/audio/begin_left.mp3');
+        const audio1 = new Audio('/audio/measuring.mp3');
         audio1.play().then(() => {});
       } else if (action.payload === 'FINISH_RECORD_LEFT') {
-        const audio2 = new Audio('/audio/end_left.mp3');
+        const audio2 = new Audio('/audio/side_end.mp3');
         audio2.play().then(() => {});
       } else if (action.payload === 'START_RECORD_RIGHT') {
-        const audio3 = new Audio('/audio/begin_right.mp3');
+        const audio3 = new Audio('/audio/measuring.mp3');
         audio3.play().then(() => {});
       } else if (action.payload === 'FINISH_RECORD_RIGHT') {
-        const audio4 = new Audio('/audio/end_right.mp3');
+        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');
@@ -75,9 +75,14 @@ export const measureSlice = createSlice({
 
     updateMeasureData:(state, { payload })=>{
       state.measureData = payload
-    }
+    },
+
+    updateMeasureFinish: (state, { payload })=>{
+      state.rightPoints = payload.outline1
+      state.leftPoints = payload.outline2
+    },
   },
 });
 
-export const { updateTaskState, addNewPoint, resetState, updateMeasureData } = measureSlice.actions;
+export const { updateTaskState, addNewPoint, resetState, updateMeasureData, updateMeasureFinish } = measureSlice.actions;
 export default measureSlice.reducer;