优化

src/components/dashboard/layout.jsx

@@ -30,7 +30,7 @@ class DashboardLayout extends React.Component {
                                 if(currentMenu.code !== '-1') {
                                     dispatch({ type: 'dashboard/remoteMenuDashboardList', menuCode: currentMenu.code });
                                 }else {
-                                    dispatch({ type: 'dashboard/fetchList', mandatory: true });
+                                    // dispatch({ type: 'dashboard/fetchList', mandatory: true });
                                 }
                             }else {
                                 dispatch({ type: 'dashboard/setFields', fields: [
@@ -58,7 +58,7 @@ class DashboardLayout extends React.Component {
                         ] })
                         if(!!selectedMenu) {
                             if(selectedMenu.code === '-1') {
-                                dispatch({ type: 'dashboard/fetchList', mandatory: true });
+                                // dispatch({ type: 'dashboard/fetchList', mandatory: true });
                             }else {
                                 dispatch({ type: 'dashboard/remoteMenuDashboardList', menuCode: selectedMenu.code });
                             }

src/components/dashboard/list.jsx

@@ -40,7 +40,7 @@ class DashboardList extends React.Component {
         if(currentMenu && currentMenu.code !== '-1') {
             dispatch({ type: 'dashboard/remoteMenuDashboardList', menuCode: currentMenu.code });
         }else {
-            dispatch({ type: 'dashboard/fetchList' });
+            // dispatch({ type: 'dashboard/fetchList' });
         }
         let tableBody = document.getElementsByClassName('ant-table-body')[0];
         tableBody.scrollTo && tableBody.scrollTo(0, dashboard.listScrollTop);
@@ -192,7 +192,7 @@ class DashboardList extends React.Component {
         const { visibleShareBox, shareUrl, visibleDistributeBox, visibleTransferBox, visibleDeleteBox,
             visibleCopyBox, selectedRecord, defaultSelectedGroups, defaultSelectedUsers } = this.state
         const { currentUser } = main;
-        const { listLoading, menuTree, filterItem, currentMenu, currentMenuParents } = dashboard;
+        const { list: dashboardList, listLoading, menuTree, filterItem, currentMenu, currentMenuParents } = dashboard;
 
         const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
         let filterLabel = dashboard.filterLabel ? (dashboard.filterLabel + '').replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') : ''; // 添加转义符号
@@ -350,7 +350,7 @@ class DashboardList extends React.Component {
                                     <Button className='btn-refresh' onClick={() => {
                                         dispatch({ type: 'dashboard/setFilterLabel', label: '' });
                                         if(!currentMenu ||  currentMenu.code === '-1') {
-                                            dispatch({ type: 'dashboard/fetchList', mandatory: true });
+                                            // dispatch({ type: 'dashboard/fetchList', mandatory: true });
                                         }else {
                                             dispatch({ type: 'dashboard/remoteMenuDashboardList', menuCode: currentMenu.code });
                                         }
@@ -378,7 +378,7 @@ class DashboardList extends React.Component {
                             columns={dashboardColumns}
                             dataSource={
                                 this.onSort(
-                                    this.onSearch(dashboard.list, dashboard)
+                                    this.onSearch(dashboardList, dashboard)
                                 )
                             }
                             size='small'

src/components/dashboardDesigner/content.jsx

@@ -1,12 +1,9 @@
 import React from 'react';
-import { Layout, Tag, Icon } from 'antd';
+import { Layout } from 'antd';
 import { connect } from 'dva';
 import ViewLayout from './viewLayout';
-import FilterBox from '../common/filterBox/filterBox2';
-import Filter from '../common/filterBox/filter2';
-import MobileFilterList from './mobileFilterList';
 import ConfigSider from './configSider';
-import FilterList from './filterList';
+import FilterBar from './filterBar';
 
 const { Header, Content, Sider } = Layout;
 
@@ -27,12 +24,6 @@ class DashboardDesignerContent extends React.Component {
                 width: 0,
                 height: 0,
             },
-            visibleFilterBox: false,
-            visibleFilterList: false,
-            filtersOpened: false, // 展开所有filter
-            filterOvered: false, // filter数量超出了一行
-            filterContentHeight: 40, // filter栏高度
-            toggleVisible: true, // 条件栏展开开关
         };
         this.contentRef=React.createRef();
     }
@@ -46,18 +37,6 @@ class DashboardDesignerContent extends React.Component {
         window.removeEventListener('resize', this.refreshContentSize);
     }
 
-    showFilterBox = (e) => {
-        this.setState({
-            visibleFilterBox: true
-        });
-    }
-
-    hideFilterBox = (e) => {
-        this.setState({
-            visibleFilterBox: false,
-        });
-    }
-
     /**
      * 重设容器宽度
      */
@@ -75,117 +54,13 @@ class DashboardDesignerContent extends React.Component {
                 height,
                 _scroll
             },
-        }, this.resetFilterContentHeight);
-    }
-
-    createFilters = (filters) => {
-        const { dispatch, afterRefresh } = this.props;
-        dispatch({ type: 'dashboardDesigner/changeFilters', filters }).then(() => {
-            afterRefresh && typeof afterRefresh === 'function' && afterRefresh()
-        }).then(this.resetFilterContentHeight);
-    }
-
-    filterUsingChange = (e) => {
-        const key = e.target.dataset.key;
-        const { dashboardDesigner, dispatch, afterRefresh } = this.props;
-        const filters = dashboardDesigner.filters;
-        let filter = filters.find(f => +f.key === +key);
-        dispatch({ type: 'dashboardDesigner/changeFilter', filter: { ...filter, using: filter.type ? !filter.using : false} }).then(() => {
-            afterRefresh && typeof afterRefresh === 'function' && afterRefresh()
-        });
-    }
-
-    changeFilterValue = (filter) => {
-        const { dispatch, afterRefresh } = this.props;
-        dispatch({ type: 'dashboardDesigner/changeFilter', filter }).then(() => {
-            afterRefresh && typeof afterRefresh === 'function' && afterRefresh()
-        });
-    }
-
-    isParent = (obj,parentObj) => {
-        while (obj !== undefined && obj !== null && obj.tagName.toUpperCase() !== 'BODY'){
-            if (obj === parentObj){
-                return true;
-            }
-            obj = obj.parentNode;
-        }
-        return false;
-    }
-
-    closeFiltersEventListener = e => {
-        let viewContent = document.getElementsByClassName('dashboard-viewcontent')[0];
-        let sider = document.getElementsByClassName('config-sider')[0];
-        let header = document.getElementsByClassName('dashboarddesigner-header')[0];
-
-        if(this.isParent(e.target, viewContent) || this.isParent(e.target, sider) || this.isParent(e.target, header) ) {
-            this.closeFilters();
-        }
-    }
-
-    expandFilters = () => {
-        let filterContent = this.filtersRef.getElementsByClassName('content')[0];
-        let filterContentScrollHeight = filterContent.scrollHeight;
-
-        this.setState({
-            filtersOpened: true,
-            filterContentHeight: Math.min(filterContentScrollHeight, document.body.clientHeight)
-        });
-        
-        window.setTimeout(() => {
-            this.filtersRef.style.overflow = 'auto';
-        }, 300);
-        document.addEventListener('click', this.closeFiltersEventListener)
-    }
-
-    closeFilters = () => {
-        this.setState({
-            filtersOpened: false,
-            filterContentHeight: 40
-        });
-        this.filtersRef.style.overflow = 'hidden';
-        document.removeEventListener('click', this.closeFiltersEventListener);
-    }
-
-    resetFilterContentHeight = () => {
-        let filterContent = this.filtersRef.getElementsByClassName('content')[0];
-
-        window.clearTimeout(this.resetKey);
-        this.resetKey = window.setTimeout(() => {
-            let filterContentOffsetHeight;
-            let filterContentScrollHeight;
-            let obj = {};
-
-            if(this.state.filtersOpened) {
-                this.filtersRef.style.height = 'auto';
-                filterContentOffsetHeight = filterContent.offsetHeight;
-                filterContentScrollHeight = filterContent.scrollHeight
-
-                if(filterContentScrollHeight === 40) {
-                    obj.filterOvered = false;
-                    obj.filtersOpened = false;
-                }
-                obj.filterContentHeight = Math.min(filterContentScrollHeight, document.body.clientHeight);
-            }else {
-                filterContentOffsetHeight = filterContent.offsetHeight;
-                filterContentScrollHeight = filterContent.scrollHeight
-
-                obj.filterOvered = filterContentScrollHeight > filterContentOffsetHeight;
-            }
-
-            this.setState(obj);
-        }, 300);
-    }
-
-    setToggleVisible = (visible) => {
-        this.setState({
-            toggleVisible: visible
         });
     }
 
     render() {
-        const { dashboardDesigner, isOwner, isShareView, isShareKeyView, isViewMode } = this.props;
+        const { dashboardDesigner, isOwner, isShareView, isShareKeyView, isViewMode, afterRefresh } = this.props;
         const { dataSources, editMode, filters, relationColumns } = dashboardDesigner;
-        const { visibleFilterBox, visibleFilterList, contentSize, filtersOpened, filterContentHeight, filterOvered } = this.state;
+        const { contentSize } = this.state;
 
         return <Layout className={`content${esMobile ? ' es-mobile' : ''}`}>
             <Content className={`dashboard-content${(isShareView || isShareKeyView || isViewMode) ? ' nomargin' : ''}`}>
@@ -198,68 +73,19 @@ class DashboardDesignerContent extends React.Component {
                     */}
                     <main ref={this.contentRef} className='viewlayout ant-layout-content'>
                         {(editMode || (filters && filters.length > 0) )&& <Header>
-                            <div ref = {node => this.filtersRef = node} className={`filters`} style={{ height: `${filterContentHeight}px`, width: `${contentSize.width + (contentSize._scroll ? 10 : 0)}px` }}>
-                                <div key={filters.length} className={`content${esMobile ? ' es-mobile' : ''}`}>
-                                    {isOwner && editMode && !isShareView && !isShareKeyView && !isViewMode && <Tag
-                                        onClick={this.showFilterBox}
-                                        className={`filter-tag filter-tag-add`}
-                                    >
-                                        <Icon type="filter" theme="outlined" />
-                                    </Tag>}
-                                    {!esMobile && filters.map(f => (
-                                        <Filter
-                                            key={f.key}
-                                            filter={f}
-                                            changeFilterValue={this.changeFilterValue}
-                                        />
-                                    ))}
-                                    {
-                                        esMobile && <MobileFilterList
-                                            filters={filters}
-                                            filtersOpened={filtersOpened}
-                                            closeFilters={this.closeFilters}
-                                            expandFilters={this.expandFilters}
-                                            setToggleVisible={this.setToggleVisible}
-                                            changeFilterValue={this.changeFilterValue}
-                                        />
-                                    }
-                                </div>
-                                {!esMobile && <div className='right' style={{ display: filters.length > 0 && filterOvered ? 'block' : 'none' }}>
-                                    <Icon title={filtersOpened ? '收起' : '展开'} type={filtersOpened ? 'caret-down' : 'caret-up'} onClick={() => {
-                                        filtersOpened ? this.closeFilters() : this.expandFilters();
-                                    }}/>
-                                </div>}
-                                {/* {esMobile && filterOvered && <div className='right'>
-                                    <Icon type='bars' onClick={() => {
-                                        filtersOpened ? this.closeFilters() : this.expandFilters();
-                                    }}/>
-                                </div>} */}
-                                {/* {overFilters && <div className='right' style={{ display: filters.length > 0 ? 'block' : 'none' }}>
-                                    <Fragment>
-                                        <span style={{ cursor: 'pointer' }} onClick={() => {
-                                            this.setState({
-                                                visibleFilterList: true
-                                            });
-                                        }}>{esMobile ? '' : '更多'}</span>
-                                        <Icon title={'更多'} type={'ellipsis'} onClick={() => {
-                                            this.setState({
-                                                visibleFilterList: true
-                                            });
-                                        }}/>
-                                    </Fragment>
-                                </div>} */}
-                                {visibleFilterList && <FilterList
-                                    visible={visibleFilterList}
-                                    onCancel={() => {
-                                        this.setState({
-                                            visibleFilterList: false
-                                        })
-                                    }}
-                                    filters={filters}
-                                    changeFilterValue={this.changeFilterValue}
-                                />}
-                            </div>
-                            {visibleFilterBox && <FilterBox key={Math.random()} dataSources={dataSources} relationColumns={relationColumns} filterData={filters} visibleFilterBox={visibleFilterBox} showFilterBox={this.showFilterBox} hideFilterBox={this.hideFilterBox} createFilters={this.createFilters} />}
+                            <FilterBar
+                                filters={filters}
+                                contentSize={contentSize}
+                                esMobile={esMobile}
+                                isOwner={isOwner}
+                                editMode={editMode}
+                                isShareView={isShareView}
+                                isShareKeyView={isShareKeyView}
+                                isViewMode={isViewMode}
+                                afterRefresh={afterRefresh}
+                                dataSources={dataSources}
+                                relationColumns={relationColumns}
+                            />
                         </Header>}
                         <ViewLayout isOwner={isOwner} isShareView={isShareView} isShareKeyView={isShareKeyView} isViewMode={isViewMode} contentSize={contentSize} editMode={editMode} esMobile={esMobile}/>
                     </main>

src/components/dashboardDesigner/filterBar.jsx

@@ -0,0 +1,178 @@
+import React from 'react';
+import { connect } from 'dva';
+import { Tag, Icon } from 'antd';
+import FilterBox from '../common/filterBox/filterBox2';
+import Filter from '../common/filterBox/filter2';
+import MobileFilterList from './mobileFilterList';
+
+class FilterBar extends React.Component {
+
+    state = {
+        visibleFilterBox: false,
+        filterContentHeight: 40, // filter栏高度
+        filtersOpened: false, // 展开所有filter
+        filterOvered: false, // filter数量超出了一行
+        toggleVisible: false,
+        visibleFilterList: false
+    }
+
+    componentDidMount() {
+        this.resetFilterContentHeight();
+        window.addEventListener("resize", this.resetFilterContentHeight);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.resetFilterContentHeight);
+    }
+
+    showFilterBox = (e) => {
+        this.setState({
+            visibleFilterBox: true
+        });
+    }
+
+    hideFilterBox = (e) => {
+        this.setState({
+            visibleFilterBox: false,
+        });
+    }
+
+    expandFilters = () => {
+        let filterContent = this.filtersRef.getElementsByClassName('content')[0];
+        let filterContentScrollHeight = filterContent.scrollHeight;
+
+        this.setState({
+            filtersOpened: true,
+            filterContentHeight: Math.min(filterContentScrollHeight, document.body.clientHeight)
+        });
+        
+        window.setTimeout(() => {
+            this.filtersRef.style.overflow = 'auto';
+        }, 300);
+        document.addEventListener('click', this.closeFiltersEventListener)
+    }
+
+    closeFilters = () => {
+        this.setState({
+            filtersOpened: false,
+            filterContentHeight: 40
+        });
+        this.filtersRef.style.overflow = 'hidden';
+        document.removeEventListener('click', this.closeFiltersEventListener);
+    }
+
+    resetFilterContentHeight = () => {
+        if(!this.filtersRef) {
+            return;
+        }
+        
+        let filterContent = this.filtersRef.getElementsByClassName('content')[0];
+
+        window.clearTimeout(this.resetKey);
+        this.resetKey = window.setTimeout(() => {
+            let filterContentOffsetHeight;
+            let filterContentScrollHeight;
+            let obj = {};
+
+            if(this.state.filtersOpened) {
+                this.filtersRef.style.height = 'auto';
+                filterContentOffsetHeight = filterContent.offsetHeight;
+                filterContentScrollHeight = filterContent.scrollHeight
+
+                if(filterContentScrollHeight === 40) {
+                    obj.filterOvered = false;
+                    obj.filtersOpened = false;
+                }
+                obj.filterContentHeight = Math.min(filterContentScrollHeight, document.body.clientHeight);
+            }else {
+                filterContentOffsetHeight = filterContent.offsetHeight;
+                filterContentScrollHeight = filterContent.scrollHeight
+                obj.filterOvered = filterContentScrollHeight > filterContentOffsetHeight;
+            }
+
+            this.setState(obj);
+        }, 1000);
+    }
+
+    setToggleVisible = (visible) => {
+        this.setState({
+            toggleVisible: visible
+        });
+    }
+
+    closeFiltersEventListener = e => {
+        let viewContent = document.getElementsByClassName('dashboard-viewcontent')[0];
+        let sider = document.getElementsByClassName('config-sider')[0];
+        let header = document.getElementsByClassName('dashboarddesigner-header')[0];
+
+        if(this.isParent(e.target, viewContent) || this.isParent(e.target, sider) || this.isParent(e.target, header) ) {
+            this.closeFilters();
+        }
+    }
+
+    createFilters = (filters) => {
+        const { dispatch, afterRefresh } = this.props;
+        dispatch({ type: 'dashboardDesigner/changeFilters', filters }).then(() => {
+            afterRefresh && typeof afterRefresh === 'function' && afterRefresh()
+        }).then(this.resetFilterContentHeight);
+    }
+
+    changeFilterValue = (filter) => {
+        const { dispatch, afterRefresh } = this.props;
+        dispatch({ type: 'dashboardDesigner/changeFilter', filter }).then(() => {
+            afterRefresh && typeof afterRefresh === 'function' && afterRefresh()
+        });
+    }
+
+    isParent = (obj, parentObj) => {
+        while (obj !== undefined && obj !== null && obj.tagName.toUpperCase() !== 'BODY'){
+            if (obj === parentObj){
+                return true;
+            }
+            obj = obj.parentNode;
+        }
+        return false;
+    }
+
+    render() {
+        const { filters, contentSize, esMobile, isOwner, editMode, isShareView, isShareKeyView,
+            isViewMode, dataSources, relationColumns } = this.props;
+        const { visibleFilterBox, filterContentHeight, filtersOpened, filterOvered } = this.state;
+
+        return <div ref = {node => this.filtersRef = node} className={`filters`} style={{ height: `${filterContentHeight}px`, width: `${contentSize.width + (contentSize._scroll ? 10 : 0)}px` }}>
+            <div key={filters.length} className={`content${esMobile ? ' es-mobile' : ''}`}>
+                {isOwner && editMode && !isShareView && !isShareKeyView && !isViewMode && <Tag
+                    onClick={this.showFilterBox}
+                    className={`filter-tag filter-tag-add`}
+                >
+                    <Icon type="filter" theme="outlined" />
+                </Tag>}
+                {!esMobile && filters.map(f => (
+                    <Filter
+                        key={f.key}
+                        filter={f}
+                        changeFilterValue={this.changeFilterValue}
+                    />
+                ))}
+                {
+                    esMobile && <MobileFilterList
+                        filters={filters}
+                        filtersOpened={filtersOpened}
+                        closeFilters={this.closeFilters}
+                        expandFilters={this.expandFilters}
+                        setToggleVisible={this.setToggleVisible}
+                        changeFilterValue={this.changeFilterValue}
+                    />
+                }
+            </div>
+            {!esMobile && <div className='right' style={{ display: filters.length > 0 && filterOvered ? 'block' : 'none' }}>
+                <Icon title={filtersOpened ? '收起' : '展开'} type={filtersOpened ? 'caret-down' : 'caret-up'} onClick={() => {
+                    filtersOpened ? this.closeFilters() : this.expandFilters();
+                }}/>
+            </div>}
+            {visibleFilterBox && <FilterBox key={Math.random()} dataSources={dataSources} relationColumns={relationColumns} filterData={filters} visibleFilterBox={visibleFilterBox} showFilterBox={this.showFilterBox} hideFilterBox={this.hideFilterBox} createFilters={this.createFilters} />}
+        </div>
+    }
+}
+
+export default connect()(FilterBar);

src/components/dashboardDesigner/layout.less

@@ -72,9 +72,8 @@
                 border: none;
                 .filters {
                     position: fixed;
-                    width: 1166px;
+                    width: 100%;
                     z-index: 999;
-
                     display: flex;
                     justify-content: space-between;
                     width: 100%;

src/components/dashboardDesigner/viewLayout.jsx

@@ -136,7 +136,8 @@ class ViewLayout extends React.Component {
                 verticalCompact={true}
                 compactType='vertical'
             >
-                {(children.length === 0) ? <div key={`default-chartview-${((contentSize.height - 8) / 48)}`} className='default-chartview' data-grid={{ x: 0, y: 0, w: maxLayoutW, h: Math.max((contentSize.height - 8) / 48, 2) , minW: maxLayoutW, maxW: maxLayoutW, static: true }}>
+                {/* {(children.length === 0) ? <div key={`default-chartview-${((contentSize.height - 8) / 48)}`} className='default-chartview' data-grid={{ x: 0, y: 0, w: maxLayoutW, h: Math.max((contentSize.height - 8) / 48, 2) , minW: maxLayoutW, maxW: maxLayoutW, static: true }}> */}
+                {(children.length === 0) ? <div key='default-chartview' className='default-chartview' data-grid={{ x: 0, y: 0, w: maxLayoutW, h: 2, minW: maxLayoutW, maxW: maxLayoutW, minH: 2, maxH: 2, static: true }}>
                     <EmptyContent />
                 </div> : children}
             </ReactGridLayout>

src/components/homePage/toolbar.less

@@ -44,6 +44,7 @@
             transform: rotate(135deg);
             right: -18px;
             top: -20px;
+            z-index: 1001;
             .ant-modal-close-x {
                 font-size: 14px;
                 width: 14px;

src/models/dashboardDesigner.js

@@ -101,7 +101,7 @@ export default {
             description: '',
             thumbnail: '',
             dirty: false,
-            editMode: true,
+            editMode: false,
             filterColumns: [],
             filters: [],
             dataSources: [], // 图表关联的所有数据源

src/themes/default/base.less

@@ -158,8 +158,8 @@ input::-webkit-input-placeholder {
 
 // Modal
 .ant-modal {
-    max-height: 80vh;
-    top: 10%;
+    // max-height: 80vh;
+    // top: 10%;
 }
 .ant-modal-header {
     display: table;