数据源关联图表

app/components/chart/chooseDataSourceBox.jsx

@@ -29,10 +29,11 @@ class ChooseDataSourceBox extends React.Component {
         const { selectedRecord } = this.state;
         const { dispatch } = this.props;
         if(selectedRecord) {
+            dispatch({ type: 'main/redirect', path: '/chart/create' });
             dispatch({ type: 'chartDesigner/changeDataSource', value: {
-                dataSource: { key: selectedRecord.code, label: selectedRecord.name}
+                dataSource: selectedRecord.code,
+                viewType: 'bar'
             } });
-            dispatch({ type: 'main/redirect', path: '/chart/create' });
         }else {
             this.props.hideBox()
         }

app/components/chartDesigner/content.jsx

@@ -33,19 +33,19 @@ class ChartDesignerContent extends React.Component {
 
         let configForm, chartView;
 
-        if(viewType.key == 'aggregateTable') {
+        if(viewType == 'aggregateTable') {
             configForm = (<AggregateTableConfigForm formItemLayout={formItemLayout}/>);
             chartView = (<TableView />);
-        }else if(viewType.key == 'dataView') {
+        }else if(viewType == 'dataView') {
             configForm = (<DataViewConfigForm formItemLayout={formItemLayout}/>);
             chartView = (<TableView />);
-        }else if(viewType.key == 'line') {
+        }else if(viewType == 'line') {
             // configForm = (<DataViewConfigForm formItemLayout={formItemLayout}/>);
             // chartView = (<EchartsView option={chartOption}/>);
-        }else if(viewType.key == 'bar') {
+        }else if(viewType == 'bar') {
             configForm = (<BarConfigForm formItemLayout={formItemLayout}/>);
             chartView = (<EchartsView />);
-        }else if(viewType.key == 'pie') {
+        }else if(viewType == 'pie') {
             configForm = (<PieConfigForm formItemLayout={formItemLayout}/>);
             // chartView = (<EchartsView option={chartOption}/>);
         }

app/components/chartDesigner/sections/baseConfigForm.jsx

@@ -17,10 +17,10 @@ class baseConfigForm extends React.Component {
 
 		return (
 			<Form hideRequiredMark={true}>
-				{/* <FormItem label='数据源' {...formItemLayout}>
+				<FormItem label='数据源' {...formItemLayout}>
 					<Select
+						disabled
 						value={props.chartDesigner.baseConfig.dataSource}
-						labelInValue={true}
 						onChange={(value) => {
 							props.dispatch({ type: 'chartDesigner/changeDataSource', name: 'baseConfig', value: {
 								...props.chartDesigner.baseConfig, dataSource: value } });
@@ -30,14 +30,14 @@ class baseConfigForm extends React.Component {
 							return (<Option key={`dataSource-${i}`} value={dataSource.code}>{dataSource.name}</Option>)
 						})}
 					</Select>
-				</FormItem> */}
+				</FormItem>
 				<FormItem label='可视化模式' {...formItemLayout}>
 					<Select
 						dropdownClassName='baseconfig-viewtype'
-						value={props.chartDesigner.baseConfig.viewType.key}
+						value={props.chartDesigner.baseConfig.viewType}
 						dropdownMatchSelectWidth={false}
 						onChange={(value, item) => {
-							props.dispatch({ type: 'chartDesigner/changeField', name: 'baseConfig', value: { ...props.chartDesigner.baseConfig, viewType: { key: value, label: item.title } } });
+							props.dispatch({ type: 'chartDesigner/changeField', name: 'baseConfig', value: { ...props.chartDesigner.baseConfig, viewType: value } });
 						}}
 					>
 					{

app/components/datasource/datasource.jsx

@@ -83,6 +83,17 @@ class DataSource extends React.Component {
         
         const moreOperatingMenu = (
             <Menu className='operationmenu'>
+                <Menu.Item
+                    onClick={() => {
+                        dispatch({ type: 'main/redirect', path: '/chart/create' });
+                        dispatch({ type: 'chartDesigner/changeDataSource', value: {
+                            dataSource: selectedDataSourceCode,
+                            viewType: 'bar'
+                        } });
+                    }}
+                >
+                    <Icon type="file-add" />创建图表
+                </Menu.Item>
                 <Menu.Item
                     onClick={(e) => {
                         let selectedModel = dataSource.list.find((i) => { return i.code == selectedDataSourceCode })

app/constants/url.js

@@ -15,7 +15,9 @@ const URLS = {
 
     DATASOURCE_DETAIL: BASE_URL + '/getDataConnector', // 获得单个数据源详细数据
 
-    DATASOURCE_QUERY_COLUMNS: BASE_URL + '/implementSql', // 根据sql请求列数据信息
+    DATASOURCE_QUERY_SQLCOLUMNS: BASE_URL + '/implementSql', // 根据sql请求列数据信息
+
+    DATASOURCE_QUERY_DATACOLUMNS: BASE_URL + '/getColumnData', // 获得数据源下的列数据
 
     /***************************************数据列***************************************/
 
@@ -27,7 +29,7 @@ const URLS = {
 
     DATACONNECT_LIST: BASE_URL + '/getDatabases', // 获得数据连接列表
 
-    /***************************************图表编辑***************************************/
+    /***************************************图表***************************************/
 
     CHART_ADD: BASE_URL + '/inputHistogram', // 新增图表
 

app/models/chart.js

@@ -76,12 +76,8 @@ export default {
                             label: resData.chartName
                         },
                         baseConfig: {
-                            dataSource: {
-                                key: resData.dataId,
-                            },
-                            viewType: {
-                                key: getViewType(resData.chartType)
-                            }
+                            dataSource: resData.dataId,
+                            viewType: getViewType(resData.chartType)
                         },
                         preparing: {
                             groupBy: groupBy.map(g => {

app/models/chartDesigner.js

@@ -10,7 +10,7 @@ export default {
         originData: {
             code: null,
             header: { label: '未命名' },
-            baseConfig: { dataSource: { key: '', label: '' }, viewType: { key: '', label: '' } },
+            baseConfig: { dataSource: '', viewType: '' },
             preparing: { groupBy: [] },
             aggregateTableConfig: {},
             dataViewConfig: {},
@@ -72,14 +72,8 @@ export default {
             label: '标题'
         },
         baseConfig: {
-            dataSource: {
-                key: '',
-                label: ''
-            },
-            viewType: {
-                key: '',
-                label: ''
-            }
+            dataSource: '',
+            viewType: ''
         },
         preparing: {
             groupBy: []
@@ -209,18 +203,18 @@ export default {
         *changeDataSource(action, { select, call, put }) {
             const { value } = action;
             yield put({ type: 'setDataSource', value });
-            yield put({ type: 'remoteDataColumn', code: value.dataSource.key });
+            yield put({ type: 'remoteDataColumn', code: value.dataSource });
         },
         *remoteAdd(action, { select, call, put }) {
             try{
                 const chartDesigner = yield select(state => state.present.chartDesigner);
                 const { header, baseConfig, preparing, barConfig } = chartDesigner;
                 let body = {}; // 基本属性
-                if(baseConfig.viewType.key == 'bar') {
+                if(baseConfig.viewType == 'bar') {
                     body = {
                         chartName: header.label,
                         chartType: 'Histogram',
-                        dataId: baseConfig.dataSource.key,
+                        dataId: baseConfig.dataSource,
                         groupBy: preparing.groupBy.map(g => {
                             return {
                                 columnName: g.key,
@@ -268,12 +262,12 @@ export default {
                 const chartDesigner = yield select(state => state.present.chartDesigner);
                 const { code, header, baseConfig, preparing, barConfig } = chartDesigner;
                 let body = {}; // 基本属性
-                if(baseConfig.viewType.key == 'bar') {
+                if(baseConfig.viewType == 'bar') {
                     body = {
                         chartId: code,
                         chartName: header.label,
                         chartType: 'Histogram',
-                        dataId: baseConfig.dataSource.key,
+                        dataId: baseConfig.dataSource,
                         groupBy: preparing.groupBy.map(g => {
                             return {
                                 columnName: g.key,
@@ -319,28 +313,21 @@ export default {
         },
         *remoteDataColumn(action, { select, call, put }) {
             const code = action.code;
-            console.log(code);
             try {
                 const res = yield call(service.fetch, {
-                    url: URLS.DATASOURCE_DETAIL,
+                    url: URLS.DATASOURCE_QUERY_DATACOLUMNS,
                     body: code
                 });
                 if(!res.err && res.data.code > 0) {
                     let resData = res.data.data;
-                    let columnConfig = JSON.parse(resData.columnConfig);
 
-                    let columns = columnConfig.map((c, i) => {
+                    let columns = resData.map((c, i) => {
                         return {
                             key: i,
-                            using: c.isOpen=='1'?true:false,
                             name: c.columnName,
-                            label: c.columnLable,
-                            dataType: c.dataType,
+                            label: c.columnRaname,
                             type: c.columnType,
-                            selection: [],
-                            groupable: c.isGroup=='1'?true:false,
-                            bucketizable: c.isSubsection=='1'?true:false,
-                            description: c.remarks
+                            selection: []
                         }
                     })
                     console.log(columns);
@@ -357,11 +344,10 @@ export default {
             const chartDesigner = yield select(state => state.present.chartDesigner);
             const { baseConfig } = chartDesigner;
             const { viewType } = baseConfig;
-            const viewTypeKey = viewType.key;
 
-            if(viewTypeKey == 'bar') {
+            if(viewType == 'bar') {
                 yield put({ type: 'fetchBarData' });
-            }else if(viewTypeKey == 'pie') {
+            }else if(viewType == 'pie') {
                 //yield put({ type: 'fetchPieData' });
             }else {
                 console.log(13)
@@ -460,10 +446,6 @@ export default {
     subscriptions: {
         setup({ dispatch, history }) {
           return history.listen(({ pathname, query }) => {
-            if (pathname === '/home') {
-                console.log(111);
-                dispatch({ type: 'redirect'});
-            }
           });
         },
     },

app/models/dataSource.js

@@ -235,7 +235,7 @@ export default {
             const dataSource = yield select(state => state.present.dataSource);
             const sqlStr = dataSource.newOne.target;
             const res = yield call(service.fetch, {
-                url: URLS.DATASOURCE_QUERY_COLUMNS,
+                url: URLS.DATASOURCE_QUERY_SQLCOLUMNS,
                 body: {
                     "String": sqlStr
                 }