|
|
|
@ -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 <Popover content={getBtContent()} title=""> |
|
|
|
<img src={icon_usb} onClick={onDisconnectBt} alt="" className="ext-base ml-2 h-6" /> |
|
|
|
</Popover> |
|
|
|
} |
|
|
|
return null; |
|
|
|
// if(!isConnect){
|
|
|
|
// return <Popover content={getBtList()} title="可连接设备">
|
|
|
|
// <div ></div>
|
|
|
|
// <img src={bluetooth_nc} alt="" className="ext-base ml-2 h-6" />
|
|
|
|
// </Popover>
|
|
|
|
// }else {
|
|
|
|
// return <Popover content={getBtContent()} title="">
|
|
|
|
// <img src={icon_usb} onClick={onDisconnectBt} alt="" className="ext-base ml-2 h-6" />
|
|
|
|
// </Popover>
|
|
|
|
// }
|
|
|
|
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 ( |
|
|
|
<Popover content={getBtContent()} title=""> |
|
|
|
<section className="bg-white rounded-md h-9 w-10 flex justify-center items-center mr-3"> |
|
|
|
<img src={icon_usb} alt="" className="h-6" /> |
|
|
|
</section> |
|
|
|
</Popover> |
|
|
|
); |
|
|
|
} |
|
|
|
return null; |
|
|
|
// if(!isConnect){
|
|
|
|
// return <Popover content={getBtList()} title="可连接设备">
|
|
|
|
// <div ></div>
|
|
|
|
// <img src={bluetooth_nc} alt="" className="ext-base ml-2 h-6" />
|
|
|
|
// </Popover>
|
|
|
|
// }else {
|
|
|
|
// return <Popover content={getBtContent()} title="">
|
|
|
|
// <img src={icon_usb} onClick={onDisconnectBt} alt="" className="ext-base ml-2 h-6" />
|
|
|
|
// </Popover>
|
|
|
|
// }
|
|
|
|
}; |
|
|
|
|
|
|
|
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 = <div> |
|
|
|
{bluetoothList.map(item => { |
|
|
|
return <div className="mt-[1rem]" onClick={connectBt}> |
|
|
|
<Button type="link">{item.name}</Button> |
|
|
|
</div> |
|
|
|
let Dom = null; |
|
|
|
if (!isConnect) { |
|
|
|
Dom = ( |
|
|
|
<div> |
|
|
|
{bluetoothList.map(item => { |
|
|
|
return ( |
|
|
|
<div className="mt-[1rem]" onClick={connectBt}> |
|
|
|
<Button type="link">{item.name}</Button> |
|
|
|
</div> |
|
|
|
); |
|
|
|
})} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
} |
|
|
|
return Dom |
|
|
|
} |
|
|
|
return Dom; |
|
|
|
}; |
|
|
|
|
|
|
|
//设备已连接
|
|
|
|
const getBtContent = ()=> { |
|
|
|
return <div> |
|
|
|
const getBtContent = () => { |
|
|
|
return ( |
|
|
|
<div> |
|
|
|
<div className="bluetooth_c"> |
|
|
|
<img src={check_mark} alt="" className="ext-base ml-2 h-4" /> |
|
|
|
<div className="ml-[10px]">设备已连接</div> |
|
|
|
</div> |
|
|
|
<div className="pl-[15px]"> |
|
|
|
<div className="mt-[1rem]">sn码：{bluetoothInfo.sn}</div> |
|
|
|
<div className="mt-[1rem]">设备描述：{bluetoothInfo.descriptivePortName}</div> |
|
|
|
{/* <div className="mt-[1rem]">电量：{bluetoothInfo.power}</div> */} |
|
|
|
<div> |
|
|
|
<div className="bluetooth_c"> |
|
|
|
<img src={check_mark} alt="" className="ext-base ml-2 h-4" /> |
|
|
|
<div className="ml-[10px]">设备已连接</div> |
|
|
|
</div> |
|
|
|
<div className="pl-[15px]"> |
|
|
|
<div className="mt-[1rem]">sn码：{bluetoothInfo.sn}</div> |
|
|
|
<div className="mt-[1rem]">设备描述：{bluetoothInfo.descriptivePortName}</div> |
|
|
|
{/* <div className="mt-[1rem]">电量：{bluetoothInfo.power}</div> */} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
} |
|
|
|
); |
|
|
|
}; |
|
|
|
|
|
|
|
//断开蓝牙连接
|
|
|
|
const onDisconnectBt = ()=> { |
|
|
|
setIsConnect(false) |
|
|
|
} |
|
|
|
|
|
|
|
const onDisconnectBt = () => { |
|
|
|
setIsConnect(false); |
|
|
|
}; |
|
|
|
|
|
|
|
const connectBt = () => { |
|
|
|
setIsConnect(true) |
|
|
|
setTimeout(()=>{ |
|
|
|
},1000) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
setIsConnect(true); |
|
|
|
setTimeout(() => {}, 1000); |
|
|
|
}; |
|
|
|
|
|
|
|
return ( |
|
|
|
<> |
|
|
|
{contextHolder} |
|
|
|
<div className="bg-[--bgColor] h-full flex items-center"> |
|
|
|
|
|
|
|
<div className="ml-auto mr-8 flex items-center"> |
|
|
|
<div className="ml-auto mr-8 flex items-center w-[5rem]"> |
|
|
|
{showBlueImg()} |
|
|
|
</div> |
|
|
|
<section className="ml-auto rounded-md h-9 mr-4 flex items-center bg-white gap-2 pl-4"> |
|
|
|
<span className="w-[94px]">温度：{deviceInfo.temperature.toFixed(1)}℃ </span> |
|
|
|
<span className="w-[120px]">X轴倾斜：{deviceInfo.inclinatorX}</span> |
|
|
|
<span className="w-[120px]">Y轴倾斜：{deviceInfo.inclinatorY}</span> |
|
|
|
</section> |
|
|
|
<section className="bg-white rounded-md h-9 w-12 relative mr-3 flex justify-center items-center"> |
|
|
|
<img |
|
|
|
src={icon_battery} |
|
|
|
className="absolute h-8 w-10 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" |
|
|
|
alt="" |
|
|
|
/> |
|
|
|
<p className="text-primary text-xs">{deviceInfo.power.toFixed()}%</p> |
|
|
|
</section> |
|
|
|
{/* <section className="bg-white rounded-md h-9 w-10 flex justify-center items-center mr-3"> |
|
|
|
<img src={icon_usb} className="w-6" alt="icon" /> |
|
|
|
</section> */} |
|
|
|
{showBlueImg()} |
|
|
|
<div className="mr-8 flex items-center min-w-[5rem]"> |
|
|
|
<Dropdown menu={{ items }} trigger={["click"]}> |
|
|
|
<section className="flex items-center"> |
|
|
|
<img src={icon_avatar} alt="" className="h-8" /> |
|
|
|
<p className="text-base ml-2">{ nickname || "未登录"}</p> |
|
|
|
<p className="text-base ml-2">{nickname || "未登录"}</p> |
|
|
|
</section> |
|
|
|
</Dropdown> |
|
|
|
</div> |
|
|
|
|
LiLongLong
5 months ago
