From 7a1d15789323fe492bc9e44defeb45a4ebf727e4 Mon Sep 17 00:00:00 2001 From: zuiidea Date: Thu, 15 Dec 2016 22:37:53 +0800 Subject: [PATCH] dashbord mock --- mock/app.js | 1 - mock/dashboard.js | 23 ++++++++++++++++++++-- mock/users.js | 2 -- src/components/dashboard/sales.js | 20 ++++++++----------- src/components/dashboard/sales.less | 28 ++++++++++++++++++++------- src/components/dashboard/weather.less | 6 +++++- src/models/dashboard.js | 21 +++++++++++++++++--- src/routes/dashboard.js | 6 +++--- src/services/dashboard.js | 7 +++++++ src/utils/mock.js | 2 +- yarn.lock | 18 +++++++++++++++++ 11 files changed, 102 insertions(+), 32 deletions(-) diff --git a/mock/app.js b/mock/app.js index 7eba2a4..3f16805 100644 --- a/mock/app.js +++ b/mock/app.js @@ -16,7 +16,6 @@ let dataKey = mockStorge('AdminUsers',[ } ]) -console.log(global[dataKey]); module.exports = { 'POST /api/login' (req, res) { diff --git a/mock/dashboard.js b/mock/dashboard.js index ae167f4..8eec901 100644 --- a/mock/dashboard.js +++ b/mock/dashboard.js @@ -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]) + }, } diff --git a/mock/users.js b/mock/users.js index 8b51347..718afaf 100644 --- a/mock/users.js +++ b/mock/users.js @@ -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) { diff --git a/src/components/dashboard/sales.js b/src/components/dashboard/sales.js index 3c6c592..c7e5796 100644 --- a/src/components/dashboard/sales.js +++ b/src/components/dashboard/sales.js @@ -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 (
Yearly Sales
- - + + { + const { payload } = props + return
    + {payload.map((item,key) =>
  • {item.value}
    • ) } +
+ }}/> diff --git a/src/components/dashboard/sales.less b/src/components/dashboard/sales.less index 9483687..bc211ac 100644 --- a/src/components/dashboard/sales.less +++ b/src/components/dashboard/sales.less @@ -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; - } } diff --git a/src/components/dashboard/weather.less b/src/components/dashboard/weather.less index e07c6cf..bf269ab 100644 --- a/src/components/dashboard/weather.less +++ b/src/components/dashboard/weather.less @@ -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 { diff --git a/src/models/dashboard.js b/src/models/dashboard.js index e48cf95..c7da47c 100644 --- a/src/models/dashboard.js +++ b/src/models/dashboard.js @@ -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 + } + }, } } diff --git a/src/routes/dashboard.js b/src/routes/dashboard.js index bdcbd91..c45b6ef 100644 --- a/src/routes/dashboard.js +++ b/src/routes/dashboard.js @@ -41,7 +41,7 @@ const quoteProps = { } function Dashboard({dashboard}) { - const {weather} = dashboard + const {weather,sales,quote} = dashboard const numberCards = numberCardData.map((item, key) => ) @@ -53,7 +53,7 @@ function Dashboard({dashboard}) { - + @@ -73,7 +73,7 @@ function Dashboard({dashboard}) { height: 204, background: color.red }}> - + diff --git a/src/services/dashboard.js b/src/services/dashboard.js index 29de224..ccec99d 100644 --- a/src/services/dashboard.js +++ b/src/services/dashboard.js @@ -16,3 +16,10 @@ export async function queryWeather(params) { data:params, }) } + +export async function query(params) { + return request('/api/dashboard', { + method: 'get', + data:params, + }) +} diff --git a/src/utils/mock.js b/src/utils/mock.js index f4469bf..abfddd1 100644 --- a/src/utils/mock.js +++ b/src/utils/mock.js @@ -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("&") diff --git a/yarn.lock b/yarn.lock index e5e839e..c60f7f2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"