diff --git a/public/audio/begin_left.mp3 b/public/audio/begin_left.mp3 new file mode 100644 index 0000000..084b48e Binary files /dev/null and b/public/audio/begin_left.mp3 differ diff --git a/public/audio/begin_right.mp3 b/public/audio/begin_right.mp3 new file mode 100644 index 0000000..7d741aa Binary files /dev/null and b/public/audio/begin_right.mp3 differ diff --git a/public/audio/end_left.mp3 b/public/audio/end_left.mp3 new file mode 100644 index 0000000..965b171 Binary files /dev/null and b/public/audio/end_left.mp3 differ diff --git a/public/audio/end_right.mp3 b/public/audio/end_right.mp3 new file mode 100644 index 0000000..cd7bd18 Binary files /dev/null and b/public/audio/end_right.mp3 differ diff --git a/src/App.tsx b/src/App.tsx index 6fbf69c..f5a9553 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,6 +10,7 @@ import { createWebSocket, sharedWsUrl } from "./services/socket"; import { useAppDispatch } from "./utils/hooks"; import { updateDeviceState } from "./store/device/deviceState"; import zhCN from 'antd/lib/locale/zh_CN'; // 引入中文语言包 +import { updateDevice } from "./store/features/contextSlice"; const { Header, Footer, Sider, Content } = Layout; function App() { @@ -27,8 +28,11 @@ function App() { // } else { // navigate("/login"); // } - } else if (data.messageType === "STATE") { + } else if (data.messageType === "STATE" && data.path === "/subdevice/uartchanel/get-channel-state") { dispatch(updateDeviceState(data.data)); + } else if (data.messageType === "STATE" && data.path === "/profiler-state/get-state") { + // console.log(data.data); + dispatch(updateDevice(data.data)); } }); wsClient.connect(); @@ -60,7 +64,7 @@ function App() { return (
- + diff --git a/src/assets/icon_battery.svg b/src/assets/icon_battery.svg new file mode 100644 index 0000000..619445b --- /dev/null +++ b/src/assets/icon_battery.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 19d5929..da6dc4c 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -2,6 +2,7 @@ import { useSelector } from "react-redux"; import bluetooth_nc from "../assets/bluetooth_nc.svg"; import bluetooth_c from "../assets/bluetooth_c.svg"; import icon_usb from "../assets/icon_usb.svg"; +import icon_battery from "../assets/icon_battery.svg"; import icon_avatar from "../assets/icon_avatar.svg"; import icon_logout from "../assets/icon_logout.svg"; import check_mark from "../assets/check_mark.svg"; @@ -9,68 +10,74 @@ import { useState, useEffect } from "react"; import { Dropdown, MenuProps, message, Button, Popover } from "antd"; import { logout } from "../services/user/user"; import { useNavigate } from "react-router"; -import { useAppDispatch } from "../utils/hooks"; +import { useAppDispatch, useAppSelector } from "../utils/hooks"; import { updateUser } from "../store/features/contextSlice"; import "./bluetooth.scss"; -import { loginUser } from '../services/wsTypes'; +import { loginUser } from "../services/wsTypes"; export default function Header() { - const navigate = useNavigate(); - const dispatch = useAppDispatch(); - - //@ts-ignoref - const deviceState = useSelector(store => store.deviceState); - let [isConnect, setIsConnect] = useState(deviceState.isConnect)// - const [bluetoothInfo, setBluetoothInfo] = useState(deviceState) - //获取当前websocet的状态 - const showBlueImg = () => { - if(isConnect){ - return - - - } - return null; - // if(!isConnect){ - // return - //
- // - // - // }else { - // return - // - // - // } + const navigate = useNavigate(); + const dispatch = useAppDispatch(); + const deviceInfo = useAppSelector(store => store.context.device); + const deviceState = useAppSelector(store => store.deviceState); + let [isConnect, setIsConnect] = useState(true); + const [bluetoothInfo, setBluetoothInfo] = useState(deviceState); + //获取当前websocet的状态 + const showBlueImg = () => { + if (isConnect) { + return ( + +
+ +
+ + ); } + return null; + // if(!isConnect){ + // return + //
+ // + // + // }else { + // return + // + // + // } + }; - let list = [{ - name:'Kdkow_1', - id:'1', - },{ - name:'llwoa_2', - id:'2', - }] - let [bluetoothList, setbluetoothList] = useState(list) + let list = [ + { + name: "Kdkow_1", + id: "1", + }, + { + name: "llwoa_2", + id: "2", + }, + ]; + let [bluetoothList, setbluetoothList] = useState(list); //获取mock数据 - useEffect(()=>{ + useEffect(() => { // getDeviceInfo().then(res => { // console.log('res===', res) // //@ts-ignore // setbluetoothList(res.data.list) // }) - if(context.user.loginUser && context.user.loginUser.nickName){ - setNickname(context.user.loginUser.nickName) - }else{ - const user = localStorage.getItem('user') - if(user){ - let userData = JSON.parse( user || '') - setNickname(userData.nickname) + if (context.user.loginUser && context.user.loginUser.nickName) { + setNickname(context.user.loginUser.nickName); + } else { + const user = localStorage.getItem("user"); + if (user) { + let userData = JSON.parse(user || ""); + setNickname(userData.nickname); } } - }) - + }); + //@ts-ignore const context = useSelector(store => store.context); const [messageApi, contextHolder] = message.useMessage(); - const [nickname, setNickname] = useState() + const [nickname, setNickname] = useState(); const items: MenuProps["items"] = [ // { // key: "1", @@ -87,79 +94,95 @@ export default function Header() { onClick: () => { logout({}).then(res => { if (res.status !== 0) { - messageApi.error(res.data.info) - }else{ - localStorage.setItem('user','') - dispatch(updateUser({ - loginFlag:false, - loginUser:{} - })); + messageApi.error(res.data.info); + } else { + localStorage.setItem("user", ""); + dispatch( + updateUser({ + loginFlag: false, + loginUser: {}, + }) + ); navigate("/login"); } - }) - } + }); + }, }, ]; - const getBtList = () => { - let Dom = null - if(!isConnect){ - Dom =
- {bluetoothList.map(item => { - return
- -
+ let Dom = null; + if (!isConnect) { + Dom = ( +
+ {bluetoothList.map(item => { + return ( +
+ +
+ ); })} -
+
+ ); } - return Dom - } + return Dom; + }; //设备已连接 - const getBtContent = ()=> { - return
+ const getBtContent = () => { + return (
-
- -
设备已连接
-
-
-
sn码：{bluetoothInfo.sn}
-
设备描述：{bluetoothInfo.descriptivePortName}
- {/*
电量：{bluetoothInfo.power}
*/} +
+
+ +
设备已连接
+
+
+
sn码：{bluetoothInfo.sn}
+
设备描述：{bluetoothInfo.descriptivePortName}
+ {/*
电量：{bluetoothInfo.power}
*/} +
-
- } + ); + }; //断开蓝牙连接 - const onDisconnectBt = ()=> { - setIsConnect(false) - } - + const onDisconnectBt = () => { + setIsConnect(false); + }; const connectBt = () => { - setIsConnect(true) - setTimeout(()=>{ - },1000) - } - - + setIsConnect(true); + setTimeout(() => {}, 1000); + }; return ( <> {contextHolder}
- -
-
- {showBlueImg()} -
+
+ 温度：{deviceInfo.temperature.toFixed(1)}℃ + X轴倾斜：{deviceInfo.inclinatorX} + Y轴倾斜：{deviceInfo.inclinatorY} +
+
+ +

