mirror of
https://github.com/zuiidea/antd-admin
synced 2026-10-26 18:28:57 +00:00
dashbord mock
This commit is contained in:
@@ -16,7 +16,6 @@ let dataKey = mockStorge('AdminUsers',[
|
||||
}
|
||||
])
|
||||
|
||||
console.log(global[dataKey]);
|
||||
|
||||
module.exports = {
|
||||
'POST /api/login' (req, res) {
|
||||
|
||||
+21
-2
@@ -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])
|
||||
},
|
||||
}
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
@@ -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
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
@@ -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("&")
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user