diff --git a/src/App.tsx b/src/App.tsx index f9d3a7d..1bfa511 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,6 +9,7 @@ import SideMenu from "./components/SideMenu"; import { createWebSocket, sharedWsUrl } from "./services/socket"; import { updateUser } from "./store/features/contextSlice"; import { useAppDispatch } from "./utils/hooks"; +import { updateDeviceState } from "./store/device/deviceState"; const { Header, Footer, Sider, Content } = Layout; function App() { @@ -27,6 +28,8 @@ function App() { } else { navigate("/login"); } + }else if(data.messageType === 'STATE'){ + dispatch(updateDeviceState(data.data)); } }); wsClient.connect(); diff --git a/src/components/Header.tsx b/src/components/Header.tsx index a5e172e..d6e2f27 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -5,19 +5,25 @@ import icon_avatar from "../assets/icon_avatar.svg"; import icon_logout from "../assets/icon_logout.svg"; import check_mark from "../assets/check_mark.svg"; import icon_pwd from "../assets/icon_pwd.svg"; -import { useState } from "react"; +import { useState, useEffect } from "react"; +import {updateDeviceState } from '../store/device/deviceState'; // import { bluetoothList, bluetoothInfo } from '../mock/recordList' import { Dropdown, MenuProps, message, Button, Popover } from "antd"; import { logout } from "../services/user/user"; +import { getDeviceInfo } from "../services/device/deviceState" import "./bluetooth.scss"; import { useAppSelector } from "../utils/hooks"; +import { Device } from "../services/measure/type"; export default function Header() { + console.log('updateDeviceState---', updateDeviceState) + let [isConnect, setIsConnect] = useState(false) + //@ts-ignoref + const deviceState = useSelector(store => store.deviceState); + const [bluetoothInfo, setBluetoothInfo] = useState(deviceState) + console.log('deviceState---',deviceState) //获取当前websocet的状态 - let wsReadyState = localStorage.getItem('wsReadyState') - let [wsState, setWsState] = useState(wsReadyState) const showBlueImg = () => { - console.log('wsState===', wsState, typeof wsState) - if(wsState === '0'){ + if(!isConnect){ return
@@ -29,7 +35,17 @@ export default function Header() { } } - const context = useAppSelector(store => store.context); + let [bluetoothList, setbluetoothList] = useState([]) + //获取mock数据 + useEffect(()=>{ + getDeviceInfo().then(res => { + console.log('res===', res) + setbluetoothList(res.data.list) + }) + }) + + //@ts-ignore + const context = useSelector(store => store.context); const [messageApi, contextHolder] = message.useMessage(); const items: MenuProps["items"] = [ @@ -55,21 +71,17 @@ export default function Header() { }, ]; - let [bluetoothList, setbluetoothList] = useState([]) + const getBtList = () => { let Dom = null - if(isConnect === 0){ + if(!isConnect){ Dom =
{bluetoothList.map(item => { return
- {/* */} +
})}
- }else if(isConnect === 1){ - Dom =
- 正在匹配 -
} return Dom } @@ -83,8 +95,8 @@ export default function Header() {
设备已连接
- {/*
型号：{bluetoothInfo.type}
-
电量：{bluetoothInfo.power}
*/} +
型号：{bluetoothInfo.connectPort}
+ {/*
电量：{bluetoothInfo.power}
*/}
@@ -92,19 +104,17 @@ export default function Header() { //断开蓝牙连接 const onDisconnectBt = ()=> { - setWsState('0') - setIsConnect(0) + setIsConnect(false) } const connectBt = () => { - setIsConnect(1) + setIsConnect(true) setTimeout(()=>{ - setWsState('1') },1000) } - let [isConnect, setIsConnect] = useState(0) + return ( <> diff --git a/src/services/device/deviceState.ts b/src/services/device/deviceState.ts new file mode 100644 index 0000000..563f3ee --- /dev/null +++ b/src/services/device/deviceState.ts @@ -0,0 +1,9 @@ +import httpRequest, { type BaseResponse } from "../httpRequest"; +import type { Device } from "../../services/measure/type"; + +export function getDeviceInfo() { + return httpRequest>({ + url: "/measurement-data/getDevice", + method: "POST", + }); +} \ No newline at end of file diff --git a/src/services/measure/type.ts b/src/services/measure/type.ts index d10467b..e8bb58e 100644 --- a/src/services/measure/type.ts +++ b/src/services/measure/type.ts @@ -30,3 +30,7 @@ export type AnalyzeAngle = { export type AnalyzeResult = { angles: AnalyzeAngle[]; }; +export type Device ={ + name: string; + id:number +} diff --git a/src/services/wsTypes.ts b/src/services/wsTypes.ts index 9f38594..b85515c 100644 --- a/src/services/wsTypes.ts +++ b/src/services/wsTypes.ts @@ -76,4 +76,15 @@ export const defaultMeasureState = { inStartMeasuringPos: true, //是否在允许开始测量的位置 }; -export type Datagram = TrackRecordSig | TaskState | ContextMessage | MeasureState; +export type ChannelMessage = { + messageType: "STATE"; + data: { + isConnect: boolean; + connectPort: string; + sn: string; + descriptivePortName:string; + }; + path: "/subdevice/uartchanel/get-channel-state"; +}; + +export type Datagram = TrackRecordSig | TaskState | ContextMessage | MeasureState | ChannelMessage; diff --git a/src/store/device/deviceState.ts b/src/store/device/deviceState.ts new file mode 100644 index 0000000..0671170 --- /dev/null +++ b/src/store/device/deviceState.ts @@ -0,0 +1,32 @@ +// counterSlice.ts 文件 + +import { createSlice } from "@reduxjs/toolkit"; +import { ChannelMessage } from "../../services/wsTypes"; + +const initialState: ChannelMessage["data"] = { + "isConnect": false, //是否连接 + "connectPort": "COM4",//串口名 + "sn": "",//连接的设备ID + "descriptivePortName": "COM4 serial ch340" //用于详细系 +}; + +// 创建一个 Slice +export const deviceStateSlice = createSlice({ + name: "deviceState", + initialState, + // 定义 reducers 并生成关联的操作 + reducers: { + // 定义一个加的方法 + updateDeviceState: (state, { payload }) => { + state.isConnect = payload.isConnect; + state.connectPort = payload.connectPort; + state.sn = payload.sn; + state.descriptivePortName = payload.descriptivePortName; + }, + }, +}); +// 导出加减的方法 +export const { updateDeviceState } = deviceStateSlice.actions; + +// 默认导出 +export default deviceStateSlice.reducer; diff --git a/src/store/index.ts b/src/store/index.ts index 81fcf23..2a30ba6 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -3,13 +3,14 @@ import { configureStore } from "@reduxjs/toolkit"; import counterSlice from "./features/counterSlice"; import contextSlice from "./features/contextSlice"; - +import deviceStateSlice from "./device/deviceState"; // configureStore创建一个redux数据 const store = configureStore({ // 合并多个Slice reducer: { counter: counterSlice, context: contextSlice, + deviceState: deviceStateSlice }, });