图标配置页面所有组件使用统一的model

app/components/chartDesigner/content.jsx

@@ -5,79 +5,62 @@ 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 BarConfigForm from './sections/barConfigForm';
 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';
+import { connect } from 'dva';
+import chartDesigner from '../../models/chartDesigner';
+import chartOption from '../../data/charts/option/bar.json';
 
 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;
+        const { baseConfig } = this.props.chartDesigner;
+        const { viewType } = baseConfig;
+        const formItemLayout = {
+            labelCol: { span: 8 },
+			wrapperCol: { span: 16 },
+        };
 
         let configForm, chartView;
 
-        if(viewType.name == 'aggregateTable') {
-            configForm = (<AggregateTableConfigForm />);
+        if(viewType.key == 'aggregateTable') {
+            configForm = (<AggregateTableConfigForm formItemLayout={formItemLayout}/>);
             chartView = (<TableView />);
-        }else if(viewType.name == 'dataView') {
-            configForm = (<DataViewConfigForm />);
+        }else if(viewType.key == 'dataView') {
+            configForm = (<DataViewConfigForm formItemLayout={formItemLayout}/>);
             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 />);
+        }else if(viewType.key == 'line') {
+            // configForm = (<DataViewConfigForm formItemLayout={formItemLayout}/>);
+            // chartView = (<EchartsView option={chartOption}/>);
+        }else if(viewType.key == 'bar') {
+            configForm = (<BarConfigForm formItemLayout={formItemLayout}/>);
             chartView = (<EchartsView option={chartOption}/>);
+        }else if(viewType.key == 'pie') {
+            // configForm = (<LineConfigForm formItemLayout={formItemLayout}/>);
+            // 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 className='sider-left' width={300}>
+                    <Tabs calssName='content-tabs'>
+                        <TabPane className='chartconfig' tab='图表设置' key='1'>
+                            <BaseConfigForm formItemLayout={formItemLayout}/>
+                            { configForm }
+                            <PreparingForm formItemLayout={formItemLayout}/>
+                        </TabPane>
+                        <TabPane className='otherconfig' tab='其他设置' key='2'>
+                            <StyleEditor formItemLayout={formItemLayout}/>
+                        </TabPane>
+                    </Tabs> 
                 </Sider>
                 <Content>
                     <Layout>
@@ -89,19 +72,11 @@ class ChartDesignerContent extends React.Component {
                         </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;
+function mapStateToProps({ present: { chartDesigner } }) {
+    return { chartDesigner: chartDesigner }
+}
+export default connect(mapStateToProps)(ChartDesignerContent);

app/components/chartDesigner/content.less

@@ -2,4 +2,7 @@
     height: 37px;
     margin: 0;
     padding: 7px 16px;
+}
+.chartconfig, .otherconfig {
+    padding: 0 10px;
 }

app/components/chartDesigner/header.jsx

@@ -5,7 +5,7 @@ const Option = Select.Option;
 import './header.less';
 import { connect } from 'dva';
 import { ActionCreators } from 'redux-undo';
-import title from '../../models/title';
+import chartDesigner from '../../models/chartDesigner';
 
 class Header extends React.Component {
     render() {
@@ -16,7 +16,6 @@ class Header extends React.Component {
                     <Input
                         ref='titleInput'
                         className='input-title' 
-                        focus={props.title.focus}
                         addonAfter={<Icon type="edit" 
                             onClick={() => {
                                 const input = this.refs.titleInput
@@ -24,9 +23,9 @@ class Header extends React.Component {
                             }}
                         />}
                         onChange={(e) => {
-                            props.dispatch({ type: 'title/set', text: e.target.value});
+                            props.dispatch({ type: 'chartDesigner/setTitle', text: e.target.value});
                         }}
-                        value={props.title.label}
+                        value={props.chartDesigner.header.label}
                     />
                 </div>
                 <div className='header-item toolbar-buttons'>
@@ -45,7 +44,7 @@ class Header extends React.Component {
         )
     }
 }
-function mapStateToProps({ present: { title } }) {
-    return { title: title }
+function mapStateToProps({ present: { chartDesigner } }) {
+    return { chartDesigner: chartDesigner }
 }
 export default connect(mapStateToProps)(Header);

app/components/chartDesigner/layout.jsx

@@ -7,41 +7,22 @@ const SubMenu = Menu.SubMenu;
 import './layout.less';
 import ChartDesignerHeader from './header';
 import ChartDesignerContent from './content';
-import chartOption from '../../data/charts/option/data1.json';
+import { connect } from 'dva';
+import chartDesigner from '../../models/chartDesigner';
 
 class ChartDesignerLayout extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-
-        }
-    }
-
     render() {
-        let viewType = 'dataView';
-        let note = '测试描述...';
-        let currentDataSource = 'd1';
-        let accessPermission = 'anyone';
-        let editPermission = 'owner';
-        let showLegend = true;
-        let showTooltip = true;
-        let datazoom = true;
-        let toolbox = true;
-
-        let baseConfig = { viewType, note, currentDataSource, accessPermission, editPermission, showLegend,
-            showTooltip, datazoom, toolbox
-        };
-        let preparingConfig = { groupBy: ['c3'] };
-
         return <Layout>
             <Header>
                 <ChartDesignerHeader />
             </Header>
             <Content>
-                <ChartDesignerContent baseConfig={baseConfig} preparingConfig={preparingConfig} chartOption={chartOption}/>
+                <ChartDesignerContent />
             </Content>
         </Layout>
     }
 }
-
-export default ChartDesignerLayout;
+function mapStateToProps({ present: { chartDesigner } }) {
+    return { chartDesigner: chartDesigner }
+}
+export default connect(mapStateToProps)(ChartDesignerLayout);

app/components/chartDesigner/layout.less

@@ -24,7 +24,6 @@ html,body,#root{
     border-color: #CCCCCC;
 }
 .ant-tabs {
-    height: 100%;
 }
 .ant-tabs-bar {
     margin: 0;

app/components/chartDesigner/sections/aggregateTableConfigForm.jsx

@@ -1,36 +1,15 @@
 import React from 'react';
-import { Form, Icon, Input, Button, Select, Switch, Checkbox } from 'antd';
+import { Form, Select, Checkbox } from 'antd';
 const FormItem = Form.Item;
 const { Option } = Select;
 const CheckboxGroup = Checkbox.Group;
+import { connect } from 'dva';
+import chartDesigner from '../../../models/chartDesigner';
 
 class AggregateTableConfigForm extends React.Component {
-
-	constructor(props) {
-		super(props);
-		this.state = {
-			config: props.config
-		}
-	}
-
-	componentDidMount() {
-    }
-    
-    onChange(checkedList) {
-    }
-
 	render() {
-		const { config } = this.state;
-        
-        const columns = [
-			{ value: 'c1', label: '列1' },
-			{ value: 'c2', label: '列2' },
-			{ value: 'c3', label: '列3' },
-			{ value: 'c4', label: '列4' },
-			{ value: 'c5', label: '列5' },
-        ];
-
-        let targetColumn = ['c3'];
+		const props = this.props;
+        const columns = props.chartDesigner.columns;
         
         const statisticsOptions = [
             { value: 'count', label: '条数', checked: true }, 
@@ -51,35 +30,40 @@ class AggregateTableConfigForm extends React.Component {
 		
 		const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
 
-		const formItemLayout = {
-			labelCol: { span: 10 },
-			wrapperCol: { span: 14 },
-        };
+		const { formItemLayout } = props
         
 		return (
-			<Form layout='horizontal'>
+			<Form>
 				<FormItem label='分析目标' {...formItemLayout}>
-					{getFieldDecorator('targetColumn', {
-						rules: [{ required: true, message: '分析目标不能为空' }],
-						initialValue : targetColumn
-					})(
-						<Select mode='multiple'>
-							{columns.map((c, i)=>{
-								return (<Option key={`c-${i}`} value={c.value}>{c.label}</Option>)
-							})}
-						</Select>
-					)}
+					<Select
+						value={props.chartDesigner.aggregateTable.targetColumn}
+						mode='multiple'
+						labelInValue={true}
+						onChange={(value) => {
+							props.dispatch({ type: 'chartDesigner/aggregateTable/setTargetColumn', targetColumn: value});
+						}}
+					>
+						{columns.map((c, i)=>{
+							return (<Option key={i} value={c.name}>{c.label}</Option>)
+						})}
+					</Select>
 				</FormItem>
 				<FormItem label='显示总体数据' {...formItemLayout}>
-					{getFieldDecorator('statistics', {
-						initialValue: statisticsOptions.filter(filterFunc).map((s)=>{return s.label})
-					})(
-						<CheckboxGroup options={statisticsOptions.map((s)=>{return s.label})} onChange={this.onChange} />
-					)}
+					<CheckboxGroup
+						value={props.chartDesigner.aggregateTable.statistics}
+						options={statisticsOptions.map((s)=>{return s.label})}
+						onChange={(value) => {
+							props.dispatch({ type: 'chartDesigner/aggregateTable/setStatistics', statistics: value});
+						}}
+					/>
 				</FormItem>
 			</Form>
 		);
 	}
 }
 
-export default Form.create()(AggregateTableConfigForm);
+function mapStateToProps({ present: { chartDesigner } }) {
+    return { chartDesigner: chartDesigner }
+}
+
+export default Form.create()(connect(mapStateToProps)(AggregateTableConfigForm));

app/components/chartDesigner/sections/barConfigForm.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Form, Select } from 'antd';
+const FormItem = Form.Item;
+const { Option } = Select;
+import { connect } from 'dva';
+import chartDesigner from '../../../models/chartDesigner';
+
+class barConfigForm extends React.Component {
+	render() {
+		const props = this.props;
+        const columns = props.chartDesigner.columns;
+		const { formItemLayout } = props;
+
+		return (
+			<Form hideRequiredMark={true}>
+				<FormItem label='横轴' {...formItemLayout}>
+					<Select
+						value={props.chartDesigner.barConfig.xAixs}
+						labelInValue={true}
+						onChange={(value) => {
+							props.dispatch({ type: 'chartDesigner/barConfig/setXAixs', xAixs: value});
+						}}
+					>
+						{columns.map((c, i)=>{
+							return (<Option key={i} value={c.name}>{c.label}</Option>)
+						})}
+					</Select>
+				</FormItem>
+				<FormItem label='纵轴' {...formItemLayout}>
+					<Select 
+						value={props.chartDesigner.barConfig.yAixs}
+						labelInValue={true}
+						onChange={(value) => {
+							props.dispatch({ type: 'chartDesigner/barConfig/setYAixs', yAixs: value});
+						}}
+					>
+						{columns.map((c, i)=>{
+							return (<Option key={i} value={c.name}>{c.label}</Option>)
+						})}
+					</Select>
+				</FormItem>
+			</Form>
+		);
+	}
+}
+
+function mapStateToProps({ present: { chartDesigner } }) {
+    return { chartDesigner: chartDesigner }
+}
+
+export default Form.create()(connect(mapStateToProps)(barConfigForm));

app/components/chartDesigner/sections/baseConfigForm.jsx

@@ -1,92 +1,54 @@
 import React from 'react';
-import { Form, Icon, Input, Button, Select, Switch } from 'antd';
+import { Form, Select } from 'antd';
 const FormItem = Form.Item;
 const { Option } = Select;
-import emitter from '../../../eventManger/ev'
-
-function hasErrors(fieldsError) {
-	return Object.keys(fieldsError).some(field => fieldsError[field]);
-}
+import { connect } from 'dva';
+import chartDesigner from '../../../models/chartDesigner';
 
 class baseConfigForm extends React.Component {
-
-	constructor(props) {
-		super(props);
-		this.state = {
-			config: props.config
-		}
-	}
-
-	componentDidMount() {
-		// To disabled submit button at the beginning.
-		this.props.form.validateFields();
-	}
-
-	changeViewType(value, ele) {
-		let viewType = {
-			name: value,
-			label: ele.props.children
-		}
-        emitter.emit('changeViewType', viewType);
-    }
-
 	render() {
-		const { config } = this.state;
-		const { viewType, note, currentDataSource, accessPermission, editPermission, showLegend, showTooltip, datazoom, toolbox } = config;
-		
-		const allDataSource = [
-			{ id: 'd1', name: '数据源1' },
-			{ id: 'd2', name: '数据源2' },
-			{ id: 'd3', name: '数据源3' },
-			{ id: 'd4', name: '数据源4' },
-			{ id: 'd5', name: '数据源5' },
-			{ id: 'd6', name: '数据源6' },
-		];
-
-		const allPermission = [
-			{ value: 'owner', name: '创建人' },
-			{ value: 'anyone', name: '所有人' }
-		];
-		
-		const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
-
-		const formItemLayout = {
-			labelCol: { span: 9 },
-			wrapperCol: { span: 15 },
-		};
+		const props = this.props;
+		const allDataSource = props.chartDesigner.allDataSource;
+		const { formItemLayout } = props
 
 		return (
 			<Form hideRequiredMark={true}>
 				<FormItem label='数据源' {...formItemLayout}>
-					{getFieldDecorator('dataSource', {
-						rules: [{ required: true, message: '数据源不能为空' }],
-						initialValue: currentDataSource
-					})(
-						<Select>
-							{allDataSource.map((dataSource, i)=>{
-								return (<Option key={`dataSource-${i}`} value={dataSource.id}>{dataSource.name}</Option>)
-							})}
-						</Select>
-					)}
+					<Select
+						value={props.chartDesigner.baseConfig.dataSource}
+						labelInValue={true}
+						onChange={(value) => {
+							props.dispatch({ type: 'chartDesigner/baseConfig/setDataSource', dataSource: value});
+						}}
+					>
+						{allDataSource.map((dataSource, i)=>{
+							return (<Option key={`dataSource-${i}`} value={dataSource.id}>{dataSource.name}</Option>)
+						})}
+					</Select>
 				</FormItem>
 				<FormItem label='可视化模式' {...formItemLayout}>
-					{getFieldDecorator('viewType', {
-						rules: [{ required: true, message: '可视化模式不能为空' }],
-						initialValue : viewType
-					})(
-						<Select onChange={this.changeViewType}>
-							<Option value='aggregateTable'>总体统计数据表</Option>
-							<Option value='dataView'>个体统计数据表</Option>
-							<Option value='line'>折线图</Option>
-							<Option value='bar'>柱状图</Option>
-							<Option value='pie'>饼状图</Option>
-							<Option value='scatter'>散点图</Option>
-						</Select>
-					)}
+					<Select 
+						value={props.chartDesigner.baseConfig.viewType}
+						labelInValue={true}
+						onChange={(value) => {
+							props.dispatch({ type: 'chartDesigner/baseConfig/setViewType', viewType: value});
+						}}
+					>
+						<Option value='aggregateTable'>总体统计数据表</Option>
+						<Option value='dataView'>个体统计数据表</Option>
+						<Option value='line'>折线图</Option>
+						<Option value='bar'>柱状图</Option>
+						<Option value='pie'>饼状图</Option>
+						<Option value='scatter'>散点图</Option>
+					</Select>
 				</FormItem>
 			</Form>
 		);
 	}
 }
 
-export default Form.create()(baseConfigForm);
+function mapStateToProps({ present: { chartDesigner } }) {
+    return { chartDesigner: chartDesigner }
+}
+
+export default Form.create()(connect(mapStateToProps)(baseConfigForm));

app/components/chartDesigner/sections/dataViewConfigForm.jsx

@@ -1,95 +1,40 @@
 import React from 'react';
-import { Form, Icon, Input, Button, Select, Switch, Checkbox, InputNumber  } from 'antd';
+import { Form, Select } from 'antd';
 const FormItem = Form.Item;
 const { Option } = Select;
-const CheckboxGroup = Checkbox.Group;
+import { connect } from 'dva';
+import chartDesigner from '../../../models/chartDesigner';
 
 class DataViewConfigForm extends React.Component {
-
-	constructor(props) {
-		super(props);
-		this.state = {
-		}
-	}
-
-	componentDidMount() {
-		// To disabled submit button at the beginning.
-		this.props.form.validateFields();
-    }
-    
-    onChange(checkedList) {
-        console.log(checkedList);
-    }
-
 	render() {
-        const columns = [
-			{ value: 'c1', label: '列1' },
-			{ value: 'c2', label: '列2' },
-			{ value: 'c3', label: '列3' },
-			{ value: 'c4', label: '列4' },
-			{ value: 'c5', label: '列5' },
-        ];
-
-        let targetColumn = ['c3'];
-
-        let rows = 3;
-
-        let sort = 'asc';
-
-        const gaugeOptions = [
-            { value: 'z-score', label: '偏差值', checked: true }
-        ];
-
-        let filterFunc = function(option) {
-            return option.checked == true;
-        }
-		
-		const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
-
-		const formItemLayout = {
-			labelCol: { span: 10 },
-			wrapperCol: { span: 14 },
-        };
+		const props = this.props;
+        const columns = props.chartDesigner.columns;
+		const { formItemLayout } = props
         
 		return (
             <Form layout='horizontal'>
 				<FormItem label='分析目标' {...formItemLayout}>
-					{getFieldDecorator('targetColumn', {
-						rules: [{ required: true, message: '分析目标不能为空' }],
-						initialValue : targetColumn
-					})(
-						<Select mode='multiple'>
-							{columns.map((c, i)=>{
-								return (<Option key={`c-${i}`} value={c.value}>{c.label}</Option>)
-							})}
-						</Select>
-					)}
+					<Select
+						key='hf'
+						mode='multiple'
+						value={props.chartDesigner.dataView.targetColumn}
+						labelInValue={true}
+						onChange={(value) => {
+							props.dispatch({ type: 'chartDesigner/dataView/setTargetColumn', targetColumn: value});
+						}}
+					>
+						{columns.map((c, i)=>{
+							return <Option key={i} value={c.name}>{c.label}</Option>
+						})}
+					</Select>
 				</FormItem>
-				{/* <FormItem label='横轴' {...formItemLayout}>
-					{getFieldDecorator('x', {
-						initialValue : targetColumn
-					})(
-						<Select mode='multiple'>
-							{columns.map((c, i)=>{
-								return (<SelectOption key={`x-${i}`} value={c.value}>{c.label}</SelectOption>)
-							})}
-						</Select>
-					)}
-				</FormItem>
-                    <FormItem label='纵轴' {...formItemLayout}>
-                    {getFieldDecorator('y', {
-                            initialValue : targetColumn
-                    })(
-                        <Select mode='multiple'>
-                            {columns.map((c, i)=>{
-                                return (<SelectOption key={`y-${i}`} value={c.value}>{c.label}</SelectOption>)
-                            })}
-                        </Select>
-                    )}
-				</FormItem> */}
 			</Form>
         );
 	}
 }
 
-export default Form.create()(DataViewConfigForm);
+function mapStateToProps({ present: { chartDesigner } }) {
+    return { chartDesigner: chartDesigner }
+}
+
+export default Form.create()(connect(mapStateToProps)(DataViewConfigForm));

app/components/chartDesigner/sections/filterBox.jsx

@@ -14,28 +14,7 @@ class FilterBox extends React.Component {
         uuid = 0;
         super(props);
         this.state = {
-            columns: [{
-                label: '列1',
-                name: 'c1',
-                type: 'string'
-            }, {
-                label: '列2',
-                name: 'c2',
-                type: 'number'
-            }, {
-                label: '列3',
-                name: 'c3',
-                type: 'time'
-            }, {
-                label: '列4',
-                name: 'c4',
-                type: 'categorical',
-                selection: ['s1', 's2', 's3']
-            }, {
-                label: '张三丰',
-                name: 'zsf',
-                type: 'categorical'
-            }],
+            columns: props.columns || [],
             filterData: props.filterData || []
         }
     }

app/components/chartDesigner/sections/preparingForm.jsx

@@ -1,140 +1,39 @@
 import React from 'react';
-import { Form, Icon, Input, Button, Select, Switch } from 'antd';
+import { Form, Select } from 'antd';
 const FormItem = Form.Item;
 const { Option } = Select;
 import { connect } from 'dva';
-import preparing from '../../../models/preparing';
+import chartDesigner from '../../../models/chartDesigner';
 
-const PreparingForm = connect(
-    ({ present: { preparing } }) => ({
-        preparing,
-    }
-))(props => {
-	const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = props.form;
-
-	const formItemLayout = {
-		labelCol: { span: 10 },
-		wrapperCol: { span: 14 },
-	};
-
-	const columns = [
-		{ value: 'c1', label: '列1' },
-		{ value: 'c2', label: '列2' },
-		{ value: 'c3', label: '列3' },
-		{ value: 'c4', label: '列4' },
-		{ value: 'c5', label: '列5' },
-		{ value: 'c6', label: '列6' },
-		{ value: 'c7', label: '列7' },
-		{ value: 'c8', label: '列8' },
-		{ value: 'c9', label: '列9' },
-		{ value: 'c10', label: '列10' },
-		{ value: 'c11', label: '列11' },
-		{ value: 'c12', label: '列12' },
-		{ value: 'c13', label: '列13' }
-	];
-
-	return (
-		<Form layout='horizontal'>
-			<FormItem label='分组' {...formItemLayout}>
-				{getFieldDecorator('groupBy', {
-					initialValue : props.preparing.groupBy
-				})(
+class PreparingForm extends React.Component {
+	render() {
+		const props = this.props;
+		const columns = props.chartDesigner.columns;
+		const { formItemLayout } = props
+		
+		return (
+			<Form layout='horizontal'>
+				<FormItem label='分组' {...formItemLayout}>
 					<Select 
 						mode="multiple"
+						labelInValue={true}
 						onChange={(value) => {
-							props.dispatch({ type: 'preparing/set', groupBy: value});
+							props.dispatch({ type: 'chartDesigner/preparing/setGroupBy', groupBy: value});
 						}}
+						value={props.chartDesigner.preparing.groupBy}
 					>
 						{columns.map((c, i)=>{
-							return (<Option key={`column-${i}`} value={c.value}>{c.label}</Option>)
+							return (<Option key={i} value={c.name}>{c.label}</Option>)
 						})}
 					</Select>
-				)}
-			</FormItem>
-			{/* <FormItem label='分段' {...formItemLayout}>
-				{getFieldDecorator('bucketization', {
-					initialValue : bucketization
-				})(
-					<Select mode="multiple">
-						{bucketizations.map((b, i)=>{
-							return (<Option key={`bucketization-${i}`} value={b.value}>{b.label}</Option>)
-						})}
-					</Select>
-				)}
-			</FormItem> */}
-		</Form>
-	);
-});
-export default Form.create()(PreparingForm);
-
-// class PreparingForm extends React.Component {
-
-// 	constructor(props) {
-// 		super(props);
-// 		this.state = {
-// 			config: props.config
-// 		}
-// 	}
-
-// 	componentDidMount() {
-// 		// To disabled submit button at the beginning.
-// 		this.props.form.validateFields();
-// 	}
-
-// 	render() {
-// 		const { config } = this.state;
-// 		const { groupBy } = config;
-		
-// 		const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
-
-// 		const formItemLayout = {
-// 			labelCol: { span: 10 },
-// 			wrapperCol: { span: 14 },
-// 		};
-
-// 		const columns = [
-// 			{ value: 'c1', label: '列1' },
-// 			{ value: 'c2', label: '列2' },
-// 			{ value: 'c3', label: '列3' },
-// 			{ value: 'c4', label: '列4' },
-// 			{ value: 'c5', label: '列5' },
-// 			{ value: 'c6', label: '列6' },
-// 			{ value: 'c7', label: '列7' },
-// 			{ value: 'c8', label: '列8' },
-// 			{ value: 'c9', label: '列9' },
-// 			{ value: 'c10', label: '列10' },
-// 			{ value: 'c11', label: '列11' },
-// 			{ value: 'c12', label: '列12' },
-// 			{ value: 'c13', label: '列13' }
-// 		];
+				</FormItem>
+			</Form>
+		);
+	}
+};
 
-// 		return (
-// 			<Form layout='horizontal'>
-// 				<FormItem label='分组' {...formItemLayout}>
-// 					{getFieldDecorator('groupBy', {
-// 						initialValue : groupBy
-// 					})(
-// 						<Select mode="multiple">
-// 							{columns.map((c, i)=>{
-// 								return (<Option key={`column-${i}`} value={c.value}>{c.label}</Option>)
-// 							})}
-// 						</Select>
-// 					)}
-// 				</FormItem>
-// 				{/* <FormItem label='分段' {...formItemLayout}>
-// 					{getFieldDecorator('bucketization', {
-// 						initialValue : bucketization
-// 					})(
-// 						<Select mode="multiple">
-// 							{bucketizations.map((b, i)=>{
-// 								return (<Option key={`bucketization-${i}`} value={b.value}>{b.label}</Option>)
-// 							})}
-// 						</Select>
-// 					)}
-// 				</FormItem> */}
-// 			</Form>
-// 		);
-// 	}
-// }
+function mapStateToProps({ present: { chartDesigner } }) {
+    return { chartDesigner: chartDesigner }
+}
 
-// export default Form.create()(PreparingForm);
+export default Form.create()(connect(mapStateToProps)(PreparingForm));

app/components/chartDesigner/sections/styleEditor.jsx

@@ -9,13 +9,11 @@ class StyleManager extends React.Component {
     }
 
     render() {
-        const { getFieldDecorator } = this.props.form;
+        const { formItemLayout } = this.props;
         return (
             <Form>
-                <FormItem label='图例'>
-                    {getFieldDecorator('legend')(
-                        <Input />
-                    )}
+                <FormItem label='图例' {...formItemLayout}>
+                    <Input />
                 </FormItem>
             </Form>
         );

app/components/chartDesigner/sections/toolBar.less

@@ -2,6 +2,7 @@
     margin-left: 10px;
 }
 .content-header {
+    border-top: none;
     height: auto;
     .toolbar {
         display: flex;

app/components/chartDesigner/sections/toolbar.jsx

@@ -2,27 +2,22 @@ import React from 'react';
 import { Tag, Icon, Modal, Button } from 'antd';
 import FilterBox from './filterBox';
 import emitter from '../../../eventManger/ev';
+import { connect } from 'dva';
+import chartDesigner from '../../../models/chartDesigner';
 import './toolbar.less';
 
 class Toolar extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            filters: props.filters || [],
+            filters: props.chartDesigner.filters || [],
             showFilterBox: false
         }
     }
 
     filterUsingChange = (e) => {
         const key = e.target.dataset.key;
-        const { filters } = this.state;
-        let nextFilters = filters.map(f => {
-            if(f.key == key) {
-                f.using = !f.using
-            }
-            return f;
-        });
-        this.setState({ filters: nextFilters });
+        this.props.dispatch({ type: 'chartDesigner/filters/setUsing', key: key});
     }
 
     showFilterBox = (e) => {
@@ -42,9 +37,7 @@ class Toolar extends React.Component {
      */
     createFilters = () => {
         emitter.emit('getFilters', function(filters) {
-            this.setState({
-                filters: filters
-            }, ()=>{console.log(this.state.filters)});
+            this.props.dispatch({ type: 'chartDesigner/filters/createFilters', filters: filters});
             this.hideFilterBox()
         }.bind(this));
     }
@@ -92,7 +85,9 @@ class Toolar extends React.Component {
     }
 
     render() {
-        const { filters, showFilterBox } = this.state;
+        const filters = this.props.chartDesigner.filters;
+        const columns = this.props.chartDesigner.columns;
+        const { showFilterBox } = this.state;
 
         let tags = filters.map((f, i)=>{
             return {
@@ -137,10 +132,14 @@ class Toolar extends React.Component {
                     maskClosable={false}
                     destroyOnClose={true}
                 >
-                    <FilterBox filterData={filters}/>  
+                    <FilterBox columns={columns}/>  
                 </Modal>
             </div>
         );
     }
 }
-export default Toolar;
+function mapStateToProps({ present: { chartDesigner } }) {
+    return { chartDesigner: chartDesigner }
+}
+
+export default connect(mapStateToProps)(Toolar);

app/data/charts/option/bar.json

@@ -0,0 +1,68 @@
+{
+    "tooltip" : {
+        "trigger": "axis",
+        "axisPointer": {
+            "type": "cross",
+            "label": {
+                "backgroundColor": "#6a7985"
+            }
+        }
+    },
+    "legend": {
+        "data":["邮件营销","联盟广告","视频广告","直接访问","搜索引擎"]
+    },
+    "toolbox": {
+        "feature": {
+            "saveAsImage": {}
+        }
+    },
+    "xAxis" : [
+        {
+            "type" : "category",
+            "data" : ["周一","周二","周三","周四","周五","周六","周日"]
+        }
+    ],
+    "yAxis" : [
+        {
+            "type" : "value"
+        }
+    ],
+    "series" : [
+        {
+            "name":"邮件营销",
+            "type":"bar",
+            "areaStyle": {"normal": {}},
+            "data":[120, 132, 101, 134, 90, 230, 210]
+        },
+        {
+            "name":"联盟广告",
+            "type":"bar",
+            "areaStyle": {"normal": {}},
+            "data":[220, 182, 191, 234, 290, 330, 310]
+        },
+        {
+            "name":"视频广告",
+            "type":"bar",
+            "areaStyle": {"normal": {}},
+            "data":[150, 232, 201, 154, 190, 330, 410]
+        },
+        {
+            "name":"直接访问",
+            "type":"bar",
+            "areaStyle": {"normal": {}},
+            "data":[320, 332, 301, 334, 390, 330, 320]
+        },
+        {
+            "name":"搜索引擎",
+            "type":"bar",
+            "label": {
+                "normal": {
+                    "show": true,
+                    "position": "top"
+                }
+            },
+            "areaStyle": {"normal": {}},
+            "data":[820, 932, 901, 934, 1290, 1330, 1111]
+        }
+    ]
+}

app/index.js

@@ -1,8 +1,6 @@
-import React from 'react';
 import dva from 'dva';
-import undoable, { ActionCreators } from 'redux-undo';
-import title from './models/title'
-import preparing from './models/preparing'
+import undoable from 'redux-undo';
+import chartDesigner from './models/chartDesigner'
 
 // 1. Initialize
 const app = dva({
@@ -16,9 +14,7 @@ const app = dva({
 // app.use({});
 
 // 3. Model
-app.model(require('./models/example'));
-app.model(title);
-app.model(preparing);
+app.model(chartDesigner);
 
 // 4. Router
 app.router(require('./router'));

app/models/chartDesigner.js

@@ -0,0 +1,208 @@
+export default {
+    namespace: 'chartDesigner',
+    state: {
+        columns: [{
+            label: '姓名',
+            name: 'c1',
+            type: 'string'
+        }, {
+            label: '编号',
+            name: 'c2',
+            type: 'number'
+        }, {
+            label: '出生日期',
+            name: 'c3',
+            type: 'time'
+        }, {
+            label: '权限',
+            name: 'c4',
+            type: 'categorical',
+            selection: ['查看', '新增', '删除', '修改', '提交', '审核']
+        }],
+        allPermission: [
+			{ value: 'owner', name: '创建人' },
+			{ value: 'anyone', name: '所有人' }
+        ],
+        allDataSource: [
+			{ id: 'd1', name: '数据源1' },
+			{ id: 'd2', name: '数据源2' },
+			{ id: 'd3', name: '数据源3' },
+			{ id: 'd4', name: '数据源4' },
+			{ id: 'd5', name: '数据源5' },
+			{ id: 'd6', name: '数据源6' },
+		],
+        header: {
+            label: '标题'
+        },
+        baseConfig: {
+            dataSource: {
+                key: 'd4',
+                label: '数据源4'
+            },
+            viewType: {
+                key: 'bar',
+                label: '柱状图'
+            }
+        },
+        preparing: {
+            groupBy: []
+        },
+        barConfig: {
+
+        },
+        aggregateTable: {
+
+        },
+        dataView: {
+
+        },
+        style: {
+
+        },
+        filters: []
+    },
+    reducers: {
+        setTitle(state, action) {
+            let newState = Object.assign({}, state, {
+                header: {
+                    label: action.text
+                }
+            });
+            return newState;
+        },
+        /**
+         * 基础设置-数据源
+         */
+        'baseConfig/setDataSource'(state, action) {
+            const baseConfig = state.baseConfig;
+            let newBaseConfig = { ...baseConfig, ...{ dataSource: action.dataSource }};
+            let newState = { ...state, ...{ baseConfig: newBaseConfig }};
+            return newState;
+        },
+        /**
+         * 基础设置-可视化模式
+         */
+        'baseConfig/setViewType'(state, action) {
+            const baseConfig = state.baseConfig;
+            let newBaseConfig = Object.assign({}, baseConfig, {
+                viewType: action.viewType
+            });
+            let newState = Object.assign({}, state, {
+                baseConfig: newBaseConfig
+            });
+            return newState;
+        },
+        /**
+         * 总体统计数据表选项-分析目标
+         */
+        'aggregateTable/setTargetColumn'(state, action) {
+            const aggregateTable = state.aggregateTable;
+            let newAggregateTable = Object.assign({}, aggregateTable, {
+                targetColumn: action.targetColumn
+            });
+            let newState = Object.assign({}, state, {
+                aggregateTable: newAggregateTable
+            });
+            return newState;
+        },
+        /**
+         * 总体统计数据表选项-显示总体数据
+         */
+        'aggregateTable/setStatistics'(state, action) {
+            const aggregateTable = state.aggregateTable;
+            let newAggregateTable = Object.assign({}, aggregateTable, {
+                statistics: action.statistics
+            });
+            let newState = Object.assign({}, state, {
+                aggregateTable: newAggregateTable
+            });
+            return newState;
+        },
+        /**
+         * 个体统计数据表选项-分析目标
+         */
+        'dataView/setTargetColumn'(state, action) {
+            const dataView = state.dataView;
+            let newDataView = Object.assign({}, dataView, {
+                targetColumn: action.targetColumn
+            });
+            let newState = Object.assign({}, state, {
+                dataView: newDataView
+            });
+            return newState;
+        },
+        /**
+         * 柱状图设置-设置横轴
+         */
+        'barConfig/setXAixs'(state, action) {
+            const barConfig = state.barConfig;
+            let newBarConfig = Object.assign({}, barConfig, {
+                xAixs: action.xAixs
+            });
+            let newState = Object.assign({}, state, {
+                barConfig: newBarConfig
+            });
+            return newState;
+        },
+        /**
+         * 柱状图设置-设置纵轴
+         */
+        'barConfig/setYAixs'(state, action) {
+            const barConfig = state.barConfig;
+            let newBarConfig = Object.assign({}, barConfig, {
+                yAixs: action.yAixs
+            });
+            let newState = Object.assign({}, state, {
+                barConfig: newBarConfig
+            });
+            return newState;
+        },
+        /**
+         * 个体统计数据表选项-分析目标
+         */
+        'dataView/setTargetColumn'(state, action) {
+            const dataView = state.dataView;
+            let newDataView = Object.assign({}, dataView, {
+                targetColumn: action.targetColumn
+            });
+            let newState = Object.assign({}, state, {
+                dataView: newDataView
+            });
+            return newState;
+        },
+        /**
+         * 数据预处理-分组
+         */
+        'preparing/setGroupBy'(state, action) {
+            let newState = Object.assign({}, state, {
+                preparing: {
+                    groupBy: action.groupBy
+                }
+            });
+            return newState;
+        },
+        /**
+         * 过滤规则-生成过滤规则
+         */
+        'filters/createFilters'(state, action) {
+            return { ...state, ...{ filters: action.filters } };
+        },
+        /**
+         * 过滤规则-启用/反启用
+         */
+        'filters/setUsing'(state, action) {
+            return { ...state, ...{ filters: state.filters.map( f => {
+                if(f.key == action.key) {
+                    f = Object.assign({}, f, { using: !f.using });
+                }
+                return f;
+            }) } };
+        }
+    },
+    effects: {
+        // *test(action, { put, call }) {
+        //     yield call(delay, 1000);
+        //     yield put({ type: 'chartDesigner/setTitle', text: 'ttttttt' });
+        // }
+    }
+};

custom.less

@@ -1 +0,0 @@
-@icon-url: "/app/resources/iconfont/iconfont"; // 把 iconfont 地址改到本地

main.js

@@ -1,167 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { LocaleProvider, DatePicker, message } from 'antd';
-// 由于 antd 组件的默认文案是英文，所以需要修改为中文
-import zhCN from 'antd/lib/locale-provider/zh_CN';
-import moment from 'moment';
-import 'moment/locale/zh-cn';
-import {
-    Router as HashRouter , // 或者是HashRouter、MemoryRouter
-    Route,   // 这是基本的路由块
-    Link,    // 这是a标签
-    Switch ,  // 这是监听空路由的
-    Redirect, // 这是重定向
-    Prompt   // 防止转换
-} from 'react-router-dom';
-
-import createHistory from 'history/createHashHistory';
-import App from './app/components/chartDesigner/layout';
-const history = createHistory();
-import './app/utils/baseUtils';
-import './main.less';
-
-moment.locale('zh-cn');
-
-
-class DateT extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      date: '',
-    };
-  }
-  handleChange(date) {
-    message.info('您选择的日期是: ' + (date ? date.toString() : ''));
-    this.setState({ date });
-  }
-  render() {
-    let arr = [1,2,3,4,4,5,6,7];
-    console.log(arr.map(function(a,i){return a+1;}));
-    return (
-      <LocaleProvider locale={zhCN}>
-        <div style={{ width: 400, margin: '100px auto' }}>
-          <DatePicker onChange={value => this.handleChange(value)} />
-          <div style={{ marginTop: 20 }}>当前日期：{this.state.date && this.state.date.toString()}</div>
-        </div>
-      </LocaleProvider>
-    );
-  }
-}
-
-// A simple data API that will be used to get the data for our
-// components. On a real website, a more robust data fetching
-// solution would be more appropriate.
-const PlayerAPI = {
-	players: [
-		{ number: 1, name: "Ben Blocker", position: "G" },
-		{ number: 2, name: "Dave Defender", position: "D" },
-		{ number: 3, name: "Sam Sweeper", position: "D" },
-		{ number: 4, name: "Matt Midfielder", position: "M" },
-		{ number: 5, name: "William Winger", position: "M" },
-		{ number: 6, name: "Fillipe Forward", position: "F" }
-	],
-	all: function() { return this.players},
-	get: function(id) {
-		const isPlayer = p => p.number === id
-		return this.players.find(isPlayer)
-	}
-}
-  
-  // The FullRoster iterates over all of the players and creates
-  // a link to their profile page.
-  const FullRoster = () => (
-	<div>
-	  <ul>
-		{
-		  PlayerAPI.all().map(p => (
-			<li key={p.number}>
-			  <Link to={`/roster/${p.number}`}>{p.name}</Link>
-			</li>
-		  ))
-		}
-	  </ul>
-	</div>
-  )
-  
-  // The Player looks up the player using the number parsed from
-  // the URL's pathname. If no player is found with the given
-  // number, then a "player not found" message is displayed.
-  const Player = (props) => {
-	const player = PlayerAPI.get(
-	  parseInt(props.match.params.number, 10)
-	)
-	if (!player) {
-	  return <div>Sorry, but the player was not found</div>
-	}
-	return (
-	  <div>
-		<h1>{player.name} (#{player.number})</h1>
-		<h2>Position: {player.position}</h2>
-		<Link to='/roster'>Back</Link>
-	  </div>
-	)
-  }
-  
-  // The Roster component matches one of two different routes
-  // depending on the full pathname
-  const Roster = () => (
-	<Switch>
-	  <Route exact path='/roster' component={FullRoster}/>
-	  <Route path='/roster/:number' component={Player}/>
-	</Switch>
-  )
-  
-  const Schedule = () => (
-	<div>
-	  <ul>
-		<li>6/5 @ Evergreens</li>
-		<li>6/8 vs Kickers</li>
-		<li>6/14 @ United</li>
-	  </ul>
-	</div>
-  )
-  
-  const Home = () => (
-	<div>
-	  <h1>Welcome to the Tornadoes Website!</h1>
-	</div>
-  )
-  
-  const Main = () => (
-	<main>
-	  <Switch>
-		<Route exact path='/' component={Home}/>
-		<Route path='/roster' component={Roster}/>
-		<Route path='/schedule' component={Schedule}/>
-		<Route path='/datet' component={DateT}/>
-	  </Switch>
-	</main>
-  )
-  
-  const Header = () => (
-	<header>
-	  <nav>
-		<ul>
-		  <li><Link to='/'>Home</Link></li>
-		  <li><Link to='/roster'>Roster</Link></li>
-		  <li><Link to='/schedule1'>Schedule</Link></li>
-		  <li><Link to='/datet'>DateT</Link></li>
-		</ul>
-	  </nav>
-	</header>
-  )
-  
-//   const App = () => (
-// 	<div>
-// 	  <Header />
-// 	  <Main />
-// 	</div>
-//   )
-  
-ReactDOM.render((
-	<LocaleProvider locale={zhCN}>
-		<HashRouter history={history}>
-			<App />
-		</HashRouter>
-	</LocaleProvider>
-), document.getElementById('root'))

main.less

@@ -1,26 +0,0 @@
-@import "custom.less";
-
-.ant-collapse {
-    border: none;
-    border-radius: 0;
-    .ant-collapse-item {
-        .ant-collapse-header {
-            line-height: 14px;
-            padding: 10px 0 10px 40px;
-            color: rgba(0, 0, 0, 0.85);
-            cursor: pointer;
-            position: relative;
-            -webkit-transition: all .3s;
-            transition: all .3s;
-            .arrow {
-                line-height: 35px;
-            }
-        }
-    }
-}
-.ant-collapse-content > .ant-collapse-content-box {
-    padding: 4px;
-}
-.ant-form-item {
-    margin-bottom: 0;
-}