{deviceInfo.power.toFixed()}%

+
+ {/*
+ icon +
*/} + {showBlueImg()} +
-

{ nickname || "未登录"}

+

{nickname || "未登录"}
diff --git a/src/pages/measure/components/MeasureAction.tsx b/src/pages/measure/components/MeasureAction.tsx index 77c6c1e..24f6a31 100644 --- a/src/pages/measure/components/MeasureAction.tsx +++ b/src/pages/measure/components/MeasureAction.tsx @@ -199,21 +199,61 @@ export default function MeasureAction() { case "START_RECORD_LEFT": updated[0].color = "g"; updated[1].color = "b"; + const audio1 = new Audio("/audio/begin_left.mp3"); + // 播放音频 + audio1 + .play() + .then(() => { + console.log("音频开始播放"); + }) + .catch(err => { + console.error("播放音频时出错:", err); + }); break; case "FINISH_RECORD_LEFT": updated[1].color = "g"; updated[2].color = "g"; updated[3].color = "b"; isLeftFinished.current = true; + const audio2 = new Audio("/audio/end_left.mp3"); + // 播放音频 + audio2 + .play() + .then(() => { + console.log("音频开始播放"); + }) + .catch(err => { + console.error("播放音频时出错:", err); + }); break; case "START_RECORD_RIGHT": updated[3].color = "g"; updated[4].color = "b"; + const audio3 = new Audio("/audio/begin_right.mp3"); + // 播放音频 + audio3 + .play() + .then(() => { + console.log("音频开始播放"); + }) + .catch(err => { + console.error("播放音频时出错:", err); + }); break; case "FINISH_RECORD_RIGHT": updated[4].color = "g"; updated[5].color = "g"; setMeasurementFinished(true); + const audio4 = new Audio("/audio/end_right.mp3"); + // 播放音频 + audio4 + .play() + .then(() => { + console.log("音频开始播放"); + }) + .catch(err => { + console.error("播放音频时出错:", err); + }); break; default: break; diff --git a/src/pages/measure/components/MeasureConfig.tsx b/src/pages/measure/components/MeasureConfig.tsx index ba14474..85a28f0 100644 --- a/src/pages/measure/components/MeasureConfig.tsx +++ b/src/pages/measure/components/MeasureConfig.tsx @@ -42,12 +42,13 @@ export default function MeasureConfig() { useEffect(() => { form.setFieldsValue({ username: userInfo.nickname || "", + direction: "左" }); }, [userInfo.nickname, form]); return ( <> {contextHolder} - + {/*
width: {window.innerWidth} height: {window.innerHeight}
*/}
*/}