From cfbf108b7b2cb35e16e5312ab2e4f3199044cf76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B8=85?= <qixian.cs@outlook.com>
Date: Fri, 22 Jun 2018 11:36:09 +0800
Subject: [PATCH] fix the problem that the chart cannot be displayed

---
 package.json                             |  8 +++----
 src/components/Charts/ChartCard/index.js | 19 +++------------
 src/layouts/LoadingPage.js               | 16 +++++++++----
 src/routes/Dashboard/Analysis.js         | 30 +++++++++++++++++-------
 src/routes/Dashboard/Workplace.js        |  4 +++-
 5 files changed, 44 insertions(+), 33 deletions(-)

diff --git a/package.json b/package.json
index ea4cc15c..c7dd3785 100755
--- a/package.json
+++ b/package.json
@@ -31,14 +31,14 @@
     "dva-loading": "^2.0.3",
     "enquire-js": "^0.2.1",
     "lodash": "^4.17.4",
-    "lodash-decorators": "^5.0.1",
+    "lodash-decorators": "^6.0.0",
     "moment": "^2.22.0",
     "numeral": "^2.0.6",
     "omit.js": "^1.0.0",
     "path-to-regexp": "^2.1.0",
     "prop-types": "^15.5.10",
     "qs": "^6.5.0",
-    "rc-drawer": "^1.2.0",
+    "rc-drawer": "^1.3.1",
     "react": "^16.4.0",
     "react-container-query": "^0.11.0",
     "react-document-title": "^2.0.3",
@@ -62,7 +62,7 @@
     "cross-port-killer": "^1.0.1",
     "enzyme": "^3.1.0",
     "eslint": "^4.14.0",
-    "eslint-config-airbnb": "^16.0.0",
+    "eslint-config-airbnb": "^17.0.0",
     "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-babel": "^5.1.0",
     "eslint-plugin-compat": "^2.4.0",
@@ -81,7 +81,7 @@
     "roadhog": "^2.4.2",
     "roadhog-api-doc": "^1.0.4",
     "stylelint": "^9.2.1",
