Outline/src/App.tsx

import React, { useEffect, useState } from "react";

import "./App.scss";
import { Outlet, useNavigate } from "react-router";
import { Layout, ConfigProvider, message} from "antd";
import { default as AppHeader } from "./components/Header";
import { default as AppFooter } from "./components/Footer";
import SideMenu from "./components/SideMenu";
import { createWebSocket, sharedWsUrl } from "./services/socket";
import { useAppDispatch } from "./utils/hooks";
import { updateDeviceState } from "./store/device/deviceState";
import { setSyncData } from "./store/ktj/orgState";
import zhCN from 'antd/lib/locale/zh_CN'; // 引入中文语言包
import { updateDevice } from "./store/features/contextSlice";
import { getStatus, update } from "./services/ktj/org";
import SyncData from "./components/syncData";

const { Header, Footer, Sider, Content } = Layout;

function App() {
	const dispatch = useAppDispatch();
	const navigate = useNavigate();

	useEffect(() => {
		//连接websocket
		const wsClient = createWebSocket(sharedWsUrl);
		const subscription = wsClient.dataOb.subscribe(data => {
			if (data.messageType === "DeviceContext") {
				// if (data.data.loginFlag) {
				// 	dispatch(updateUser(data.data));
				// 	navigate("/measure/config");
				// } else {
				// 	navigate("/login");
				// }
			} else if (data.messageType === "STATE" && data.path === "/api/subdevice/uartchanel/get-channel-state") {
				dispatch(updateDeviceState(data.data));
			} else if (data.messageType === "STATE" && data.path === "/api/profiler-state/get-state") {
				// console.log(data.data);
				dispatch(updateDevice(data.data));
			}else if(data.path === "/get-task-progress"){
				let syncData = data.data;
				if(syncData){
					let {
						progress,
						success
					} = syncData;
					if(syncData.hasOwnProperty('success') && !success){
						message.error(syncData.message)
					}
					//取整
					progress = Math.floor(progress)
					dispatch(setSyncData(progress))
					if(progress!== 100){
						setIsSync(true)
					}else{
						setIsSync(false)
					}
				}
			}
		});
		wsClient.connect();
		return () => subscription.unsubscribe();
	});

	useEffect(()=>{
		//是否需要同步数据
		queryStatus()
	},[])

	useEffect(() => {
		
		if (localStorage.getItem("user")) {
			navigate("/measure/action", { replace: true });
		} else {
			navigate("/login");
		}
	}, [navigate]);

	const [isSync, setIsSync] = useState(false)
	const queryStatus = () => {
		getStatus().then(res => {
			if(res.data){
				update();
			}
		})
	}

	const headerStyle: React.CSSProperties = {
		height: 64,
		padding: 0,
	};

	const footerStyle: React.CSSProperties = {
		height: 64,
		padding: 0,
	};

	const layoutStyle = {
		overflow: "hidden",
	};

	const closeModal = () => {
		setIsSync(false)
	}

	return (
		<div className="">
			<ConfigProvider locale={zhCN}>
				<Layout style={layoutStyle}>
					<Sider width="200px">
						<SideMenu />
					</Sider>
					<Layout>
						<Header style={headerStyle}>
							<AppHeader />
						</Header>
						<Content>
							<Outlet />
						</Content>
						<Footer style={footerStyle}>
							<AppFooter />
						</Footer>
					</Layout>
				</Layout>
			</ConfigProvider>
			{isSync && <SyncData  isShowModal={isSync} closeModal={closeModal} setIsSync={setIsSync}></SyncData>}
		</div>
	);
}

export default App;