移动端指标看板全屏BUG

src/components/chartDesigner/charts/indicatorView.jsx

@@ -1,9 +1,10 @@
 /**
  * 指标板
  */
-import React from 'react'
-import EmptyContent from '../../common/emptyContent/index'
-import './indicatorView.less'
+import React from 'react';
+import EmptyContent from '../../common/emptyContent/index';
+import './indicatorView.less';
+
 class IndicatorView extends React.Component {
     constructor(props) {
         super(props);
@@ -12,11 +13,18 @@ class IndicatorView extends React.Component {
 
     componentDidMount() {
         this.autoLayout();
-        window.addEventListener('resize', this.autoLayout);
+        window.addEventListener('resize', this.addAutoLayoutEvent);
     }
 
     componentWillUnmount() {
-        window.removeEventListener('resize', this.autoLayout);
+        window.removeEventListener('resize', this.addAutoLayoutEvent);
+    }
+
+    addAutoLayoutEvent = () => {
+        window.clearTimeout(this.resizeKey);
+        this.resizeKey = window.setTimeout(() => {
+            this.autoLayout()
+        }, 100);
     }
 
     autoLayout = () => {
@@ -33,7 +41,7 @@ class IndicatorView extends React.Component {
         let cards = body.getElementsByClassName('indicator-box');
         let cardCount = cards.length;
         let bodyBox = body.getBoundingClientRect();
-
+        
         let maxColNum = cardCount > 4 ? 4 : cardCount; // 列数
         let maxRowNum = Math.ceil(cardCount / maxColNum); // 行数
         let cardHeight = bodyBox.height / maxRowNum - 8;

src/components/dashboardDesigner/filterBar.jsx

@@ -47,7 +47,7 @@ class FilterBar extends React.Component {
         });
         
         window.setTimeout(() => {
-            this.filtersRef.style.overflow = 'auto';
+            this.filtersRef.style.overflow = 'visible';
         }, 300);
         document.addEventListener('click', this.closeFiltersEventListener)
     }

src/components/dashboardDesigner/mobileFilterList.jsx

@@ -129,7 +129,6 @@ class MobileFilterList extends React.Component {
                     filterItem = <List key={Math.random()} renderHeader={() => `${label} (${operatorLabel}) :`}>
                         <ListItem
                             onClick={() => {
-                                console.log(value1, value2);
                                 document.getElementsByTagName('body')[0].style.overflowY = 'hidden';
                                 let obj = {};
                                 obj.showCalendar = true;
@@ -157,7 +156,7 @@ class MobileFilterList extends React.Component {
                 }
             }else if(type === 'categorical') { // 类别
                 if(operator === 'include' || operator==='notInclude') { // 包含/不包含
-                    filterItem = <List key={Math.random()} renderHeader={() => `${label} (${operatorLabel}) :`}>
+                    filterItem = <List key={`input-${index}-${value1}`} renderHeader={() => `${label} (${operatorLabel}) :`}>
                         <InputItem
                             defaultValue={value1}
                             clear
@@ -180,7 +179,7 @@ class MobileFilterList extends React.Component {
                                 menuSelected: value1,
                                 showMenu: true,
                             });
-                        }}>{value1.join(',')}</ListItem>
+                        }}>{value1 && value1.length > 0 ? value1.join(',') : ''}</ListItem>
                     </List>
                 }else { // 等于/不等于
                     filterItem = <List key={Math.random()} renderHeader={() => `${label} (${operatorLabel}) :`}>
@@ -440,7 +439,6 @@ class MobileFilterList extends React.Component {
     render() {
         const { filtersOpened, closeFilters, expandFilters } = this.props;
         const { showMenu, showCalendar, calendarValue, currentFilter, menuData, menuSelected, menuConfig } = this.state;
-        console.log(calendarValue);
         return (
             <div className='filter-list-mobile'>
                 <List
@@ -474,12 +472,18 @@ class MobileFilterList extends React.Component {
                             endDate = oldDate[1],
                             obj = {};
 
-                        if(!startDate || endDate) {
+                        if(!startDate || endDate) { // 该次点击动作为设置开始时间
                             obj.calendarStartDate = date;
                             // obj.calendarValue = [date, date];
                             obj.calendarEndDate = date
-                        }else {
-                            obj.calendarEndDate = date
+                        }else { // 该次点击动作为设置结束时间
+                            if(moment(date).isBefore(startDate)) {
+                                // 但是如果该次时间比之前的开始时间还要提前，则交换开始、结束时间位置
+                                obj.calendarStartDate = date;
+                                obj.calendarEndDate = startDate
+                            }else {
+                                obj.calendarEndDate = date
+                            }
                             // obj.calendarValue = [this.state.calendarStartDate, date];
                         }
                         this.setState(obj);

src/components/dashboardDesigner/viewLayout.less

@@ -42,7 +42,7 @@
         .anticon {
           color: @icon-color-default;
           display: none;
-          margin-left: 10px;
+          padding: 8px;
           cursor: pointer;
           &:hover {
             color: @icon-color-hover;
@@ -327,6 +327,7 @@
             white-space: nowrap;
             .anticon {
               margin: 0 6px;
+              padding: 4px;
               cursor: pointer;
             }
           }