browser

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])
   }
 }

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) => <Tag color={status[it.status].color}>{text}%</Tag>,
+    },
+  ]
+  return <Table pagination={false} showHeader={false} columns={columns} key={(record,key)=>key} dataSource={props.data}/>
+}
+
+Browser.propTypes = {
+  props: PropTypes.object
+}
+
+export default Browser

src/components/dashboard/browser.less

@@ -0,0 +1,7 @@
+.percent{
+  text-align: right!important;
+}
+
+.name{
+  text-align: left!important;
+}

src/models/dashboard.js

@@ -180,7 +180,9 @@ export default {
     numbers:[],
     recentSales:[],
     completed:[],
-    comments:[],
+    browser:[],
+    cpu:{},
+    user:{},
   },
   subscriptions : {
     setup({dispatch}) {

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) => <Col key={key} lg={6} md={12}>
     <NumberCard {...item}/>
   </Col>)
@@ -51,18 +59,12 @@ function Dashboard({dashboard}) {
         </Row>
       </Col>
       <Col lg={12} md={24}>
-        <Card bordered={false} bodyStyle={{
-          height: 432,
-          background: '#fff'
-        }}>
+        <Card bordered={false} {...bodyStyle}>
           <RecentSales data={recentSales}/>
         </Card>
       </Col>
       <Col lg={12} md={24}>
-        <Card bordered={false} bodyStyle={{
-          height: 432,
-          background: '#fff'
-        }}>
+        <Card bordered={false} {...bodyStyle}>
           <Comments data={comments}/>
         </Card>
       </Col>
@@ -74,25 +76,19 @@ function Dashboard({dashboard}) {
         </Card>
       </Col>
       <Col lg={8} md={24}>
-        <Card bordered={false} bodyStyle={{
-          padding: 0,
-          height: 432,
-          background: '#fff'
-        }}></Card>
+        <Card bordered={false} {...bodyStyle}>
+          <Browser data={browser}/>
+        </Card>
       </Col>
       <Col lg={8} md={24}>
-        <Card bordered={false} bodyStyle={{
-          padding: 0,
-          height: 432,
-          background: '#fff'
-        }}></Card>
+        <Card bordered={false} {...bodyStyle}>
+          {/* <Cpu data={cpu}/> */}
+        </Card>
       </Col>
       <Col lg={8} md={24}>
-        <Card bordered={false} bodyStyle={{
-          padding: 0,
-          height: 432,
-          background: '#fff'
-        }}></Card>
+        <Card bordered={false} {...bodyStyle}>
+            {/* <User data={user}/> */}
+        </Card>
       </Col>
     </Row>
   )