抽离定时器图表为上层组件

src/components/ActiveChart/index.js

@@ -0,0 +1,77 @@
+import React, { PureComponent } from 'react';
+
+import { NumberInfo, MiniArea } from '../Charts';
+import { fixedZero } from '../../utils/utils';
+
+import styles from './index.less';
+
+function getActiveData() {
+  const activeData = [];
+  for (let i = 0; i < 24; i += 1) {
+    activeData.push({
+      x: `${fixedZero(i)}:00`,
+      y: (i * 50) + (Math.floor(Math.random() * 200)),
+    });
+  }
+  return activeData;
+}
+
+export default class ActiveChart extends PureComponent {
+  state = {
+    activeData: getActiveData(),
+  }
+
+  componentDidMount() {
+    setInterval(() => {
+      this.setState({
+        activeData: getActiveData(),
+      });
+    }, 1000);
+  }
+
+  render() {
+    const { activeData = [] } = this.state;
+
+    return (
+      <div className={styles.activeChart}>
+        <NumberInfo
+          subTitle="目标评估"
+          total="有望达到预期"
+        />
+        <div style={{ marginTop: 32 }}>
+          <MiniArea
+            animate={false}
+            line
+            color="#5DD1DD"
+            height={84}
+            yAxis={{
+              tickCount: 3,
+              tickLine: false,
+              labels: false,
+              title: false,
+              line: false,
+            }}
+            data={activeData}
+          />
+        </div>
+        {
+          activeData && (
+            <div className={styles.activeChartGrid}>
+              <p>{[...activeData].sort()[activeData.length - 1].y + 200} 亿元</p>
+              <p>{[...activeData].sort()[Math.floor(activeData.length / 2)].y} 亿元</p>
+            </div>
+          )
+        }
+        {
+          activeData && (
+            <div className={styles.activeChartLegend}>
+              <span>00:00</span>
+              <span>{activeData[Math.floor(activeData.length / 2)].x}</span>
+              <span>{activeData[activeData.length - 1].x}</span>
+            </div>
+          )
+        }
+      </div>
+    );
+  }
+}

src/components/ActiveChart/index.less

@@ -0,0 +1,34 @@
+@import "~antd/lib/style/themes/default.less";
+@import "../../utils/utils.less";
+
+.activeChart {
+  position: relative;
+}
+.activeChartGrid {
+  p {
+    position: absolute;
+    top: 80px;
+  }
+  p:last-child {
+    top: 115px;
+  }
+}
+.activeChartLegend {
+  position: relative;
+  font-size: 0;
+  margin-top: 8px;
+  height: 20px;
+  line-height: 20px;
+  span {
+    display: inline-block;
+    font-size: 12px;
+    text-align: center;
+    width: 33.33%;
+  }
+  span:first-child {
+    text-align: left;
+  }
+  span:last-child {
+    text-align: right;
+  }
+}

src/routes/Dashboard/Monitor.js

@@ -7,21 +7,11 @@ import { NumberInfo, MiniArea, Pie, WaterWave, Gauge } from '../../components/Ch
 import MapChart from '../../components/MapChart';
 import TagCloud from '../../components/TagCloud';
 import Countdown from '../../components/Countdown';
+import ActiveChart from '../../components/ActiveChart';
 import { fixedZero } from '../../utils/utils';
 
 import styles from './Monitor.less';
 
-function getActiveData() {
-  const activeData = [];
-  for (let i = 0; i < 24; i += 1) {
-    activeData.push({
-      x: `${fixedZero(i)}:00`,
-      y: (i * 50) + (Math.floor(Math.random() * 200)),
-    });
-  }
-  return activeData;
-}
-
 const MapData = [];
 for (let i = 0; i < 50; i += 1) {
   MapData.push({
@@ -36,23 +26,13 @@ const targetTime = new Date().getTime() + 3900000;
   monitor: state.monitor,
 }))
 export default class Monitor extends PureComponent {
-  state = {
-    activeData: getActiveData(),
-  }
-
   componentDidMount() {
     this.props.dispatch({
       type: 'monitor/fetchTags',
     });
-
-    setInterval(() => {
-      this.setState({
-        activeData: getActiveData(),
-      });
-    }, 1000);
   }
+
   render() {
-    const { activeData = [] } = this.state;
     const { monitor } = this.props;
     const { tags } = monitor;
 
@@ -96,45 +76,7 @@ export default class Monitor extends PureComponent {
           </Col>
           <Col lg={8} md={24} sm={24} xs={24}>
             <Card title="活动情况预测" style={{ marginBottom: 24 }} bordered={false}>
-              <div className={styles.activeChart}>
+              <ActiveChart />
-                <NumberInfo
-                  subTitle="目标评估"
-                  total="有望达到预期"
-                />
-                <div style={{ marginTop: 32 }}>
-                  <MiniArea
-                    animate={false}
-                    line
-                    color="#5DD1DD"
-                    height={84}
-                    yAxis={{
-                      tickCount: 3,
-                      tickLine: false,
-                      labels: false,
-                      title: false,
-                      line: false,
-                    }}
-                    data={activeData}
-                  />
-                </div>
-                {
-                  activeData && (
-                    <div className={styles.activeChartGrid}>
-                      <p>{[...activeData].sort()[activeData.length - 1].y + 200} 亿元</p>
-                      <p>{[...activeData].sort()[Math.floor(activeData.length / 2)].y} 亿元</p>
-                    </div>
-                  )
-                }
-                {
-                  activeData && (
-                    <div className={styles.activeChartLegend}>
-                      <span>00:00</span>
-                      <span>{activeData[Math.floor(activeData.length / 2)].x}</span>
-                      <span>{activeData[activeData.length - 1].x}</span>
-                    </div>
-                  )
-                }
-              </div>
             </Card>
             <Card
               title="券核效率"

src/routes/Dashboard/Monitor.less

@@ -1,38 +1,6 @@
 @import "~antd/lib/style/themes/default.less";
 @import "../../utils/utils.less";
 
-.activeChart {
-  position: relative;
-}
-.activeChartGrid {
-  p {
-    position: absolute;
-    top: 80px;
-  }
-  p:last-child {
-    top: 115px;
-  }
-}
-.activeChartLegend {
-  position: relative;
-  font-size: 0;
-  margin-top: 8px;
-  height: 20px;
-  line-height: 20px;
-  span {
-    display: inline-block;
-    font-size: 12px;
-    text-align: center;
-    width: 33.33%;
-  }
-  span:first-child {
-    text-align: left;
-  }
-  span:last-child {
-    text-align: right;
-  }
-}
-
 .mapChart {
   padding-top: 46px;
   height: 436px;