Alawn/antd-admin
1
0
Fork 0
mirror of https://github.com/zuiidea/antd-admin synced 2026-10-30 13:23:49 +00:00
Code Issues Releases Wiki Activity

comments

Browse Source
This commit is contained in:
zuiidea
2016-12-21 21:19:33 +08:00
parent 2b267a086b
commit 8ce7a5d48b
8 changed files with 202 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mock/dashboard.js
+20
View File
@@ -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,
src/components/dashboard/comments.js
+51
View File
@@ -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
src/components/dashboard/comments.less
+36
View File
@@ -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;
}
}
src/components/dashboard/completed.js
+38
View File
@@ -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
src/components/dashboard/completed.less
+42
View File
@@ -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;
}
}
src/components/dashboard/recentSales.js
+2 -2
View File
@@ -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
src/models/dashboard.js
+3 -1
View File
@@ -178,7 +178,9 @@ export default {
avatar: 'http://img.hb.aicdn.com/bc442cf0cc6f7940dcc567e465048d1a8d634493198c4-sPx5BR_fw236'
},
numbers:[],
recentSales:[]
recentSales:[],
completed:[],
comments:[],
},
subscriptions : {
setup({dispatch}) {
src/routes/dashboard.js
+10 -7
View File
@@ -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={{