diff --git a/src/App.tsx b/src/App.tsx index 60ecb38..7d8719f 100644 --- a/src/App.tsx +++ b/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() { - + {/*

正在同步,请稍候...

-
+
*/} ); } diff --git a/src/pages/Mine2.tsx b/src/pages/Mine2.tsx index 4d79ffd..789ef25 100644 --- a/src/pages/Mine2.tsx +++ b/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() { 设置 } onClick={onSync}> - 同步数据 +
+ 同步基础数据 + {baseState.syncBaseProgress.finish ? ( +
+ {baseState.syncBaseProgress.error ? ( + {baseState.syncBaseProgress.msg} + ) : ( + + {baseState.syncBaseProgress.progress >= 90 ? '同步完成' : ''} + + )} +
+ ) : ( +
+ {`${baseState.syncBaseProgress.progress}%`} + +
+ )} +
diff --git a/src/services/mobileWsType.ts b/src/services/mobileWsType.ts index 94b5029..8740d1b 100644 --- a/src/services/mobileWsType.ts +++ b/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; diff --git a/src/store/features/baseData.ts b/src/store/features/baseData.ts index 3e2a4ea..077dcec 100644 --- a/src/store/features/baseData.ts +++ b/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) => { + 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;