platform-bi-web/src/components/dashboardDesigner/chartView.jsx

import React from 'react'
import AggregateTableView from '../chartDesigner/charts/aggregateTableView'
import TableView from '../chartDesigner/charts/tableView'
import EchartsView from '../chartDesigner/charts/echartsView'
import IndicatorView from '../chartDesigner/charts/indicatorView'
import RichTextEditor from './richTextEditor'
import { connect } from 'dva'
import { hashcode } from '../../utils/baseUtils'
import EmptyContent from '../common/emptyContent/index'
import Loading from '../common/loading/index'

class ChartView extends React.Component {
    
    constructor(props) {
        super(props);
        this.state = {
            tableScrollHeight: 0,
            layout: { ...props.item.layout },
            chartOption: {
                showLoading: true
            }, // 图表详细数据
        }
    }

    componentDidMount() {
        const { item, dispatch, reload, minLayoutHeight } = this.props;
        const { viewType, chartType, layout } = item;
        let page = 1;
        let pageSize = ~~((layout.h * minLayoutHeight + (layout.h - 1) * 12 - 20 - 40 - 24 - 8 * 2)/38) + 1;
        if(viewType === 'chart' && chartType !== 'dataView') {
            dispatch({ type: 'dashboardDesigner/fetchChartData', item, mandatory: reload, page, pageSize });
        }
    }

    render() {
        const { item, editMode, dispatch, readOnly, chartRef } = this.props;
        // const { tableScrollHeight } = this.state;
        const { chartCode, viewType, chartType, content, chartOption, styleConfig, fetching, layout } = item;
        let children = <EmptyContent/>;
        
        if(viewType === 'chart') { // 图表类型
            if(chartOption) {
                if(chartType === 'aggregateTable') {
                    children = (<AggregateTableView chartOption={chartOption}/>);
                }else if(chartType === 'dataView') {
                    children = (<TableView
                        key={`${chartCode}-${layout.h}-${hashcode(chartOption.page)}`} // 这个KEY的变化才会正确引起页面的刷新
                        chartOption={chartOption}
                        viewRef={`${chartRef}-tableview`}
                        columns={chartOption.columns}
                        dataSource={chartOption.dataSource}
                        styleConfig={(styleConfig || {}).dataView}
                        pagination={{
                            pageSize: chartOption.pageSize,
                            total: chartOption.total,
                            current: chartOption.page,
                            showTotal: (total, range) => {
                                return `第${range[0]}到第${range[1]}条数据，共${total}条数据`;
                            },
                            onChange: (page, pageSize) => {
                                dispatch({ type: 'dashboardDesigner/fetchChartData', item, mandatory: true, page, pageSize });
                            }
                        }}
                        onPageSizeChange={(page, pageSize) => {
                            dispatch({ type: 'dashboardDesigner/fetchChartData', item, mandatory: true, page, pageSize });
                        }}
                    />);
                }else if(['line', 'bar', 'pie', 'scatter'].indexOf(chartType) > -1) {
                    children = (<EchartsView key={`${chartCode}-${layout.w}-${layout.h}`} chartOption={chartOption}/>);
                }else if(chartType === 'indicator') {
                    children = (<IndicatorView key={`${chartCode}-${layout.w}-${layout.h}`} chartOption={chartOption}/>);
                }
            }
        }else if(viewType === 'richText') { // 富文本类型
            children = <RichTextEditor readOnly={readOnly || !editMode} content={content} onContentChange={(content) => {
                !readOnly && dispatch({ type: 'dashboardDesigner/modifyItem', item: { ...item, content } });
            }}/>
        }else {
            children = <div className='mover'>错误类型</div>
        }
    
        return (
            <div ref={node => this[chartRef] = node } className='chartview-content'>
                { children }
                <Loading visible={fetching} style={{ top: 0, left: 0, width: '100%', height: '100%' }}/>
            </div>
        );
    }
}

export default connect()(ChartView);