From bd01b7e7775ff0c067f72a5413767226c3e6b54c Mon Sep 17 00:00:00 2001 From: zuiidea Date: Wed, 21 Dec 2016 22:47:59 +0800 Subject: [PATCH] browser --- mock/dashboard.js | 54 +++++++++++++++++++++++++-- src/components/dashboard/browser.js | 41 ++++++++++++++++++++ src/components/dashboard/browser.less | 7 ++++ src/components/dashboard/cpu.js | 0 src/components/dashboard/cpu.less | 0 src/components/dashboard/user.js | 0 src/components/dashboard/user.less | 0 src/models/dashboard.js | 4 +- src/routes/dashboard.js | 44 ++++++++++------------ 9 files changed, 121 insertions(+), 29 deletions(-) create mode 100644 src/components/dashboard/browser.js create mode 100644 src/components/dashboard/browser.less create mode 100644 src/components/dashboard/cpu.js create mode 100644 src/components/dashboard/cpu.less create mode 100644 src/components/dashboard/user.js create mode 100644 src/components/dashboard/user.less diff --git a/mock/dashboard.js b/mock/dashboard.js index ed64c19..49ad9a8 100644 --- a/mock/dashboard.js +++ b/mock/dashboard.js @@ -13,6 +13,53 @@ let dataKey = mockStorge('Dashboard', Mock.mock({ 'Electronics|300-550': 1 } ], + 'cpu':{ + 'usage|50-600':1, + space:825, + 'cpu|40-90':1, + 'data|20':[ + 'cpu|20-80':1 + ], + }, + 'browser':[ + { + name:'Google Chrome', + percent:43.3, + status:1 + }, + { + name:'Mozilla Firefox', + percent:33.4, + status:2 + }, + { + name:'Apple Safari', + percent:34.6, + status:3 + }, + { + name:'Internet Explorer', + percent:12.3, + status:4 + }, + { + name:'Opera Mini', + percent:3.3, + status:1 + }, + { + name:'Chromium', + percent:2.53, + status:1 + }, + ], + user:{ + name:'zuiidea', + email:'zuiiidea@.gmail.com', + sales:3241, + sold:3556, + avatar:'http://tva4.sinaimg.cn/crop.0.0.996.996.180/6ee6a3a3jw8f0ks5pk7btj20ro0rodi0.jpg' + }, 'completed|12': [ { 'name|+1': 2008, @@ -52,12 +99,12 @@ let dataKey = mockStorge('Dashboard', Mock.mock({ }, numbers: [ { - icon: 'dot-chart', + icon: 'pay-circle-o', color: color.green, title: 'Online Review', number: 2781 }, { - icon: 'pay-circle-o', + icon: 'team', color: color.blue, title: 'New Customers', number: 3241 @@ -67,7 +114,7 @@ let dataKey = mockStorge('Dashboard', Mock.mock({ title: 'Active Projects', number: 253 }, { - icon: 'paper-clip', + icon: 'shopping-cart', color: color.red, title: 'Referrals', number: 4324 @@ -77,7 +124,6 @@ let dataKey = mockStorge('Dashboard', Mock.mock({ module.exports = { 'GET /api/dashboard' (req, res) { - console.log(global[dataKey].recentSales); res.json(global[dataKey]) } } diff --git a/src/components/dashboard/browser.js b/src/components/dashboard/browser.js new file mode 100644 index 0000000..2f6ff90 --- /dev/null +++ b/src/components/dashboard/browser.js @@ -0,0 +1,41 @@ +import React, {PropTypes} from 'react' +import {Icon,Table,Tag} from 'antd' +import styles from './browser.less' +import {classnames,color} from '../../utils' + +const status = { + 1:{ + color:color.green + }, + 2:{ + color:color.red + }, + 3:{ + color:color.blue + }, + 4:{ + color:color.yellow + }, +} + +function Browser(props) { + const columns = [ + { + title: 'name', + dataIndex: 'name', + className:styles.name, + }, { + title: 'percent', + dataIndex: 'percent', + className:styles.percent, + render:(text,it) => {text}%, + }, + ] + return key} dataSource={props.data}/> +} + +Browser.propTypes = { + props: PropTypes.object +} + +export default Browser diff --git a/src/components/dashboard/browser.less b/src/components/dashboard/browser.less new file mode 100644 index 0000000..d4edd02 --- /dev/null +++ b/src/components/dashboard/browser.less @@ -0,0 +1,7 @@ +.percent{ + text-align: right!important; +} + +.name{ + text-align: left!important; +} diff --git a/src/components/dashboard/cpu.js b/src/components/dashboard/cpu.js new file mode 100644 index 0000000..e69de29 diff --git a/src/components/dashboard/cpu.less b/src/components/dashboard/cpu.less new file mode 100644 index 0000000..e69de29 diff --git a/src/components/dashboard/user.js b/src/components/dashboard/user.js new file mode 100644 index 0000000..e69de29 diff --git a/src/components/dashboard/user.less b/src/components/dashboard/user.less new file mode 100644 index 0000000..e69de29 diff --git a/src/models/dashboard.js b/src/models/dashboard.js index 8dec154..d45c1e9 100644 --- a/src/models/dashboard.js +++ b/src/models/dashboard.js @@ -180,7 +180,9 @@ export default { numbers:[], recentSales:[], completed:[], - comments:[], + browser:[], + cpu:{}, + user:{}, }, subscriptions : { setup({dispatch}) { diff --git a/src/routes/dashboard.js b/src/routes/dashboard.js index d66986d..3d0dcae 100644 --- a/src/routes/dashboard.js +++ b/src/routes/dashboard.js @@ -9,11 +9,19 @@ 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 Browser from '../components/dashboard/browser' import styles from './dashboard.less' import {color} from '../utils' +const bodyStyle = { + bodyStyle:{ + height: 432, + background: '#fff', + } +} + function Dashboard({dashboard}) { - const {weather, sales, quote, numbers, recentSales, comments, completed} = dashboard + const {weather, sales, quote, numbers, recentSales, comments, completed, browser, cpu, user} = dashboard const numberCards = numbers.map((item, key) => ) @@ -51,18 +59,12 @@ function Dashboard({dashboard}) { - + - + @@ -74,25 +76,19 @@ function Dashboard({dashboard}) { - + + + - + + {/* */} + - + + {/* */} + )