报表界面修改PC端filterbar交互逻辑为展开收缩（浮动）

src/components/dashboardDesigner/content.jsx

@@ -28,7 +28,8 @@ class DashboardDesignerContent extends React.Component {
             },
             visibleFilterBox: false,
             visibleFilterList: false,
-            overFilters: false,
+            closeFilters: true,
+            filterContentHeight: 40
         };
         this.contentRef=React.createRef();
     }
@@ -60,11 +61,6 @@ class DashboardDesignerContent extends React.Component {
     refreshContentSize = () => {
         let viewLayoutEl = this.contentRef.current;
         let header = viewLayoutEl.getElementsByClassName('ant-layout-header')[0];
-        let overFilters = false;
-        if(!!header) {
-            let filterBar = header.getElementsByClassName('filters')[0].getElementsByClassName('content')[0];
-            overFilters = filterBar.scrollHeight > filterBar.offsetHeight;
-        }
         let viewContentEl = viewLayoutEl.getElementsByClassName('dashboard-viewcontent')[0];
         let _scroll = viewContentEl.scrollHeight > viewContentEl.clientHeight;
         let padding = 0;
@@ -73,9 +69,9 @@ class DashboardDesignerContent extends React.Component {
         this.setState({
             contentSize: {
                 width,
-                height
+                height,
+                _scroll
             },
-            overFilters
         });
     }
 
@@ -106,7 +102,7 @@ class DashboardDesignerContent extends React.Component {
     render() {
         const { dashboardDesigner, isOwner, isShareView, isShareKeyView, isViewMode } = this.props;
         const { dataSources, editMode, filters, relationColumns } = dashboardDesigner;
-        const { visibleFilterBox, visibleFilterList, contentSize, overFilters } = this.state;
+        const { visibleFilterBox, visibleFilterList, contentSize, closeFilters, filterContentHeight } = this.state;
 
         return <Layout className='content'>
             <Content className={`dashboard-content${(isShareView || isShareKeyView || isViewMode) ? ' nomargin' : ''}`}>
@@ -120,8 +116,8 @@ class DashboardDesignerContent extends React.Component {
                     <main ref={this.contentRef} className='viewlayout ant-layout-content'>
                         {(editMode || (filters && filters.length > 0) )&& <Header>
                             {/* <div className='toggle'><Icon type="caret-up" /></div> */}
-                            <div className={`filters`}>
-                                <div className='content'>
+                            <div ref = {node => this.filterContentRef = node} className={`filters`} style={{ height: `${filterContentHeight}px`, width: `${contentSize.width + (contentSize._scroll ? 10 : 0)}px` }}>
+                                <div key={filters.length} className='content'>
                                     {isOwner && editMode && !isShareView && !isShareKeyView && !isViewMode && <Tag
                                         onClick={this.showFilterBox}
                                         className={`filter-tag filter-tag-add`}
@@ -136,7 +132,18 @@ class DashboardDesignerContent extends React.Component {
                                         />
                                     ))}
                                 </div>
-                                {overFilters && <div className='right' style={{ display: filters.length > 0 ? 'block' : 'none' }}>
+                                <div className='right' style={{ display: filters.length > 0 ? 'block' : 'none' }}>
+                                    <Icon title={closeFilters ? '展开' : '收起'} type={closeFilters ? 'caret-up' : 'caret-down'} onClick={() => {
+                                        let filterContent = this.filterContentRef.getElementsByClassName('content')[0];
+                                        let filterContentScrollHeight = filterContent.scrollHeight;
+                                        let filterContentHeight = closeFilters ? filterContentScrollHeight : 40
+                                        this.setState({
+                                            closeFilters: !closeFilters,
+                                            filterContentHeight
+                                        });
+                                    }}/>
+                                </div>
+                                {/* {overFilters && <div className='right' style={{ display: filters.length > 0 ? 'block' : 'none' }}>
                                     <Fragment>
                                         <span style={{ cursor: 'pointer' }} onClick={() => {
                                             this.setState({
@@ -149,7 +156,7 @@ class DashboardDesignerContent extends React.Component {
                                             });
                                         }}/>
                                     </Fragment>
-                                </div>}
+                                </div>} */}
                                 {visibleFilterList && <FilterList
                                     visible={visibleFilterList}
                                     onCancel={() => {

src/components/dashboardDesigner/layout.less

@@ -60,7 +60,8 @@
             .ant-layout-header {
                 background: none;
                 padding: 0;
-                height: auto;
+                height: 40px;
+                overflow: visible;
                 // min-height: 40px;
                 line-height: 37px;
                 border-width: 1px 0;
@@ -70,9 +71,12 @@
                 justify-content: space-between;
                 border: none;
                 .filters {
+                    position: fixed;
+                    width: 1166px;
+                    z-index: 999;
+
                     display: flex;
                     justify-content: space-between;
-                    height: 40px;
                     width: 100%;
                     background: #FCFCFC;
                     padding-left: 8px;