|
|
|
|
@ -6,7 +6,7 @@ import { formatRoute, getDefaultRoute } from '@/utils/routeUtils'
|
|
|
|
|
import styles from './TopNavBar.less'
|
|
|
|
|
import { Row, Col, Avatar, Dropdown, Button } from 'antd'
|
|
|
|
|
import { userInfo } from '@/utils/globalCommon'
|
|
|
|
|
import { HomeOutlined, LogoutOutlined, AppstoreOutlined, UserOutlined, SettingOutlined, DatabaseOutlined, FileTextOutlined, LockOutlined, AreaChartOutlined } from '@ant-design/icons'
|
|
|
|
|
import { HomeOutlined, LogoutOutlined, AppstoreOutlined, UserOutlined, SettingOutlined, DatabaseOutlined, FileTextOutlined, LockOutlined, AreaChartOutlined, CaretDownOutlined, BellOutlined, SearchOutlined, QuestionCircleOutlined } from '@ant-design/icons'
|
|
|
|
|
import { getPageQuery } from '@/utils/utils'
|
|
|
|
|
import menuTitle from '@/assets/img/智能管控平台.svg'
|
|
|
|
|
import menuTitle1 from '@/assets/img/智能管控平台-1.svg'
|
|
|
|
|
@ -21,6 +21,7 @@ import people from '@/assets/img/people.svg'
|
|
|
|
|
import risk from '@/assets/img/risk.svg'
|
|
|
|
|
import { CustomBreadcrumb } from '@/components/GlobalComponent'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 自定义菜单项渲染组件，支持根据激活状态显示不同图片
|
|
|
|
|
const CustomMenuItem = ({ item, selectedKeys }) => {
|
|
|
|
|
const isActive = selectedKeys.includes(item.key);
|
|
|
|
|
@ -63,6 +64,7 @@ const SystemContentList = (props) => {
|
|
|
|
|
const [selectedKey, setSelectedKey] = useState([])
|
|
|
|
|
const [menuItems, setMenuItems] = useState([])
|
|
|
|
|
const [systemType, setSystemType] = useState('安全管理系统')
|
|
|
|
|
const [isMenuCollapsed, setIsMenuCollapsed] = useState(false); // 添加菜单收缩状态
|
|
|
|
|
let defaultKey = ''
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
@ -86,10 +88,10 @@ const SystemContentList = (props) => {
|
|
|
|
|
|
|
|
|
|
const fixedMenuItems = [
|
|
|
|
|
{
|
|
|
|
|
"path": "/topnavbar00/hrefficiency/timesheet",
|
|
|
|
|
icon: <img src={fireHydrant1} alt="工时仪表盘" style={{ width: '16px', height: '16px' }} />,
|
|
|
|
|
"key": "/topnavbar00/hrefficiency/timesheet",
|
|
|
|
|
"label": " 工时仪表盘"
|
|
|
|
|
"path": "/topnavbar00/hrefficiency/basicinformation",
|
|
|
|
|
icon: <img src={fireHydrant1} alt="安全管理基础信息" style={{ width: '16px', height: '16px' }} />,
|
|
|
|
|
"key": "/topnavbar00/hrefficiency/basicinformation",
|
|
|
|
|
"label": "安全管理基础信息"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"path": "/topnavbar00/hrefficiency/staffsheet",
|
|
|
|
|
@ -169,6 +171,11 @@ const SystemContentList = (props) => {
|
|
|
|
|
history.replace(curKey)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 切换菜单收缩状态
|
|
|
|
|
const toggleMenu = () => {
|
|
|
|
|
setIsMenuCollapsed(!isMenuCollapsed);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const { initialState: { menu }, setInitialState } = useModel('@@initialState')
|
|
|
|
|
|
|
|
|
|
const loginOut = async () => {
|
|
|
|
|
@ -212,12 +219,27 @@ const SystemContentList = (props) => {
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className='pageContainer systemContent'>
|
|
|
|
|
<div className='leftMenu'>
|
|
|
|
|
<div className='menuTitle' style={{ marginBottom: '10px' }}>
|
|
|
|
|
<div
|
|
|
|
|
className='leftMenu'
|
|
|
|
|
style={{
|
|
|
|
|
width: isMenuCollapsed ? '80px' : '230px',
|
|
|
|
|
transition: 'width 0.3s ease',
|
|
|
|
|
position: 'relative', // 添加相对定位，使按钮可以相对于菜单定位
|
|
|
|
|
overflow: 'unset'
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<div className='menuTitle' style={{
|
|
|
|
|
marginBottom: '10px',
|
|
|
|
|
display: isMenuCollapsed ? 'none' : 'flex'
|
|
|
|
|
}}>
|
|
|
|
|
<img src={menuTitle} alt='menuTitle' style={{ marginTop: '20px', marginBottom: '2px', width: '172.44px', height: '51.28px' }} />
|
|
|
|
|
<img src={menuTitle1} alt='menuTitle1' style={{ width: '172.44px', height: '51.28px' }} />
|
|
|
|
|
</div>
|
|
|
|
|
<div style={{ textAlign: 'center', marginBottom: 16 }}>
|
|
|
|
|
<div style={{
|
|
|
|
|
textAlign: 'center',
|
|
|
|
|
marginBottom: 16,
|
|
|
|
|
display: isMenuCollapsed ? 'none' : 'block'
|
|
|
|
|
}}>
|
|
|
|
|
<Select
|
|
|
|
|
value={systemType}
|
|
|
|
|
onChange={setSystemType}
|
|
|
|
|
@ -241,6 +263,7 @@ const SystemContentList = (props) => {
|
|
|
|
|
}}
|
|
|
|
|
popupClassName="custom-select-dropdown"
|
|
|
|
|
className="custom-select"
|
|
|
|
|
suffixIcon={<CaretDownOutlined style={{ color: '#fff', fontSize: '16px' }} />}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<style jsx>{`
|
|
|
|
|
@ -262,6 +285,8 @@ const SystemContentList = (props) => {
|
|
|
|
|
justify-content: center !important;
|
|
|
|
|
padding: 0 !important;
|
|
|
|
|
padding-right: 50px !important;
|
|
|
|
|
font-size: 16px !important;
|
|
|
|
|
font-weight: 500 !important;
|
|
|
|
|
}
|
|
|
|
|
.custom-select .ant-select-arrow {
|
|
|
|
|
opacity: 0.66 !important;
|
|
|
|
|
@ -280,7 +305,43 @@ const SystemContentList = (props) => {
|
|
|
|
|
font-size: 16px !important;
|
|
|
|
|
font-weight: 600 !important;
|
|
|
|
|
}
|
|
|
|
|
.menuToggleBtn {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: -15px;
|
|
|
|
|
top: 50%;
|
|
|
|
|
width: 30px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
background: #FDFDFF;
|
|
|
|
|
color: #5C5C5C;
|
|
|
|
|
border: 1px solid #FFFFFF;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
z-index: 9999; /* 增加z-index确保按钮在最上层 */
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
outline: none;
|
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
box-shadow: 0 0 5px 3px rgba(169, 185, 255, 0.33);
|
|
|
|
|
}
|
|
|
|
|
.menuToggleBtn:hover {
|
|
|
|
|
border: 1px solid #3D81FF;
|
|
|
|
|
background: #3D81FF;
|
|
|
|
|
color: white;
|
|
|
|
|
transform: scale(1.1);
|
|
|
|
|
}
|
|
|
|
|
`}</style>
|
|
|
|
|
{/* 菜单收缩按钮 */}
|
|
|
|
|
<button
|
|
|
|
|
className="menuToggleBtn"
|
|
|
|
|
onClick={toggleMenu}
|
|
|
|
|
aria-label={isMenuCollapsed ? "展开菜单" : "收缩菜单"}
|
|
|
|
|
>
|
|
|
|
|
{isMenuCollapsed ? ">" : "<"}
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<Menu
|
|
|
|
|
openKeys={openKey}
|
|
|
|
|
selectedKeys={selectedKey}
|
|
|
|
|
@ -322,15 +383,27 @@ const SystemContentList = (props) => {
|
|
|
|
|
return { ...child };
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return { ...item, icon, children };
|
|
|
|
|
return {
|
|
|
|
|
...item,
|
|
|
|
|
icon,
|
|
|
|
|
children,
|
|
|
|
|
// 根据菜单收缩状态决定是否显示标签文本
|
|
|
|
|
label: isMenuCollapsed ? null : item.label
|
|
|
|
|
};
|
|
|
|
|
})}
|
|
|
|
|
onClick={value => setRouteActive(value)}
|
|
|
|
|
onOpenChange={value => setOpenKey(value)}
|
|
|
|
|
mode='inline'
|
|
|
|
|
mode={isMenuCollapsed ? 'vertical' : 'inline'}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className='rightContent'>
|
|
|
|
|
<div
|
|
|
|
|
className='rightContent'
|
|
|
|
|
style={{
|
|
|
|
|
width: isMenuCollapsed ? 'calc(100% - 80px)' : 'calc(100% - 230px)',
|
|
|
|
|
transition: 'width 0.3s ease'
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
{/* <div style={{ width: '100%', backgroundColor: '#fff', marginBottom: '10px' }}> */}
|
|
|
|
|
<div className='tabBarHeader'>
|
|
|
|
|
<Row className='tabBarRow'>
|
|
|
|
|
@ -344,6 +417,9 @@ const SystemContentList = (props) => {
|
|
|
|
|
<CustomBreadcrumb />
|
|
|
|
|
</Col>
|
|
|
|
|
<Col xs={4} sm={4} md={4} lg={4} xl={4} className='tabBarRight'>
|
|
|
|
|
<Button type='text' className='tabBarRightBtn'><BellOutlined /></Button>
|
|
|
|
|
<Button type='text' className='tabBarRightBtn'><SearchOutlined /></Button>
|
|
|
|
|
<Button type='text' className='tabBarRightBtn'><QuestionCircleOutlined /></Button>
|
|
|
|
|
<Avatar className='tabBarRightAvaTor' src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201707%2F31%2F20170731021444_2YUfe.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669779871&t=ec025ed48a1668dee9cfa0e803b6f787' />
|
|
|
|
|
|
|
|
|
|
<span className='tabBarRightName'>{userInfo?.user_name_cn ? userInfo.user_name_cn : (userInfo?.user_name || '')}</span>
|
|
|
|
|
|
wangyunfei
1 month ago
