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

import React from 'react'
import { Layout,  Collapse, Form, Select, Input, Tabs, Switch, Button } from 'antd'
const { Header, Sider, Content, Footer } = Layout
const CollapsePanel = Collapse.Panel
const { TabPane } = Tabs
const { FormItem } = Form
const { Option } = Select
import BaseConfigForm from './sections/baseConfigForm'
import PreparingForm from './sections/preparingForm'
import AggregateTableConfigForm from './sections/aggregateTableConfigForm'
import DataViewConfigForm from './sections/dataViewConfigForm'
import BarConfigForm from './sections/barConfigForm'
import PieConfigForm from './sections/pieConfigForm'
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 { connect } from 'dva'
import '../../models/chartDesigner'
import '../../data/charts/option/bar.json'
import './content.less'

class ChartDesignerContent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            autoRefresh: true // 自动刷新
        }
    }

    changeRefreshMode = () => {
        this.setState({
            autoRefresh: !this.state.autoRefresh
        })
    }

    render() {
        const { autoRefresh } = this.state;
        const { chartDesigner, dispatch } = this.props;
        const { baseConfig } = chartDesigner;
        const { viewType } = baseConfig;
        const formItemLayout = {
            labelCol: { span: 8 },
			wrapperCol: { span: 16 },
        };

        let configForm, chartView;

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

        return (
            <Layout className='chartdesigner'>
                <Sider className='sider-left' width={300}>
                    <Tabs className='sider-tabs'>
                        <TabPane className='chartconfig' tab='图表设置' key='1'>
                            <BaseConfigForm formItemLayout={formItemLayout}/>
                            { configForm }
                        </TabPane>
                        <TabPane className='otherconfig' tab='其他设置' key='2'>
                            <StyleEditor formItemLayout={formItemLayout}/>
                        </TabPane>
                    </Tabs>
                    <Footer className='sider-footer'>
                        <div className='fresh-bar'>
                            <Switch defaultChecked checkedChildren='自动刷新' unCheckedChildren='手动刷新' onChange={this.changeRefreshMode}/>
                            <Button hidden={autoRefresh} size='small' onClick={() => {
                                const viewType = chartDesigner.baseConfig.viewType.key;
                                if(viewType == 'bar') {
                                    dispatch({ type: 'chartDesigner/fetchBarData'});
                                }else if(viewType == 'pie') {
                                    console.log(111);
                                    //dispatch({ type: 'chartDesigner/fetchPieData' });
                                }
                            }}
                            >立即刷新</Button>
                        </div>
                    </Footer> 
                </Sider>
                <Content>
                    <Layout>
                        <Header className='content-header'>
                            <ToolBar className='header-toolbar'/>
                        </Header>
                        <Content>
                            { chartView }
                        </Content>
                    </Layout>
                </Content>
            </Layout>
        )
    }
}
function mapStateToProps({ present: { chartDesigner } }) {
    return { chartDesigner: chartDesigner }
}
export default connect(mapStateToProps)(ChartDesignerContent);