From b4d7f6cd7a069ec8462dfed9ffd54838ba0eb80d Mon Sep 17 00:00:00 2001
From: nikogu <644506165@qq.com>
Date: Wed, 6 Sep 2017 16:30:29 +0800
Subject: [PATCH 01/14] List & Dashboard Design Review

---
 src/components/Charts/MiniArea/index.js       |  3 +-
 src/components/Charts/MiniProgress/index.js   | 17 ++++++----
 src/components/Charts/MiniProgress/index.less |  1 +
 src/components/Charts/Pie/index.js            |  4 ++-
 src/components/TagCloud/index.js              |  2 +-
 src/layouts/PageHeaderLayout.js               |  3 +-
 src/routes/Dashboard/Analysis.js              |  6 +++-
 src/routes/Dashboard/Analysis.less            |  5 +++
 src/routes/Dashboard/Monitor.js               | 34 +++++++++++++------
 src/routes/Dashboard/Workplace.js             |  2 +-
 10 files changed, 54 insertions(+), 23 deletions(-)

diff --git a/src/components/Charts/MiniArea/index.js b/src/components/Charts/MiniArea/index.js
index 5807c352..d763649c 100644
--- a/src/components/Charts/MiniArea/index.js
+++ b/src/components/Charts/MiniArea/index.js
@@ -18,7 +18,7 @@ class MiniArea extends PureComponent {
   }
 
   renderChart(data) {
-    const { height = 0, fit = true, color = '#33abfb', line, xAxis, yAxis } = this.props;
+    const { height = 0, fit = true, color = '#33abfb', line, xAxis, yAxis, animate = true } = this.props;
 
     if (!data || (data && data.length < 1)) {
       return;
@@ -31,6 +31,7 @@ class MiniArea extends PureComponent {
       container: this.node,
       forceFit: fit,
       height: height + 54,
+      animate,
       plotCfg: {
         margin: [36, 0, 30, 0],
       },
diff --git a/src/components/Charts/MiniProgress/index.js b/src/components/Charts/MiniProgress/index.js
index 63037a1c..8d1d82a2 100644
--- a/src/components/Charts/MiniProgress/index.js
+++ b/src/components/Charts/MiniProgress/index.js
@@ -1,16 +1,19 @@
 import React from 'react';
+import { Popover } from 'antd';
 
 import styles from './index.less';
 
 const MiniProgress = ({ target, color, strokeWidth, percent }) => (
   <div className={styles.miniProgress}>
-    <div
-      className={styles.target}
-      style={{ left: (target ? `${target}%` : null) }}
-    >
-      <span style={{ backgroundColor: (color || null) }} />
-      <span style={{ backgroundColor: (color || null) }} />
-    </div>
+    <Popover title={null} content={`目标值: ${target}%`}>
+      <div
+        className={styles.target}
+        style={{ left: (target ? `${target}%` : null) }}
+      >
+        <span style={{ backgroundColor: (color || null) }} />
+        <span style={{ backgroundColor: (color || null) }} />
+      </div>
+    </Popover>
     <div className={styles.progressWrap}>
       <div
         className={styles.progress}
diff --git a/src/components/Charts/MiniProgress/index.less b/src/components/Charts/MiniProgress/index.less
index 94ed47a0..4ef52607 100644
--- a/src/components/Charts/MiniProgress/index.less
+++ b/src/components/Charts/MiniProgress/index.less
@@ -17,6 +17,7 @@
     height: 100%;
   }
   .target {
+    cursor: pointer;
     position: absolute;
     top: 0;
     bottom: 0;
diff --git a/src/components/Charts/Pie/index.js b/src/components/Charts/Pie/index.js
index 7228268a..a06f06b4 100644
--- a/src/components/Charts/Pie/index.js
+++ b/src/components/Charts/Pie/index.js
@@ -14,7 +14,9 @@ class Pie extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    this.renderChart(nextProps.data);
+    if (this.props.data !== nextProps.data) {
+      this.renderChart(nextProps.data);
+    }
   }
 
   handleRef = (n) => {
diff --git a/src/components/TagCloud/index.js b/src/components/TagCloud/index.js
index 0ade0e71..72693b95 100644
--- a/src/components/TagCloud/index.js
+++ b/src/components/TagCloud/index.js
@@ -79,7 +79,7 @@ class TagCloud extends PureComponent {
       height,
 
       // 设定文字大小配置函数(默认为12-40px的随机大小)
-      size: words => (((words.value - min) / (max - min)) * 10) + 12,
+      size: words => (((words.value - min) / (max - min)) * 12) + 6,
 
       // 设定文字内容
       text: words => words.name,
diff --git a/src/layouts/PageHeaderLayout.js b/src/layouts/PageHeaderLayout.js
index 1573b8a9..0b04067a 100644
--- a/src/layouts/PageHeaderLayout.js
+++ b/src/layouts/PageHeaderLayout.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PageHeader from '../components/PageHeader';
 
-export default ({ children, wrapperClassName, ...restProps }) => (
+export default ({ children, wrapperClassName, top, ...restProps }) => (
   <div style={{ margin: '-24px -24px 0' }} className={wrapperClassName}>
+    {top}
     <PageHeader {...restProps} />
     {children ? <div style={{ margin: '24px 24px 0' }}>{children}</div> : null}
   </div>
diff --git a/src/routes/Dashboard/Analysis.js b/src/routes/Dashboard/Analysis.js
index 23bca42b..f716fead 100644
--- a/src/routes/Dashboard/Analysis.js
+++ b/src/routes/Dashboard/Analysis.js
@@ -60,6 +60,10 @@ export default class Analysis extends Component {
     this.setState({
       rangePickerValue,
     });
+
+    this.props.dispatch({
+      type: 'chart/fetchSalesData',
+    });
   }
 
   selectDate = (type) => {
@@ -84,7 +88,7 @@ export default class Analysis extends Component {
       salesTypeData,
       salesTypeDataOnline,
       salesTypeDataOffline,
-      } = chart;
+    } = chart;
 
     const salesPieData = salesType === 'all' ?
       salesTypeData
diff --git a/src/routes/Dashboard/Analysis.less b/src/routes/Dashboard/Analysis.less
index 54476f4a..966b32bd 100644
--- a/src/routes/Dashboard/Analysis.less
+++ b/src/routes/Dashboard/Analysis.less
@@ -3,8 +3,13 @@
 
 .iconGroup {
   i {
+    transition: color 0.32s;
+    color: @text-color-secondary;
     cursor: pointer;
     margin-left: 16px;
+    &:hover {
+      color: @text-color;
+    }
   }
 }
 .rankingList {
diff --git a/src/routes/Dashboard/Monitor.js b/src/routes/Dashboard/Monitor.js
index b7977e73..44764b28 100644
--- a/src/routes/Dashboard/Monitor.js
+++ b/src/routes/Dashboard/Monitor.js
@@ -11,12 +11,15 @@ import { fixedZero } from '../../utils/utils';
 
 import styles from './Monitor.less';
 
-const activeData = [];
-for (let i = 0; i < 24; i += 1) {
-  activeData.push({
-    x: `${fixedZero(i)}:00`,
-    y: (i * 50) + (Math.floor(Math.random() * 200)),
-  });
+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 = [];
@@ -33,13 +36,23 @@ 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;
 
@@ -90,6 +103,7 @@ export default class Monitor extends PureComponent {
                 />
                 <div style={{ marginTop: 32 }}>
                   <MiniArea
+                    animate={false}
                     line
                     color="#5DD1DD"
                     height={84}
@@ -129,7 +143,7 @@ export default class Monitor extends PureComponent {
               bordered={false}
             >
               <Gauge
-                title="跳出率"
+                title="核销率"
                 height={164}
                 percent={87}
               />
@@ -143,7 +157,7 @@ export default class Monitor extends PureComponent {
               style={{ marginBottom: 24 }}
               bordered={false}
             >
-              <Row style={{ padding: '18px 0 19px 0' }}>
+              <Row gutter={4} style={{ padding: '18px 0 19px 0' }}>
                 <Col span={8}>
                   <Pie
                     percent={28}
@@ -174,7 +188,7 @@ export default class Monitor extends PureComponent {
             </Card>
           </Col>
           <Col sm={8} xs={24} style={{ marginBottom: 24 }}>
-            <Card title="热门搜索" bordered={false}>
+            <Card title="热门搜索" bordered={false} bodyStyle={{ height: 214 }}>
               <TagCloud
                 data={tags}
                 height={161}
diff --git a/src/routes/Dashboard/Workplace.js b/src/routes/Dashboard/Workplace.js
index c1928a48..ca345d9c 100644
--- a/src/routes/Dashboard/Workplace.js
+++ b/src/routes/Dashboard/Workplace.js
@@ -144,9 +144,9 @@ export default class Workplace extends PureComponent {
 
     return (
       <PageHeaderLayout
+        top={pageHeaderContent}
         action={pageHeaderAction}
         title={pageHeaderTitle}
-        content={pageHeaderContent}
       >
         <Row gutter={24}>
           <Col lg={16} md={24} sm={24} xs={24}>

From 523adccc21648a8e19959ff0aba64ec4ea802b03 Mon Sep 17 00:00:00 2001
From: nikogu <644506165@qq.com>
Date: Wed, 6 Sep 2017 16:34:37 +0800
Subject: [PATCH 02/14] update searchinput

---
 src/components/SearchInput/index.js   | 50 +++++++++++++++++++++------
 src/components/SearchInput/index.less | 21 -----------
 2 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/src/components/SearchInput/index.js b/src/components/SearchInput/index.js
index e5e4403c..36bb90ff 100644
--- a/src/components/SearchInput/index.js
+++ b/src/components/SearchInput/index.js
@@ -3,13 +3,43 @@ import { Button, Input } from 'antd';
 
 import styles from './index.less';
 
-export default ({ onSearch = () => ({}), text = '搜索', ...reset }) => (
-  <div className={styles.search}>
-    <Input
-      placeholder="请输入"
-      size="large"
-      {...reset}
-      addonAfter={<Button onClick={onSearch} type="primary">{text}</Button>}
-    />
-  </div>
-);
+export default class SearchInput extends React.Component {
+  state = {
+    value: this.props.defaultValue,
+  }
+
+  handleOnChange = (e) => {
+    this.setState({
+      value: e.target.value,
+    });
+  }
+
+  handleOnSearch = () => {
+    if (this.props.onSearch) {
+      this.props.onSearch(this.state.value);
+    }
+  }
+
+  handleOnKey = (e) => {
+    if (e.keyCode === 13) {
+      this.handleOnSearch();
+    }
+  }
+
+  render() {
+    const { text = '搜索', reset } = this.props;
+    return (
+      <div className={styles.search}>
+        <Input
+          onKeyDown={this.handleOnKey}
+          placeholder="请输入"
+          size="large"
+          {...reset}
+          value={this.state.value}
+          onChange={this.handleOnChange}
+          addonAfter={<Button onClick={this.handleOnSearch} type="primary">{text}</Button>}
+        />
+      </div>
+    );
+  }
+}
diff --git a/src/components/SearchInput/index.less b/src/components/SearchInput/index.less
index 7d00f448..2e8ab24b 100644
--- a/src/components/SearchInput/index.less
+++ b/src/components/SearchInput/index.less
@@ -1,5 +1,4 @@
 @import "~antd/lib/style/themes/default.less";
-@import "../../utils/utils.less";
 
 .search {
   display: inline-block;
@@ -23,23 +22,3 @@
     height: 40px;
   }
 }
-
-@media screen and (max-width: @screen-sm) {
-  .search {
-    :global {
-      .ant-input-group .ant-input {
-        width: 300px;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: @screen-xs) {
-  .search {
-    :global {
-      .ant-input-group .ant-input {
-        width: 200px;
-      }
-    }
-  }
-}

From 02204c3f877bc050182d02f4256654c793a0995c Mon Sep 17 00:00:00 2001
From: nikogu <644506165@qq.com>
Date: Wed, 6 Sep 2017 16:30:29 +0800
Subject: [PATCH 03/14] List & Dashboard Design Review

---
 src/components/Charts/MiniArea/index.js       |  3 +-
 src/components/Charts/MiniProgress/index.js   | 17 ++++++----
 src/components/Charts/MiniProgress/index.less |  1 +
 src/components/Charts/Pie/index.js            |  4 ++-
 src/components/TagCloud/index.js              |  2 +-
 src/layouts/PageHeaderLayout.js               |  3 +-
 src/routes/Dashboard/Analysis.js              |  6 +++-
 src/routes/Dashboard/Analysis.less            |  5 +++
 src/routes/Dashboard/Monitor.js               | 34 +++++++++++++------
 src/routes/Dashboard/Workplace.js             |  2 +-
 10 files changed, 54 insertions(+), 23 deletions(-)

diff --git a/src/components/Charts/MiniArea/index.js b/src/components/Charts/MiniArea/index.js
index 5807c352..d763649c 100644
--- a/src/components/Charts/MiniArea/index.js
+++ b/src/components/Charts/MiniArea/index.js
@@ -18,7 +18,7 @@ class MiniArea extends PureComponent {
   }
 
   renderChart(data) {
-    const { height = 0, fit = true, color = '#33abfb', line, xAxis, yAxis } = this.props;
+    const { height = 0, fit = true, color = '#33abfb', line, xAxis, yAxis, animate = true } = this.props;
 
     if (!data || (data && data.length < 1)) {
       return;
@@ -31,6 +31,7 @@ class MiniArea extends PureComponent {
       container: this.node,
       forceFit: fit,
       height: height + 54,
+      animate,
       plotCfg: {
         margin: [36, 0, 30, 0],
       },
diff --git a/src/components/Charts/MiniProgress/index.js b/src/components/Charts/MiniProgress/index.js
index 63037a1c..8d1d82a2 100644
--- a/src/components/Charts/MiniProgress/index.js
+++ b/src/components/Charts/MiniProgress/index.js
@@ -1,16 +1,19 @@
 import React from 'react';
+import { Popover } from 'antd';
 
 import styles from './index.less';
 
 const MiniProgress = ({ target, color, strokeWidth, percent }) => (
   <div className={styles.miniProgress}>
-    <div
-      className={styles.target}
-      style={{ left: (target ? `${target}%` : null) }}
-    >
-      <span style={{ backgroundColor: (color || null) }} />
-      <span style={{ backgroundColor: (color || null) }} />
-    </div>
+    <Popover title={null} content={`目标值: ${target}%`}>
+      <div
+        className={styles.target}
+        style={{ left: (target ? `${target}%` : null) }}
+      >
+        <span style={{ backgroundColor: (color || null) }} />
+        <span style={{ backgroundColor: (color || null) }} />
+      </div>
+    </Popover>
     <div className={styles.progressWrap}>
       <div
         className={styles.progress}
diff --git a/src/components/Charts/MiniProgress/index.less b/src/components/Charts/MiniProgress/index.less
index 94ed47a0..4ef52607 100644
--- a/src/components/Charts/MiniProgress/index.less
+++ b/src/components/Charts/MiniProgress/index.less
@@ -17,6 +17,7 @@
     height: 100%;
   }
   .target {
+    cursor: pointer;
     position: absolute;
     top: 0;
     bottom: 0;
diff --git a/src/components/Charts/Pie/index.js b/src/components/Charts/Pie/index.js
index 7228268a..a06f06b4 100644
--- a/src/components/Charts/Pie/index.js
+++ b/src/components/Charts/Pie/index.js
@@ -14,7 +14,9 @@ class Pie extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    this.renderChart(nextProps.data);
+    if (this.props.data !== nextProps.data) {
+      this.renderChart(nextProps.data);
+    }
   }
 
   handleRef = (n) => {
diff --git a/src/components/TagCloud/index.js b/src/components/TagCloud/index.js
index 0ade0e71..72693b95 100644
--- a/src/components/TagCloud/index.js
+++ b/src/components/TagCloud/index.js
@@ -79,7 +79,7 @@ class TagCloud extends PureComponent {
       height,
 
       // 设定文字大小配置函数(默认为12-40px的随机大小)
-      size: words => (((words.value - min) / (max - min)) * 10) + 12,
+      size: words => (((words.value - min) / (max - min)) * 12) + 6,
 
       // 设定文字内容
       text: words => words.name,
diff --git a/src/layouts/PageHeaderLayout.js b/src/layouts/PageHeaderLayout.js
index 1573b8a9..0b04067a 100644
--- a/src/layouts/PageHeaderLayout.js
+++ b/src/layouts/PageHeaderLayout.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PageHeader from '../components/PageHeader';
 
-export default ({ children, wrapperClassName, ...restProps }) => (
+export default ({ children, wrapperClassName, top, ...restProps }) => (
   <div style={{ margin: '-24px -24px 0' }} className={wrapperClassName}>
+    {top}
     <PageHeader {...restProps} />
     {children ? <div style={{ margin: '24px 24px 0' }}>{children}</div> : null}
   </div>
diff --git a/src/routes/Dashboard/Analysis.js b/src/routes/Dashboard/Analysis.js
index 23bca42b..f716fead 100644
--- a/src/routes/Dashboard/Analysis.js
+++ b/src/routes/Dashboard/Analysis.js
@@ -60,6 +60,10 @@ export default class Analysis extends Component {
     this.setState({
       rangePickerValue,
     });
+
+    this.props.dispatch({
+      type: 'chart/fetchSalesData',
+    });
   }
 
   selectDate = (type) => {
@@ -84,7 +88,7 @@ export default class Analysis extends Component {
       salesTypeData,
       salesTypeDataOnline,
       salesTypeDataOffline,
-      } = chart;
+    } = chart;
 
     const salesPieData = salesType === 'all' ?
       salesTypeData
diff --git a/src/routes/Dashboard/Analysis.less b/src/routes/Dashboard/Analysis.less
index 54476f4a..966b32bd 100644
--- a/src/routes/Dashboard/Analysis.less
+++ b/src/routes/Dashboard/Analysis.less
@@ -3,8 +3,13 @@
 
 .iconGroup {
   i {
+    transition: color 0.32s;
+    color: @text-color-secondary;
     cursor: pointer;
     margin-left: 16px;
+    &:hover {
+      color: @text-color;
+    }
   }
 }
 .rankingList {
diff --git a/src/routes/Dashboard/Monitor.js b/src/routes/Dashboard/Monitor.js
index b7977e73..44764b28 100644
--- a/src/routes/Dashboard/Monitor.js
+++ b/src/routes/Dashboard/Monitor.js
@@ -11,12 +11,15 @@ import { fixedZero } from '../../utils/utils';
 
 import styles from './Monitor.less';
 
-const activeData = [];
-for (let i = 0; i < 24; i += 1) {
-  activeData.push({
-    x: `${fixedZero(i)}:00`,
-    y: (i * 50) + (Math.floor(Math.random() * 200)),
-  });
+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 = [];
@@ -33,13 +36,23 @@ 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;
 
@@ -90,6 +103,7 @@ export default class Monitor extends PureComponent {
                 />
                 <div style={{ marginTop: 32 }}>
                   <MiniArea
+                    animate={false}
                     line
                     color="#5DD1DD"
                     height={84}
@@ -129,7 +143,7 @@ export default class Monitor extends PureComponent {
               bordered={false}
             >
               <Gauge
-                title="跳出率"
+                title="核销率"
                 height={164}
                 percent={87}
               />
@@ -143,7 +157,7 @@ export default class Monitor extends PureComponent {
               style={{ marginBottom: 24 }}
               bordered={false}
             >
-              <Row style={{ padding: '18px 0 19px 0' }}>
+              <Row gutter={4} style={{ padding: '18px 0 19px 0' }}>
                 <Col span={8}>
                   <Pie
                     percent={28}
@@ -174,7 +188,7 @@ export default class Monitor extends PureComponent {
             </Card>
           </Col>
           <Col sm={8} xs={24} style={{ marginBottom: 24 }}>
-            <Card title="热门搜索" bordered={false}>
+            <Card title="热门搜索" bordered={false} bodyStyle={{ height: 214 }}>
               <TagCloud
                 data={tags}
                 height={161}
diff --git a/src/routes/Dashboard/Workplace.js b/src/routes/Dashboard/Workplace.js
index c1928a48..ca345d9c 100644
--- a/src/routes/Dashboard/Workplace.js
+++ b/src/routes/Dashboard/Workplace.js
@@ -144,9 +144,9 @@ export default class Workplace extends PureComponent {
 
     return (
       <PageHeaderLayout
+        top={pageHeaderContent}
         action={pageHeaderAction}
         title={pageHeaderTitle}
-        content={pageHeaderContent}
       >
         <Row gutter={24}>
           <Col lg={16} md={24} sm={24} xs={24}>

From 8768c69a75270218e91fe56fb19b5c74b0f3aa72 Mon Sep 17 00:00:00 2001
From: nikogu <644506165@qq.com>
Date: Wed, 6 Sep 2017 16:34:37 +0800
Subject: [PATCH 04/14] update searchinput

---
 src/components/SearchInput/index.js   | 50 +++++++++++++++++++++------
 src/components/SearchInput/index.less | 21 -----------
 2 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/src/components/SearchInput/index.js b/src/components/SearchInput/index.js
index e5e4403c..36bb90ff 100644
--- a/src/components/SearchInput/index.js
+++ b/src/components/SearchInput/index.js
@@ -3,13 +3,43 @@ import { Button, Input } from 'antd';
 
 import styles from './index.less';
 
-export default ({ onSearch = () => ({}), text = '搜索', ...reset }) => (
-  <div className={styles.search}>
-    <Input
-      placeholder="请输入"
-      size="large"
-      {...reset}
-      addonAfter={<Button onClick={onSearch} type="primary">{text}</Button>}
-    />
-  </div>
-);
+export default class SearchInput extends React.Component {
+  state = {
+    value: this.props.defaultValue,
+  }
+
+  handleOnChange = (e) => {
+    this.setState({
+      value: e.target.value,
+    });
+  }
+
+  handleOnSearch = () => {
+    if (this.props.onSearch) {
+      this.props.onSearch(this.state.value);
+    }
+  }
+
+  handleOnKey = (e) => {
+    if (e.keyCode === 13) {
+      this.handleOnSearch();
+    }
+  }
+
+  render() {
+    const { text = '搜索', reset } = this.props;
+    return (
+      <div className={styles.search}>
+        <Input
+          onKeyDown={this.handleOnKey}
+          placeholder="请输入"
+          size="large"
+          {...reset}
+          value={this.state.value}
+          onChange={this.handleOnChange}
+          addonAfter={<Button onClick={this.handleOnSearch} type="primary">{text}</Button>}
+        />
+      </div>
+    );
+  }
+}
diff --git a/src/components/SearchInput/index.less b/src/components/SearchInput/index.less
index 7d00f448..2e8ab24b 100644
--- a/src/components/SearchInput/index.less
+++ b/src/components/SearchInput/index.less
@@ -1,5 +1,4 @@
 @import "~antd/lib/style/themes/default.less";
-@import "../../utils/utils.less";
 
 .search {
   display: inline-block;
@@ -23,23 +22,3 @@
     height: 40px;
   }
 }
-
-@media screen and (max-width: @screen-sm) {
-  .search {
-    :global {
-      .ant-input-group .ant-input {
-        width: 300px;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: @screen-xs) {
-  .search {
-    :global {
-      .ant-input-group .ant-input {
-        width: 200px;
-      }
-    }
-  }
-}

From 9fc16092931ca11ec8987992d29d21bb9b5ba688 Mon Sep 17 00:00:00 2001
From: nikogu <644506165@qq.com>
Date: Thu, 7 Sep 2017 10:49:01 +0800
Subject: [PATCH 05/14] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E5=9B=BE=E8=A1=A8?=
 =?UTF-8?q?=E6=B8=B2=E6=9F=93=E6=97=B6=E6=9C=BA=E7=9A=84=E6=AF=94=E5=AF=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                            |  1 +
 src/components/Charts/Bar/index.js      |  3 ++-
 src/components/Charts/Gauge/index.js    |  5 ++++-
 src/components/Charts/MiniArea/index.js |  3 ++-
 src/components/Charts/MiniBar/index.js  |  3 ++-
 src/components/Charts/Pie/index.js      |  3 ++-
 src/components/Charts/Radar/index.js    |  3 ++-
 src/components/Charts/equal.js          | 17 +++++++++++++++++
 src/routes/Dashboard/Analysis.js        | 14 ++++++--------
 9 files changed, 38 insertions(+), 14 deletions(-)
 create mode 100644 src/components/Charts/equal.js

diff --git a/package.json b/package.json
index 4b7f7f15..ceef972c 100755
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "eslint-plugin-babel": "^4.0.0",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^5.0.1",
+    "eslint-plugin-markdown": "^1.0.0-beta.6",
     "eslint-plugin-react": "^7.0.1",
     "gh-pages": "^1.0.0",
     "husky": "^0.13.4",
diff --git a/src/components/Charts/Bar/index.js b/src/components/Charts/Bar/index.js
index 537c4fc4..765f5eb4 100644
--- a/src/components/Charts/Bar/index.js
+++ b/src/components/Charts/Bar/index.js
@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import G2 from 'g2';
+import equal from '../equal';
 import styles from '../index.less';
 
 class Bar extends PureComponent {
@@ -8,7 +9,7 @@ class Bar extends PureComponent {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.data !== this.props.data) {
+    if (!equal(this.props, nextProps)) {
       this.renderChart(nextProps.data);
     }
   }
diff --git a/src/components/Charts/Gauge/index.js b/src/components/Charts/Gauge/index.js
index 0c53540e..dcd3779c 100644
--- a/src/components/Charts/Gauge/index.js
+++ b/src/components/Charts/Gauge/index.js
@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import G2 from 'g2';
+import equal from '../equal';
 
 const Shape = G2.Shape;
 
@@ -10,7 +11,9 @@ class Gauge extends PureComponent {
   }
 
   componentWillReceiveProps(nextProps) {
-    this.renderChart(nextProps);
+    if (!equal(this.props, nextProps)) {
+      this.renderChart(nextProps);
+    }
   }
 
   handleRef = (n) => {
diff --git a/src/components/Charts/MiniArea/index.js b/src/components/Charts/MiniArea/index.js
index d763649c..12fe4c45 100644
--- a/src/components/Charts/MiniArea/index.js
+++ b/src/components/Charts/MiniArea/index.js
@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import G2 from 'g2';
+import equal from '../equal';
 import styles from '../index.less';
 
 class MiniArea extends PureComponent {
@@ -8,7 +9,7 @@ class MiniArea extends PureComponent {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.data !== this.props.data) {
+    if (!equal(this.props, nextProps)) {
       this.renderChart(nextProps.data);
     }
   }
diff --git a/src/components/Charts/MiniBar/index.js b/src/components/Charts/MiniBar/index.js
index d0553a7f..d71517f8 100644
--- a/src/components/Charts/MiniBar/index.js
+++ b/src/components/Charts/MiniBar/index.js
@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import G2 from 'g2';
+import equal from '../equal';
 import styles from '../index.less';
 
 class MiniBar extends PureComponent {
@@ -8,7 +9,7 @@ class MiniBar extends PureComponent {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.data !== this.props.data) {
+    if (!equal(this.props, nextProps)) {
       this.renderChart(nextProps.data);
     }
   }
diff --git a/src/components/Charts/Pie/index.js b/src/components/Charts/Pie/index.js
index a06f06b4..af3f68a5 100644
--- a/src/components/Charts/Pie/index.js
+++ b/src/components/Charts/Pie/index.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import G2 from 'g2';
+import equal from '../equal';
 import styles from './index.less';
 
 /* eslint react/no-danger:0 */
@@ -14,7 +15,7 @@ class Pie extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (this.props.data !== nextProps.data) {
+    if (!equal(this.props, nextProps)) {
       this.renderChart(nextProps.data);
     }
   }
diff --git a/src/components/Charts/Radar/index.js b/src/components/Charts/Radar/index.js
index 1ac14375..12640774 100644
--- a/src/components/Charts/Radar/index.js
+++ b/src/components/Charts/Radar/index.js
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import G2 from 'g2';
 import { Row, Col } from 'antd';
+import equal from '../equal';
 import styles from './index.less';
 
 /* eslint react/no-danger:0 */
@@ -14,7 +15,7 @@ class Radar extends PureComponent {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.data !== this.props.data) {
+    if (!equal(this.props, nextProps)) {
       this.renderChart(nextProps.data);
     }
   }
diff --git a/src/components/Charts/equal.js b/src/components/Charts/equal.js
new file mode 100644
index 00000000..ff3a4c70
--- /dev/null
+++ b/src/components/Charts/equal.js
@@ -0,0 +1,17 @@
+/* eslint eqeqeq: 0 */
+
+function equal(old, target) {
+  let r = true;
+  for (const prop in old) {
+    if (typeof old[prop] === 'function' && typeof target[prop] === 'function') {
+      if (old[prop].toString() != target[prop].toString()) {
+        r = false;
+      }
+    } else if (old[prop] != target[prop]) {
+      r = false;
+    }
+  }
+  return r;
+}
+
+export default equal;
diff --git a/src/routes/Dashboard/Analysis.js b/src/routes/Dashboard/Analysis.js
index f716fead..b720f5aa 100644
--- a/src/routes/Dashboard/Analysis.js
+++ b/src/routes/Dashboard/Analysis.js
@@ -60,10 +60,6 @@ export default class Analysis extends Component {
     this.setState({
       rangePickerValue,
     });
-
-    this.props.dispatch({
-      type: 'chart/fetchSalesData',
-    });
   }
 
   selectDate = (type) => {
@@ -88,7 +84,7 @@ export default class Analysis extends Component {
       salesTypeData,
       salesTypeDataOnline,
       salesTypeDataOffline,
-    } = chart;
+      } = chart;
 
     const salesPieData = salesType === 'all' ?
       salesTypeData
@@ -144,6 +140,8 @@ export default class Analysis extends Component {
       },
     ];
 
+    const activeKey = currentTabKey || (offlineData[0] && offlineData[0].name);
+
     const CustomTab = ({ data, currentTabKey: currentKey }) => (
       <Row gutter={8} style={{ width: 138, margin: '8px 28px' }}>
         <Col span={12}>
@@ -156,7 +154,7 @@ export default class Analysis extends Component {
         </Col>
         <Col span={12} style={{ paddingTop: 36 }}>
           <Pie
-            animate={(currentKey === data.name)}
+            animate={false}
             color={(currentKey !== data.name) && '#99d5fd'}
             inner={0.55}
             tooltip={false}
@@ -366,13 +364,13 @@ export default class Analysis extends Component {
           style={{ marginTop: 24 }}
         >
           <Tabs
-            activeKey={currentTabKey || (offlineData[0] && offlineData[0].name)}
+            activeKey={activeKey}
             onChange={this.handleTabChange}
           >
             {
               offlineData.map(shop => (
                 <TabPane
-                  tab={<CustomTab data={shop} currentTabKey={currentTabKey} />}
+                  tab={<CustomTab data={shop} currentTabKey={activeKey} />}
                   key={shop.name}
                 >
                   <div style={{ padding: '0 24px' }}>

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 06/14] =?UTF-8?q?=E6=8A=BD=E7=A6=BB=E5=AE=9A=E6=97=B6?=
 =?UTF-8?q?=E5=99=A8=E5=9B=BE=E8=A1=A8=E4=B8=BA=E4=B8=8A=E5=B1=82=E7=BB=84?=
 =?UTF-8?q?=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;

From 0de558839f0bdeba0236623e57c88fa1e89c3eeb Mon Sep 17 00:00:00 2001
From: nikogu <644506165@qq.com>
Date: Thu, 7 Sep 2017 15:09:33 +0800
Subject: [PATCH 07/14] =?UTF-8?q?=E5=8E=BB=E6=8E=89=E5=86=97=E4=BD=99?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/Dashboard/Monitor.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/routes/Dashboard/Monitor.js b/src/routes/Dashboard/Monitor.js
index 741a1922..9fd1b2d5 100644
--- a/src/routes/Dashboard/Monitor.js
+++ b/src/routes/Dashboard/Monitor.js
@@ -3,12 +3,11 @@ import { connect } from 'dva';
 import { Row, Col, Card } from 'antd';
 import numeral from 'numeral';
 
-import { NumberInfo, MiniArea, Pie, WaterWave, Gauge } from '../../components/Charts';
+import { NumberInfo, Pie, WaterWave, Gauge } from '../../components/Charts';
 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';
 

From 69674c852fff9906cb22fb230270d3f6c3be51d9 Mon Sep 17 00:00:00 2001
From: nikogu <644506165@qq.com>
Date: Thu, 7 Sep 2017 16:57:24 +0800
Subject: [PATCH 08/14] =?UTF-8?q?=E5=88=97=E8=A1=A8=E9=A1=B5=E8=A7=86?=
 =?UTF-8?q?=E8=A7=89=20review=20=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/List/CardList.js       | 30 +++++++++++++++++-------------
 src/routes/List/CardList.less     |  1 +
 src/routes/List/CoverCardList.js  | 10 ++++++++--
 src/routes/List/FilterCardList.js | 26 ++++++++++++++++----------
 4 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/src/routes/List/CardList.js b/src/routes/List/CardList.js
index 36c15e7b..97c6f98c 100644
--- a/src/routes/List/CardList.js
+++ b/src/routes/List/CardList.js
@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'dva';
+import { Link } from 'dva/router';
 import { Card, Avatar, Button, Icon, List } from 'antd';
 
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
@@ -65,19 +66,22 @@ export default class CardList extends PureComponent {
             {
               list && list.map(item => (
                 <List.Item key={item.id}>
-                  <Card
-                    actions={[<a>操作一</a>, <a>操作二</a>]}
-                  >
-                    <Card.Meta
-                      avatar={<Avatar size="large" src={item.avatar} />}
-                      title={item.title}
-                      description={(
-                        <p className={styles.cardDescription}>
-                          <span>{item.description}</span>
-                        </p>
-                      )}
-                    />
-                  </Card>
+                  <Link to="/list/card-list">
+                    <Card
+                      noHovering={false}
+                      actions={[<a>操作一</a>, <a>操作二</a>]}
+                    >
+                      <Card.Meta
+                        avatar={<Avatar size="large" src={item.avatar} />}
+                        title={item.title}
+                        description={(
+                          <p className={styles.cardDescription}>
+                            <span>{item.description}</span>
+                          </p>
+                        )}
+                      />
+                    </Card>
+                  </Link>
                 </List.Item>
               ))
             }
diff --git a/src/routes/List/CardList.less b/src/routes/List/CardList.less
index e8b4c44a..b6780136 100644
--- a/src/routes/List/CardList.less
+++ b/src/routes/List/CardList.less
@@ -31,6 +31,7 @@
 
 .cardDescription {
   .textOverflowMulti();
+  color: @text-color;
 }
 
 .pageHeaderContent {
diff --git a/src/routes/List/CoverCardList.js b/src/routes/List/CoverCardList.js
index e0869866..1f2aaff2 100644
--- a/src/routes/List/CoverCardList.js
+++ b/src/routes/List/CoverCardList.js
@@ -161,9 +161,15 @@ export default class CoverCardList extends PureComponent {
                       <TagOption value="cat2">类目二</TagOption>
                       <TagOption value="cat3">类目三</TagOption>
                       <TagOption value="cat4">类目四</TagOption>
+                      <TagOption value="cat5">类目五</TagOption>
+                      <TagOption value="cat6">类目六</TagOption>
+                      <TagOption value="cat7">类目七</TagOption>
+                      <TagOption value="cat8">类目八</TagOption>
+                      <TagOption value="cat9">类目九</TagOption>
+                      <TagOption value="cat10">类目十</TagOption>
                       <TagExpand>
-                        <TagOption value="cat5">类目五</TagOption>
-                        <TagOption value="cat6">类目六</TagOption>
+                        <TagOption value="cat11">类目十一</TagOption>
+                        <TagOption value="cat12">类目十二</TagOption>
                       </TagExpand>
                     </TagSelect>
                   )}
diff --git a/src/routes/List/FilterCardList.js b/src/routes/List/FilterCardList.js
index 81710b99..9b1ee007 100644
--- a/src/routes/List/FilterCardList.js
+++ b/src/routes/List/FilterCardList.js
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import numeral from 'numeral';
 import { connect } from 'dva';
 import { routerRedux } from 'dva/router';
-import { Row, Col, Form, Card, Select, Spin, Icon, Avatar } from 'antd';
+import { Row, Col, Form, Card, Select, Icon, Avatar, List, Tooltip } from 'antd';
 
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 import StandardFormRow from '../../components/StandardFormRow';
@@ -199,15 +199,21 @@ export default class FilterCardList extends PureComponent {
               </StandardFormRow>
             </Form>
           </Card>
-          <Row gutter={16} style={{ marginTop: 16 }}>
-            {
-              loading && <Spin />
-            }
+          <List
+            style={{ marginTop: 16 }}
+            grid={{ gutter: 16, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
+            loading={loading}
+          >
             {
-              !loading && list && list.map(item => (
-                <Col lg={6} md={8} sm={12} xs={24} style={{ marginBottom: 16 }} key={item.id}>
+              list && list.map(item => (
+                <List.Item key={item.id}>
                   <Card
-                    actions={[<Icon type="copy" />, <Icon type="solution" />, <Icon type="setting" />, <Icon type="delete" />]}
+                    actions={[
+                      <Tooltip title="复制"><Icon type="copy" /></Tooltip>,
+                      <Tooltip title="用户"><Icon type="solution" /></Tooltip>,
+                      <Tooltip title="设置"><Icon type="setting" /></Tooltip>,
+                      <Tooltip title="删除"><Icon type="delete" /></Tooltip>,
+                    ]}
                   >
                     <Card.Meta
                       avatar={<Avatar size="large" src={item.avatar} />}
@@ -220,10 +226,10 @@ export default class FilterCardList extends PureComponent {
                       />
                     </div>
                   </Card>
-                </Col>
+                </List.Item>
               ))
             }
-          </Row>
+          </List>
         </div>
       </PageHeaderLayout>
     );

From b9382623babb1eef8c457501b6a183f0b9eb878a Mon Sep 17 00:00:00 2001
From: nikogu <644506165@qq.com>
Date: Wed, 6 Sep 2017 16:30:29 +0800
Subject: [PATCH 09/14] List & Dashboard Design Review

---
 src/components/Charts/MiniArea/index.js       |  3 +-
 src/components/Charts/MiniProgress/index.js   | 17 ++++++----
 src/components/Charts/MiniProgress/index.less |  1 +
 src/components/Charts/Pie/index.js            |  4 ++-
 src/components/TagCloud/index.js              |  2 +-
 src/layouts/PageHeaderLayout.js               |  3 +-
 src/routes/Dashboard/Analysis.js              |  6 +++-
 src/routes/Dashboard/Analysis.less            |  5 +++
 src/routes/Dashboard/Monitor.js               | 34 +++++++++++++------
 src/routes/Dashboard/Workplace.js             |  2 +-
 10 files changed, 54 insertions(+), 23 deletions(-)

diff --git a/src/components/Charts/MiniArea/index.js b/src/components/Charts/MiniArea/index.js
index 5807c352..d763649c 100644
--- a/src/components/Charts/MiniArea/index.js
+++ b/src/components/Charts/MiniArea/index.js
@@ -18,7 +18,7 @@ class MiniArea extends PureComponent {
   }
 
   renderChart(data) {
-    const { height = 0, fit = true, color = '#33abfb', line, xAxis, yAxis } = this.props;
+    const { height = 0, fit = true, color = '#33abfb', line, xAxis, yAxis, animate = true } = this.props;
 
     if (!data || (data && data.length < 1)) {
       return;
@@ -31,6 +31,7 @@ class MiniArea extends PureComponent {
       container: this.node,
       forceFit: fit,
       height: height + 54,
+      animate,
       plotCfg: {
         margin: [36, 0, 30, 0],
       },
diff --git a/src/components/Charts/MiniProgress/index.js b/src/components/Charts/MiniProgress/index.js
index 63037a1c..8d1d82a2 100644
--- a/src/components/Charts/MiniProgress/index.js
+++ b/src/components/Charts/MiniProgress/index.js
@@ -1,16 +1,19 @@
 import React from 'react';
+import { Popover } from 'antd';
 
 import styles from './index.less';
 
 const MiniProgress = ({ target, color, strokeWidth, percent }) => (
   <div className={styles.miniProgress}>
-    <div
-      className={styles.target}
-      style={{ left: (target ? `${target}%` : null) }}
-    >
-      <span style={{ backgroundColor: (color || null) }} />
-      <span style={{ backgroundColor: (color || null) }} />
-    </div>
+    <Popover title={null} content={`目标值: ${target}%`}>
+      <div
+        className={styles.target}
+        style={{ left: (target ? `${target}%` : null) }}
+      >
+        <span style={{ backgroundColor: (color || null) }} />
+        <span style={{ backgroundColor: (color || null) }} />
+      </div>
+    </Popover>
     <div className={styles.progressWrap}>
       <div
         className={styles.progress}
diff --git a/src/components/Charts/MiniProgress/index.less b/src/components/Charts/MiniProgress/index.less
index 94ed47a0..4ef52607 100644
--- a/src/components/Charts/MiniProgress/index.less
+++ b/src/components/Charts/MiniProgress/index.less
@@ -17,6 +17,7 @@
     height: 100%;
   }
   .target {
+    cursor: pointer;
     position: absolute;
     top: 0;
     bottom: 0;
diff --git a/src/components/Charts/Pie/index.js b/src/components/Charts/Pie/index.js
index 7228268a..a06f06b4 100644
--- a/src/components/Charts/Pie/index.js
+++ b/src/components/Charts/Pie/index.js
@@ -14,7 +14,9 @@ class Pie extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    this.renderChart(nextProps.data);
+    if (this.props.data !== nextProps.data) {
+      this.renderChart(nextProps.data);
+    }
   }
 
   handleRef = (n) => {
diff --git a/src/components/TagCloud/index.js b/src/components/TagCloud/index.js
index 0ade0e71..72693b95 100644
--- a/src/components/TagCloud/index.js
+++ b/src/components/TagCloud/index.js
@@ -79,7 +79,7 @@ class TagCloud extends PureComponent {
       height,
 
       // 设定文字大小配置函数(默认为12-40px的随机大小)
-      size: words => (((words.value - min) / (max - min)) * 10) + 12,
+      size: words => (((words.value - min) / (max - min)) * 12) + 6,
 
       // 设定文字内容
       text: words => words.name,
diff --git a/src/layouts/PageHeaderLayout.js b/src/layouts/PageHeaderLayout.js
index 1573b8a9..0b04067a 100644
--- a/src/layouts/PageHeaderLayout.js
+++ b/src/layouts/PageHeaderLayout.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PageHeader from '../components/PageHeader';
 
-export default ({ children, wrapperClassName, ...restProps }) => (
+export default ({ children, wrapperClassName, top, ...restProps }) => (
   <div style={{ margin: '-24px -24px 0' }} className={wrapperClassName}>
+    {top}
     <PageHeader {...restProps} />
     {children ? <div style={{ margin: '24px 24px 0' }}>{children}</div> : null}
   </div>
diff --git a/src/routes/Dashboard/Analysis.js b/src/routes/Dashboard/Analysis.js
index 33f88963..b8770b3d 100644
--- a/src/routes/Dashboard/Analysis.js
+++ b/src/routes/Dashboard/Analysis.js
@@ -60,6 +60,10 @@ export default class Analysis extends Component {
     this.setState({
       rangePickerValue,
     });
+
+    this.props.dispatch({
+      type: 'chart/fetchSalesData',
+    });
   }
 
   selectDate = (type) => {
@@ -84,7 +88,7 @@ export default class Analysis extends Component {
       salesTypeData,
       salesTypeDataOnline,
       salesTypeDataOffline,
-      } = chart;
+    } = chart;
 
     const salesPieData = salesType === 'all' ?
       salesTypeData
diff --git a/src/routes/Dashboard/Analysis.less b/src/routes/Dashboard/Analysis.less
index e00a01ee..69eb7a1d 100644
--- a/src/routes/Dashboard/Analysis.less
+++ b/src/routes/Dashboard/Analysis.less
@@ -3,8 +3,13 @@
 
 .iconGroup {
   i {
+    transition: color 0.32s;
+    color: @text-color-secondary;
     cursor: pointer;
     margin-left: 16px;
+    &:hover {
+      color: @text-color;
+    }
   }
 }
 .rankingList {
diff --git a/src/routes/Dashboard/Monitor.js b/src/routes/Dashboard/Monitor.js
index b7977e73..44764b28 100644
--- a/src/routes/Dashboard/Monitor.js
+++ b/src/routes/Dashboard/Monitor.js
@@ -11,12 +11,15 @@ import { fixedZero } from '../../utils/utils';
 
 import styles from './Monitor.less';
 
-const activeData = [];
-for (let i = 0; i < 24; i += 1) {
-  activeData.push({
-    x: `${fixedZero(i)}:00`,
-    y: (i * 50) + (Math.floor(Math.random() * 200)),
-  });
+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 = [];
@@ -33,13 +36,23 @@ 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;
 
@@ -90,6 +103,7 @@ export default class Monitor extends PureComponent {
                 />
                 <div style={{ marginTop: 32 }}>
                   <MiniArea
+                    animate={false}
                     line
                     color="#5DD1DD"
                     height={84}
@@ -129,7 +143,7 @@ export default class Monitor extends PureComponent {
               bordered={false}
             >
               <Gauge
-                title="跳出率"
+                title="核销率"
                 height={164}
                 percent={87}
               />
@@ -143,7 +157,7 @@ export default class Monitor extends PureComponent {
               style={{ marginBottom: 24 }}
               bordered={false}
             >
-              <Row style={{ padding: '18px 0 19px 0' }}>
+              <Row gutter={4} style={{ padding: '18px 0 19px 0' }}>
                 <Col span={8}>
                   <Pie
                     percent={28}
@@ -174,7 +188,7 @@ export default class Monitor extends PureComponent {
             </Card>
           </Col>
           <Col sm={8} xs={24} style={{ marginBottom: 24 }}>
-            <Card title="热门搜索" bordered={false}>
+            <Card title="热门搜索" bordered={false} bodyStyle={{ height: 214 }}>
               <TagCloud
                 data={tags}
                 height={161}
diff --git a/src/routes/Dashboard/Workplace.js b/src/routes/Dashboard/Workplace.js
index c1928a48..ca345d9c 100644
--- a/src/routes/Dashboard/Workplace.js
+++ b/src/routes/Dashboard/Workplace.js
@@ -144,9 +144,9 @@ export default class Workplace extends PureComponent {
 
     return (
       <PageHeaderLayout
+        top={pageHeaderContent}
         action={pageHeaderAction}
         title={pageHeaderTitle}
-        content={pageHeaderContent}
       >
         <Row gutter={24}>
           <Col lg={16} md={24} sm={24} xs={24}>

From f8332f2d3eea6e9fd99af8d5d56f12cb09b1dcbe Mon Sep 17 00:00:00 2001
From: nikogu <644506165@qq.com>
Date: Wed, 6 Sep 2017 16:34:37 +0800
Subject: [PATCH 10/14] update searchinput

---
 src/components/SearchInput/index.js   | 50 +++++++++++++++++++++------
 src/components/SearchInput/index.less | 21 -----------
 2 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/src/components/SearchInput/index.js b/src/components/SearchInput/index.js
index e5e4403c..36bb90ff 100644
--- a/src/components/SearchInput/index.js
+++ b/src/components/SearchInput/index.js
@@ -3,13 +3,43 @@ import { Button, Input } from 'antd';
 
 import styles from './index.less';
 
-export default ({ onSearch = () => ({}), text = '搜索', ...reset }) => (
-  <div className={styles.search}>
-    <Input
-      placeholder="请输入"
-      size="large"
-      {...reset}
-      addonAfter={<Button onClick={onSearch} type="primary">{text}</Button>}
-    />
-  </div>
-);
+export default class SearchInput extends React.Component {
+  state = {
+    value: this.props.defaultValue,
+  }
+
+  handleOnChange = (e) => {
+    this.setState({
+      value: e.target.value,
+    });
+  }
+
+  handleOnSearch = () => {
+    if (this.props.onSearch) {
+      this.props.onSearch(this.state.value);
+    }
+  }
+
+  handleOnKey = (e) => {
+    if (e.keyCode === 13) {
+      this.handleOnSearch();
+    }
+  }
+
+  render() {
+    const { text = '搜索', reset } = this.props;
+    return (
+      <div className={styles.search}>
+        <Input
+          onKeyDown={this.handleOnKey}
+          placeholder="请输入"
+          size="large"
+          {...reset}
+          value={this.state.value}
+          onChange={this.handleOnChange}
+          addonAfter={<Button onClick={this.handleOnSearch} type="primary">{text}</Button>}
+        />
+      </div>
+    );
+  }
+}
diff --git a/src/components/SearchInput/index.less b/src/components/SearchInput/index.less
index 7d00f448..2e8ab24b 100644
--- a/src/components/SearchInput/index.less
+++ b/src/components/SearchInput/index.less
@@ -1,5 +1,4 @@
 @import "~antd/lib/style/themes/default.less";
-@import "../../utils/utils.less";
 
 .search {
   display: inline-block;
@@ -23,23 +22,3 @@
     height: 40px;
   }
 }
-
-@media screen and (max-width: @screen-sm) {
-  .search {
-    :global {
-      .ant-input-group .ant-input {
-        width: 300px;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: @screen-xs) {
-  .search {
-    :global {
-      .ant-input-group .ant-input {
-        width: 200px;
-      }
-    }
-  }
-}

From 148a9b2f22dedd78a0d3d547b4f74bb5cea17109 Mon Sep 17 00:00:00 2001
From: nikogu <644506165@qq.com>
Date: Thu, 7 Sep 2017 10:49:01 +0800
Subject: [PATCH 11/14] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E5=9B=BE=E8=A1=A8?=
 =?UTF-8?q?=E6=B8=B2=E6=9F=93=E6=97=B6=E6=9C=BA=E7=9A=84=E6=AF=94=E5=AF=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                            |  1 +
 src/components/Charts/Bar/index.js      |  3 ++-
 src/components/Charts/Gauge/index.js    |  5 ++++-
 src/components/Charts/MiniArea/index.js |  3 ++-
 src/components/Charts/MiniBar/index.js  |  3 ++-
 src/components/Charts/Pie/index.js      |  3 ++-
 src/components/Charts/Radar/index.js    |  3 ++-
 src/components/Charts/equal.js          | 17 +++++++++++++++++
 src/routes/Dashboard/Analysis.js        | 14 ++++++--------
 9 files changed, 38 insertions(+), 14 deletions(-)
 create mode 100644 src/components/Charts/equal.js

diff --git a/package.json b/package.json
index 4b7f7f15..ceef972c 100755
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "eslint-plugin-babel": "^4.0.0",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^5.0.1",
+    "eslint-plugin-markdown": "^1.0.0-beta.6",
     "eslint-plugin-react": "^7.0.1",
     "gh-pages": "^1.0.0",
     "husky": "^0.13.4",
diff --git a/src/components/Charts/Bar/index.js b/src/components/Charts/Bar/index.js
index 537c4fc4..765f5eb4 100644
--- a/src/components/Charts/Bar/index.js
+++ b/src/components/Charts/Bar/index.js
@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import G2 from 'g2';
+import equal from '../equal';
 import styles from '../index.less';
 
 class Bar extends PureComponent {
@@ -8,7 +9,7 @@ class Bar extends PureComponent {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.data !== this.props.data) {
+    if (!equal(this.props, nextProps)) {
       this.renderChart(nextProps.data);
     }
   }
diff --git a/src/components/Charts/Gauge/index.js b/src/components/Charts/Gauge/index.js
index 0c53540e..dcd3779c 100644
--- a/src/components/Charts/Gauge/index.js
+++ b/src/components/Charts/Gauge/index.js
@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import G2 from 'g2';
+import equal from '../equal';
 
 const Shape = G2.Shape;
 
@@ -10,7 +11,9 @@ class Gauge extends PureComponent {
   }
 
   componentWillReceiveProps(nextProps) {
-    this.renderChart(nextProps);
+    if (!equal(this.props, nextProps)) {
+      this.renderChart(nextProps);
+    }
   }
 
   handleRef = (n) => {
diff --git a/src/components/Charts/MiniArea/index.js b/src/components/Charts/MiniArea/index.js
index d763649c..12fe4c45 100644
--- a/src/components/Charts/MiniArea/index.js
+++ b/src/components/Charts/MiniArea/index.js
@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import G2 from 'g2';
+import equal from '../equal';
 import styles from '../index.less';
 
 class MiniArea extends PureComponent {
@@ -8,7 +9,7 @@ class MiniArea extends PureComponent {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.data !== this.props.data) {
+    if (!equal(this.props, nextProps)) {
       this.renderChart(nextProps.data);
     }
   }
diff --git a/src/components/Charts/MiniBar/index.js b/src/components/Charts/MiniBar/index.js
index d0553a7f..d71517f8 100644
--- a/src/components/Charts/MiniBar/index.js
+++ b/src/components/Charts/MiniBar/index.js
@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import G2 from 'g2';
+import equal from '../equal';
 import styles from '../index.less';
 
 class MiniBar extends PureComponent {
@@ -8,7 +9,7 @@ class MiniBar extends PureComponent {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.data !== this.props.data) {
+    if (!equal(this.props, nextProps)) {
       this.renderChart(nextProps.data);
     }
   }
diff --git a/src/components/Charts/Pie/index.js b/src/components/Charts/Pie/index.js
index a06f06b4..af3f68a5 100644
--- a/src/components/Charts/Pie/index.js
+++ b/src/components/Charts/Pie/index.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import G2 from 'g2';
+import equal from '../equal';
 import styles from './index.less';
 
 /* eslint react/no-danger:0 */
@@ -14,7 +15,7 @@ class Pie extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (this.props.data !== nextProps.data) {
+    if (!equal(this.props, nextProps)) {
       this.renderChart(nextProps.data);
     }
   }
diff --git a/src/components/Charts/Radar/index.js b/src/components/Charts/Radar/index.js
index 1ac14375..12640774 100644
--- a/src/components/Charts/Radar/index.js
+++ b/src/components/Charts/Radar/index.js
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import G2 from 'g2';
 import { Row, Col } from 'antd';
+import equal from '../equal';
 import styles from './index.less';
 
 /* eslint react/no-danger:0 */
@@ -14,7 +15,7 @@ class Radar extends PureComponent {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.data !== this.props.data) {
+    if (!equal(this.props, nextProps)) {
       this.renderChart(nextProps.data);
     }
   }
diff --git a/src/components/Charts/equal.js b/src/components/Charts/equal.js
new file mode 100644
index 00000000..ff3a4c70
--- /dev/null
+++ b/src/components/Charts/equal.js
@@ -0,0 +1,17 @@
+/* eslint eqeqeq: 0 */
+
+function equal(old, target) {
+  let r = true;
+  for (const prop in old) {
+    if (typeof old[prop] === 'function' && typeof target[prop] === 'function') {
+      if (old[prop].toString() != target[prop].toString()) {
+        r = false;
+      }
+    } else if (old[prop] != target[prop]) {
+      r = false;
+    }
+  }
+  return r;
+}
+
+export default equal;
diff --git a/src/routes/Dashboard/Analysis.js b/src/routes/Dashboard/Analysis.js
index b8770b3d..c794d995 100644
--- a/src/routes/Dashboard/Analysis.js
+++ b/src/routes/Dashboard/Analysis.js
@@ -60,10 +60,6 @@ export default class Analysis extends Component {
     this.setState({
       rangePickerValue,
     });
-
-    this.props.dispatch({
-      type: 'chart/fetchSalesData',
-    });
   }
 
   selectDate = (type) => {
@@ -88,7 +84,7 @@ export default class Analysis extends Component {
       salesTypeData,
       salesTypeDataOnline,
       salesTypeDataOffline,
-    } = chart;
+      } = chart;
 
     const salesPieData = salesType === 'all' ?
       salesTypeData
@@ -144,6 +140,8 @@ export default class Analysis extends Component {
       },
     ];
 
+    const activeKey = currentTabKey || (offlineData[0] && offlineData[0].name);
+
     const CustomTab = ({ data, currentTabKey: currentKey }) => (
       <Row gutter={8} style={{ width: 138, margin: '8px 28px' }}>
         <Col span={12}>
@@ -156,7 +154,7 @@ export default class Analysis extends Component {
         </Col>
         <Col span={12} style={{ paddingTop: 36 }}>
           <Pie
-            animate={(currentKey === data.name)}
+            animate={false}
             color={(currentKey !== data.name) && '#99d5fd'}
             inner={0.55}
             tooltip={false}
@@ -365,13 +363,13 @@ export default class Analysis extends Component {
           style={{ marginTop: 24 }}
         >
           <Tabs
-            activeKey={currentTabKey || (offlineData[0] && offlineData[0].name)}
+            activeKey={activeKey}
             onChange={this.handleTabChange}
           >
             {
               offlineData.map(shop => (
                 <TabPane
-                  tab={<CustomTab data={shop} currentTabKey={currentTabKey} />}
+                  tab={<CustomTab data={shop} currentTabKey={activeKey} />}
                   key={shop.name}
                 >
                   <div style={{ padding: '0 24px' }}>

From 8f9b0049af22d0136c088f345af3f4d876377424 Mon Sep 17 00:00:00 2001
From: nikogu <644506165@qq.com>
Date: Thu, 7 Sep 2017 11:32:26 +0800
Subject: [PATCH 12/14] =?UTF-8?q?=E6=8A=BD=E7=A6=BB=E5=AE=9A=E6=97=B6?=
 =?UTF-8?q?=E5=99=A8=E5=9B=BE=E8=A1=A8=E4=B8=BA=E4=B8=8A=E5=B1=82=E7=BB=84?=
 =?UTF-8?q?=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;

From 2b521cb195567a526f30f2fd3de95d9ae667162a Mon Sep 17 00:00:00 2001
From: nikogu <644506165@qq.com>
Date: Thu, 7 Sep 2017 15:09:33 +0800
Subject: [PATCH 13/14] =?UTF-8?q?=E5=8E=BB=E6=8E=89=E5=86=97=E4=BD=99?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/Dashboard/Monitor.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/routes/Dashboard/Monitor.js b/src/routes/Dashboard/Monitor.js
index 741a1922..9fd1b2d5 100644
--- a/src/routes/Dashboard/Monitor.js
+++ b/src/routes/Dashboard/Monitor.js
@@ -3,12 +3,11 @@ import { connect } from 'dva';
 import { Row, Col, Card } from 'antd';
 import numeral from 'numeral';
 
-import { NumberInfo, MiniArea, Pie, WaterWave, Gauge } from '../../components/Charts';
+import { NumberInfo, Pie, WaterWave, Gauge } from '../../components/Charts';
 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';
 

From 15a59ad2a0c1ed038dcec6962085e9bd51958b31 Mon Sep 17 00:00:00 2001
From: nikogu <644506165@qq.com>
Date: Thu, 7 Sep 2017 16:57:24 +0800
Subject: [PATCH 14/14] =?UTF-8?q?=E5=88=97=E8=A1=A8=E9=A1=B5=E8=A7=86?=
 =?UTF-8?q?=E8=A7=89=20review=20=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/List/CardList.js       | 30 +++++++++++++++++-------------
 src/routes/List/CardList.less     |  1 +
 src/routes/List/CoverCardList.js  | 10 ++++++++--
 src/routes/List/FilterCardList.js | 26 ++++++++++++++++----------
 4 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/src/routes/List/CardList.js b/src/routes/List/CardList.js
index 36c15e7b..97c6f98c 100644
--- a/src/routes/List/CardList.js
+++ b/src/routes/List/CardList.js
@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'dva';
+import { Link } from 'dva/router';
 import { Card, Avatar, Button, Icon, List } from 'antd';
 
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
@@ -65,19 +66,22 @@ export default class CardList extends PureComponent {
             {
               list && list.map(item => (
                 <List.Item key={item.id}>
-                  <Card
-                    actions={[<a>操作一</a>, <a>操作二</a>]}
-                  >
-                    <Card.Meta
-                      avatar={<Avatar size="large" src={item.avatar} />}
-                      title={item.title}
-                      description={(
-                        <p className={styles.cardDescription}>
-                          <span>{item.description}</span>
-                        </p>
-                      )}
-                    />
-                  </Card>
+                  <Link to="/list/card-list">
+                    <Card
+                      noHovering={false}
+                      actions={[<a>操作一</a>, <a>操作二</a>]}
+                    >
+                      <Card.Meta
+                        avatar={<Avatar size="large" src={item.avatar} />}
+                        title={item.title}
+                        description={(
+                          <p className={styles.cardDescription}>
+                            <span>{item.description}</span>
+                          </p>
+                        )}
+                      />
+                    </Card>
+                  </Link>
                 </List.Item>
               ))
             }
diff --git a/src/routes/List/CardList.less b/src/routes/List/CardList.less
index e8b4c44a..b6780136 100644
--- a/src/routes/List/CardList.less
+++ b/src/routes/List/CardList.less
@@ -31,6 +31,7 @@
 
 .cardDescription {
   .textOverflowMulti();
+  color: @text-color;
 }
 
 .pageHeaderContent {
diff --git a/src/routes/List/CoverCardList.js b/src/routes/List/CoverCardList.js
index e0869866..1f2aaff2 100644
--- a/src/routes/List/CoverCardList.js
+++ b/src/routes/List/CoverCardList.js
@@ -161,9 +161,15 @@ export default class CoverCardList extends PureComponent {
                       <TagOption value="cat2">类目二</TagOption>
                       <TagOption value="cat3">类目三</TagOption>
                       <TagOption value="cat4">类目四</TagOption>
+                      <TagOption value="cat5">类目五</TagOption>
+                      <TagOption value="cat6">类目六</TagOption>
+                      <TagOption value="cat7">类目七</TagOption>
+                      <TagOption value="cat8">类目八</TagOption>
+                      <TagOption value="cat9">类目九</TagOption>
+                      <TagOption value="cat10">类目十</TagOption>
                       <TagExpand>
-                        <TagOption value="cat5">类目五</TagOption>
-                        <TagOption value="cat6">类目六</TagOption>
+                        <TagOption value="cat11">类目十一</TagOption>
+                        <TagOption value="cat12">类目十二</TagOption>
                       </TagExpand>
                     </TagSelect>
                   )}
diff --git a/src/routes/List/FilterCardList.js b/src/routes/List/FilterCardList.js
index 81710b99..9b1ee007 100644
--- a/src/routes/List/FilterCardList.js
+++ b/src/routes/List/FilterCardList.js
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import numeral from 'numeral';
 import { connect } from 'dva';
 import { routerRedux } from 'dva/router';
-import { Row, Col, Form, Card, Select, Spin, Icon, Avatar } from 'antd';
+import { Row, Col, Form, Card, Select, Icon, Avatar, List, Tooltip } from 'antd';
 
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 import StandardFormRow from '../../components/StandardFormRow';
@@ -199,15 +199,21 @@ export default class FilterCardList extends PureComponent {
               </StandardFormRow>
             </Form>
           </Card>
-          <Row gutter={16} style={{ marginTop: 16 }}>
-            {
-              loading && <Spin />
-            }
+          <List
+            style={{ marginTop: 16 }}
+            grid={{ gutter: 16, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
+            loading={loading}
+          >
             {
-              !loading && list && list.map(item => (
-                <Col lg={6} md={8} sm={12} xs={24} style={{ marginBottom: 16 }} key={item.id}>
+              list && list.map(item => (
+                <List.Item key={item.id}>
                   <Card
-                    actions={[<Icon type="copy" />, <Icon type="solution" />, <Icon type="setting" />, <Icon type="delete" />]}
+                    actions={[
+                      <Tooltip title="复制"><Icon type="copy" /></Tooltip>,
+                      <Tooltip title="用户"><Icon type="solution" /></Tooltip>,
+                      <Tooltip title="设置"><Icon type="setting" /></Tooltip>,
+                      <Tooltip title="删除"><Icon type="delete" /></Tooltip>,
+                    ]}
                   >
                     <Card.Meta
                       avatar={<Avatar size="large" src={item.avatar} />}
@@ -220,10 +226,10 @@ export default class FilterCardList extends PureComponent {
                       />
                     </div>
                   </Card>
-                </Col>
+                </List.Item>
               ))
             }
-          </Row>
+          </List>
         </div>
       </PageHeaderLayout>
     );