报表onLayout触发刷新逻辑优化/tableView触发刷新逻辑优化

package.json

@@ -18,7 +18,6 @@
     "echarts": "^4.1.0",
     "echarts-for-react": "^2.0.14",
     "fetch-abort": "^1.0.2",
-    "html2canvas": "^1.0.0-alpha.12",
     "jspdf": "^1.4.1",
     "moment": "^2.22.2",
     "prop-types": "^15.6.2",

src/components/chartDesigner/charts/tableView.jsx

@@ -27,26 +27,23 @@ class TableView extends React.Component {
     }
 
     onTableLayoutChange = () => {
-        this.setState(this.getTableLayout());
-    }
-
-    getTableLayout = () => {
         const { chartOption, viewRef, onPageSizeChange } = this.props;
+        const { tableScrollHeight } = this.state;
         let bodyRef = this[viewRef];
         const containerHeight = bodyRef.offsetHeight;
-        let obj = {};
         if(containerHeight > 0 ) {
-            let tableScrollHeight = containerHeight - 40 - 24 - 8 * 2;
-            let pageSize = ~~(tableScrollHeight/38) + 1;
-            obj = {
-                tableScrollHeight
-            }
-            if(typeof onPageSizeChange === 'function' && pageSize !== chartOption.pageSize) {
-                // 在报表中的dataView第一次数据请求在此发起
-                onPageSizeChange(1, pageSize)
+            let newtableScrollHeight = containerHeight - 40 - 24 - 8 * 2;
+            if(newtableScrollHeight !== tableScrollHeight) {
+                let pageSize = ~~(newtableScrollHeight/38) + 1;
+                if(typeof onPageSizeChange === 'function' && pageSize !== chartOption.pageSize) {
+                    // 在报表中的dataView第一次数据请求在此发起
+                    onPageSizeChange(1, pageSize)
+                }
+                this.setState({
+                    tableScrollHeight: newtableScrollHeight
+                });
             }
         }
-        return obj;
     }
 
     render() {

src/components/dashboardDesigner/chartView.jsx

@@ -33,7 +33,7 @@ class ChartView extends React.Component {
     }
 
     render() {
-        const { item, editMode, dispatch, readOnly, chartRef, contentSize } = this.props;
+        const { item, editMode, dispatch, readOnly, contentSize } = this.props;
         // const { tableScrollHeight } = this.state;
         const { chartCode, viewType, chartType, content, chartOption, styleConfig, fetching, layout } = item;
         let children = <EmptyContent/>;
@@ -46,7 +46,6 @@ class ChartView extends React.Component {
                     children = (<TableView
                         key={`${chartCode}-${layout.h}-${hashcode(chartOption.page)}`} // 这个KEY的变化才会正确引起页面的刷新
                         chartOption={chartOption}
-                        viewRef={`${chartRef}-tableview`}
                         columns={chartOption.columns}
                         dataSource={chartOption.dataSource}
                         themeConfig={chartOption.themeConfig}
@@ -83,7 +82,7 @@ class ChartView extends React.Component {
         }
     
         return (
-            <div ref={node => this[chartRef] = node } className='chartview-content'>
+            <div className='chartview-content'>
                 { children }
                 <Loading visible={fetching} style={{ top: 0, left: 0, width: '100%', height: '100%' }}/>
             </div>

src/components/dashboardDesigner/viewLayout.jsx

@@ -4,10 +4,11 @@ import ReactGridLayout from 'react-grid-layout'
 import { Modal } from 'antd'
 import { connect } from 'dva'
 import EmptyContent from '../common/emptyContent/index'
-import DataPreview from '../common/dataPreview/dataPreview'
+import DataPreview from '../common/dataPreview/dataPreview';
+import { hashcode } from '../../utils/baseUtils'
 import ViewLayoutItem from './viewLayoutItem';
 
-class ViewLayout extends React.PureComponent {
+class ViewLayout extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -53,8 +54,17 @@ class ViewLayout extends React.PureComponent {
     }
 
     onLayoutChange = (layout) => {
-        const { dispatch } = this.props;
+        const { dashboardDesigner, dispatch } = this.props;
         if(!(layout.length === 1 && layout[0].i === 'default-chartview')) {
+            if(hashcode(layout.map(l => ({
+                x: l.x, y: l.y, w: l.w, h: l.h, maxW: l.maxW, maxH: l.maxH, minW: l.minW, minH: l.minH
+            }))) === hashcode(dashboardDesigner.items.map(t => {
+                let l = t.layout;
+                return { x: l.x, y: l.y, w: l.w, h: l.h, maxW: l.maxW, maxH: l.maxH, minW: l.minW, minH: l.minH }
+            } ))) {
+                // 若未发生位置变化
+                return;
+            }
             dispatch({ type: 'dashboardDesigner/changeLayout', layout });
             window.clearTimeout(this.layoutChangeKey);
             this.layoutChangeKey = window.setTimeout(() => {
@@ -69,7 +79,7 @@ class ViewLayout extends React.PureComponent {
         const viewContentRef = this.viewContentRef;
         let box = viewContentRef.getBoundingClientRect();
         let bottomY = box.y + box.height;
-        if(bottomY - e.clientY <= 5) { // 鼠标接近容器底部时滚动条滚到底
+        if(bottomY - e.clientY <= 10) { // 鼠标接近容器底部时滚动条滚到底
             window.clearTimeout(this.scrollToBottomKey);
             this.scrollToBottomKey = window.setTimeout(this.scrollToBottom, 50);
         }
@@ -77,7 +87,7 @@ class ViewLayout extends React.PureComponent {
 
     scrollToBottom = () => {
         const viewContentRef = this.viewContentRef;
-        viewContentRef.scrollTo && viewContentRef.scrollTo(0, viewContentRef.scrollHeight - viewContentRef.clientHeight)
+        viewContentRef.scrollTo && viewContentRef.scrollTo(0, viewContentRef.scrollHeight - viewContentRef.clientHeight);
     }
 
     showPreviewBox = (item) => {

src/components/dashboardDesigner/viewLayoutItem.jsx

@@ -21,7 +21,7 @@ class ViewLayoutItem extends React.Component {
         const { dispatch, main, dashboardDesigner, item, isPreview, reload, showPreviewBox, hidePreviewBox, esMobile, contentSize } = this.props;
         const { editing, title } = this.state;
         const { currentUser } = main;
-        const { dashboardDesignerCode, editMode, minLayoutHeight } = dashboardDesigner;
+        const { code: dashboardDesignerCode, editMode, minLayoutHeight } = dashboardDesigner;
         const { code, name, viewType, layout, chartCode, chartOption } = item;
         const iconCls = editMode ? 'visible-icon' : '';
 
@@ -95,7 +95,7 @@ class ViewLayoutItem extends React.Component {
                         {isPreview && <Icon className={iconCls} type="close" onClick={hidePreviewBox}/>}
                     </div>
                 </div>
-                <ChartView chartRef={`chartRef-${dashboardDesignerCode}-${code}`} minLayoutHeight={minLayoutHeight} editMode={isPreview ? false : editMode} item={{...item}} reload={reload} contentSize={contentSize} esMobile={esMobile}/>
+                <ChartView key={`chartRef-${dashboardDesignerCode}-${code}`} minLayoutHeight={minLayoutHeight} editMode={isPreview ? false : editMode} item={{...item}} reload={reload} contentSize={contentSize} esMobile={esMobile}/>
             </div>
         )
     }

src/models/dashboardDesigner.js

@@ -1,4 +1,3 @@
-import html2canvas from 'html2canvas'
 import { message } from 'antd'
 import * as service from '../services/index'
 import parseChartOption from './parseChartOption'
@@ -562,19 +561,6 @@ export default {
                 yield put({ type: 'setItemFetching', code: chartCode, fetching: false });
             }
         },
-        *saveWithThumbnail(action, {put, call}) {
-            try {
-                let thumbnail;
-                yield put({ type: 'silentSetField', name: 'loading', value: true });
-                let canvas = yield html2canvas(document.getElementsByClassName('viewlayout')[0]);
-                thumbnail = canvas.toDataURL('image/png', 1.0);
-                yield put({ type: 'setField', name: 'thumbnail', value: thumbnail });
-                yield put({ type: 'dashboard/remoteModify' });
-                yield put({ type: 'silentSetField', name: 'loading', value: false });
-            }catch(e) {
-                message.error('生成缩略图失败: ' + e.message);
-            }
-        },
         *encryptCode(action, { put, call, select }) {
             const { shareCode } = action;
             const res = yield call(service.fetch, {

src/themes/default/base.less

@@ -165,6 +165,10 @@ input::-webkit-input-placeholder {
 }
 
 // Modal
+.ant-modal {
+    max-height: 80vh;
+    top: 10%;
+}
 .ant-modal-header {
     display: table;
     width: 100%;
@@ -204,10 +208,6 @@ input::-webkit-input-placeholder {
     }
 }
 
-.placeholder {
-    color: #cccccc;
-}
-
 // toast message
 .ant-message {
     .ant-message-notice {