You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

72 lines
1.7 KiB

5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
  1. import React, { useEffect } from "react";
  2. import "./App.scss";
  3. import { Outlet, useNavigate } from "react-router";
  4. import { Layout } from "antd";
  5. import { default as AppHeader } from "./components/Header";
  6. import { default as AppFooter } from "./components/Footer";
  7. import SideMenu from "./components/SideMenu";
  8. import { createWebSocket, sharedWsUrl } from "./services/socket";
  9. import { useAppDispatch } from "./utils/hooks";
  10. import { updateDeviceState } from "./store/device/deviceState";
  11. const { Header, Footer, Sider, Content } = Layout;
  12. function App() {
  13. const dispatch = useAppDispatch();
  14. useEffect(() => {
  15. //连接websocket
  16. const wsClient = createWebSocket(sharedWsUrl);
  17. const subscription = wsClient.dataOb.subscribe(data => {
  18. if (data.messageType === "DeviceContext") {
  19. // if (data.data.loginFlag) {
  20. // dispatch(updateUser(data.data));
  21. // navigate("/measure/config");
  22. // } else {
  23. // navigate("/login");
  24. // }
  25. }else if(data.messageType === 'STATE'){
  26. dispatch(updateDeviceState(data.data));
  27. }
  28. });
  29. wsClient.connect();
  30. return () => subscription.unsubscribe();
  31. });
  32. const headerStyle: React.CSSProperties = {
  33. height: 64,
  34. padding: 0,
  35. };
  36. const footerStyle: React.CSSProperties = {
  37. height: 64,
  38. padding: 0,
  39. };
  40. const layoutStyle = {
  41. overflow: "hidden",
  42. };
  43. return (
  44. <div className="">
  45. <Layout style={layoutStyle}>
  46. <Sider width="200px">
  47. <SideMenu />
  48. </Sider>
  49. <Layout>
  50. <Header style={headerStyle}>
  51. <AppHeader />
  52. </Header>
  53. <Content>
  54. <Outlet />
  55. </Content>
  56. <Footer style={footerStyle}>
  57. <AppFooter />
  58. </Footer>
  59. </Layout>
  60. </Layout>
  61. </div>
  62. );
  63. }
  64. export default App;