总体统计图样式设置

src/components/chartDesigner/sections/aggregateTableConfigForm.jsx

@@ -2,7 +2,7 @@
  * 总体统计数据表
  */
 import React from 'react';
-import { Form, Select, Checkbox, Row, Col, Radio } from 'antd';
+import { Form, Select, Checkbox, Row, Col } from 'antd';
 import { connect } from 'dva';
 import STATISTICS_OPTION from './statisticsOption.json'
 const FormItem = Form.Item;
@@ -32,7 +32,7 @@ class AggregateTableConfigForm extends React.Component {
 		const props = this.props;
 		const { autoRefresh, chartDesigner, dispatch } = props;
 		const{ searchKey, formItemLayout } = this.state;
-		const { columns, aggregateTableConfig, chartOption } = chartDesigner;
+		const { columns, aggregateTableConfig } = chartDesigner;
 		
 		let options = columns.filter(c => c.label.toLowerCase().indexOf(searchKey.toLowerCase()) !== -1);
 		return (
@@ -67,18 +67,6 @@ class AggregateTableConfigForm extends React.Component {
 						
 					</CheckboxGroup>
 				</FormItem>
-				<FormItem label='排布方向' {...formItemLayout}>
-					<Radio.Group onChange={e => {
-						let value = e.target.value;
-						dispatch({ type: 'chartDesigner/changeField', name: 'aggregateTableConfig', value: { ...props.chartDesigner.aggregateTableConfig, direction: value }, autoRefresh: false });
-						dispatch({ type: 'chartDesigner/setField', name: 'chartOption', value: { ...chartOption, direction: value } });
-					}}
-						value={aggregateTableConfig.direction}
-					>
-						<Radio value='vertical'>垂直</Radio>
-						<Radio value='horizontal'>水平</Radio>
-					</Radio.Group>
-				</FormItem>
 				{/* <FormItem label='分组' {...formItemLayout}>
 					<Select
 						mode='multiple'

src/components/chartDesigner/sections/style/aggregateTable.jsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import { connect } from 'dva'
+import { Collapse, Form, Radio } from 'antd'
+import './bar.less'
+
+const FormItem = Form.Item;
+
+class AggregateTable extends React.Component {
+    
+    constructor(props) {
+        super(props);
+        this.state = {
+            formItemLayout: {
+                labelCol: { span: 8 },
+                wrapperCol: { span: 16 },
+            },
+            backgroundColor: '#ffffff', // 背景
+            markTextColor: '#eeeeee', // 标签文字
+            colors: [
+                "#c23531",
+                "#2f4554",
+                "#61a0a8",
+                "#d48265",
+                "#91c7ae",
+                "#749f83",
+                "#ca8622",
+                "#bda29a",
+                "#6e7074",
+                "#546570",
+                "#c4ccd3"
+            ], // 主题
+        }
+    }
+
+    render() {
+        const { chartDesigner, dispatch } = this.props;
+        const { formItemLayout } = this.state;
+        const { styleConfig, chartOption } = chartDesigner;
+        const aggregateTableStyle = styleConfig.aggregateTable || {};
+
+        return (
+            <Collapse className='collapse-bar-style' defaultActiveKey={['layout']}>
+                <Collapse.Panel className='chart' header='布局' key='layout'>
+                    <Form>
+                        <FormItem label='排布方向' {...formItemLayout}>
+                            <Radio.Group onChange={e => {
+                                let value = e.target.value;
+                                dispatch({ type: 'chartDesigner/setFields', fields: [
+                                    { name: 'styleConfig', value: { ...styleConfig, aggregateTable: { ...aggregateTableStyle, direction: value } } },
+                                    { name: 'chartOption', value: { ...chartOption, direction: value } },
+                                ] });
+                            }}
+                                defaultValue={aggregateTableStyle.direction || 'vertical'}
+                            >
+                                <Radio value='vertical'>垂直</Radio>
+                                <Radio value='horizontal'>水平</Radio>
+                            </Radio.Group>
+                        </FormItem>
+                    </Form>
+                </Collapse.Panel>
+            </Collapse>
+        )
+    }
+}
+
+export default connect(({ present: { chartDesigner } }) => ({ chartDesigner }))(AggregateTable);

src/components/chartDesigner/sections/style/index.jsx

@@ -1,5 +1,6 @@
 // import TableStyle from './table'
 // import BarStyle from './bar'
+import AggregateTableStyle from './aggregateTable'
 
 export default ({ viewType }) => {
     let styleForm = <div>无可用样式配置</div>;
@@ -8,7 +9,9 @@ export default ({ viewType }) => {
     //     wrapperCol: { span: 16 },
     // };
 
-    if(viewType === 'dataView') {
+    if(viewType === 'aggregateTable') {
+        styleForm = <AggregateTableStyle />
+    }else if(viewType === 'dataView') {
         // styleForm = <TableStyle formItemLayout={formItemLayout}/>
     }else if(viewType === 'bar') {
         // styleForm = <BarStyle />

src/components/common/loading/index.jsx

@@ -14,8 +14,8 @@ class Loading extends React.Component {
         let box = containerEl.getBoundingClientRect();
         let width = box.width;
         let height = box.height;
-        let top = box.top;
-        let left = box.left;
+        // let top = box.top;
+        // let left = box.left;
         this.setState({
             style: {
                 width: `${width}px`,

src/models/chart.js

@@ -217,7 +217,9 @@ export default {
                             description: d.describes || '',
                             groupCode: d.chartsGroup + '',
                             chartOption: chartOption,
-                            demo: d.demo
+                            theme: d.theme,
+                            styleConfig: JSON.parse(d.style || '{}'),
+                            demo: d.demo,
                         }
                     })
                     yield put({ type: 'list', list: list });
@@ -276,6 +278,7 @@ export default {
                             },
                             viewType: viewType
                         },
+                        theme: resData.theme,
                         styleConfig: styleConfig,
                         otherConfig: otherConfig,
                         description: resData.describes,

src/models/chartDesigner.js

@@ -51,14 +51,16 @@ export default {
             header: { label: '无标题' },
             columns: [],
             baseConfig: { dataSource: { code: '' }, viewType: '' },
-            aggregateTableConfig: { targetColumn: {}, statistics: [], groupBy: [], direction: ['vertical', 'horizontal'][0] },
+            aggregateTableConfig: { targetColumn: {}, statistics: [], groupBy: [] },
             dataViewConfig: { viewColumns: [], sortColumn: {key: ''}, sortType: 'asc' },
             barConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} }, groupBy: {key:''}, threshold: 20 },
             lineConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} }, groupBy: {key:''}, threshold: 1000 },
             pieConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} }, threshold: 20 },
             scatterConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} }, groupBy: {key:''}, threshold: 1000 },
             theme: 'default',
-            styleConfig: { bar: {}, line: {}, pie: {}, scatter: {} },
+            styleConfig: {
+                aggregateTable: { direction: ['vertical', 'horizontal'][0] },
+            },
             otherConfig:{},
             description: '',
             filters: [],
@@ -525,7 +527,7 @@ export default {
         *fetchAggregateTableData(action, { select, call, put }) {
             try {
                 const chartDesigner = yield select(state => state.present.chartDesigner);
-                const { code, aggregateTableConfig, filters, theme, styleConfig } = chartDesigner;
+                const { originData, code, aggregateTableConfig, filters, theme, styleConfig } = chartDesigner;
                 const { targetColumn, statistics } = aggregateTableConfig;
 
                 const body = {
@@ -536,7 +538,7 @@ export default {
                     filters: getBodyFilters(filters),
                     testPage: {
                         pageNum: 1,
-                        pageSize: 999999999,
+                        pageSize: 99,
                     }
                 };
 
@@ -546,7 +548,7 @@ export default {
                     timeout: 30000
                 });
                 if(!res.err && res.data.code > 0) {
-                    let option = parseChartOption('aggregateTable', res.data.data, aggregateTableConfig, theme, styleConfig.aggregateTable);
+                    let option = parseChartOption('aggregateTable', res.data.data, aggregateTableConfig, theme, styleConfig.aggregateTable || originData.styleConfig.aggregateTable);
                     yield put({ type: 'silentSetField', name: 'chartOption', value: option });
                 }else {
                     message.error('请求统计数据失败: ' + (res.err || res.data.msg));

src/models/dashboardDesigner.js

@@ -112,6 +112,9 @@ export default {
                 { name: 'createTime', label: '创建时间', type: 'date' },
             ],
             filterItem: { name: 'name', label: '图表名称', type: 'string' }, // 已选过滤字段（选择图表时用）
+            styleConfig: {
+                aggregateTable: { direction: ['vertical', 'horizontal'][0] },
+            },
         },
     },
     
@@ -152,7 +155,7 @@ export default {
             return Object.assign({}, state, {filterLabel: label});
         },
         addChart(state, action) {
-            let { items, dataSources, chartCodes, defaultLayout, minLayoutHeight } = state;
+            let { items, dataSources, chartCodes, defaultLayout } = state;
             const { chart } = action;
 
             items = items.concat([{
@@ -169,6 +172,7 @@ export default {
                 chartType: chart.type,
                 filters: chart.filters,
                 layout: defaultLayout,
+                theme: chart.theme,
                 styleConfig: chart.styleConfig,
                 chartOption: chart.type === 'dataView' ? {
                     total: 0,
@@ -462,8 +466,8 @@ export default {
         *fetchChartData(action, { put, call, select }) {
             const { item, mandatory, page, pageSize } = action;
             const dashboardDesigner = yield select(state => state.present.dashboardDesigner);
-            const { creatorCode, filters } = dashboardDesigner;
-            const { chartCode } = item;
+            const { creatorCode, filters, originData } = dashboardDesigner;
+            const { chartCode, theme, styleConfig } = item;
             
             if(!mandatory && !!item.chartOption) {
                 return false;
@@ -498,7 +502,7 @@ export default {
                     const { chartType : ctype, chartConfig: cfg } = resData.chartsColumnConfig;
                     const chartType = CHART_TYPE[ctype];
                     const chartConfig = JSON.parse(cfg);
-                    let chartOption = parseChartOption(chartType, resData, chartConfig);
+                    let chartOption = parseChartOption(chartType, resData, chartConfig, theme, styleConfig ? (styleConfig[chartType] || originData.styleConfig[chartType]) : {} );
                     
                     yield put({ type: 'setItemFields', code: chartCode, fields: [
                         { name: 'chartType', value: chartType },