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.
67 lines
2.1 KiB
JavaScript
67 lines
2.1 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Tabs, Button } from 'antd';
|
|
import styles from './ExhaustMonitoring.less';
|
|
import { SettingOutlined } from '@ant-design/icons';
|
|
// 导入子页面组件
|
|
import ExhaustEmissionStandard from './secondary_menu/ExhaustEmissionStandard';
|
|
import AlarmInformation from './secondary_menu/AlarmInformation';
|
|
import AbnormalAlarmInformation from './secondary_menu/AbnormalAlarmInformation';
|
|
|
|
const ExhaustMonitoring = () => {
|
|
const [activeTab, setActiveTab] = useState('exhaust-emission-standard');
|
|
|
|
// 标签页配置
|
|
const tabItems = [
|
|
{
|
|
key: 'exhaust-emission-standard',
|
|
label: '废气排放达标情况管理',
|
|
children: <ExhaustEmissionStandard />
|
|
},
|
|
{
|
|
key: 'abnormal-alarm-information',
|
|
label: '异常报警信息管理',
|
|
children: <AbnormalAlarmInformation />
|
|
},
|
|
{
|
|
key: 'alarm-information',
|
|
label: '告警信息管理',
|
|
children: <AlarmInformation />
|
|
}
|
|
];
|
|
|
|
// 标签页切换处理
|
|
const handleTabChange = (key) => {
|
|
setActiveTab(key);
|
|
};
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<Tabs
|
|
activeKey={activeTab}
|
|
onChange={handleTabChange}
|
|
items={tabItems}
|
|
className={styles.tabs}
|
|
style={{
|
|
'--ant-tabs-tab-color': '#AFAFAF',
|
|
'--ant-tabs-tab-active-color': '#009D6F',
|
|
'--ant-tabs-tab-active-bg': '#fff'
|
|
}}
|
|
tabBarStyle={{
|
|
'--ant-tabs-tab-active-color': '#009D6F'
|
|
}}
|
|
tabBarExtraContent={
|
|
<Button
|
|
icon={<SettingOutlined />}
|
|
className={styles.settingButton}
|
|
onClick={() => {/* 你的操作 */ }}>
|
|
自动报警设置
|
|
</Button>
|
|
}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ExhaustMonitoring;
|
|
|