显示同步进度

src/App.tsx

@@ -15,7 +15,7 @@ import { useAppDispatch, useAppSelector } from './utils/hooks';
 import { addNewPoint, updateTaskState } from './store/features/measureSlice';
 import { updateBleList, updateDevice, updateSyncProgress } from './store/features/contextSlice';
 import { createWebSocket, sharedWsUrl } from './services/socket';
-import { fetchOrgTree, fetchRailTypes, syncBaseData } from './store/features/baseData';
+import { fetchOrgTree, fetchRailTypes, syncBaseData, updateSyncBaseProgress } from './store/features/baseData';
 
 const BottomBar = () => {
   const navigate = useNavigate();
@@ -90,6 +90,8 @@ function App() {
         dispatch(updateBleList(datagram.data));
       } else if (datagram.type === 'sync-progress') {
         dispatch(updateSyncProgress(datagram.data));
+      } else if (datagram.type === 'update-base-progress') {
+        dispatch(updateSyncBaseProgress(datagram.data));
       }
     });
     return () => subscription.unsubscribe();
@@ -145,12 +147,12 @@ function App() {
         <SafeArea position="bottom" />
       </div>
 
-      <Mask visible={baseState.syncingBaseData}>
+      {/* <Mask visible={baseState.syncingBaseData}>
         <div className="flex flex-col items-center gap-4 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
           <SpinLoading color="white" />
           <p className="text-white text-sm">正在同步，请稍候...</p>
         </div>
-      </Mask>
+      </Mask> */}
     </>
   );
 }

src/pages/Mine2.tsx

@@ -1,13 +1,14 @@
-import { List, NavBar, Toast } from 'antd-mobile';
+import { List, NavBar, SpinLoading, Toast } from 'antd-mobile';
 
 import { UnorderedListOutline, SetOutline, UploadOutline, LoopOutline } from 'antd-mobile-icons';
 import { useNavigate } from 'react-router-dom';
-import { useAppDispatch } from '../utils/hooks';
+import { useAppDispatch, useAppSelector } from '../utils/hooks';
 import { syncBaseData } from '../store/features/baseData';
 
 export default function Mine2() {
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
+  const baseState = useAppSelector((state) => state.baseData);
 
   const onSync = async () => {
     const res = await dispatch(syncBaseData()).unwrap();
@@ -35,7 +36,25 @@ export default function Mine2() {
             设置
           </List.Item>
           <List.Item prefix={<LoopOutline />} onClick={onSync}>
-            同步数据
+            <div className="flex justify-between">
+              <span>同步基础数据</span>
+              {baseState.syncBaseProgress.finish ? (
+                <div>
+                  {baseState.syncBaseProgress.error ? (
+                    <span className="text-xs text-[red]">{baseState.syncBaseProgress.msg}</span>
+                  ) : (
+                    <span className="text-xs text-[green]">
+                      {baseState.syncBaseProgress.progress >= 90 ? '同步完成' : ''}
+                    </span>
+                  )}
+                </div>
+              ) : (
+                <div className="flex items-center gap-2">
+                  <span className="text-xs">{`${baseState.syncBaseProgress.progress}%`}</span>
+                  <SpinLoading style={{ '--size': '16px' }} />
+                </div>
+              )}
+            </div>
           </List.Item>
         </List>
       </div>

src/services/mobileWsType.ts

@@ -55,10 +55,21 @@ export type SyncItemFinish = {
   };
 };
 
+export type SyncBaseStatus = {
+  data: {
+    msg: string;
+    progress: number; //百分比
+    finish: boolean; //不管是错误，还是正常，结束同步都为true
+    error: boolean; //finish 为true的时候，判断一下是否有error
+  };
+  type: 'update-base-progress';
+};
+
 export type MobileDatagram =
   | PeripheralStatus
   | MeasureEvent
   | MeasurePoint
   | BleList
   | SyncProgress
-  | SyncItemFinish;
+  | SyncItemFinish
+  | SyncBaseStatus;

src/store/features/baseData.ts

@@ -5,17 +5,25 @@ import { labeledKtjOrgs } from '../../utils/helper';
 import { ktjOrgs } from '../../utils/constant';
 import Bridge from '../../utils/bridge';
 import { RootState } from '..';
+import { SyncBaseStatus } from '../../services/mobileWsType';
 
 interface BaseDataState {
   ktjOrgs: KTJOrg[];
   railTypes: RailType[];
-  syncingBaseData: boolean;
+  // syncingBaseData: boolean;
+  syncBaseProgress: SyncBaseStatus['data'];
 }
 
 const initialState: BaseDataState = {
   ktjOrgs: ktjOrgs as KTJOrg[],
   railTypes: [],
-  syncingBaseData: false,
+  // syncingBaseData: false,
+  syncBaseProgress: {
+    msg: '',
+    progress: 0,
+    finish: true,
+    error: false,
+  },
 };
 
 export const fetchRailTypes = createAsyncThunk('base/fetchRailTypes', async (_, thunkAPI) => {
@@ -45,17 +53,20 @@ export const baseDataSlice = createSlice({
         r.calPoints = action.payload.calPoints;
       }
     },
+    updateSyncBaseProgress: (state, action: PayloadAction<SyncBaseStatus['data']>) => {
+      state.syncBaseProgress = action.payload;
+    },
   },
   extraReducers: (builder) => {
     builder.addCase(fetchRailTypes.fulfilled, (state, action) => {
       state.railTypes = action.payload || [];
     });
-    builder.addCase(syncBaseData.pending, (state) => {
-      state.syncingBaseData = true;
-    });
-    builder.addCase(syncBaseData.fulfilled, (state) => {
-      state.syncingBaseData = false;
-    });
+    // builder.addCase(syncBaseData.pending, (state) => {
+    //   state.syncingBaseData = true;
+    // });
+    // builder.addCase(syncBaseData.fulfilled, (state) => {
+    //   state.syncingBaseData = false;
+    // });
     builder.addCase(fetchOrgTree.fulfilled, (state, action) => {
       if (action.payload.success) {
         state.ktjOrgs = action.payload.data;
@@ -64,7 +75,7 @@ export const baseDataSlice = createSlice({
   },
 });
 
-export const { updateRailPoints } = baseDataSlice.actions;
+export const { updateRailPoints, updateSyncBaseProgress } = baseDataSlice.actions;
 export default baseDataSlice.reducer;
 
 export const selectKtjOrgs = (state: RootState) => state.baseData.ktjOrgs;