dashbord mock

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 (
     <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} />

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;
-  }
 }

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 {

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
+      }
+    },
   }
 }

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) => <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>

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,
+  })
+}

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("&")