online/src/app/quantService/QuantService.jsx

import React, {Component} from 'react';
import {FormattedMessage} from 'react-intl';
import {Layout, Menu} from 'antd';

import QuantConfig from "./quantConfig/QuantConfig";
import Deploy from "../common/deploy/Deploy";
import QuantManage from "./quantManage/QuantManage";

const { Content } = Layout;

class QuantService extends Component {
    constructor() {
        super();
        this.state = {
            menuLevel3: "quant-config",
        }
    }

    switchMenu = (menuName, e) => {
        // console.log('menuName', menuName, 'e', e);
        this.setState({
            [menuName]: e.key,
        });
    };

    render() {
        return (
            <div>
                <Menu
                    mode="horizontal"
                    defaultSelectedKeys={['quant-config']}
                    style={{padding: '0 24px', position: 'fixed', width: '100%', zIndex: '1',lineHeight:'50px',fontWeight:600}}
                    onClick={(e) => this.switchMenu('menuLevel3', e)}
                    selectedKeys={[this.state.menuLevel3]}
                >
                    <Menu.Item key="quant-config"><FormattedMessage id="config"/></Menu.Item>
                    <Menu.Item key="quant-deploy"><FormattedMessage id="deploy"/></Menu.Item>
                    <Menu.Item key="quant-manage"><FormattedMessage id="manage"/></Menu.Item>
                </Menu>

                <Layout style={{ padding: '24px', zIndex: '0'}}>
                    <Content style={{ padding: '24px', minHeight: 280, background: '#fff',marginTop: '48px'  }}>
                        {(() => {
                            switch (this.state.menuLevel3) {
                                case 'quant-config':
                                    return <QuantConfig />;
                                case 'quant-deploy':
                                    // return <Deploy />;
                                    return <QuantConfig />;
                                case 'quant-manage':
                                    return <QuantManage />;
                                default:
                                    return <QuantConfig />
                            }
                        })()}
                    </Content>
                </Layout>
            </div>
        )
    }
}

export default QuantService;