platform-bi-web/app/component/chartDesigner/content.jsx

import React from 'react';
import { Layout,  Collapse, Form, Select, Input, Tabs } from 'antd';
const { Header, Sider, Content } = Layout;
const CollapsePanel = Collapse.Panel;
const { TabPane } = Tabs;
const { FormItem } = Form;
const { Option } = Select;
import emitter from '../../eventManger/ev';
import BaseConfigForm from './sections/baseConfigForm';
import PreparingForm from './sections/preparingForm';
import AggregateTableConfigForm from './sections/aggregateTableConfigForm';
import DataViewConfigForm from './sections/dataViewConfigForm';
import LineConfigForm from './sections/lineConfigForm';
import TableView from './charts/table';
import EchartsView from './charts/echartsView';
import StyleEditor from './sections/styleEditor';
import ToolBar from './sections/toolBar';
import './content.less';

class ChartDesignerContent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            viewType: {
                name: 'aggregateTable',
                label: '总体统计数据表',
            },
            baseConfig: props.baseConfig,
            preparingConfig: props.preparingConfig,
            chartOption: props.chartOption,
            history: {}
        }
    }

    componentDidMount() {
        // 在组件装载完成后发布事件
        this.eventEmitter = emitter.addListener('changeViewType', (viewType)=>{
            this.setState({
                viewType
            });
        });
    }

    componentWillUnmount() {
        emitter.removeAllListeners('changeViewType');
    }

    render() {
        let { viewType, baseConfig, preparingConfig, chartOption } = this.state;

        let configForm, chartView;

        if(viewType.name == 'aggregateTable') {
            configForm = (<AggregateTableConfigForm />);
            chartView = (<TableView />);
        }else if(viewType.name == 'dataView') {
            configForm = (<DataViewConfigForm />);
            chartView = (<TableView />);
        }else if(viewType.name == 'line') {
            configForm = (<DataViewConfigForm />);
            chartView = (<EchartsView option={chartOption}/>);
        }else if(viewType.name == 'bar') {
            configForm = (<DataViewConfigForm />);
            chartView = (<EchartsView option={chartOption}/>);
        }else if(viewType.name == 'pie') {
            configForm = (<LineConfigForm />);
            chartView = (<EchartsView option={chartOption}/>);
        }

        return (
            <Layout>
                <Sider width={270} style={{ overflow: 'auto' }}>
                    <Collapse defaultActiveKey={['0', '1']}>
                        <CollapsePanel header='基础设置'>
                            <BaseConfigForm config={baseConfig}/>
                        </CollapsePanel>
                        <CollapsePanel header='数据预处理'>
                            <PreparingForm config={preparingConfig}/>
                        </CollapsePanel>
                    </Collapse>
                </Sider>
                <Content>
                    <Layout>
                        <Header className='content-header'>
                            <ToolBar className='header-toolbar'/>
                        </Header>
                        <Content>
                            { chartView }
                        </Content>
                    </Layout>
                </Content>
                <Sider width={250}>
                    <Collapse defaultActiveKey={['0', '1']}>
                        <CollapsePanel header={`${viewType.label}选项`}>
                            { configForm }
                        </CollapsePanel>
                        <CollapsePanel header='样式'>
                            <StyleEditor />
                        </CollapsePanel>
                    </Collapse>
                </Sider>
            </Layout>
        )
    }
}

export default ChartDesignerContent;