优化测量后廓形左右线变一线并添加loading状态

src/pages/Measure.tsx

@@ -87,6 +87,25 @@ export default function Measure() {
     }
   }, [measureState.rightPoints]);
 
+  // 左右两测量完成，转换后的测量线(两线合一线)
+  useEffect(() => {
+    if (canvasRef.current) {
+      canvasRef.current?.setMeasurementCalibrationData(measureState.measureData);
+      // setshowCalibration(true);
+      setShowMeasureFinish(true)
+      setCaloading(false)
+    }
+  }, [measureState.measureData])
+
+  useEffect(() => {
+    if(measureState.measureStatus ===  'FINISH_RECORD'){
+      setCaloading(true)
+    }
+    else {
+      setCaloading(false)
+    }
+  }, [measureState.measureStatus])
+
   const onSaveClick = () => {
     dispatch(updateMeasureData(newMeasureData));
     navigate('/measure/save');
@@ -94,6 +113,7 @@ export default function Measure() {
 
   const [caloading, setCaloading] = useState(false);
   const [showCalibration, setshowCalibration] = useState(false);
+  const [showMeasureFinish, setShowMeasureFinish] = useState(false);
   const onCalibrationBtnClick = () => {
     setCaloading(true);
     Bridge.alignPoints({ railSize: railSize || 'GX-60' })
@@ -410,7 +430,7 @@ export default function Measure() {
               <Mask opacity="thin" className="h-[100vh] flex justify-center items-center">
                 <div style={{ margin: '45%' }}>
                   <SpinLoading color="#5c92b4" />
-                  <div className="w-[100px] mt-[20px] text-[#5c92b4]">正在校准...</div>
+                  <div className="w-[100px] mt-[20px] text-[#5c92b4]">正在转换...</div>
                 </div>
               </Mask>
             )}
@@ -431,7 +451,7 @@ export default function Measure() {
                 showScale={false}
                 scaleInterval={1}
                 showCoordinates={false}
-                showCalibration={showCalibration}
+                showCalibration={showCalibration || showMeasureFinish}
                 ref={canvasRef}
               />
 

src/store/features/measureSlice.ts

@@ -6,14 +6,16 @@ export interface MeasureState {
   // leftFinished: boolean;
   leftPoints: TrackRecordSig['data'][];
   rightPoints: TrackRecordSig['data'][];
-  measureData:[]
+  measureData:[],
+  measureStatus: string
 }
 const initialState: MeasureState = {
   taskState: undefined,
   // leftFinished: false,
   leftPoints: [],
   rightPoints: [],
-  measureData: []
+  measureData: [],
+  measureStatus: '',
 };
 
 function isLeftFinished(state: MeasureState) {
@@ -31,6 +33,7 @@ export const measureSlice = createSlice({
   initialState,
   reducers: {
     updateTaskState: (state, action: PayloadAction<TaskState['data']>) => {
+      console.log('action.payload---', action.payload)
       if (
         action.payload === 'SPEED_DETECTED' ||
         action.payload === 'END_RECORD'
@@ -48,6 +51,7 @@ export const measureSlice = createSlice({
       }else if(action.payload === 'WAITING_FOR_RECORD_THE_2ND_SIDE') {
         status = 2
       }
+      state.measureStatus = action.payload
       if((['START_RECORD_LEFT', 'START_RECORD_RIGHT'].includes(action.payload) && status === 1) || (['FINISH_RECORD_LEFT', 'FINISH_RECORD_RIGHT'].includes(action.payload) && status === 1) || ['FINISH_RECORD'].includes(action.payload)) {
          const audio = new Audio('/audio/ticking.wav');
         audio.play().then(() => {});
@@ -71,12 +75,14 @@ export const measureSlice = createSlice({
     },
 
     updateMeasureFinish: (state, { payload })=>{
-      if(payload.outline1 && payload.outline1.length){
-        state.rightPoints = payload.outline1
-      }
-      if(payload.outline2 && payload.outline2.length){
-        state.leftPoints = payload.outline2
-      }
+      console.log('payload--', payload)
+      // if(payload.outline1 && payload.outline1.length){
+      //   state.rightPoints = payload.outline1
+      // }
+      // if(payload.outline2 && payload.outline2.length){
+      //   state.leftPoints = payload.outline2
+      // }
+      state.measureData = payload
     },
   },
 });