You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
2.2 KiB
JavaScript
63 lines
2.2 KiB
JavaScript
import React, { useState } from 'react';
|
|
import styles from './ComplianceManagement.less';
|
|
import PermitManagement from './secondary_menu/PermitManagement'; // 排污许可
|
|
import RegulationCompliance from './secondary_menu/RegulationCompliance'; // 法规符合性
|
|
import SupervisionInspection from './secondary_menu/SupervisionInspection'; // 监督检查
|
|
import InformationDisclosure from './secondary_menu/InformationDisclosure'; // 信息公开及绿色通道
|
|
|
|
const ComplianceManagement = () => {
|
|
const [activeMenu, setActiveMenu] = useState('permit');
|
|
|
|
const menuItems = [
|
|
{ key: 'permit', label: '排污许可' },
|
|
{ key: 'regulation', label: '法规符合性' },
|
|
{ key: 'inspection', label: '监督检查' },
|
|
{ key: 'disclosure', label: '信息公开及绿色通道' }
|
|
];
|
|
|
|
const handleMenuClick = (key) => {
|
|
setActiveMenu(key);
|
|
};
|
|
|
|
const renderContent = () => {
|
|
switch (activeMenu) {
|
|
case 'permit':
|
|
return <PermitManagement />;
|
|
case 'regulation':
|
|
return <RegulationCompliance />;
|
|
case 'inspection':
|
|
return <SupervisionInspection />;
|
|
case 'disclosure':
|
|
return <InformationDisclosure />;
|
|
default:
|
|
return <PermitManagement />;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
{/* 左侧菜单 */}
|
|
<div className={styles.leftMenu}>
|
|
{menuItems.map(item => (
|
|
<div
|
|
key={item.key}
|
|
className={`${styles.menuItem} ${activeMenu === item.key ? styles.active : ''}`}
|
|
onClick={() => handleMenuClick(item.key)}
|
|
>
|
|
{activeMenu === item.key && <div className={styles.activeIndicator}></div>}
|
|
<span className={styles.menuText}>{item.label}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* 右侧内容区 */}
|
|
<div className={styles.rightContent}>
|
|
{renderContent()}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ComplianceManagement;
|
|
|