柱状图接口数据解析格式调整

app/components/chartDesigner/charts/resolveChartOption.js

@@ -13,7 +13,7 @@ export default (config) => {
 }
 
 function barConfig(data) {
-    const { xAxis, yAxis } = data;
+    const { xAxis, serieses } = data;
 
     let o = {
         tooltip : {
@@ -26,7 +26,7 @@ function barConfig(data) {
             }
         },
         legend: {
-            show: true
+            show: false
         },
         xAxis: [{
             type: 'category',
@@ -37,10 +37,14 @@ function barConfig(data) {
             name: '纵轴',
             type: 'value'
         }],
-        series: [{
-            data: yAxis,
-            type: 'bar'
-        }]
+        series: serieses.map(s => {
+            return {
+                name: s.name,
+                type: 'bar',
+                data: s.value,
+                // stack: s.stack
+            }
+        }) 
     }
     return o;
 }

app/components/chartDesigner/sections/barConfigForm.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { Form, Select, Tag, Cascader, Dropdown, Menu } from 'antd';
+import { Form, Select, Icon, Tag, Cascader, Dropdown, Menu } from 'antd';
 const FormItem = Form.Item;
 const { Option } = Select;
+const { SubMenu, MenuItemGroup } = Menu;
 import { connect } from 'dva';
 import chartDesigner from '../../../models/chartDesigner';
 import './barConfigForm.less';
@@ -28,6 +29,8 @@ const barConfigForm = ({ chartDesigner, dispatch, formItemLayout }) => {
 			<FormItem label='横轴' {...formItemLayout}>
 				<Select
 					value={chartDesigner.barConfig.xAxis}
+					allowClear={true}
+					placeholder='请选择...'
 					labelInValue={true}
 					onChange={(value) => {
 						dispatch({ type: 'chartDesigner/barConfig/setXAxis', xAxis: value});
@@ -43,6 +46,7 @@ const barConfigForm = ({ chartDesigner, dispatch, formItemLayout }) => {
 					className='barconfig-yxais'
 					value={chartDesigner.barConfig.yAxis}
 					allowClear={true}
+					placeholder='请选择...'
 					options={columns.map((c, i)=>{
 						// return (<Option key={i} value={c.name}>{c.label}</Option>)
 						return {
@@ -65,10 +69,10 @@ const barConfigForm = ({ chartDesigner, dispatch, formItemLayout }) => {
 								label: '不重复计数'
 							}, {
 								value: 'max',
-								label: '最大'
+								label: '最大值'
 							}, {
 								value: 'min',
-								label: '最小'
+								label: '最小值'
 							}]
 						}
 					})}
@@ -76,7 +80,11 @@ const barConfigForm = ({ chartDesigner, dispatch, formItemLayout }) => {
 						dispatch({ type: 'chartDesigner/barConfig/setYAxis', yAxis: value});
 					}}
 					displayRender={(label, selectedOptions) => {
-						let menu = selectedOptions.length > 0 ? <Menu>
+						let menu = selectedOptions.length > 0 ? <Menu
+							defaultSelectedKeys={['sum']}
+							selectedKeys={['sum']}
+							selectable={true}
+						>
 							{selectedOptions[0].children.map((c, i) => {
 								return <Menu.Item  data-value={c.value} key={i} onClick={(e) => {
 									let value = e.domEvent.target.getAttribute('data-value');
@@ -88,9 +96,6 @@ const barConfigForm = ({ chartDesigner, dispatch, formItemLayout }) => {
 						let tag = selectedOptions.length > 0 ? <Dropdown
 							trigger={['click']}
 							overlay={menu}
-							onChange={(value, selectedOptions) => {
-								debugger;return;
-							}}
 						>
 							<Tag size='small' onClick={(e) => {e.stopPropagation()}}>{label[1]}</Tag>
 						</Dropdown>

app/components/chartDesigner/sections/baseConfigForm.jsx

@@ -1,9 +1,11 @@
 import React from 'react';
-import { Form, Select } from 'antd';
+import { Form, Select, Input, Icon, Dropdown, Menu, Row, Col, Card } from 'antd';
 const FormItem = Form.Item;
 const { Option } = Select;
+const { Search } = Input;
 import { connect } from 'dva';
 import chartDesigner from '../../../models/chartDesigner';
+import './baseConfigForm.less';
 
 class baseConfigForm extends React.Component {
 	render() {
@@ -11,6 +13,14 @@ class baseConfigForm extends React.Component {
 		const allDataSource = props.chartDesigner.allDataSource;
 		const { formItemLayout } = props
 
+		const menu = (
+			<Menu>
+				<Menu.Item key="1">1st menu item</Menu.Item>
+				<Menu.Item key="2">2nd memu item</Menu.Item>
+				<Menu.Item key="3">3rd menu item</Menu.Item>
+			</Menu>
+		);
+
 		return (
 			<Form hideRequiredMark={true}>
 				<FormItem label='数据源' {...formItemLayout}>
@@ -27,7 +37,70 @@ class baseConfigForm extends React.Component {
 					</Select>
 				</FormItem>
 				<FormItem label='可视化模式' {...formItemLayout}>
-					<Select 
+					<Select
+						dropdownClassName='baseconfig-viewtype'
+						value={props.chartDesigner.baseConfig.viewType.key}
+						dropdownMatchSelectWidth={false}
+						onChange={(value, item) => {
+							props.dispatch({ type: 'chartDesigner/baseConfig/setViewType', viewType: {key: value, label: item.title}});
+						}}
+					>
+						<Option value="aggregateTable" title='总体统计数据表'>
+							<div className='viewtype-box'>
+								<div className='viewtype-icon viewtype-icon-agg'>
+								</div>
+								<div className='viewtype-text'>
+									总体统计数据表
+								</div>
+							</div>
+						</Option>
+						<Option value="dataView" title='个体统计数据表'>
+							<div className='viewtype-box'>
+								<div className='viewtype-icon'>
+								</div>
+								<div className='viewtype-text'>
+									个体统计数据表
+								</div>
+							</div>
+						</Option>
+						<Option value="line" title='折线图'>
+							<div className='viewtype-box'>
+								<div className='viewtype-icon'>
+								</div>
+								<div className='viewtype-text'>
+									折线图
+								</div>
+							</div>
+						</Option>
+						<Option value="bar" title='柱状图'>
+							<div className='viewtype-box'>
+								<div className='viewtype-icon'>
+								</div>
+								<div className='viewtype-text'>
+									柱状图
+								</div>
+							</div>
+						</Option>
+						<Option value="pie" title='饼状图'>
+							<div className='viewtype-box'>
+								<div className='viewtype-icon'>
+								</div>
+								<div className='viewtype-text'>
+									饼状图
+								</div>
+							</div>
+						</Option>
+						<Option value="scatter" title='散点图'>
+							<div className='viewtype-box'>
+								<div className='viewtype-icon'>
+								</div>
+								<div className='viewtype-text'>
+									散点图
+								</div>
+							</div>
+						</Option>
+					</Select>
+					{/* <Select 
 						value={props.chartDesigner.baseConfig.viewType}
 						labelInValue={true}
 						onChange={(value) => {
@@ -40,7 +113,7 @@ class baseConfigForm extends React.Component {
 						<Option value='bar'>柱状图</Option>
 						<Option value='pie'>饼状图</Option>
 						<Option value='scatter'>散点图</Option>
-					</Select>
+					</Select> */}
 				</FormItem>
 			</Form>
 		);

app/components/chartDesigner/sections/baseConfigForm.less

@@ -0,0 +1,20 @@
+.baseconfig-viewtype {
+    width: 260px;
+    .ant-select-dropdown-menu {
+        display: flex;
+        flex-wrap: wrap;
+        .ant-select-dropdown-menu-item {
+            width: 50%;
+            .viewtype-box {
+                text-align: center;
+                .viewtype-icon {
+                    width: 20px;
+                    height: 20px;
+                    background-image: url(../../../assets/chart-bar.png);
+                    background-size: contain;
+                    margin: 0 auto;
+                }
+            }
+        }
+    }
+}

app/models/chartDesigner.js

@@ -11,22 +11,43 @@ export default {
             name: 'ID',
             type: 'number'
         }, {
-            label: 'A值',
-            name: 'AMONEY',
+            label: '姓名',
+            name: 'name',
             type: 'number'
         }, {
-            label: 'B值',
-            name: 'BMONEY',
-            type: 'number'
+            label: '出生日期',
+            name: 'BIRTH',
+            type: 'date'
         }, {
-            label: '姓别',
-            name: 'GROUP_BY',
+            label: '性别',
+            name: 'GENDER',
             type: 'categorical',
-            selection: ['chen', 'he', 'wu']
+            selection: ['男', '女']
         }, {
-            label: '姓名',
-            name: 'WHO',
-            type: 'string'
+            label: '部门',
+            name: 'DEPARTMENT',
+            type: 'categorical',
+            selection: ['开发部', '测试部', '实施部']
+        }, {
+            label: '入职日期',
+            name: 'ENTRYDATE',
+            type: 'date'
+        }, {
+            label: '当月工作时数',
+            name: 'WORKHOURS',
+            type: 'number'
+        }, {
+            label: '基本薪资',
+            name: 'BASICSALARY',
+            type: 'number'
+        }, {
+            label: '绩效薪资',
+            name: 'PERFORMANCE',
+            type: 'number'
+        }, {
+            label: '实发薪资',
+            name: 'SALARY',
+            type: 'number'
         }],
         allPermission: [
 			{ value: 'owner', name: '创建人' },
@@ -238,17 +259,27 @@ export default {
     effects: {
         *['a'](action, { select, call, put }) {
             const chartDesigner = yield select(state => state.present.chartDesigner);
-            const { barConfig } = chartDesigner;
+            const { barConfig, preparing } = chartDesigner;
             const data = yield call(service.fetch, {
                 url: URLS.CHART_BAR_OPTION,
                 body: {
                     "tableName": "TEST_BI_DATA",
-                    "groups": [],
+                    "groups": preparing.groupBy.map(g => g.key),
                     "xAxis": barConfig.xAxis.key,
                     "yAxis": barConfig.yAxis[0],
                     "dataType": barConfig.yAxis[1]
                 }
             });
+            console.log({
+                url: URLS.CHART_BAR_OPTION,
+                body: {
+                    "tableName": "TEST_BI_DATA",
+                    "groups": preparing.groupBy.map(g => g.key),
+                    "xAxis": barConfig.xAxis.key,
+                    "yAxis": barConfig.yAxis[0],
+                    "dataType": barConfig.yAxis[1]
+                }
+            })
             data.viewType = 'bar';
             if(!data.err) {
                 yield put({ type: 'setOption', chartOption: data });