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/measureSlice.ts b/src/store/features/measureSlice.ts similarity index 95% rename from src/store/measureSlice.ts rename to src/store/features/measureSlice.ts index e5245bd..d9ff0db 100644 --- a/src/store/measureSlice.ts +++ b/src/store/features/measureSlice.ts @@ -1,5 +1,5 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'; -import { TaskState, TrackRecordSig } from '../services/wsTypes'; +import { TaskState, TrackRecordSig } from '../../services/wsTypes'; export interface MeasureState { taskState?: TaskState['data']; 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, }, });