89 lines
3.0 KiB
JavaScript
89 lines
3.0 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import Header from './components/Layouts/Header';
|
|
import SiQuan from './components/Business/SiQuan';
|
|
import SiZhi from './components/Business/SiZhi';
|
|
import SiYu from './components/Business/SiYu';
|
|
import SiGuan from './components/Business/SiGuan';
|
|
import MapCtrl from './MapCtrl/index'
|
|
import MapToolBox from './mapToolBox'
|
|
import './index.less';
|
|
import { showFullScreen } from '@/utils/tools';
|
|
|
|
const HomePage = () => {
|
|
const [activeMenu, setActiveMenu] = useState('siquan');
|
|
const [userInfo, setUserInfo] = useState({ userName: '系统管理员' });
|
|
const [isReady, setIsReady] = useState(false);
|
|
const isFullScreen = useSelector(s => s.runtime.isFullScreen);
|
|
const dispatch = useDispatch()
|
|
|
|
useEffect(()=>{
|
|
//根据isFullScreen判断当前是否进入全屏
|
|
showFullScreen(isFullScreen)
|
|
},[isFullScreen])
|
|
|
|
useEffect(() => {
|
|
// 兼容 Hash 路由模式：参数可能跟在 # 后面 (例如 /#/home?token=...)
|
|
let queryString = window.location.search;
|
|
if (window.location.hash.indexOf('?') > -1) {
|
|
queryString = window.location.hash.split('?')[1];
|
|
}
|
|
const params = new URLSearchParams(queryString);
|
|
|
|
const token = params.get('access_token');
|
|
const userName = params.get('userName');
|
|
const userId = params.get('userId');
|
|
|
|
if (token) localStorage.setItem('access_token', token);
|
|
if (userId) localStorage.setItem('userId', userId);
|
|
|
|
// 优先使用 URL 参数中的用户名，其次读取本地存储，最后默认
|
|
const finalUserName = userName || localStorage.getItem('userName') || '系统管理员';
|
|
if (userName) localStorage.setItem('userName', userName);
|
|
|
|
setUserInfo({ userName: finalUserName });
|
|
setIsReady(true);
|
|
dispatch.runtime.setHome()
|
|
}, []);
|
|
|
|
const renderContent = () => {
|
|
if (!isReady) return null; //状态提升，防止跳过来的参数，不能及时渲染
|
|
switch (activeMenu) {
|
|
case 'siquan':
|
|
return <SiQuan />;
|
|
case 'sizhi':
|
|
return <SiZhi />;
|
|
case 'siyu':
|
|
return <SiYu />;
|
|
case 'siguan':
|
|
return <SiGuan />;
|
|
default:
|
|
return <SiQuan />;
|
|
}
|
|
};
|
|
|
|
return (
|
|
// style={{position:"relative"}} 这段以后写在.home-page里
|
|
<div className="home-page" style={{position:"relative"}}>
|
|
<Header activeMenu={activeMenu} onMenuChange={setActiveMenu} userName={userInfo.userName} />
|
|
<div className="main-content-wrapper" style={{ pointerEvents: 'none' }}>
|
|
<div className="content-overlay" style={{ pointerEvents: 'none' }}>
|
|
{renderContent()}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{/* 地图相关 */}
|
|
<div style={{ height: '100%', width: '100%', position: 'absolute', top: 0, left: 0, overflow: 'hidden', zIndex: 0, pointerEvents: 'auto' }}>
|
|
{/* 地图 */}
|
|
<MapCtrl/>
|
|
|
|
{/* 控制按钮 */}
|
|
<MapToolBox/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default HomePage;
|