dashbord mock

This commit is contained in:
zuiidea
2016-12-15 22:37:53 +08:00
parent f49ed470bd
commit 7a1d157893
11 changed files with 102 additions and 32 deletions
-1
View File
@@ -16,7 +16,6 @@ let dataKey = mockStorge('AdminUsers',[
}
])
console.log(global[dataKey]);
module.exports = {
'POST /api/login' (req, res) {
+21 -2
View File
@@ -3,8 +3,27 @@ const Mock = require('mockjs')
const Watch = require("watchjs")
import mockStorge from '../src/utils/mockStorge'
console.log(mockStorge);
let dataKey = mockStorge('Dashboard',Mock.mock({
'sales|16': [
{
'name|+1': 2000,
'Clothes|200-500': 1,
'Food|180-700': 1,
'Electronics|300-850': 1,
}
],
quote:{
name: 'Joho Doe',
title: 'Graphic Designer',
content: `I'm selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can't handle me at my worst, then you sure as hell don't deserve me at my best.`,
avatar: 'http://img.hb.aicdn.com/bc442cf0cc6f7940dcc567e465048d1a8d634493198c4-sPx5BR_fw236'
},
}))
module.exports = {
'GET /api/dashboard' (req, res) {
console.log(global[dataKey])
res.json(global[dataKey])
},
}
-2
View File
@@ -28,8 +28,6 @@ let dataKey = mockStorge('UsersList',Mock.mock({
let usersListData = global[dataKey]
console.log(global[dataKey]);
module.exports = {
'GET /api/users' (req, res) {
+8 -12
View File
@@ -4,23 +4,19 @@ import styles from './sales.less'
import {color} from '../../utils'
import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer} from 'recharts'
const data = [
{name: '2000', Clothes: 400, Food: 240, Electronics: 240},
{name: '2011', Clothes: 300, Food: 198, Electronics: 220},
{name: '2012', Clothes: 200, Food: 980, Electronics: 229},
{name: '2013', Clothes: 278, Food: 398, Electronics: 200},
{name: '2014', Clothes: 189, Food: 480, Electronics: 281},
{name: '2015', Clothes: 239, Food: 380, Electronics: 250},
{name: '2016', Clothes: 349, Food: 430, Electronics: 210},
];
function Sales(props) {
return (
<div className={styles.sales}>
<div className={styles.title}>Yearly Sales</div>
<ResponsiveContainer minHeight={360}>
<LineChart data={data}>
<Legend verticalAlign="top" align="right" height={36}/>
<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} />
+21 -7
View File
@@ -5,6 +5,27 @@
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;
@@ -18,11 +39,4 @@
height: 32px;
line-height: 32px;
}
.radiusdot{
width:12px;
height:12px;
margin-right: 8px;
border-radius:50%;
display:inline-block;
}
}
+5 -1
View File
@@ -12,7 +12,7 @@
display: flex;
flex-direction: column;
width: 64px;
padding-top: 72px;
padding-top: 55px;
.icon {
width: 64px;
@@ -20,6 +20,10 @@
background-position: center;
background-size: cover;
}
p{
margin-top: 16px;
}
}
.right {
+18 -3
View File
@@ -1,4 +1,4 @@
import {myCity, queryWeather} from '../services/dashboard'
import {myCity, queryWeather , query} from '../services/dashboard'
import {parse} from 'qs'
// zuimei 摘自 http://www.zuimeitianqi.com/res/js/index.js
@@ -172,14 +172,23 @@ export default {
name: '晴',
icon: 'http://www.zuimeitianqi.com/res/icon/0_big.png',
dateTime: new Date().format('MM-dd hh:mm')
}
},
sales:[],
quote:{},
},
subscriptions : {
setup({dispatch}) {
dispatch({type: 'queryWeather'})
dispatch({type: 'query'})
}
},
effects : {
*query({
payload
}, {call, put}) {
const data = yield call(query, parse(payload))
yield put({type: 'queryWeather', payload: {...data}})
},
*queryWeather({
payload
}, {call, put}) {
@@ -201,6 +210,12 @@ export default {
...state,
...action.payload
}
}
},
queryWeather(state, action) {
return {
...state,
...action.payload
}
},
}
}
+3 -3
View File
@@ -41,7 +41,7 @@ const quoteProps = {
}
function Dashboard({dashboard}) {
const {weather} = dashboard
const {weather,sales,quote} = dashboard
const numberCards = numberCardData.map((item, key) => <Col key={key} lg={6} md={12}>
<NumberCard {...item}/>
</Col>)
@@ -53,7 +53,7 @@ function Dashboard({dashboard}) {
<Card bordered={false} bodyStyle={{
padding: '24px 36px 24px 0'
}}>
<Sales/>
<Sales data={sales}/>
</Card>
</Col>
<Col lg={6} md={24}>
@@ -73,7 +73,7 @@ function Dashboard({dashboard}) {
height: 204,
background: color.red
}}>
<Quote {...quoteProps}/>
<Quote {...quote}/>
</Card>
</Col>
</Row>
+7
View File
@@ -16,3 +16,10 @@ export async function queryWeather(params) {
data:params,
})
}
export async function query(params) {
return request('/api/dashboard', {
method: 'get',
data:params,
})
}
+1 -1
View File
@@ -1,5 +1,5 @@
const Mock = require('mockjs')
const mockData = [require("../../mock/users"), require("../../mock/app")]
const mockData = [require("../../mock/users"), require("../../mock/app"), require("../../mock/dashboard")]
function serialize(str) {
let paramArray = str.split("&")
+18
View File
@@ -2336,6 +2336,16 @@ hawk@~3.1.3:
hoek "2.x.x"
sntp "1.x.x"
history:
version "4.5.0"
resolved "http://registry.npm.taobao.org/history/download/history-4.5.0.tgz#7313388109333bf5796fff7407cee1850e8c5061"
dependencies:
invariant "^2.2.1"
loose-envify "^1.2.0"
resolve-pathname "^2.0.0"
value-equal "^0.2.0"
warning "^3.0.0"
history@^2.1.2:
version "2.1.2"
resolved "http://registry.npm.taobao.org/history/download/history-2.1.2.tgz#4aa2de897a0e4867e4539843be6ecdb2986bfdec"
@@ -4595,6 +4605,10 @@ resolve-path@^1.3.1:
http-errors "~1.5.0"
path-is-absolute "1.0.1"
resolve-pathname@^2.0.0:
version "2.0.2"
resolved "http://registry.npm.taobao.org/resolve-pathname/download/resolve-pathname-2.0.2.tgz#e55c016eb2e9df1de98e85002282bfb38c630436"
resolve@^1.1.6, resolve@~1.1.6:
version "1.1.7"
resolved "http://registry.npm.taobao.org/resolve/download/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
@@ -5070,6 +5084,10 @@ uuid@^3.0.0:
version "3.0.1"
resolved "http://registry.npm.taobao.org/uuid/download/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
value-equal@^0.2.0:
version "0.2.0"
resolved "http://registry.npm.taobao.org/value-equal/download/value-equal-0.2.0.tgz#4f41c60a3fc011139a2ec3d3340a8998ae8b69c0"
vary@^1.0.0, vary@~1.1.0:
version "1.1.0"
resolved "http://registry.npm.taobao.org/vary/download/vary-1.1.0.tgz#e1e5affbbd16ae768dd2674394b9ad3022653140"