fix: bug

packages/extend-components/EC_HistoryInfo/src/index.js

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Highcharts from 'highcharts/highstock';
 import HighchartsReact from 'highcharts-react-official';
-import { Tabs, Select, Radio, Checkbox, ConfigProvider, DatePicker } from 'antd';
+import HighchartsBoost from 'highcharts/modules/boost';
+import { Tabs, Select, Radio, Checkbox, ConfigProvider, DatePicker, Spin } from 'antd';
 import { PlusCircleOutlined, CloseCircleFilled } from '@ant-design/icons';
 import TimeRangePicker from '@wisdom-components/timerangepicker';
 import BasicTable from '@wisdom-components/basictable';
@@ -11,6 +12,8 @@ import Empty from '@wisdom-components/empty';
 import moment from 'moment';
 import './index.less';
 
+HighchartsBoost(Highcharts);
+
 const { TabPane } = Tabs;
 const { RangePicker } = DatePicker;
 const { Option } = Select;
@@ -115,6 +118,9 @@ const DefaultOptions = (color, contrastOption) => ({
     zoomType: 'x',
     backgroundColor: 'rgba(255, 255, 255, 0.5)',
   },
+  boost: {
+    useGPUTranslations: true,
+  },
   colors: color,
   title: null,
   credits: false,
@@ -202,6 +208,7 @@ const HistoryInfo = (props) => {
     defaultChecked,
   } = props;
 
+  const [loading, setLoading] = useState(false);
   const [activeTabKey, setActiveTabKey] = useState('curve');
   const [timeValue, setTimeValue] = useState('customer');
   const [contrastOption, setContrastOption] = useState('day');
@@ -344,6 +351,7 @@ const HistoryInfo = (props) => {
       };
       requestArr.push(historyInfoService(param));
     });
+    setLoading(true);
     Promise.all(requestArr).then((values) => {
       if (values.length) {
         let data = [];
@@ -352,6 +360,7 @@ const HistoryInfo = (props) => {
             data = data.concat(res.data);
           }
         });
+        setLoading(false);
         handleTableData(data);
         handleSeries(data);
       }
@@ -770,34 +779,36 @@ const HistoryInfo = (props) => {
             <div className={classNames(`${prefixCls}-content`)}>
               {renderOptions(item)}
               {!tableData.length && <Empty />}
-              {!!tableData.length && (
-                <div className={classNames(`${prefixCls}-wrap`)}>
-                  <div className={classNames(`${prefixCls}-main`)}>
-                    {item.key === 'curve' && (
-                      <div className={classNames(`${prefixCls}-chart`)} ref={container}>
-                        <HighchartsReact
-                          immutable={true}
-                          highcharts={Highcharts}
-                          constructorType={'stockChart'}
-                          options={options}
-                          allowChartUpdate={true}
+              <Spin spinning={loading}>
+                {!!tableData.length && (
+                  <div className={classNames(`${prefixCls}-wrap`)}>
+                    <div className={classNames(`${prefixCls}-main`)}>
+                      {item.key === 'curve' && (
+                        <div className={classNames(`${prefixCls}-chart`)} ref={container}>
+                          <HighchartsReact
+                            immutable={true}
+                            highcharts={Highcharts}
+                            constructorType={'stockChart'}
+                            options={options}
+                            allowChartUpdate={true}
+                          />
+                        </div>
+                      )}
+                      {item.key === 'table' && (
+                        <BasicTable
+                          dataSource={tableData}
+                          columns={columns}
+                          {...tableProps}
+                          pagination={{ pageSize, showQuickJumper: true, showSizeChanger: true }}
+                          onChange={(value) => {
+                            setPageSize(value.pageSize);
+                          }}
                         />
-                      </div>
-                    )}
-                    {item.key === 'table' && (
-                      <BasicTable
-                        dataSource={tableData}
-                        columns={columns}
-                        {...tableProps}
-                        pagination={{ pageSize, showQuickJumper: true, showSizeChanger: true }}
-                        onChange={(value) => {
-                          setPageSize(value.pageSize);
-                        }}
-                      />
-                    )}
+                      )}
+                    </div>
                   </div>
-                </div>
-              )}
+                )}
+              </Spin>
             </div>
           </TabPane>
         ))}

packages/extend-components/EC_HistoryInfo/src/index.less

@@ -14,9 +14,20 @@
     flex-direction: column;
     height: 100%;
     padding: 10px 0 0 0;
+
+    .ant-spin-nested-loading {
+      display: flex;
+      flex: 1;
+    }
+
+    .ant-spin-container {
+      display: flex;
+      flex: 1;
+    }
   }
 
   &-wrap {
+    display: flex;
     flex: 1;
     overflow: hidden;
   }

packages/extend-components/EC_QuotaSelect/src/index.less

@@ -4,10 +4,10 @@
 .@{ec-quota-select-prefix-cls} {
   &-btn-wrap {
     overflow: auto;
-    white-space: nowrap;
 
     button {
       margin-right: 20px;
+      margin-bottom: 10px;
     }
   }
 }