-    "stylelint-config-prettier": "^3.0.4",
+    "stylelint-config-prettier": "^3.3.0",
     "stylelint-config-standard": "^18.0.0"
   },
   "optionalDependencies": {
diff --git a/src/components/Charts/ChartCard/index.js b/src/components/Charts/ChartCard/index.js
index dbb6efbc..ca6bcb2e 100644
--- a/src/components/Charts/ChartCard/index.js
+++ b/src/components/Charts/ChartCard/index.js
@@ -20,19 +20,9 @@ const renderTotal = total => {
 };
 
 class ChartCard extends React.PureComponent {
-  state = {
-    loading: true,
-  };
-  componentDidMount() {
-    requestAnimationFrame(() => {
-      this.setState({
-        loading: false,
-      });
-    });
-  }
   renderConnet = () => {
     const { contentHeight, title, avatar, action, total, footer, children, loading } = this.props;
-    if (loading || this.state.loading) {
+    if (loading) {
       return false;
     }
     return (
@@ -68,6 +58,7 @@ class ChartCard extends React.PureComponent {
       </div>
     );
   };
+
   render() {
     const {
       loading = false,
@@ -81,11 +72,7 @@ class ChartCard extends React.PureComponent {
       ...rest
     } = this.props;
     return (
-      <Card
-        loading={loading || this.state.loading}
-        bodyStyle={{ padding: '20px 24px 8px 24px' }}
-        {...rest}
-      >
+      <Card loading={loading} bodyStyle={{ padding: '20px 24px 8px 24px' }} {...rest}>
         {this.renderConnet()}
       </Card>
     );
diff --git a/src/layouts/LoadingPage.js b/src/layouts/LoadingPage.js
index ee7029b3..45c3e720 100644
--- a/src/layouts/LoadingPage.js
+++ b/src/layouts/LoadingPage.js
@@ -34,36 +34,44 @@ class LoadingPage extends PureComponent {
     loading: true,
     isMobile: false,
   };
+
   componentDidMount() {
+    const { dispatch } = this.props;
     this.enquireHandler = enquireScreen(mobile => {
       this.setState({
         isMobile: mobile,
       });
     });
-    this.props.dispatch({
+    dispatch({
       type: 'user/fetchCurrent',
     });
     this.hideLoading();
     this.initSetting();
   }
+
   componentWillUnmount() {
     unenquireScreen(this.enquireHandler);
   }
+
   hideLoading() {
     this.setState({
       loading: false,
     });
   }
+
   /**
    * get setting from url params
    */
   initSetting() {
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
       type: 'setting/getSetting',
     });
   }
+
   render() {
-    if (this.state.loading) {
+    const { loading, isMobile } = this.state;
+    if (loading) {
       return (
         <div
           style={{
@@ -80,7 +88,7 @@ class LoadingPage extends PureComponent {
     }
     return (
       <BasicLayout
-        isMobile={this.state.isMobile}
+        isMobile={isMobile}
         menuData={MenuData}
         redirectData={redirectData}
         {...this.props}
diff --git a/src/routes/Dashboard/Analysis.js b/src/routes/Dashboard/Analysis.js
index da0fd7e7..0a3b2de0 100644
--- a/src/routes/Dashboard/Analysis.js
+++ b/src/routes/Dashboard/Analysis.js
@@ -55,7 +55,8 @@ export default class Analysis extends Component {
   };
 
   componentDidMount() {
-    this.props.dispatch({
+    const { dispatch } = this.props;
+    dispatch({
       type: 'chart/fetch',
     });
   }
@@ -80,21 +81,23 @@ export default class Analysis extends Component {
   };
 
   handleRangePickerChange = rangePickerValue => {
+    const { dispatch } = this.props;
     this.setState({
       rangePickerValue,
     });
 
-    this.props.dispatch({
+    dispatch({
       type: 'chart/fetchSalesData',
     });
   };
 
   selectDate = type => {
+    const { dispatch } = this.props;
     this.setState({
       rangePickerValue: getTimeDistance(type),
     });
 
-    this.props.dispatch({
+    dispatch({
       type: 'chart/fetchSalesData',
     });
   };
@@ -200,7 +203,10 @@ export default class Analysis extends Component {
         sorter: (a, b) => a.range - b.range,
         render: (text, record) => (
           <Trend flag={record.status === 1 ? 'down' : 'up'}>
-            <span style={{ marginRight: 4 }}>{text}%</span>
+            <span style={{ marginRight: 4 }}>
+              {text}
+              %
+            </span>
           </Trend>
         ),
         align: 'right',
@@ -255,21 +261,25 @@ export default class Analysis extends Component {
                   <Icon type="info-circle-o" />
                 </Tooltip>
               }
+              loading={loading}
               total={() => <Yuan>126560</Yuan>}
               footer={<Field label="日均销售额" value={`￥${numeral(12423).format('0,0')}`} />}
               contentHeight={46}
             >
               <Trend flag="up" style={{ marginRight: 16 }}>
-                周同比<span className={styles.trendText}>12%</span>
+                周同比
+                <span className={styles.trendText}>12%</span>
               </Trend>
               <Trend flag="down">
-                日环比<span className={styles.trendText}>11%</span>
+                日环比
+                <span className={styles.trendText}>11%</span>
               </Trend>
             </ChartCard>
           </Col>
           <Col {...topColResponsiveProps}>
             <ChartCard
               bordered={false}
+              loading={loading}
               title="访问量"
               action={
                 <Tooltip title="指标说明">
@@ -286,6 +296,7 @@ export default class Analysis extends Component {
           <Col {...topColResponsiveProps}>
             <ChartCard
               bordered={false}
+              loading={loading}
               title="支付笔数"
               action={
                 <Tooltip title="指标说明">
@@ -301,6 +312,7 @@ export default class Analysis extends Component {
           </Col>
           <Col {...topColResponsiveProps}>
             <ChartCard
+              loading={loading}
               bordered={false}
               title="运营活动效果"
               action={
@@ -312,10 +324,12 @@ export default class Analysis extends Component {
               footer={
                 <div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
                   <Trend flag="up" style={{ marginRight: 16 }}>
-                    周同比<span className={styles.trendText}>12%</span>
+                    周同比
+                    <span className={styles.trendText}>12%</span>
                   </Trend>
                   <Trend flag="down">
-                    日环比<span className={styles.trendText}>11%</span>
+                    日环比
+                    <span className={styles.trendText}>11%</span>
                   </Trend>
                 </div>
               }
diff --git a/src/routes/Dashboard/Workplace.js b/src/routes/Dashboard/Workplace.js
index 8ebefe91..12d03b19 100644
--- a/src/routes/Dashboard/Workplace.js
+++ b/src/routes/Dashboard/Workplace.js
@@ -71,7 +71,9 @@ export default class Workplace extends PureComponent {
   }
 
   renderActivities() {
-    const { activities: { list } } = this.props;
+    const {
+      activities: { list },
+    } = this.props;
     return list.map(item => {
       const events = item.template.split(/@\{([^{}]*)\}/gi).map(key => {
         if (item[key]) {
-- 
GitLab