图表、报表、数据链接盒子边框去除/报表resize超出容器滚动条自动置底/echarts按需加载

src/components/chart/list.jsx

@@ -46,7 +46,7 @@ class ChartList extends React.Component {
         dispatch({ type: 'chart/fetchList' })
         dispatch({ type: 'chart/remoteGroupList' });
         let parent = this.bodyRef.current.parentNode;
-        parent.scrollTo && parent.scrollTo(0, chart.listScrollTop)
+        parent.scrollTo && parent.scrollTo(0, chart.listScrollTop);
         window.addEventListener('resize', this.setBodyWidth);
     }
 

src/components/chart/list.less

@@ -77,7 +77,6 @@
                         margin: 8px;
                         padding: 0;
                         box-shadow: none;
-                        border: 1px solid #D6EEFE;
                         border-radius: @border-radius-base;
                         &.hidden {
                             display: none;

src/components/chart/thumbnail.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Echarts from 'echarts-for-react'
+import Echarts from '../common/echarts/index'
 import resolveChartThumbnailOption from './resolveChartThumbnailOption'
 
 const Thumbnail = ({ style, type, code, option }) => {
@@ -12,8 +12,6 @@ const Thumbnail = ({ style, type, code, option }) => {
             {viewType === 'echarts' && !!newOption ? <Echarts
                 key={code}
                 option={newOption}
-                className='rc-echarts'
-                style={{height: '100%'}}
             /> : ( viewType === 'table' ? <div className='table-default'></div> : <div className='chart-default'></div>)}
         </div>
     );

src/components/chartDesigner/charts/echartsView.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Echarts from 'echarts-for-react'
+import Echarts from '../../common/echarts/index'
 import { hashcode } from '../../../utils/baseUtils'
 import EmptyContent from '../../common/emptyContent'
 
@@ -10,8 +10,6 @@ const EchartsView = ({ chartOption }) => {
         return <Echarts
         key={hashcode(chartOption)}
         option={chartOption}
-        className='rc-echarts'
-        style={{height: '100%'}}
     />
     }
 }

src/components/common/echarts/index.jsx

@@ -0,0 +1,20 @@
+import ReactEchartsCore from 'echarts-for-react/lib/core';
+import echarts from 'echarts/lib/echarts';
+import 'echarts/lib/chart/bar';
+import 'echarts/lib/chart/line';
+import 'echarts/lib/chart/pie';
+import 'echarts/lib/chart/scatter';
+import 'echarts/lib/component/tooltip';
+import 'echarts/lib/component/grid';
+import 'echarts/lib/component/legend';
+import 'echarts/lib/component/legendScroll';
+import 'echarts/lib/component/dataZoom';
+
+const Echarts = ({ option }) => <ReactEchartsCore
+    echarts={echarts}
+    option={option}
+    className='rc-echarts'
+    style={{height: '100%'}}
+/>
+
+export default Echarts;

src/components/dashboardDesigner/content.jsx

@@ -67,9 +67,9 @@ class DashboardDesignerContent extends React.Component {
                 height: 0
             }; 
         }
-        let _scroll = contentEl.scrollHeight > contentEl.clientHeight;
-        let viewEl = contentEl.getElementsByClassName('dashboard-viewcontent')[0];
-        let padding = viewEl.getBoundingClientRect().left - contentEl.getBoundingClientRect().left;
+        let viewcontent = contentEl.getElementsByClassName('dashboard-viewcontent')[0];
+        let _scroll = viewcontent.scrollHeight > viewcontent.clientHeight;
+        let padding = 0;
 
         let width = contentEl.offsetWidth - padding * 2 - (_scroll ? 10 : 2) // 有滚动条时需要减去滚动条的宽度
         if(width > 0 && width !== lastContentSize.width) {

src/components/dashboardDesigner/viewLayout.jsx

@@ -111,6 +111,21 @@ class ViewLayout extends React.PureComponent {
         }
     }
 
+    onResize = (Layout, oldItem, newItem, placeholder, e, element) => {
+        const viewContentRef = this.viewContentRef;
+        let box = viewContentRef.getBoundingClientRect();
+        let bottomY = box.y + box.height;
+        if(bottomY - e.clientY <= 5) { // 鼠标接近容器底部时滚动条滚到底
+            window.clearTimeout(this.scrollToBottomKey);
+            this.scrollToBottomKey = window.setTimeout(this.scrollToBottom, 50);
+        }
+    }
+
+    scrollToBottom = () => {
+        const viewContentRef = this.viewContentRef;
+        viewContentRef.scrollTo && viewContentRef.scrollTo(0, viewContentRef.scrollHeight - viewContentRef.clientHeight)
+    }
+
     showPreviewBox = (item) => {
         this.setState({
             previewItem: item,
@@ -142,7 +157,7 @@ class ViewLayout extends React.PureComponent {
         const { editMode, minLayoutHeight, layoutMargin } = dashboardDesigner;
         const { visiblePreviewBox, previewItem } = this.state;
         const children = dashboardDesigner.items.map((item) => this.createElement(item, false, !item.chartOption));
-        return (<div className='dashboard-viewcontent'>
+        return (<div className='dashboard-viewcontent' ref={node => this.viewContentRef = node}>
             <ReactGridLayout
                 width={ contentSize.width ? contentSize.width : lastContentSize.width }
                 autoSize={true}
@@ -153,6 +168,7 @@ class ViewLayout extends React.PureComponent {
                 isResizable={editMode && !editingKey}
                 draggableHandle='.mover'
                 onLayoutChange={this.onLayoutChange}
+                onResize={this.onResize}
                 verticalCompact={true}
                 compactType='vertical'
             >

src/components/dashboardDesigner/viewLayout.less

@@ -19,7 +19,7 @@
     flex-direction: column;
     padding-top: 40px;
     z-index: 1;
-    border: 1px solid #CCCCCC;
+    // border: 1px solid #CCCCCC;
     background: white;
     &:hover {
       .chartview-toolbar {

src/components/dataConnect/list.less

@@ -40,6 +40,7 @@
                     height: 160px;
                     padding: 0;
                     margin: 8px;
+                    box-shadow: none;
                     cursor: pointer;
                     .ant-card {
                         height: 100%;