From 578c8e2ff4757cbc979cb7e2ea196a551cff1a05 Mon Sep 17 00:00:00 2001 From: zhangjiming Date: Wed, 26 Mar 2025 18:35:45 +0800 Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E4=BF=A1=E6=81=AFstore?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 12 +++++----- src/components/CustomNavBar.tsx | 49 ++++++++++++++++++++++++++++---------- src/pages/Measure.tsx | 44 ++++++++++++++++++++++------------ src/store/features/contextSlice.ts | 35 +++++++++++++++++++++++++++ src/store/features/measureSlice.ts | 49 ++++++++++++++++++++++++++++++++++++++ src/store/index.ts | 4 +++- src/store/measureSlice.ts | 49 -------------------------------------- 7 files changed, 158 insertions(+), 84 deletions(-) create mode 100644 src/store/features/contextSlice.ts create mode 100644 src/store/features/measureSlice.ts delete mode 100644 src/store/measureSlice.ts diff --git a/src/App.tsx b/src/App.tsx index a5ef158..2ffa166 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,8 +12,9 @@ import icon_4_s from './assets/tabIcon/icon_tab4_s.svg'; import icon_4_u from './assets/tabIcon/icon_tab4_u.svg'; import { bridgeOb } from './utils/bridge'; import { useAppDispatch } from './utils/hooks'; -import { addNewPoint, updateTaskState } from './store/measureSlice'; -import { TrackRecordSig } from './services/wsTypes'; +import { addNewPoint, updateTaskState } from './store/features/measureSlice'; +import { DeviceStatus, TrackRecordSig } from './services/wsTypes'; +import { updateDevice } from './store/features/contextSlice'; const BottomBar = () => { const navigate = useNavigate(); @@ -73,13 +74,12 @@ function App() { if (func === '/measurement-task/event') { if (Array.isArray(data)) return; dispatch(updateTaskState(data.data)); - // switch (data.data) { - // case "START_RECORD_LEFT": - // break; - // } } else if (func === '/measurement-task/point-report') { if (Array.isArray(data)) return; dispatch(addNewPoint(data as TrackRecordSig['data'])); + } else if (func === '/profiler-state/get-state') { + if (Array.isArray(data)) return; + dispatch(updateDevice(data as DeviceStatus['data'])); } }); return () => subscription.unsubscribe(); diff --git a/src/components/CustomNavBar.tsx b/src/components/CustomNavBar.tsx index 09bafd2..9f1b1ee 100644 --- a/src/components/CustomNavBar.tsx +++ b/src/components/CustomNavBar.tsx @@ -2,8 +2,12 @@ import icon_bluetooth from '../assets/icon_bluetooth.svg'; import icon_arr_d from '../assets/icon_arr_down.svg'; import './CustomNavBar.scss'; import { useState } from 'react'; +import { useAppSelector } from '../utils/hooks'; +import { useNavigate } from 'react-router-dom'; export default function CustomNavBar({ title }: { title: string }) { + const navigate = useNavigate(); + const device = useAppSelector((state) => state.context.device); const [showDetail, setShowDetail] = useState(false); return ( @@ -11,23 +15,42 @@ export default function CustomNavBar({ title }: { title: string }) { {/** 温度，水平仪 */}
- 温度: 31.2°C - X轴倾斜: -0.496 - Y轴倾斜: 3.005 + style={{ top: device.isConnected && showDetail ? '100%' : 0, transition: 'top 300ms' }} + > + 温度: {device.temperature}°C + X轴倾斜: {device.inclinatorX} + Y轴倾斜: {device.inclinatorY}
{/** 导航栏 */}

{title}

-
setShowDetail(!showDetail)}> -
78%
- icon - 设备已连接 - arr -
+ {/** 蓝牙连接状态 */} + {device.isConnected ? ( +
setShowDetail(!showDetail)} + > +
{device.power}%
+ icon + 设备已连接 + arr +
+ ) : ( +
navigate('/home/bluetooth')} + > + icon + 设备未连接 +
+ )}
); diff --git a/src/pages/Measure.tsx b/src/pages/Measure.tsx index 45d83be..0e4c6c6 100644 --- a/src/pages/Measure.tsx +++ b/src/pages/Measure.tsx @@ -10,9 +10,8 @@ import { rail6001, railTypes } from '../utils/constant'; import RailTypeBtn from '../components/RailTypeBtn'; import { Picker } from 'antd-mobile'; -import { bridgeOb } from '../utils/bridge'; import { useAppDispatch, useAppSelector } from '../utils/hooks'; -import { updateTaskState } from '../store/measureSlice'; +import { updateTaskState } from '../store/features/measureSlice'; declare global { interface Window { @@ -42,18 +41,7 @@ export default function Measure() { const [railPickerVisible, setRailPickerVisible] = useState(false); const [railId, setRailId] = useState<(number | string | null)[]>([1]); - const onStartClick = () => { - // if (typeof window.ReactNativeWebView !== "undefined") { - // window.ReactNativeWebView.postMessage(JSON.stringify(["add", 2, 3])); - // } else { - // console.log("当前环境不支持 React Native WebView"); - // } - dispatch(updateTaskState('START_RECORD_SIG')); - }; - const onSaveClick = () => { - navigate('/measure/save'); - }; - + // 绘制轨型基准线 useEffect(() => { const benchmarkShapes = JSON.parse(rail6001.points) as BenchmarkShape[]; if (canvasRef.current) { @@ -61,6 +49,19 @@ export default function Measure() { } }, []); + // 绘制测量坐标线 + useEffect(() => { + if (canvasRef.current) { + canvasRef.current.setMeasurementDataLeft(measureState.leftPoints); + } + }, [measureState.leftPoints]); + + useEffect(() => { + if (canvasRef.current) { + canvasRef.current.setMeasurementDataLeft(measureState.rightPoints); + } + }, [measureState.rightPoints]); + // 播放音频 步骤 useEffect(() => { if (measureState.taskState === 'START_RECORD_LEFT') { @@ -81,6 +82,19 @@ export default function Measure() { } }, [measureState.taskState]); + const onSaveClick = () => { + navigate('/measure/save'); + }; + + const onStartClick = () => { + // if (typeof window.ReactNativeWebView !== "undefined") { + // window.ReactNativeWebView.postMessage(JSON.stringify(["add", 2, 3])); + // } else { + // console.log("当前环境不支持 React Native WebView"); + // } + dispatch(updateTaskState('START_RECORD_SIG')); + }; + function stepState(step: StepName): StepState { if (!measureState.taskState) { return 'none'; @@ -170,7 +184,7 @@ export default function Measure() {
- 开始测量 + {measureState.leftPoints.length > 0 ? '重新测量' : '开始测量'}
保存 diff --git a/src/store/features/contextSlice.ts b/src/store/features/contextSlice.ts new file mode 100644 index 0000000..ba342d7 --- /dev/null +++ b/src/store/features/contextSlice.ts @@ -0,0 +1,35 @@ +import { createSlice, PayloadAction } from '@reduxjs/toolkit'; +import { DeviceStatus } from '../../services/wsTypes'; + +interface ContextState { + device: DeviceStatus['data']; + currRailTypeId: number; +} + +const initialState: ContextState = { + device: { + isConnected: true, //是否链接 + power: 60, //电量 + inclinatorX: 0.276, //x轴倾斜 + inclinatorY: 3.019, //y轴倾斜 + temperature: 32.026, //温度 + }, + // 当前选择的轨型 + currRailTypeId: 1, +}; + +export const contextSlice = createSlice({ + name: 'context', + initialState, + reducers: { + updateDevice: (state, action: PayloadAction) => { + state.device = action.payload; + }, + updateRailTypeId: (state, action: PayloadAction) => { + state.currRailTypeId = action.payload; + }, + }, +}); + +export const { updateDevice, updateRailTypeId } = contextSlice.actions; +export default contextSlice.reducer; diff --git a/src/store/features/measureSlice.ts b/src/store/features/measureSlice.ts new file mode 100644 index 0000000..d9ff0db --- /dev/null +++ b/src/store/features/measureSlice.ts @@ -0,0 +1,49 @@ +import { createSlice, PayloadAction } from '@reduxjs/toolkit'; +import { TaskState, TrackRecordSig } from '../../services/wsTypes'; + +export interface MeasureState { + taskState?: TaskState['data']; + // leftFinished: boolean; + leftPoints: TrackRecordSig['data'][]; + rightPoints: TrackRecordSig['data'][]; +} +const initialState: MeasureState = { + taskState: undefined, + // leftFinished: false, + leftPoints: [], + rightPoints: [], +}; + +function isLeftFinished(state: MeasureState) { + if ( + state.taskState === 'FINISH_RECORD_LEFT' || + state.taskState === 'START_RECORD_RIGHT' || + state.taskState === 'FINISH_RECORD_RIGHT' + ) + return true; + return false; +} + +export const measureSlice = createSlice({ + name: 'measure', + initialState, + reducers: { + updateTaskState: (state, action: PayloadAction) => { + state.taskState = action.payload; + if (action.payload === 'START_RECORD_SIG' || action.payload === 'WRONG_SIDE') { + state.leftPoints = []; + state.rightPoints = []; + } + }, + addNewPoint: (state, action: PayloadAction) => { + if (isLeftFinished(state)) { + state.rightPoints.push(action.payload); + } else { + state.leftPoints.push(action.payload); + } + }, + }, +}); + +export const { updateTaskState, addNewPoint } = measureSlice.actions; +export default measureSlice.reducer; diff --git a/src/store/index.ts b/src/store/index.ts index 0251611..ed69571 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,10 +1,12 @@ import { configureStore } from '@reduxjs/toolkit'; -import measureSlice from './measureSlice'; +import measureSlice from './features/measureSlice'; +import contextSlice from './features/contextSlice'; // configureStore创建一个redux数据 const store = configureStore({ // 合并多个Slice reducer: { measure: measureSlice, + context: contextSlice, }, }); diff --git a/src/store/measureSlice.ts b/src/store/measureSlice.ts deleted file mode 100644 index e5245bd..0000000 --- a/src/store/measureSlice.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { createSlice, PayloadAction } from '@reduxjs/toolkit'; -import { TaskState, TrackRecordSig } from '../services/wsTypes'; - -export interface MeasureState { - taskState?: TaskState['data']; - // leftFinished: boolean; - leftPoints: TrackRecordSig['data'][]; - rightPoints: TrackRecordSig['data'][]; -} -const initialState: MeasureState = { - taskState: undefined, - // leftFinished: false, - leftPoints: [], - rightPoints: [], -}; - -function isLeftFinished(state: MeasureState) { - if ( - state.taskState === 'FINISH_RECORD_LEFT' || - state.taskState === 'START_RECORD_RIGHT' || - state.taskState === 'FINISH_RECORD_RIGHT' - ) - return true; - return false; -} - -export const measureSlice = createSlice({ - name: 'measure', - initialState, - reducers: { - updateTaskState: (state, action: PayloadAction) => { - state.taskState = action.payload; - if (action.payload === 'START_RECORD_SIG' || action.payload === 'WRONG_SIDE') { - state.leftPoints = []; - state.rightPoints = []; - } - }, - addNewPoint: (state, action: PayloadAction) => { - if (isLeftFinished(state)) { - state.rightPoints.push(action.payload); - } else { - state.leftPoints.push(action.payload); - } - }, - }, -}); - -export const { updateTaskState, addNewPoint } = measureSlice.actions; -export default measureSlice.reducer;