tableView样式设计

src/components/chart/resolveChartOption.js

@@ -1,28 +1,30 @@
-export default (config, silent, thumbnail) => {
+import * as moment from 'moment'
+
+export default (config, styleConfig, silent, thumbnail) => {
     const { viewType, option } = config;
     let o;
     switch(viewType) {
         case 'bar': {
-            o = barConfig(option, silent, thumbnail);
+            o = barConfig(option, styleConfig, silent, thumbnail);
             break;
         }
         case 'pie': {
-            o = pieConfig(option, silent, thumbnail);
+            o = pieConfig(option, styleConfig, silent, thumbnail);
             break;
         }
         case 'line': {
-            o = lineConfig(option, silent, thumbnail);
+            o = lineConfig(option, styleConfig, silent, thumbnail);
             break;
         }
         case 'scatter': {
-            o = scatterConfig(option, silent, thumbnail);
+            o = scatterConfig(option, styleConfig, silent, thumbnail);
             break;
         }
         case 'aggregateTable': {
-            o = tableConfig(option, silent, thumbnail);
+            o = tableConfig(option, styleConfig, silent, thumbnail);
             break;
         }case 'dataView' : {
-            o = tableConfig(option, silent, thumbnail);
+            o = tableConfig(option, styleConfig, silent, thumbnail);
             break;
         }
         default:{
@@ -33,7 +35,7 @@ export default (config, silent, thumbnail) => {
     return o;
 }
 
-function barConfig(option, silent, thumbnail) {
+function barConfig(option, styleConfig, silent, thumbnail) {
     const { xAxis, serieses, xTitle, yTitle } = option;
 
     let o = {
@@ -83,7 +85,7 @@ function barConfig(option, silent, thumbnail) {
     return o;
 }
 
-function pieConfig(option, silent, thumbnail) {
+function pieConfig(option, styleConfig, silent, thumbnail) {
 
     const { xAxis, columnName, serieses } = option;
 
@@ -129,7 +131,7 @@ function pieConfig(option, silent, thumbnail) {
     return o;
 }
 
-function lineConfig(option, silent, thumbnail) {
+function lineConfig(option, styleConfig, silent, thumbnail) {
     const { serieses, xTitle, yTitle } = option;
 
     let o = {
@@ -179,7 +181,7 @@ function lineConfig(option, silent, thumbnail) {
     return o;
 }
 
-function scatterConfig(option, silent, thumbnail) {
+function scatterConfig(option, styleConfig, silent, thumbnail) {
     const { serieses, xTitle, yTitle } = option;
     let o = {
         animation: !thumbnail,
@@ -242,16 +244,52 @@ function scatterConfig(option, silent, thumbnail) {
     return o;
 }
 
-function tableConfig(option, silent, thumbnail) {
+function tableConfig(option, styleConfig, silent, thumbnail) {
     const { columns, data } = option;
+    const { table } = styleConfig || {};
+    const {
+        visibleIndex,
+        aligns,
+        widths,
+        thousandsSeparatorColumns,
+    } = table || {
+        visibleIndex: false,
+        aligns: {},
+        widths: {},
+        thousandsSeparatorColumns: [],
+    };
+    console.log(styleConfig);
+    let c = columns.map(c => {
+        let o = {
+            key: c.name,
+            title: c.label,
+            dataIndex: c.name,
+            width: widths? (widths[c.name] ? ( +widths[c.name] ) : 100 ) : 100,
+            align: aligns ? (aligns[c.name] || 'left') : 'left',
+        };
+        if(c.type === 'time') {
+            o.render = v => moment(v).format('YYYY-MM-DD');
+        }
+        return o;
+    });
+    if(visibleIndex) {
+        c.unshift({
+            key: '_index',
+            title: '序号',
+            render: (v, r, i) => i+1,
+            width: 50,
+            align: 'center'
+        });
+    }
+    c = c.map(_c => {
+        if(c.dataIndex === 'percent') {
+            return { ..._c, render: (value, record, index) => ((+value*100).toFixed(2)) + '%'};
+        }else {
+            return _c;
+        }
+    });
     let o = {
-        columns: columns.map(c => {
-            if(c.dataIndex === 'percent') {
-                return { ...c, render: (value, record, index) => ((+value*100).toFixed(2)) + '%'};
-            }else {
-                return { ...c, width: 100 };
-            }
-        }),
+        columns: c,
         data: data.map((d, i) => {
             return { ...d, key: i}
         })

src/components/chart/thumbnail.jsx

@@ -3,7 +3,7 @@ import Echarts from 'echarts-for-react'
 import resolveChartOption from './resolveChartOption'
 
 const Thumbnail = ({ type, code, option }) => {
-    const newOption = resolveChartOption(option || {}, true, true);
+    const newOption = resolveChartOption(option || {}, {}, true, true);
     const viewType = ['bar', 'line', 'pie', 'scatter'].indexOf(type) !== -1 ? 'echarts' :
         (['aggregateTable', 'dataView'].indexOf(type) !== -1 ? 'table' : 'default');
         

src/components/chartDesigner/charts/resolveChartOption.js

@@ -190,15 +190,20 @@ function scatterConfig(option) {
 
 function tableConfig(option) {
     const { columns, data } = option;
+    let c = columns.map(c => {
+        c.width = 100;
+        if(c.dataIndex === 'percent') { // 这里只在总体统计图下生效
+            return { ...c, render: (value, record, index) => {console.log(record);return ((+value*100).toFixed(2)) + '%'} };
+        }else {
+            return c;
+        }
+    });
+    c.unshift({
+        title: '序号',
+        rander: (v, r, i) => i
+    });
     let o = {
-        columns: columns.map(c => {
-            c.width = 100;
-            if(c.dataIndex === 'percent') { // 这里只在总体统计图下生效
-                return { ...c, render: (value, record, index) => {console.log(record);return ((+value*100).toFixed(2)) + '%'} };
-            }else {
-                return c;
-            }
-        }),
+        columns: c,
         data: data.map((d, i) => {
             return { ...d, key: i}
         })

src/components/chartDesigner/charts/tableView.jsx

@@ -5,15 +5,19 @@ import resolveChartOption from '../../chart/resolveChartOption'
 import './tableView.less'
 
 const TableView = ({ contentSize, chartDesigner, dispatch }) => {
-    const option = resolveChartOption(chartDesigner.chartOption);
+    const { chartOption, styleConfig } = chartDesigner;
+    const option = resolveChartOption(chartOption, styleConfig);
     const { columns, data } = option;
 
+    const { table } = styleConfig || {};
+    const { bordered } = table || {};
     return (
         <Table
             className='table-view'
             columns={columns}
             dataSource={data}
             size='small'
+            bordered={bordered}
             scroll={{
                 x: columns ? columns.length * 100 : 0,
                 y: contentSize.height - 38 - 42

src/components/chartDesigner/charts/tableView.less

@@ -8,10 +8,11 @@
             .ant-table {
                 height: 100%;
                 .ant-table-header {
-                    overflow-y: hidden !important;
+                    
+                    // overflow-y: hidden !important;
                 }
                 .ant-table-body {
-                    overflow: auto !important;
+                    // overflow: auto !important;
                 }
             }
             .ant-pagination {

src/components/chartDesigner/content.jsx

@@ -9,7 +9,7 @@ import PieConfigForm from './sections/pieConfigForm'
 import LineConfigForm from './sections/lineConfigForm'
 import TableView from './charts/tableView'
 import ScatterConfigForm from './sections/ScatterConfigForm'
-import StyleConfigForm from './sections/styleConfigForm'
+import StyleConfigForm from './sections/style/index'
 import OtherConfigForm from './sections/otherConfigForm'
 import EchartsView from './charts/echartsView'
 import ToolBar from './sections/toolbar'
@@ -101,7 +101,7 @@ class ChartDesignerContent extends React.Component {
                             { configForm }
                         </TabPane>
                         <TabPane className='styleconfig' tab='样式设置' key='2'>
-                            <StyleConfigForm formItemLayout={formItemLayout}/>
+                            <StyleConfigForm viewType={viewType}/>
                         </TabPane>
                         <TabPane className='otherconfig' tab='其他设置' key='3'>
                             <OtherConfigForm formItemLayout={formItemLayout}/>

src/components/chartDesigner/content.less

@@ -5,22 +5,39 @@
         max-width: 300px !important;
         min-width: 300px !important;
         width: 300px !important;
+
+        .ant-layout-sider-children {
+            padding-bottom: 40px;
+            .sider-tabs {
+                height: 100%;
+                padding-top: 36px;
+                
+                .ant-tabs-bar {
+                    margin-top: -36px;
+                }
+                .ant-tabs-content {
+                    height: 100%;
+                    div[role=tabpanel] {
+                        overflow: auto;
+                    }
+                }
+                .ant-tabs-nav .ant-tabs-tab {
+                    height: 37px;
+                    margin: 0;
+                    padding: 7px 16px;
+                }
+                .chartconfig, .otherconfig {
+                    padding: 0 10px;
+                }
+            }
+        }
         .collapse-toggle {
             position: absolute;
             right: -13px;
             top: 6px;
             z-index: 3;
         }
-        .sider-tabs {
-            .ant-tabs-nav .ant-tabs-tab {
-                height: 37px;
-                margin: 0;
-                padding: 7px 16px;
-            }
-            .chartconfig, .otherconfig {
-                padding: 0 10px;
-            }
-        }
+       
         .sider-footer {
             position: absolute;
             bottom: 0;

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

@@ -0,0 +1,14 @@
+import TableStyle from './table'
+
+export default ({ viewType }) => {
+    let styleForm = <div>无可用样式配置</div>;
+    const formItemLayout = {
+        labelCol: { span: 8 },
+        wrapperCol: { span: 16 },
+    };
+
+    if(viewType === 'dataView') {
+        styleForm = <TableStyle formItemLayout={formItemLayout}/>
+    }
+    return styleForm;
+}

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

@@ -0,0 +1,181 @@
+import React from 'react'
+import { connect } from 'dva'
+import { Collapse, Menu, Form, Checkbox, Row, Col, Select, Radio, Input, InputNumber } from 'antd'
+const SubMenu = Menu.SubMenu;
+const MenuItemGroup = Menu.ItemGroup;
+
+// const TableStyle = ({ chartDesigner, formItemLayout, dispatch }) => {
+class TableStyle extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            layoutColumn: null,
+            formatColumn: null,
+            colorColumn: null,
+        }
+    }
+
+    changeAligns = (value) => {
+        const { chartDesigner, dispatch } = this.props;
+        const { layoutColumn } = this.state;
+        const { styleConfig } = chartDesigner;
+        const { table } = (styleConfig || { aligns: {} });
+        let aligns = table ? (table.aligns || {}) : {};
+        if(!layoutColumn) {
+            return;
+        }else if(layoutColumn.name === 'all') {
+            chartDesigner.dataViewConfig.viewColumns.map(c => {
+                aligns[c.name] = value
+            });
+        }else {
+            aligns[layoutColumn.name] = value
+        }
+        dispatch({ type: 'chartDesigner/setField', name: 'styleConfig', value: { ...styleConfig, table: { ...table, aligns }} });
+    }
+
+    changeWidths = (e) => {
+        const { chartDesigner, dispatch } = this.props;
+        const { layoutColumn } = this.state;
+        const { styleConfig } = chartDesigner;
+        const { table} = styleConfig;
+        let widths = table ? (table.widths || {}) : {};
+
+        if(!layoutColumn) {
+            return;
+        }else if(layoutColumn.name === 'all') {
+            chartDesigner.dataViewConfig.viewColumns.map(c => {
+                widths[c.name] = e.target.value
+            });
+        }else {
+            widths[layoutColumn.name] = e.target.value
+        }
+        dispatch({ type: 'chartDesigner/setField', name: 'styleConfig', value: { ...styleConfig, table: { ...table, widths }} });
+    }
+
+    changeThousandsSeparator = (e) => {
+        const { chartDesigner, dispatch } = this.props;
+        const { formatColumn } = this.state;
+        const { styleConfig } = chartDesigner;
+        const { table} = styleConfig;
+        const checked = e.target.checked;
+        let thousandsSeparatorColumns = table ? (table.thousandsSeparatorColumns || []) : [];
+
+        if(!formatColumn) {
+            return;
+        }else {
+            let idx = thousandsSeparatorColumns.findIndex(s => s === formatColumn.name);
+            console.log(idx);
+            checked ? (idx !== -1 ? (void 0) : thousandsSeparatorColumns.push(formatColumn.name)) : thousandsSeparatorColumns.splice(idx, 1);
+        }
+        dispatch({ type: 'chartDesigner/setField', name: 'styleConfig', value: { ...styleConfig, table: { ...table, thousandsSeparatorColumns }} });
+    }
+
+    createColumnSelector = (type, all) => {
+        const { chartDesigner } = this.props;
+
+        let columns = all ? [{
+            name: 'all',
+            label: '全部'
+        }].concat(chartDesigner.dataViewConfig.viewColumns) : chartDesigner.dataViewConfig.viewColumns;
+        
+        return <Select
+            allowClear
+            showSearch
+            filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
+            onChange={(value) => {
+                let o = {};
+                let c = columns.find(c => c.name === value);
+                o[type] = c;
+                this.setState(o);
+            }}
+        >
+            {columns.map((c, i)=>{
+                return <Select.Option key={c.name} value={c.name}>{c.label}</Select.Option>
+            })}
+        </Select>
+    }
+
+    render() {
+        const { chartDesigner, formItemLayout, dispatch } = this.props;
+        const { layoutColumn, formatColumn, colorColumn } = this.state;
+        const { styleConfig } = chartDesigner;
+        console.log(styleConfig);
+        const { table } = (styleConfig || { aligns: {} });
+
+        return (
+            <Collapse defaultActiveKey={['layout', 'format', 'color']}>
+                <Collapse.Panel header='布局' key='layout'>
+                    <Form>
+                        <Form.Item label='显示序号' {...formItemLayout}>
+                            <Checkbox checked={table ? table.visibleIndex : false} onChange={(e) => {
+                                const checked = e.target.checked;
+                                dispatch({ type: 'chartDesigner/setField', name: 'styleConfig', value: { ...styleConfig, table: { ...table, visibleIndex: checked }} });
+                            }}/>
+                        </Form.Item>
+                        <Form.Item label='边框线' {...formItemLayout}>
+                            <Checkbox onChange={(e) => {
+                                const checked = e.target.checked;
+                                dispatch({ type: 'chartDesigner/setField', name: 'styleConfig', value: { ...styleConfig, table: { ...table, bordered: checked }} });
+                            }}/>
+                        </Form.Item>
+                        <Form.Item label='选择列' {...formItemLayout}>
+                            {this.createColumnSelector('layoutColumn', true)}
+                        </Form.Item>
+                        {layoutColumn && <Form.Item label='文字对齐' {...formItemLayout}>
+                            <Select onChange={this.changeAligns} >
+                                <Select.Option value='left'>靠左</Select.Option>
+                                <Select.Option value='center'>居中</Select.Option>
+                                <Select.Option value='right'>靠右</Select.Option>
+                            </Select>
+                        </Form.Item>}
+                        {layoutColumn && <Form.Item label='列宽' {...formItemLayout}>
+                            <InputNumber onBlur={this.changeWidths}/>
+                        </Form.Item>}
+                    </Form>
+                </Collapse.Panel>
+                <Collapse.Panel header='格式' key='format'>
+                    <Form>
+                        <Form.Item label='选择列' {...formItemLayout}>
+                            {this.createColumnSelector('formatColumn', false)}
+                        </Form.Item>
+                        {formatColumn && formatColumn.type === 'scale' && <Form.Item label='千分位' {...formItemLayout}>
+                            <Checkbox onChange={this.changeThousandsSeparator}/>
+                        </Form.Item>}
+                        {formatColumn && formatColumn.type === 'scale' && <Form.Item label='小数位数' {...formItemLayout}>
+                            <Select>
+                                <Select.Option value='0'>无</Select.Option>
+                                <Select.Option value='1'>1</Select.Option>
+                                <Select.Option value='2'>2</Select.Option>
+                                <Select.Option value='3'>3</Select.Option>
+                                <Select.Option value='4'>4</Select.Option>
+                                <Select.Option value='5'>5</Select.Option>
+                            </Select>
+                        </Form.Item>}
+                        {formatColumn && <Form.Item label='前缀' {...formItemLayout}>
+                            <Select>
+                                <Select.Option value='0'>无</Select.Option>
+                                <Select.Option value='1'>￥</Select.Option>
+                                <Select.Option value='2'>$</Select.Option>
+                                <Select.Option value='3'>%</Select.Option>
+                                <Select.Option value='4'>℃</Select.Option>
+                                <Select.Option value='5'>℉</Select.Option>
+                            </Select>
+                        </Form.Item>}
+                    </Form>
+                </Collapse.Panel>
+                <Collapse.Panel header='颜色' key='color'>
+                    <Form>
+                        <Form.Item label='交替色' {...formItemLayout}>
+                            <Radio.Group>
+                                <Radio value={1}>行交替</Radio>
+                                <Radio value={2}>列交替</Radio>
+                            </Radio.Group>
+                        </Form.Item>
+                    </Form>
+                </Collapse.Panel>
+            </Collapse>
+        )
+    }
+}
+
+export default connect(({ present: { chartDesigner } }) => ({ chartDesigner }))(TableStyle);

src/components/chartDesigner/sections/styleConfigForm.jsx

@@ -1,21 +0,0 @@
-import React from 'react'
-import { Form, Input } from 'antd'
-import { connect } from 'dva'
-import '../../../models/chartDesigner.js'
-const FormItem = Form.Item
-
-const StyleConfigForm = ({ chartDesigner, formItemLayout }) => {
-    return (
-        <Form>
-            <FormItem label='样式1' {...formItemLayout}>
-                <Input />
-            </FormItem>
-        </Form>
-    );
-}
-
-function mapStateToProps({ present: {chartDesigner}}) {
-    return { chartDesigner };
-}
-
-export default connect(mapStateToProps)(StyleConfigForm);

src/components/dashboardDesigner/chartView.jsx

@@ -12,7 +12,7 @@ const ChartView = ({ item, itemSize, chart, editMode, dispatch }) => {
     if(viewType === 'chart') { // 图表类型
         let targetChart = chart.list.filter(c => c.code === chartCode)[0];
         if(targetChart) {
-            let option = resolveChartOption(targetChart ? targetChart.chartOption : {}, editMode);
+            let option = resolveChartOption(targetChart ? targetChart.chartOption : {}, {}, editMode);
             let type = ['bar', 'line', 'pie', 'scatter'].indexOf(targetChart.type) !== -1 ? 'echarts' :
                 (['aggregateTable', 'dataView'].indexOf(targetChart.type) !== -1 ? 'table' : 'default');
             if(type === 'echarts') {

src/components/dashboardDesigner/viewLayout.less

@@ -37,7 +37,8 @@
                   height: 100%;
                 }
                 .ant-table-header {
-                  overflow-y: hidden;
+                  overflow-y: auto;
+                  margin-bottom: 0 !important;
                 }
                 .ant-table-body {
                   overflow: auto !important;

src/components/datasource/dataSource.jsx

@@ -461,7 +461,7 @@ class DataSource extends React.Component {
                         <TransferBox
                             visibleBox={visibleTransferBox}
                             title='选择移交对象'
-                            onOk={(user) => {
+                            okHandler={(user) => {
                                 dispatch({ type: 'dataSource/transfer', dataSourceCode: this.state.selectedRecord.code, userCode: user.code });
                             }}
                             hideBox={() => {

src/components/datasource/policyRuleBox.jsx

@@ -1,19 +0,0 @@
-import React from 'react'
-import { Modal } from 'antd'
-
-
-class PolicyRuleBox extends React.Component {
-    render() {
-        const { visiblePolicyRuleBox, onCancel } = this.props
-        return (
-            <Modal 
-                visible={visiblePolicyRuleBox}
-                onCancel={onCancel}
-            >
-                <span>Test</span>
-            </Modal>
-        )
-    }
-}
-
-export default PolicyRuleBox

src/components/datasource/transferBox.jsx

@@ -1,19 +0,0 @@
-import React from 'react'
-import { Modal } from 'antd'
-
-
-class TransferBox extends React.Component {
-    render() {
-        const { visibleTransferBox, onCancel } = this.props
-        return (
-            <Modal 
-                visible={visibleTransferBox}
-                onCancel={onCancel}
-            >
-                <span>Test</span>
-            </Modal>
-        )
-    }
-}
-
-export default TransferBox

src/models/chart.js

@@ -176,6 +176,7 @@ export default {
                     let resData = res.data.data;
                     let groupBy = JSON.parse(resData.groupBy) || [];
                     let chartConfig = JSON.parse(resData.chartConfig || '{ "xAxis": { "column": {}, "granularity": {} }, "yAxis": { "column": {}, "gauge": {} } }');
+                    let styleConfig = JSON.parse(resData.style || '{}');
                     let otherConfig = JSON.parse(resData.otherConfig || '{}');
                     let viewType = getViewType(resData.chartType);
                     let filters = JSON.parse(resData.filters || '[]');
@@ -190,6 +191,7 @@ export default {
                             dataSource: resData.dataId,
                             viewType: viewType
                         },
+                        styleConfig: styleConfig,
                         otherConfig: otherConfig,
                         description: resData.describes,
                         group: resData.chartsGroup+'',
@@ -329,7 +331,7 @@ export default {
             try{
                 const chartDesigner = yield select(state => state.present.chartDesigner);
                 const { filters, code, header, baseConfig, pieConfig, lineConfig, aggregateTableConfig, dataViewConfig,
-                    barConfig, scatterConfig, otherConfig, description, group, chartOption } = chartDesigner;
+                    barConfig, scatterConfig, otherConfig, description, group, chartOption, styleConfig } = chartDesigner;
                 let body = {
                     chartId: code,
                     filters: JSON.stringify(filters),

src/models/chartDesigner.js

@@ -42,7 +42,7 @@ export default {
             lineConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} }, groupBy: {key:''} },
             pieConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} } },
             scatterConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} }, groupBy: {key:''} },
-            style: {},
+            styleConfig: { visibleIndex: true },
             filters: [],
             chartOption: {},
             dirty: false
@@ -63,7 +63,7 @@ export default {
         lineConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} }, groupBy: {key:''} },
         pieConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} } },
         scatterConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} }, groupBy: {key:''} },
-        styleConfig: { },
+        styleConfig: { visibleIndex: true },
         otherConfig:{ },
         description: '',
         filters: [],
@@ -178,7 +178,7 @@ export default {
                     { name: 'baseConfig', value: { dataSource: dataSource.code, viewType: '' } }
                 ] });
                 const chartDesigner = yield select(state => state.present.chartDesigner);
-                const { baseConfig } = chartDesigner;
+                const { baseConfig, styleConfig } = chartDesigner;
 
                 let body = {
                     chartName: dataSource.name + '_未命名',
@@ -189,7 +189,7 @@ export default {
                     }] : [],
                     createBy: 'zhuth',
                     describes: '',
-                    style: '',
+                    style: JSON.stringify(styleConfig),
                     chartConfig: '{}',
                     chartType: '',
                 };
@@ -220,13 +220,13 @@ export default {
                 const { newHeaderLabel } = action;
                 const chartDesigner = yield select(state => state.present.chartDesigner);
                 const { baseConfig, pieConfig, lineConfig, barConfig, scatterConfig, aggregateTableConfig,
-                    dataViewConfig, otherConfig, description, group } = chartDesigner;
+                    dataViewConfig, otherConfig, description, group, styleConfig } = chartDesigner;
                 let body = {
                     chartName: newHeaderLabel,
                     dataId: baseConfig.dataSource,
                     createBy: 'zhuth',
                     describes: description || '',
-                    style: '',
+                    style: JSON.stringify(styleConfig),
                     otherConfig: JSON.stringify(otherConfig),
                     chartsGroup: group ? group : '-1',
                 }; // 基本属性
@@ -561,7 +561,7 @@ export default {
         *fetchDataViewData(action, { select, call, put }) {
             try {
                 const chartDesigner = yield select(state => state.present.chartDesigner);
-                const { code, dataViewConfig, filters } = chartDesigner;
+                const { code, dataViewConfig, filters, styleConfig } = chartDesigner;
                 const body = {
                     id: code,
                     columnListName: dataViewConfig.viewColumns.map(c => c.name),
@@ -578,25 +578,15 @@ export default {
                 if(!res.err && res.data.code > 0) {
                     const resData = res.data.data;
 
-                    let columns = dataViewConfig.viewColumns.map(c => {
-                        return {
-                            title: c.label,
-                            dataIndex: c.name
-                        }
-                    })
+                    let columns = dataViewConfig.viewColumns;
                     let dataSource = [];
-                    dataSource = resData.map(data => {
-                        let d = {};
-                        columns.map(c => {
-                            return d[c.dataIndex] = data[c.dataIndex.toUpperCase()]
-                        });
-                        return d
-                    });
+                    dataSource = resData;
                     let config = {
                         viewType: 'dataView',
                         option: {
                             columns: columns,
-                            data: dataSource
+                            data: dataSource,
+                            styleConfig,
                         }
                     }
                     yield put({ type: 'silentSetField', name: 'chartOption', value: config });

src/models/dashboardDesigner.js

@@ -14,7 +14,7 @@ export default {
             dirty: false
         },
         name: '标题',
-        defaultLayout: { x: 0, y: 50, w: 12, h: 6, minW: 2, maxW: 12, minH: 0 },
+        defaultLayout: { x: 0, y: 50, w: 12, h: 6, minW: 2, maxW: 12, minH: 1 },
         parameters: {
         },  //全局可用参数
         items: [],