图表table总体统计表分页逻辑调整

src/components/chart/list.jsx

@@ -166,10 +166,10 @@ class ChartList extends React.Component {
                                 dispatch({ type: 'main/redirect', path: '/chart/' + l.code });
                                 dispatch({ type: 'recent/addRecentRecord', tarId: l.code, recordType: 0});
                             } : () => {}}>
-                                {!l.access ? <div className='deny-body'>
-                                    <div className='deny-tip'>无数据权限</div>
-                                </div> : (!l.database ? <div className='deny-body'>
+                                {!l.database ? <div className='deny-body'>
                                     <div className='deny-tip'>数据源丢失</div>
+                                </div> : (!l.access ? <div className='deny-body'>
+                                    <div className='deny-tip'>无数据权限</div>
                                 </div> : null)}
                                 <Thumbnail style={{ opacity: (l.access && l.database) ? 1 : 0.3 }} type={l.type} code={l.code} option={l.chartOption}/>
                             </Row>

src/components/chartDesigner/charts/tableView.jsx

@@ -13,32 +13,48 @@ class TableView extends React.Component {
         };
     }
 
-    componentDidMount() {
-        window.addEventListener('resize', this.onWindowResize);
-    }
+    // componentDidMount() {
+    //     window.addEventListener('resize', this.onWindowResize);
+    // }
 
-    componentWillUnmount() {
-        window.removeEventListener('resize', this.onWindowResize);
-    }
+    // componentWillUnmount() {
+    //     window.removeEventListener('resize', this.onWindowResize);
+    // }
 
-    onWindowResize = () => {
+    getContentLayout = () => {
         const tableEl = document.getElementsByClassName('table-view')[0];
+        if(!tableEl) {
+            return {
+                contentSize: {
+                    width: 0,
+                    height: 0,
+                },
+                tableHeaderHeight: 0,
+            }
+        }
         const tableHeaderEl = tableEl.getElementsByTagName('thead')[0];
+        const contentEl = document.getElementsByClassName('content-body')[0];
 
-        this.setState({
+        return {
+            contentSize: {
+                width: contentEl.offsetWidth,
+                height: contentEl.offsetHeight,
+            },
             tableHeaderHeight: tableHeaderEl.offsetHeight + 2, // 表头高度（含边框）
-        });
+        };
     }
 
     render() {
-        const { contentSize, chartDesigner, dispatch } = this.props;
-        const { columnWidth, tableHeaderHeight } = this.state;
+        const { chartDesigner, dispatch, inPage } = this.props;
+        const { columnWidth } = this.state;
         const { chartOption, styleConfig } = chartDesigner;
         const { columns, dataSource, pageSize, total } = chartOption;
+
+        const layout = this.getContentLayout();
     
         const { table } = styleConfig || {};
         const { bordered } = table || {};
-        const tableContentHeight = contentSize.height - tableHeaderHeight - 42;
+        const tableContentHeight = layout.contentSize.height - layout.tableHeaderHeight - 42;
     
         return (
             <Table
@@ -52,13 +68,13 @@ class TableView extends React.Component {
                     y: tableContentHeight
                 }}
                 pagination={{
-                    pageSize,
+                    pageSize: pageSize || 25,
                     total,
                     showTotal: (total, range) => {
                         return `第${range[0]}到第${range[1]}条数据，共${total}条数据`;
                     },
                     onChange: (page, pageSize) => {
-                        dispatch({ type: 'chartDesigner/fetchDataViewData', page, pageSize });
+                        inPage && dispatch({ type: 'chartDesigner/fetchDataViewData', page, pageSize });
                     }
                 }}
                 locale={{

src/components/chartDesigner/content.jsx

@@ -34,19 +34,19 @@ class ChartDesignerContent extends React.Component {
         }
     }
 
-    componentDidMount() {
-        window.setTimeout(() => {
-            this.setState({
-                animation: true
-            });
-        }, 2000);
-        this.refreshContentSize();
-        window.addEventListener('resize', this.refreshContentSize);
-    }
+    // componentDidMount() {
+    //     window.setTimeout(() => {
+    //         this.setState({
+    //             animation: true
+    //         });
+    //     }, 2000);
+    //     this.refreshContentSize();
+    //     window.addEventListener('resize', this.refreshContentSize);
+    // }
 
-    componentWillUnmount() {
-        window.removeEventListener('resize', this.refreshContentSize);
-    }
+    // componentWillUnmount() {
+    //     window.removeEventListener('resize', this.refreshContentSize);
+    // }
 
     static getDerivedStateFromProps(nextProps, nextState) {
         const { chartDesigner, main } = nextProps;
@@ -62,20 +62,20 @@ class ChartDesignerContent extends React.Component {
         }
     }
 
-    /**
-     * 设置图表区域大小
-     */
-    refreshContentSize = () => {
-        let contentEl = findDOMNode(this.refs.contentEl);
-        if(!contentEl) { return; }
-        let contentLayout = contentEl.getBoundingClientRect();
-        this.setState({
-            contentSize: {
-                width: contentLayout.width,
-                height: contentLayout.height
-            }
-        });
-    }
+    // /**
+    //  * 设置图表区域大小
+    //  */
+    // refreshContentSize = () => {
+    //     let contentEl = findDOMNode(this.refs.contentEl);
+    //     if(!contentEl) { return; }
+    //     let contentLayout = contentEl.getBoundingClientRect();
+    //     this.setState({
+    //         contentSize: {
+    //             width: contentLayout.width,
+    //             height: contentLayout.height
+    //         }
+    //     });
+    // }
 
     onCollapse = () => {
         this.setState({
@@ -85,7 +85,7 @@ class ChartDesignerContent extends React.Component {
 
     render() {
         const { chartDesigner, dispatch } = this.props;
-        const { isOwner, animation, autoRefresh, contentSize } = this.state;
+        const { isOwner, animation, autoRefresh } = this.state;
         const { baseConfig } = chartDesigner;
         const { viewType } = baseConfig;
         const formItemLayout = {
@@ -97,22 +97,22 @@ class ChartDesignerContent extends React.Component {
 
         if(viewType === 'aggregateTable') {
             configForm = (<AggregateTableConfigForm autoRefresh={autoRefresh} formItemLayout={formItemLayout}/>);
-            chartView = (<TableView contentSize={contentSize}/>);
+            chartView = (<TableView />);
         }else if(viewType === 'dataView') {
             configForm = (<DataViewConfigForm autoRefresh={autoRefresh} formItemLayout={formItemLayout}/>);
-            chartView = (<TableView contentSize={contentSize}/>);
+            chartView = (<TableView inPage={true}/>);
         }else if(viewType === 'line') {
             configForm = (<LineConfigForm autoRefresh={autoRefresh} formItemLayout={formItemLayout}/>);
-            chartView = (<EchartsView contentSize={contentSize} optionConfig={{ animation }}/>);
+            chartView = (<EchartsView optionConfig={{ animation }}/>);
         }else if(viewType === 'bar') {
             configForm = (<BarConfigForm autoRefresh={autoRefresh} formItemLayout={formItemLayout}/>);
-            chartView = (<EchartsView contentSize={contentSize} optionConfig={{ animation }}/>);
+            chartView = (<EchartsView optionConfig={{ animation }}/>);
         }else if(viewType === 'pie') {
             configForm = (<PieConfigForm autoRefresh={autoRefresh} formItemLayout={formItemLayout}/>);
-            chartView = (<EchartsView contentSize={contentSize} optionConfig={{ animation }}/>);
+            chartView = (<EchartsView optionConfig={{ animation }}/>);
         }else if(viewType === 'scatter') {
             configForm = (<ScatterConfigForm autoRefresh={autoRefresh} formItemLayout={formItemLayout}/>);
-            chartView = (<EchartsView contentSize={contentSize} optionConfig={{ animation }}/>);
+            chartView = (<EchartsView optionConfig={{ animation }}/>);
         }
 
         return (

src/components/chartDesigner/header.jsx

@@ -84,13 +84,14 @@ class Header extends React.Component {
                 </div>
                 <div className='header-item toolbar-title'>
                     <Input
-                        className='input-title' 
-                        addonAfter={<Icon type="edit" 
+                        className='input-title'
+                        readOnly={!this.isOwner()}
+                        addonAfter={this.isOwner() ? <Icon type="edit" 
                             onClick={(e) => {
                                 const input = e.currentTarget.parentElement.parentElement.getElementsByTagName('input')[0];
                                 input && input.focus()
                             }}
-                        />}
+                        /> : ''}
                         onChange={(e) => {
                             dispatch({ type: 'chartDesigner/setField', name: 'header', value: { label: e.target.value } });
                         }}

src/components/chartDesigner/header.less

@@ -15,21 +15,21 @@
         text-align: center;
         .ant-input-group{
             width: 300px;
-            .input-title {
-                text-align: center;
-                font-size: 18px;
-                border: none;
-                border-bottom-right-radius: 4px;
-                border-top-right-radius: 4px;
-                background-color: transparent;
-            }
-            .ant-input-group-addon {
-                cursor: pointer;
-                border: none;
-                background: transparent;
-                :hover {
-                    color: #40a9ff;
-                }
+        }
+        .input-title {
+            text-align: center;
+            font-size: 18px;
+            border: none;
+            border-bottom-right-radius: 4px;
+            border-top-right-radius: 4px;
+            background-color: transparent;
+        }
+        .ant-input-group-addon {
+            cursor: pointer;
+            border: none;
+            background: transparent;
+            :hover {
+                color: #40a9ff;
             }
         }
     }

src/components/chartDesigner/sections/toolbar.jsx

@@ -141,7 +141,14 @@ class Toolbar extends React.Component {
                         });
                     }}
                     fetchFunction={(page, pageSize) => {
-                        dispatch({ type: 'chartDesigner/remoteChartDataList', page, pageSize });
+                        dispatch({ type: 'chartDesigner/remoteChartDataList', page, pageSize }).then(() => {
+                            // 主动触发一次window的resize事件
+                            window.setTimeout(() => {
+                                var e = document.createEvent("Event");
+                                e.initEvent("resize", true, true);
+                                window.dispatchEvent(e);
+                            }, 20);
+                        });
                     }}
                 />}
             </div>

src/models/chartDesigner.js

@@ -517,12 +517,6 @@ export default {
                 if(!res.err && res.data.code > 0) {
                     let option = parseChartOption('dataView', res.data.data, dataViewConfig);
                     yield put({ type: 'silentSetField', name: 'chartOption', value: option });
-                    // 主动触发一次window的resize事件
-                    yield window.setTimeout(() => {
-                        var e = document.createEvent("Event");
-                        e.initEvent("resize", true, true);
-                        window.dispatchEvent(e);
-                    }, 200);
                 }else {
                     message.error('请求列表数据失败: ' + (res.err || res.data.msg));
                     // yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
@@ -720,13 +714,6 @@ export default {
                         { name: 'pageSize', value: pageSize },
                         { name: 'total', value: total }
                     ] });
-                    // 主动触发一次window的resize事件
-                    yield window.setTimeout(() => {
-                        var e = document.createEvent("Event");
-                        e.initEvent("resize", true, true);
-                        window.dispatchEvent(e);
-                    }, 20);
-
                 }else {
                     // message.error('请求列表数据失败: ' + (res.err || res.data.msg));
                     // yield put({ type: 'silentSetField', name: 'chartOption', value: {} });