rebase

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();

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<string | null>(wsReadyState)
 		const showBlueImg = () => {
-			console.log('wsState===', wsState, typeof wsState)
-			if(wsState === '0'){
+			if(!isConnect){
 				return <Popover content={getBtList()} title="可连接设备">
 									<div ></div>
 									<img src={bluetooth_nc} alt="" className="ext-base ml-2 h-6" />
@@ -29,7 +35,17 @@ export default function Header() {
 			}
 		}
 
-	const context = useAppSelector(store => store.context);
+	let [bluetoothList, setbluetoothList] = useState<Device[]>([])
+	//获取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 = <div>
 				 {bluetoothList.map(item => {
 						return <div className="mt-[1rem]" onClick={connectBt}>
-							{/* <Button type="link">{item.name}</Button> */}
+							<Button type="link">{item.name}</Button>
 						</div>
 					})}
 			</div>
-		}else if(isConnect === 1){
-			Dom = <div>
-				正在匹配
-			</div>
 		}
 		return Dom
 	}
@@ -83,8 +95,8 @@ export default function Header() {
 					<div className="ml-[10px]">设备已连接</div>
 				</div>
 				<div className="pl-[15px]">
-					{/* <div className="mt-[1rem]">型号：{bluetoothInfo.type}</div>
-					<div className="mt-[1rem]">电量：{bluetoothInfo.power}</div> */}
+					<div className="mt-[1rem]">型号：{bluetoothInfo.connectPort}</div>
+					{/* <div className="mt-[1rem]">电量：{bluetoothInfo.power}</div> */}
 				</div>
 			</div>
 		</div>
@@ -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 (
 		<>

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<BaseResponse<{list:Device[]}>>({
+    url: "/measurement-data/getDevice",
+    method: "POST",
+  });
+}

src/services/measure/type.ts

@@ -30,3 +30,7 @@ export type AnalyzeAngle = {
 export type AnalyzeResult = {
   angles: AnalyzeAngle[];
 };
+export type Device ={
+  name: string;
+  id:number
+}

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;

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;

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
 	},
 });