From 75684f6acbab9aaaf3cfcf5f31b3b9c798f2f962 Mon Sep 17 00:00:00 2001
From: nikogu <644506165@qq.com>
Date: Thu, 7 Sep 2017 11:32:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=BD=E7=A6=BB=E5=AE=9A=E6=97=B6=E5=99=A8?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E4=B8=BA=E4=B8=8A=E5=B1=82=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ActiveChart/index.js   | 77 +++++++++++++++++++++++++++
 src/components/ActiveChart/index.less | 34 ++++++++++++
 src/routes/Dashboard/Monitor.js       | 64 ++--------------------
 src/routes/Dashboard/Monitor.less     | 32 -----------
 4 files changed, 114 insertions(+), 93 deletions(-)
 create mode 100644 src/components/ActiveChart/index.js
 create mode 100644 src/components/ActiveChart/index.less

diff --git a/src/components/ActiveChart/index.js b/src/components/ActiveChart/index.js
new file mode 100644
index 00000000..1ab1cd54
--- /dev/null
+++ b/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>
+    );
+  }
+}
diff --git a/src/components/ActiveChart/index.less b/src/components/ActiveChart/index.less
new file mode 100644
index 00000000..0f781470
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/routes/Dashboard/Monitor.js b/src/routes/Dashboard/Monitor.js
index 44764b28..741a1922 100644
--- a/src/routes/Dashboard/Monitor.js
+++ b/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}>
-                <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>
+              <ActiveChart />
             </Card>
             <Card
               title="券核效率"
diff --git a/src/routes/Dashboard/Monitor.less b/src/routes/Dashboard/Monitor.less
index 59a8357e..d5770493 100644
--- a/src/routes/Dashboard/Monitor.less
+++ b/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;
-- 
GitLab