From 8ce7a5d48b850d52b2d9e8e7958496457fb3ef66 Mon Sep 17 00:00:00 2001
From: zuiidea <zuiiidea@gmail.com>
Date: Wed, 21 Dec 2016 21:19:33 +0800
Subject: [PATCH] comments

---
 mock/dashboard.js                       | 20 ++++++++++
 src/components/dashboard/comments.js    | 51 +++++++++++++++++++++++++
 src/components/dashboard/comments.less  | 36 +++++++++++++++++
 src/components/dashboard/completed.js   | 38 ++++++++++++++++++
 src/components/dashboard/completed.less | 42 ++++++++++++++++++++
 src/components/dashboard/recentSales.js |  4 +-
 src/models/dashboard.js                 |  4 +-
 src/routes/dashboard.js                 | 17 +++++----
 8 files changed, 202 insertions(+), 10 deletions(-)
 create mode 100644 src/components/dashboard/comments.js
 create mode 100644 src/components/dashboard/comments.less
 create mode 100644 src/components/dashboard/completed.js
 create mode 100644 src/components/dashboard/completed.less

diff --git a/mock/dashboard.js b/mock/dashboard.js
index 5f16526..956a701 100644
--- a/mock/dashboard.js
+++ b/mock/dashboard.js
@@ -13,6 +13,26 @@ let dataKey = mockStorge('Dashboard', Mock.mock({
       'Electronics|300-850': 1
     }
   ],
+  'completed|12': [
+    {
+      'name|+1': 2008,
+      'Task complete|200-1000': 1,
+      'Cards Complete|200-1000': 1
+    }
+  ],
+  'comments|5': [
+    {
+      name: '@last',
+      'status|1-3': 1,
+      content:'@sentence',
+      avatar: function(){
+        return Mock.Random.image('100x100', Mock.Random.color(),"#757575",'png',this.name.substr(0,1))
+      },
+      date:function(){
+        return '2016-'+Mock.Random.date('MM-dd')+' '+Mock.Random.time('HH:mm:ss')
+      },
+    }
+  ],
   'recentSales|36':[
     {
       'id|+1': 1,
diff --git a/src/components/dashboard/comments.js b/src/components/dashboard/comments.js
new file mode 100644
index 0000000..b9bf50e
--- /dev/null
+++ b/src/components/dashboard/comments.js
@@ -0,0 +1,51 @@
+import React, {PropTypes} from 'react'
+import {Icon,Table,Tag} from 'antd'
+import styles from './comments.less'
+import {classnames,color} from '../../utils'
+
+
+const status = {
+  1:{
+    color:color.green,
+    text:'APPROVED'
+  },
+  2:{
+    color:color.yellow,
+    text:'PENDING'
+  },
+  3:{
+    color:color.red,
+    text:'REJECTED'
+  },
+}
+
+function Comments(props) {
+  const columns = [
+    {
+      title: 'avatar',
+      dataIndex: 'avatar',
+      width:48,
+      className:'avatarcolumn',
+      render: text => <span style={{backgroundImage:`url(${text})`}} className={styles.avatar} ></span>,
+    }, {
+      title: 'content',
+      dataIndex: 'content',
+      render:(text,it) => <div>
+        <h5 className={styles.name}>{it.name}</h5>
+        <p className={styles.content}>{it.content}</p>
+        <p className={styles.daterow}>
+          <Tag color={status[it.status].color}>{status[it.status].text}</Tag>
+          <span className={styles.date}>{it.date}</span>
+        </p>
+      </div>,
+    },
+  ]
+  console.log(props);
+  return (
+    <div className={styles.comments}>
+      <Table pagination={false} showHeader={false} columns={columns} key={(record,key)=>key} dataSource={props.data.filter((item,key) => key<3)}/>
+    </div>
+  )
+}
+
+export default Comments
diff --git a/src/components/dashboard/comments.less b/src/components/dashboard/comments.less
new file mode 100644
index 0000000..d3abdc8
--- /dev/null
+++ b/src/components/dashboard/comments.less
@@ -0,0 +1,36 @@
+@import "../vars.less";
+.comments{
+  :global .ant-table-thead > tr > th{
+    background: #fff;
+    border-bottom: solid 1px @border-color-base;
+  }
+  .avatar{
+    width: 48px;
+    height: 48px;
+    background-position: center;
+    background-size: cover;
+    border-radius: 50%;
+    background: #f8f8f8;
+    display: inline-block;
+  }
+  .content{
+    text-align: left;
+    color: #757575;
+  }
+  .date{
+    color: #a3a3a3;
+    line-height: 30px;
+  }
+  .daterow{
+    display: flex;
+    justify-content: space-between;
+  }
+  .name{
+    font-size: 14px;
+    color: #474747;
+    text-align: left;
+  }
+  .avatarcolumn{
+    vertical-align: top;
+  }
+}
diff --git a/src/components/dashboard/completed.js b/src/components/dashboard/completed.js
new file mode 100644
index 0000000..3165c27
--- /dev/null
+++ b/src/components/dashboard/completed.js
@@ -0,0 +1,38 @@
+import React, { PropTypes } from 'react'
+import { Icon } from 'antd'
+import styles from './completed.less'
+import {color} from '../../utils'
+import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer} from 'recharts'
+
+function Completed(props) {
+  return (
+    <div className={styles.sales}>
+      <div className={styles.title}>TEAM TOTAL COMPLETED</div>
+      <ResponsiveContainer minHeight={360}>
+      <LineChart data={props.data}>
+       <Legend verticalAlign="top"
+         content={props => {
+           const { payload } = props
+           return <ul className={styles.legend+' clearfix'}>
+             {payload.map((item,key) => <li key={key}><span className={styles.radiusdot} style={{background:item.color}}></span>{item.value}</li>) }
+           </ul>
+         }}/>
+       <XAxis dataKey="name" axisLine={{stroke:color.borderBase,strokeWidth:1}}  tickLine={false}/>
+       <YAxis axisLine={false} tickLine={false} />
+       <CartesianGrid vertical={false} stroke={color.borderBase} strokeWidth={1} />
+       <Tooltip
+         wrapperStyle={{border:'none',boxShadow:'4px 4px 40px rgba(0, 0, 0, 0.05)'}}
+         content={content => {
+         const list = content.payload.map((item,key) => <li key={key} className={styles.tipitem}><span className={styles.radiusdot} style={{background:item.color}}></span>{item.name+':'+item.value}</li>)
+         return <div className={styles.tooltip}><p className={styles.tiptitle}>{content.label}</p><ul>{list}</ul></div>
+       }}/>
+       <Line type="monotone" dataKey="Food" stroke={color.purple} strokeWidth={3} dot={{fill:color.purple}} activeDot={{r: 5,strokeWidth:0}}/>
+       <Line type="monotone" dataKey="Clothes" stroke={color.red} strokeWidth={3} dot={{fill:color.red}}  activeDot={{r: 5,strokeWidth:0}}/>
+       <Line type="monotone" dataKey="Electronics" stroke={color.green} strokeWidth={3}  dot={{fill:color.green}}  activeDot={{r: 5,strokeWidth:0}}/>
+      </LineChart>
+    </ResponsiveContainer>
+    </div>
+  )
+}
+
+export default Completed
diff --git a/src/components/dashboard/completed.less b/src/components/dashboard/completed.less
new file mode 100644
index 0000000..bc211ac
--- /dev/null
+++ b/src/components/dashboard/completed.less
@@ -0,0 +1,42 @@
+@import "../vars.less";
+.sales{
+  .title{
+    margin-left: 32px;
+    font-size: 16px;
+  }
+}
+.radiusdot{
+  width:12px;
+  height:12px;
+  margin-right: 8px;
+  border-radius:50%;
+  display:inline-block;
+}
+.legend{
+  color: @dark-half;
+  text-align: right;
+  color: #999;
+  font-size: 14px;
+  li{
+    height: 48px;
+    line-height: 48px;
+    display: inline-block;
+    &+li{
+      margin-left: 24px;
+    }
+  }
+}
+.tooltip{
+  background: #fff;
+  padding: 20px;
+  font-size: 14px;
+  .tiptitle{
+    font-weight: 700;
+    font-size: 16px;
+    margin-bottom: 8px;
+  }
+  .tipitem{
+    height: 32px;
+    line-height: 32px;
+  }
+}
diff --git a/src/components/dashboard/recentSales.js b/src/components/dashboard/recentSales.js
index da2ade5..589b029 100644
--- a/src/components/dashboard/recentSales.js
+++ b/src/components/dashboard/recentSales.js
@@ -23,7 +23,7 @@ const status = {
   }
 }
 
-function recentSales(props) {
+function RecentSales(props) {
   const columns = [
     {
       title: 'NAME',
@@ -49,4 +49,4 @@ function recentSales(props) {
   )
 }
 
-export default recentSales
+export default RecentSales
diff --git a/src/models/dashboard.js b/src/models/dashboard.js
index c3650ce..8dec154 100644
--- a/src/models/dashboard.js
+++ b/src/models/dashboard.js
@@ -178,7 +178,9 @@ export default {
       avatar: 'http://img.hb.aicdn.com/bc442cf0cc6f7940dcc567e465048d1a8d634493198c4-sPx5BR_fw236'
     },
     numbers:[],
-    recentSales:[]
+    recentSales:[],
+    completed:[],
+    comments:[],
   },
   subscriptions : {
     setup({dispatch}) {
diff --git a/src/routes/dashboard.js b/src/routes/dashboard.js
index 40e0eae..01b7674 100644
--- a/src/routes/dashboard.js
+++ b/src/routes/dashboard.js
@@ -7,11 +7,13 @@ import Quote from '../components/dashboard/quote'
 import Sales from '../components/dashboard/sales'
 import Weather from '../components/dashboard/weather'
 import RecentSales from '../components/dashboard/recentSales'
+import Comments from '../components/dashboard/comments'
+// import Completed from '../components/dashboard/completed'
 import styles from './dashboard.less'
 import {color} from '../utils'
 
 function Dashboard({dashboard}) {
-  const {weather, sales, quote, numbers, recentSales} = dashboard
+  const {weather, sales, quote, numbers, recentSales, comments, completed} = dashboard
   const numberCards = numbers.map((item, key) => <Col key={key} lg={6} md={12}>
     <NumberCard {...item}/>
   </Col>)
@@ -58,17 +60,18 @@ function Dashboard({dashboard}) {
       </Col>
       <Col lg={12} md={24}>
         <Card bordered={false} bodyStyle={{
-          padding: 0,
           height: 432,
           background: '#fff'
-        }}></Card>
+        }}>
+          <Comments data={comments}/>
+        </Card>
       </Col>
       <Col lg={24} md={24}>
         <Card bordered={false} bodyStyle={{
-          padding: 0,
-          height: 432,
-          background: '#fff'
-        }}></Card>
+          padding: '24px 36px 24px 0'
+        }}>
+          {/* <Completed data={completed}/> */}
+        </Card>
       </Col>
       <Col lg={8} md={24}>
         <Card bordered={false} bodyStyle={{