资源文件目录调整/部分接口解析调整

src/components/chartDesigner/content.jsx

@@ -5,6 +5,7 @@ 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'
@@ -35,8 +36,8 @@ class ChartDesignerContent extends React.Component {
             configForm = (<DataViewConfigForm formItemLayout={formItemLayout}/>);
             chartView = (<TableView />);
         }else if(viewType === 'line') {
-            // configForm = (<DataViewConfigForm formItemLayout={formItemLayout}/>);
-            // chartView = (<EchartsView />);
+            configForm = (<LineConfigForm formItemLayout={formItemLayout}/>);
+            chartView = (<EchartsView />);
         }else if(viewType === 'bar') {
             configForm = (<BarConfigForm formItemLayout={formItemLayout}/>);
             chartView = (<EchartsView />);

src/components/chartDesigner/header.jsx

@@ -12,7 +12,7 @@ const Header = ({ chartDesigner, dispatch }) => {
                 <Button onClick={() => {
                     dispatch({ type: 'main/redirect', path: '/chart' });
                 }}>
-                    返回
+                    <Icon type='back' />返回
                 </Button>
             </div>
             <div className='header-item toolbar-title'>
@@ -35,7 +35,7 @@ const Header = ({ chartDesigner, dispatch }) => {
                     <Button className='button-uodo' icon='undo' onClick={() => {
                         dispatch(ActionCreators.undo());
                     }}>撤销</Button>
-                    <Button className='button-redo' onClick={() => {
+                    <Button className='button-redo' icon='redo' onClick={() => {
                         dispatch(ActionCreators.redo());
                     }}>重做</Button>
                     <Button className='button-uodo' >预览</Button>

src/components/chartDesigner/sections/barConfigForm.jsx

@@ -30,7 +30,7 @@ const BarConfigForm = ({ chartDesigner, dispatch, formItemLayout }) => {
 					onChange={(value, items) => {
 						let column = {};
 						let granularity = {};
-						if(value.length > 0) {
+						if(items.length > 0) {
 							column = { type: items[0].type, value: items[0].value, label: items[0].label };
 						}
 						if(items.length > 1) {
@@ -121,9 +121,9 @@ const BarConfigForm = ({ chartDesigner, dispatch, formItemLayout }) => {
 			</FormItem>
 			<FormItem label='分组' {...formItemLayout}>
 				<Select
-					maxTagCount={1}
 					labelInValue={true}
 					placeholder='请选择...'
+					allowClear={true}
 					onChange={(value) => {
 						// value = value.splice(-1);
 						dispatch({ type: 'chartDesigner/changeField', name: 'preparing', value: { ...chartDesigner.preparing, groupBy: value } });

src/components/chartDesigner/sections/baseConfigForm.less

@@ -14,10 +14,13 @@
                     margin: 0 auto;
                 }
                 .viewtype-bar {
-                    background-image: url(../../../assets/chart-bar.png);
+                    background-image: url(/public/images/chart-bar.png);
                 }
                 .viewtype-pie {
-                    background-image: url(../../../assets/chart-pie.png);
+                    background-image: url(/public/images/chart-pie.png);
+                }
+                .viewtype-line {
+                    background-image: url(/public/images/chart-line.png);
                 }
             }
         }

src/components/chartDesigner/sections/gauge.json

@@ -28,6 +28,35 @@
         "label": "最小值",
         "columnType": ["scale", "ordinal"]
     }],
+    "line": [{
+        "value": "sum",
+        "label": "累计",
+        "columnType": ["scale", "ordinal"]
+    }, {
+        "value": "avg",
+        "label": "平均值",
+        "columnType": ["scale", "ordinal"]
+    }, {
+        "value": "median",
+        "label": "中位数",
+        "columnType": ["scale", "ordinal"]
+    }, {
+        "value": "count",
+        "label": "计数",
+        "columnType": ["index", "time", "categorical", "scale", "ordinal", "string"]
+    }, {
+        "value": "distinctCount",
+        "label": "不重复计数",
+        "columnType": ["index", "time", "categorical", "scale", "ordinal", "string"]
+    }, {
+        "value": "max",
+        "label": "最大值",
+        "columnType": ["scale", "ordinal"]
+    }, {
+        "value": "min",
+        "label": "最小值",
+        "columnType": ["scale", "ordinal"]
+    }],
     "pie": [{
         "value": "avg",
         "label": "平均值",

src/components/chartDesigner/sections/lineConfigForm.jsx

@@ -1,57 +1,145 @@
-import React from 'react';
-import { Form, Select } from 'antd';
-const FormItem = Form.Item;
-const { Option } = Select;
+import React from 'react'
+import { Form, Select, Tag, Cascader, Dropdown, Menu } from 'antd'
+import { connect } from 'dva'
+import '../../../models/chartDesigner'
+import GAUGE from './gauge.json'
+const FormItem = Form.Item
+const { Option } = Select
 
-class LineConfigForm extends React.Component {
+const LineConfigForm = ({ chartDesigner, dispatch, formItemLayout }) => {
+	
+	const columns = chartDesigner.columns;
 
-	constructor(props) {
-		super(props);
-		this.state = {
-		}
-	}
-
-	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'];
-		const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
-		const formItemLayout = {
-			labelCol: { span: 10 },
-			wrapperCol: { span: 14 },
-        };
-        
-		return (
-            <Form layout='horizontal'>
-				<FormItem label='横轴' {...formItemLayout}>
-					{getFieldDecorator('xAxis', {
-						initialValue : targetColumn
-					})(
-						<Select mode='multiple'>
-							{columns.map((c, i)=>{
-								return (<Option key={`xaxis-${i}`} value={c.value}>{c.label}</Option>)
-							})}
-						</Select>
-					)}
-				</FormItem>
-                <FormItem label='纵轴' {...formItemLayout}>
-					{getFieldDecorator('yAxis', {
-						initialValue : targetColumn
-					})(
-						<Select mode='multiple'>
-							{columns.map((c, i)=>{
-								return (<Option key={`yaxis-${i}`} value={c.value}>{c.label}</Option>)
+	return (
+		<Form hideRequiredMark={true}>
+			<FormItem label='横轴' {...formItemLayout}>
+				<Cascader
+					value={[chartDesigner.lineConfig.xAxis.column.value, chartDesigner.lineConfig.xAxis.granularity.value]}
+					allowClear={true}
+					options={columns.filter(c =>['time'].indexOf(c.type) !== -1).map((c, i)=>{
+						return {
+							type: c.type,
+							value: c.name,
+							label: c.label
+						}
+					})}
+					onChange={(value, items) => {
+						let column = {};
+						let granularity = {};
+						console.log('items', items)
+						console.log('value', value)
+						if(items.length > 0) {
+							column = { type: items[0].type, value: items[0].value, label: items[0].label };
+						}
+						if(items.length > 1) {
+							granularity = { value: items[1].value, label: items[1].label };
+						}
+						dispatch({ type: 'chartDesigner/changeField', name: 'lineConfig', value: { ...chartDesigner.lineConfig, xAxis: { column, granularity } } });
+					}}
+					displayRender={(label, selectedOptions) => {
+						let text = '';
+						let className = 'cascader-label';
+						if(label.length > 0) {
+							className += ' full-label';
+							text += label[0];
+							if(label.length > 1) {
+								text += '(' + label[1] + ')';
+							}
+						}else {
+							className += ' empty-label';
+							text = '请选择...';
+						}
+						return <div className={className}>{text}</div>;
+					}}
+				>
+				</Cascader>
+			</FormItem>
+			<FormItem label='纵轴' {...formItemLayout}>
+				<Cascader
+					className='gauge-item'
+					value={[chartDesigner.lineConfig.yAxis.column.value, chartDesigner.lineConfig.yAxis.gauge.value]}
+					allowClear={true}
+					options={columns.map((c, i)=>{
+						return {
+							value: c.name,
+							label: c.label,
+							children: GAUGE[chartDesigner.baseConfig.viewType].map(g => {
+                                if(g.columnType.indexOf(c.type) !== -1) {
+                                    return g;
+                                }else {
+                                    return null;
+                                }
+                            }).filter( g => g!==null)
+						}
+					})}
+					onChange={(value, items) => {
+						let column = {};
+						let gauge = {};
+						if(value.length > 0) {
+							column = { type: items[0].type, value: items[0].value, label: items[0].label };
+							gauge = { value: items[1].value, label: items[1].label };
+						}
+						dispatch({ type: 'chartDesigner/changeField', name: 'lineConfig', value: { ...chartDesigner.lineConfig, yAxis: { column, gauge } } });
+					}}
+					displayRender={(label, selectedOptions) => {
+						let menu = selectedOptions.length > 0 ? <Menu
+							selectedKeys={[chartDesigner.lineConfig.yAxis.gauge.value]}
+							selectable={true}
+						>
+							{selectedOptions[0].children.map((c, i) => {
+								return <Menu.Item  data-value={c.value} data-label={c.label} key={c.value} onClick={(e) => {
+									let value = e.domEvent.target.getAttribute('data-value');
+									let label = e.domEvent.target.getAttribute('data-label');
+									dispatch({ type: 'chartDesigner/changeField', name: 'lineConfig', value: { 
+										...chartDesigner.lineConfig,
+										yAxis: {
+											column: chartDesigner.lineConfig.yAxis.column,
+											gauge: { value, label }
+										}
+									}});
+									e.domEvent.stopPropagation();
+								}}>{c.label}</Menu.Item>
 							})}
-						</Select>
-					)}
-				</FormItem>
-			</Form>
-        );
-	}
+						</Menu>: [];
+						let tag = selectedOptions.length > 0 ? <Dropdown
+							trigger={['click']}
+							overlay={menu}
+						>
+							<Tag size='small' onClick={(e) => {e.stopPropagation()}}>{label[1]}</Tag>
+						</Dropdown>
+						: null;
+
+						return <div className={`cascader-label ${tag?'full' : 'empty'}-label`}>
+							{tag}
+							<span>{label[0] || '请选择...'}</span>
+						</div>
+					}}
+				>
+				</Cascader>
+			</FormItem>
+			<FormItem label='分组' {...formItemLayout}>
+				<Select
+					maxTagCount={1}
+					labelInValue={true}
+					allowClear={true}
+					placeholder='请选择...'
+					onChange={(value) => {
+						// value = value.splice(-1);
+						dispatch({ type: 'chartDesigner/changeField', name: 'preparing', value: { ...chartDesigner.preparing, groupBy: value } });
+					}}
+					value={chartDesigner.preparing.groupBy}
+				>
+					{columns.filter(c => c.type === 'categorical').map((c, i)=>{
+						return (<Option key={i} value={c.name}>{c.label}</Option>)
+					})}
+				</Select>
+			</FormItem>
+		</Form>
+	);
 }
-export default Form.create()(LineConfigForm);
+
+function mapStateToProps({ present: { chartDesigner } }) {
+    return { chartDesigner: chartDesigner }
+}
+
+export default connect(mapStateToProps)(LineConfigForm);

src/components/chartDesigner/sections/toolbar.jsx

@@ -119,7 +119,7 @@ class Toolbar extends React.Component {
                         onClick={this.showFilterBox}
                         className={`filter-tag filter-tag-add`}
                     >
-                        <Icon type="setting" />
+                        <Icon type="filter" />
                     </Tag>
                 </div>
                 <div className='tools'>

src/components/common/loading.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Modal, Spin } from 'antd'
+import { connect } from 'dva'
+import '../../models/dataSource'
+
+const Loading = () => {
+    return (
+        <Modal className='loading-box'visible={false}>
+            <Spin />
+        </Modal>
+    );
+}
+
+function mapStateToProps({ present: { dataSource } }) {
+    return { dataSource: dataSource };
+}
+
+export default connect(mapStateToProps)(Loading)

src/components/datasource/dataSource.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Layout, Row, Col, Input, Button, Table, Icon, Tag, Menu, Dropdown } from 'antd'
+import { Layout, Row, Col, Input, Button, Table, Icon, Tag, Menu, Dropdown, Card } from 'antd'
 import { connect } from 'dva'
 import '../../models/dataSource'
 import '../../models/dataConnect'
@@ -34,7 +34,7 @@ class DataSource extends React.Component {
         const toolbar = mainContent.getElementsByClassName('datasource-tools')[0];
         const tableHeader = mainContent.getElementsByClassName('ant-table-header')[0];
         const tableBody = mainContent.getElementsByClassName('ant-table-body')[0];
-        tableBody.style.maxHeight=`${mainContent.offsetHeight - toolbar.offsetHeight - tableHeader.offsetHeight - 38}px`;
+        tableBody.style.maxHeight=`${mainContent.offsetHeight - toolbar.offsetHeight - tableHeader.offsetHeight - 58}px`;
     }
 
     onInputChange = (name, value) => {
@@ -172,48 +172,51 @@ class DataSource extends React.Component {
             width: 80
         }];
 
-        return (
+        return ( 
             <Layout className='datasource-view'>
                 <Content>
-                    <Row className='datasource-tools' type='flex' justify='end'>
-                        <Col className='search'>
-                            <Search
-                                placeholder="请输入关键字"
-                                onSearch={value => console.log(value)}
-                            />
-                        </Col>
-                        <Col>
-                            <Dropdown overlay={(
-                                <Menu onClick={(item, key, keyPath) => {
-                                    const type = item.key;
-                                    dispatch({ type: 'dataSource/resetNewModel' });
-                                    dispatch({ type: 'dataSource/setNewModelField', name: 'type', value: type });
-                                    dispatch({type: 'main/redirect', path: {pathname: '/datasource/'+ type +'/create'}});
-                                }}>
-                                    <Menu.Item key='database'>数据库</Menu.Item>
-                                    <Menu.Item key='file'>文件</Menu.Item>
-                                </Menu>
-                            )} trigger={['click']}>
-                                <Button style={{ display: activeTab==='dataConnect'?'none':'inline-block' }}>
-                                    <Icon type="plus" />添加数据源
-                                </Button>
-                            </Dropdown>
-                        </Col>
-                    </Row>
-                    <Table
-                        className='datasource-table datasource-table'
-                        columns={dataSourceColumns}
-                        dataSource={dataSource.list}
-                        loading={loading}
-                        size='small'
-                        scroll={{x: false, y: true}}
-                        pagination={false}
-                        onRow={(record) => {
-                            return {
-                                onClick: () => {this.setState({ selectedDataSourceCode:  record.code})}
-                            }
-                        }}
-                    />
+                    <Card className='datasource-body' title={
+                        <Row className='datasource-tools' type='flex' justify='end'>
+                            <Col className='search'>
+                                <Search
+                                    placeholder="请输入关键字"
+                                    onSearch={value => console.log(value)}
+                                />
+                            </Col>
+                            <Col>
+                                <Dropdown overlay={(
+                                    <Menu onClick={(item, key, keyPath) => {
+                                        const type = item.key;
+                                        dispatch({ type: 'dataSource/resetNewModel' });
+                                        dispatch({ type: 'dataSource/setNewModelField', name: 'type', value: type });
+                                        dispatch({type: 'main/redirect', path: {pathname: '/datasource/'+ type +'/create'}});
+                                    }}>
+                                        <Menu.Item key='database'>数据库</Menu.Item>
+                                        <Menu.Item key='file'>文件</Menu.Item>
+                                    </Menu>
+                                )} trigger={['click']}>
+                                    <Button style={{ display: activeTab==='dataConnect'?'none':'inline-block' }}>
+                                        <Icon type="plus" />添加数据源
+                                    </Button>
+                                </Dropdown>
+                            </Col>
+                        </Row>
+                    }>
+                        <Table
+                            className='datasource-table datasource-table'
+                            columns={dataSourceColumns}
+                            dataSource={dataSource.list}
+                            loading={loading}
+                            size='small'
+                            scroll={{x: false, y: true}}
+                            pagination={false}
+                            onRow={(record) => {
+                                return {
+                                    onClick: () => {this.setState({ selectedDataSourceCode:  record.code})}
+                                }
+                            }}
+                        />
+                    </Card>
                 </Content>
             </Layout>
         )

src/components/datasource/dataSource.less

@@ -1,75 +1,81 @@
 .datasource-view {
-    .datasource-tools {
-        margin-top: 5px;
-        margin-right: 5px;
-        .search {
-            margin-right: 5px;
+    .datasource-body {
+        padding: 0;
+        .ant-card-head {
+            padding: 0 10px;
+            .datasource-tools {
+                .search {
+                    margin-right: 5px;
+                }
+            }
         }
     }
-    .datasource-table{
-        .ant-table {
-            margin-top: 5px;
-            .ant-table-scroll {
-                .ant-table-header {
-                    overflow: hidden;
-                    table {
-                        thead {
-                            th {
-                                .ant-table-column-sorter, .ant-table-filter-icon {
-                                    opacity: 0;
-                                }
-                                :hover {
+    .ant-card-body {
+        padding: 0;
+        .datasource-table{
+            .ant-table {
+                .ant-table-scroll {
+                    .ant-table-header {
+                        overflow: hidden;
+                        table {
+                            thead {
+                                th {
                                     .ant-table-column-sorter, .ant-table-filter-icon {
-                                        opacity: 1;
+                                        opacity: 0;
+                                    }
+                                    :hover {
+                                        .ant-table-column-sorter, .ant-table-filter-icon {
+                                            opacity: 1;
+                                        }
                                     }
                                 }
-                            }
-                            .column-filtered {
-                                .ant-table-filter-icon {
-                                    opacity: 1;
-                                    color: red;
+                                .column-filtered {
+                                    .ant-table-filter-icon {
+                                        opacity: 1;
+                                        color: red;
+                                    }
                                 }
                             }
                         }
                     }
-                }
-                .ant-table-body {
-                    margin-top: 17px;
-                    overflow-y: auto !important;
-                    table {
-                        padding: 0;
-                        .ant-table-row {
-                            td {
-                                padding: 8px;
-                                .datasource-name {
-                                    display: flex;
-                                    .datasource-type {
-                                        width: 20px;
-                                        height: 20px;
-                                        background-size: cover;
-                                        background-repeat: no-repeat;
-                                        background-image: url('https://test-feapp.oss-cn-beijing.aliyuncs.com/feapp/s70f_180613_fix_a_t/images/trdservices/44_2.png');
+                    .ant-table-body {
+                        margin-top: 17px;
+                        overflow-y: auto !important;
+                        table {
+                            padding: 0;
+                            .ant-table-row {
+                                td {
+                                    padding: 8px;
+                                    .datasource-name {
+                                        display: flex;
+                                        .datasource-type {
+                                            width: 20px;
+                                            height: 20px;
+                                            background-size: cover;
+                                            background-repeat: no-repeat;
+                                            background-image: url('https://test-feapp.oss-cn-beijing.aliyuncs.com/feapp/s70f_180613_fix_a_t/images/trdservices/44_2.png');
+                                        }
+                                        .type-oracle {
+                                            background-position: 0 -731px;
+                                        }
                                     }
-                                    .type-oracle {
-                                        background-position: 0 -731px;
+                                    .datasource-tag {
+                                        margin: 2px;
+                                        cursor: default;
+                                    }
+                                    .ant-dropdown-trigger {
+                                        font-size: 18px;
+                                        cursor: pointer;
                                     }
                                 }
-                                .datasource-tag {
-                                    margin: 2px;
-                                    cursor: default;
-                                }
-                                .ant-dropdown-trigger {
-                                    font-size: 18px;
-                                    cursor: pointer;
-                                }
-                            }
-                            .action-col {
-                                display: flex;
-                                .operation {
-                                    cursor: pointer;
-                                }
-                                .operation:hover {
-                                    color: #40a9ff;
+                                .action-col {
+                                    display: flex;
+                                    .operation {
+                                        cursor: pointer;
+                                    }
+                                    .operation:hover {
+                                        color: #40a9ff;
+                                    }
                                 }
                             }
                         }

src/components/datasource/dataSourceDetail.less

@@ -57,7 +57,7 @@
                                             width: 60px;
                                             height: 60px;
                                             background-size: cover;
-                                            background-image: url(../../assets/selected.png);
+                                            background-image: url(/public/images/selected.png);
                                             position: absolute;
                                             right: 0px;
                                             top: 0px;

src/constants/url.js

@@ -1,7 +1,7 @@
-var BASE_URL = 'http://192.168.253.129:8080';
+const BASE_URL = 'http://192.168.253.129:8080';
 
 /**后台接口地址 */
-var URLS = {
+const URLS = {
     
     /***************************************数据源***************************************/
 
@@ -19,7 +19,7 @@ var URLS = {
 
     DATASOURCE_QUERY_DATACOLUMNS: BASE_URL + '/getColumnData', // 获得数据源下的列数据
 
-    /***************************************数据列***************************************/
+    /***************************************数据连接配置***************************************/
 
     DATACONNECT_ADD: BASE_URL + '/inputDatabases', // 新增数据连接配置
 
@@ -31,9 +31,9 @@ var URLS = {
 
     /***************************************图表***************************************/
 
-    CHART_ADD: BASE_URL + '/inputHistogram', // 新增图表
+    CHART_ADD: BASE_URL + '/inputCharts', // 新增图表
 
-    CHART_UPDATE: BASE_URL + '/updateHistogram', // 修改图表
+    CHART_UPDATE: BASE_URL + '/updateCharts', // 修改图表
 
     CHART_DELETE: BASE_URL + '/delChartsConfig', // 删除图表
 

src/custom.less

@@ -1 +1,8 @@
-@icon-url: "/app/resources/iconfont/iconfont"; // 把 iconfont 地址改到本地
+@import "/public/fonts/iconfont/custom/iconfont.css";
+@icon-url: "/public/fonts/iconfont/default"; // 把 iconfont 地址改到本地
+
+:global(.anticon) {
+    &:before {
+        font-family: "anticon", "anticon-custom" !important
+    }
+}

src/models/chart.js

@@ -60,6 +60,10 @@ export default {
                     const getViewType = function(type) {
                         if(type === 'Histogram') {
                             return 'bar';
+                        }else if(type === 'Line') {
+                            return 'line';
+                        }else if(type === 'Pie') {
+                            return 'pie';
                         }else {
                             return '';
                         }
@@ -67,7 +71,8 @@ export default {
 
                     let resData = res.data.data;
                     let groupBy = JSON.parse(resData.groupBy);
-                    let barConfig = JSON.parse(resData.chartConfig);
+                    let chartConfig = JSON.parse(JSON.parse(resData.chartConfig));
+                    let viewType = getViewType(resData.chartType);
 
                     let data = {
                         code: resData.chartId,
@@ -76,7 +81,7 @@ export default {
                         },
                         baseConfig: {
                             dataSource: resData.dataId,
-                            viewType: getViewType(resData.chartType)
+                            viewType: viewType
                         },
                         preparing: {
                             groupBy: groupBy.map(g => {
@@ -84,40 +89,27 @@ export default {
                                     key: g.columnName,
                                     label: g.columnRename
                                 }
-                            })
-                        },
-                        barConfig: {
-                            xAxis: {
-                                column: {
-                                    value: barConfig.xAxis.columnName,
-                                    label: barConfig.xAxis.columnRename,
-                                    type: barConfig.xAxis.columnType
-                                },
-                                granularity: {
-                                    value: barConfig.xAxis.showDataType,
-                                    label: barConfig.xAxis.showDataLable
-                                }
-                            },
-                            yAxis: {
-                                column: {
-                                    value: barConfig.yAxis.columnName,
-                                    label: barConfig.yAxis.columnRename,
-                                    type: barConfig.yAxis.columnType
-                                },
-                                gauge: {
-                                    value: barConfig.yAxis.showDataType,
-                                    label: barConfig.yAxis.showDataLable
-                                }
-                            }
+                            })[0]
                         }
                     }
-                    yield put({ type: 'chartDesigner/defaultChangeFields', fields: [
-                        { name: 'code', value: data.code },
-                        { name: 'header', value: data.header },
-                        { name: 'baseConfig', value: data.baseConfig },
-                        { name: 'preparing', value: data.preparing },
-                        { name: 'barConfig', value: data.barConfig }
-                    ] });
+
+                    if(viewType === 'bar') {
+                        data.barConfig = chartConfig
+                    }else if(viewType === 'pie') {
+                        data.pieConfig = chartConfig
+                    }else if(viewType === 'line') {
+                        data.lineConfig = chartConfig;
+                    }
+
+                    let fields = [];
+                    for(let key in data) {
+                        fields.push({
+                            name: key,
+                            value: data[key]
+                        })
+                    }
+                    console.log(fields);
+                    yield put({ type: 'chartDesigner/defaultChangeFields', fields: fields });
                     
                     yield put({ type: 'chartDesigner/changeDataSource', value: {
                         dataSource: data.baseConfig.dataSource,

src/models/chartDesigner.js

@@ -13,6 +13,7 @@ export default {
             aggregateTableConfig: {},
             dataViewConfig: {},
             barConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} } },
+            lineConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} } },
             pieConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} } },
             style: {},
             filters: [],
@@ -50,6 +51,16 @@ export default {
                 gauge: {}
             }
         },
+        lineConfig: {
+            xAxis: {
+                column: {},
+                granularity: {}
+            },
+            yAxis: {
+                column: {},
+                gauge: {}
+            }
+        },
         pieConfig: {
             xAxis: {
                 column: {},
@@ -182,42 +193,30 @@ export default {
         *remoteAdd(action, { select, call, put }) {
             try{
                 const chartDesigner = yield select(state => state.present.chartDesigner);
-                const { header, baseConfig, preparing, barConfig } = chartDesigner;
-                let body = {}; // 基本属性
+                const { header, baseConfig, preparing, barConfig, pieConfig, lineConfig } = chartDesigner;
+
+                let body = {
+                    chartName: header.label,
+                    dataId: baseConfig.dataSource,
+                    groupBy: preparing.groupBy ? [{
+                        columnName: preparing.groupBy.key,
+                        columnRamane: preparing.groupBy.label
+                    }] : [],
+                    createBy: 'zhuth',
+                    describes: '',
+                    style: ''
+                }; // 基本属性
                 if(baseConfig.viewType === 'bar') {
-                    body = {
-                        chartName: header.label,
-                        chartType: 'Histogram',
-                        dataId: baseConfig.dataSource,
-                        groupBy: preparing.groupBy.map(g => {
-                            return {
-                                columnName: g.key,
-                                columnRamane: g.label
-                            }
-                        }),
-                        chartConfig: {
-                            xAxis: {
-                                columnName: barConfig.xAxis.column.value,
-                                columnRename: barConfig.xAxis.column.label,
-                                columnType: barConfig.xAxis.column.type,
-                                showDataType: barConfig.xAxis.granularity.value,
-                                showDataLable: barConfig.xAxis.granularity.label
-                            },
-                            yAxis: {
-                                columnName: barConfig.yAxis.column.value,
-                                columnRename: barConfig.yAxis.column.label,
-                                columnType: barConfig.yAxis.column.type,
-                                showDataType: barConfig.yAxis.gauge.value,
-                                showDataLable: barConfig.yAxis.gauge.label
-                            }
-                        },
-                        isLegend: 1,
-                        isTooltip: 1,
-                        isToolbox: 1,
-                        createBy: "zhuth",
-                        describes: ""
-                    }
+                    body.chartType = 'Histogram';
+                    body.chartConfig = JSON.stringify(barConfig);
+                }else if(baseConfig.viewType === 'pie') {
+                    body.chartType = 'Pie';
+                    body.chartConfig = JSON.stringify(pieConfig);
+                }else if(baseConfig.viewType === 'line') {
+                    body.chartType = 'Line';
+                    body.chartConfig = JSON.stringify(lineConfig);
                 }
+                console.log('remoteAdd-body', body);
                 const res = yield call(service.fetch, {
                     url: URLS.CHART_ADD,
                     body: body
@@ -225,50 +224,39 @@ export default {
                 if(!res.err && res.data.code > 0) {
                     message.success('新增成功!');
                     yield put({ type: 'chart/fetchList' });
+                }else {
+                    message.error('新增失败');
                 }
             }catch(e) {
-                console.log(e);
+                console.error(e);
+                message.error('新增失败');
             }
         },
         *remoteModify(action, { select, call, put }) {
             try{
                 const chartDesigner = yield select(state => state.present.chartDesigner);
-                const { code, header, baseConfig, preparing, barConfig } = chartDesigner;
-                let body = {}; // 基本属性
+                const { code, header, baseConfig, pieConfig, lineConfig, preparing, barConfig } = chartDesigner;
+                let body = {
+                    chartId: code,
+                    chartName: header.label,
+                    dataId: baseConfig.dataSource,
+                    groupBy: preparing.groupBy ? [{
+                        columnName: preparing.groupBy.key,
+                        columnRamane: preparing.groupBy.label
+                    }] : [],
+                    createBy: 'zhuth',
+                    describes: '',
+                    style: ''
+                }; // 基本属性
                 if(baseConfig.viewType === 'bar') {
-                    body = {
-                        chartId: code,
-                        chartName: header.label,
-                        chartType: 'Histogram',
-                        dataId: baseConfig.dataSource,
-                        groupBy: preparing.groupBy.map(g => {
-                            return {
-                                columnName: g.key,
-                                columnRamane: g.label
-                            }
-                        }),
-                        chartConfig: {
-                            xAxis: {
-                                columnName: barConfig.xAxis.column.value,
-                                columnRename: barConfig.xAxis.column.label,
-                                columnType: barConfig.xAxis.column.type,
-                                showDataType: barConfig.xAxis.granularity.value,
-                                showDataLable: barConfig.xAxis.granularity.label
-                            },
-                            yAxis: {
-                                columnName: barConfig.yAxis.column.value,
-                                columnRename: barConfig.yAxis.column.label,
-                                columnType: barConfig.yAxis.column.type,
-                                showDataType: barConfig.yAxis.gauge.value,
-                                showDataLable: barConfig.yAxis.gauge.label
-                            }
-                        },
-                        isLegend: 1,
-                        isTooltip: 1,
-                        isToolbox: 1,
-                        createBy: "zhuth",
-                        describes: ""
-                    }
+                    body.chartType = 'Histogram';
+                    body.chartConfig = JSON.stringify(barConfig);
+                }else if(baseConfig.viewType === 'pie') {
+                    body.chartType = 'Pie';
+                    body.chartConfig = JSON.stringify(pieConfig);
+                }else if(baseConfig.viewType === 'line') {
+                    body.chartType = 'Line';
+                    body.chartConfig = JSON.stringify(lineConfig);
                 }
                 console.log(body);
                 const res = yield call(service.fetch, {
@@ -332,16 +320,16 @@ export default {
                 const chartDesigner = yield select(state => state.present.chartDesigner);
                 const { barConfig, preparing } = chartDesigner;
                 const body = {
-                    "tableName": "TEST_BI_DATA",
-                    "groups": preparing.groupBy.key ? [preparing.groupBy.key] : [],
-                    "xAxis": {
-                        "columnRename": barConfig.xAxis.column.value,
-                        "columnType": barConfig.xAxis.column.type,
-                        "showDataType": barConfig.xAxis.granularity.value
+                    tableName: "TEST_BI_DATA",
+                    groups: preparing.groupBy ? [preparing.groupBy.key] : [],
+                    xAxis: {
+                        columnRename: barConfig.xAxis.column.value,
+                        columnType: barConfig.xAxis.column.type,
+                        showDataType: barConfig.xAxis.granularity.value
                     },
-                    "yAxis": {
-                        "columnRename": barConfig.yAxis.column.value,
-                        "showDataType": barConfig.yAxis.gauge.value
+                    yAxis: {
+                        columnRename: barConfig.yAxis.column.value,
+                        showDataType: barConfig.yAxis.gauge.value
                     }
                 };
                 
@@ -393,48 +381,45 @@ export default {
                     res.data.data.columnName = pieConfig.xAxis.column.label + (pieConfig.xAxis.granularity.value ? '('+pieConfig.xAxis.granularity.label+')' : '');
                     yield put({ type: 'setChartOption', option: res });
                 }else {
-                    yield put({ type: 'setChartOption', option: res });
+                    yield put({ type: 'setChartOption', option: {} });
                 }
             }catch(e) {
+                console.error(e);
                 yield put({ type: 'setChartOption', option: {} });
             }
         },
         *fetchLineData(action, { select, call, put }) {
             try {
                 const chartDesigner = yield select(state => state.present.chartDesigner);
-                const { lineConfig, pieConfig } = chartDesigner;
+                const { lineConfig, preparing } = chartDesigner;
+                console.log(lineConfig);
                 const body = {
                     tableName: "TEST_BI_DATA",
-                    xAxis:{
+                    xAxis: {
                         columnRename: lineConfig.xAxis.column.value,
                         columnType: lineConfig.xAxis.column.type
                     },
-                    legendData: {
-                        columnRename: pieConfig.xAxis.column.value,
-                        columnType: pieConfig.xAxis.column.type,
-                        showDataType: pieConfig.xAxis.granularity.value
+                    yAxis: {
+                        columnRename: lineConfig.yAxis.column.value,
+                        showDataType: lineConfig.yAxis.gauge.value
                     },
-                    series: {
-                        columnRename: pieConfig.yAxis.column.value,
-                        columnName: pieConfig.yAxis.column.label,
-                        showDataType: pieConfig.yAxis.gauge.value
-                    }
+                    groups: preparing.groupBy ? [preparing.groupBy.key] : []
                 };
-                console.log(body);
+                console.log('lineBody: ', body);
                 let res = yield call(service.fetch, {
                     url: URLS.CHART_LINE_OPTION,
                     body: body
                 });
-
+                console.log('line res', res);
                 if(!res.err && res.data.code > 0) {
-                    console.log('res: ', res);
                     res.viewType = 'line';
-                    res.data.data.columnName = pieConfig.xAxis.column.label + (pieConfig.xAxis.granularity.value ? '('+pieConfig.xAxis.granularity.label+')' : '');
+                    // res.data.data.columnName = pieConfig.xAxis.column.label + (pieConfig.xAxis.granularity.value ? '('+pieConfig.xAxis.granularity.label+')' : '');
                     yield put({ type: 'setChartOption', option: res });
                 }else {
-                    yield put({ type: 'setChartOption', option: res });
+                    yield put({ type: 'setChartOption', option: {} });
                 }
             }catch(e) {
+                console.error(e);
                 yield put({ type: 'setChartOption', option: {} });
             }
         }

src/routes/mainLayout.js

@@ -3,6 +3,7 @@ import { Layout } from 'antd'
 import { Route, Switch } from 'dva/router'
 import Navigator from '../components/common/navigator'
 import Welcome from '../components/myPage/welcome'
+import Loading from '../components/common/loading'
 import DataSource from '../components/datasource/dataSource'
 import DataSourceDetail from '../components/datasource/dataSourceDetail'
 import Dashboard from '../components/dashboard/dashboard'
@@ -13,6 +14,7 @@ const { Header, Content } = Layout
 const MainLayout = (history) => {
     return(
         <Layout className='main-layout'>
+            <Loading />
             <Header className='main-header'>
                 <Navigator />
             </Header>