Merge pull request #496 from zuiidea/develop

fix weather

.roadhogrc.js

@@ -13,18 +13,18 @@ export default {
   publicPath : `/${version}/`,
   outputPath : `./dist/${version}`,
   // 接口代理示例
-  // "proxy": {
-  //   "/api/v1": {
-  //     "target": "http://api.zuiidea.com",
-  //     "changeOrigin": true,
-  //     "pathRewrite": { "^/api/v1" : "/v1" }
-  //   },
-  //   "/api/v2": {
-  //     "target": "http://192.168.0.110",
-  //     "changeOrigin": true,
-  //     "pathRewrite": { "^/api/v2" : "/api/v2" }
-  //   }
-  // },
+  "proxy": {
+    "/api/v1/weather": {
+      "target": "https://api.seniverse.com/",
+      "changeOrigin": true,
+      "pathRewrite": { "^/api/v1/weather" : "/v3/weather" }
+    },
+    // "/api/v2": {
+    //   "target": "http://192.168.0.110",
+    //   "changeOrigin": true,
+    //   "pathRewrite": { "^/api/v2" : "/api/v2" }
+    // }
+  },
   env : {
     development: {
       extraBabelPlugins: [

src/models/dashboard.js

@@ -1,176 +1,17 @@
 import { parse } from 'qs'
-import { myCity, queryWeather, query } from 'services/dashboard'
+import modelExtend from 'dva-model-extend'
+import { query } from 'services/dashboard'
+import { model } from 'models/common'
+import * as weatherService from 'services/weather'
 
-// zuimei 摘自 http://www.zuimeitianqi.com/res/js/index.js
-let zuimei = {
-  parseActualData (actual) {
-    let weather = {
-      icon: `http://www.zuimeitianqi.com/res/icon/${zuimei.getIconName(actual.wea, 'big')}`,
-      name: zuimei.getWeatherName(actual.wea),
-      temperature: actual.tmp,
-      dateTime: new Date(actual.PTm).format('MM-dd hh:mm'),
-    }
-    return weather
-  },
-
-  getIconName (wea, flg) {
-    let myDate = new Date()
-    let hour = myDate.getHours()
-    let num = 0
-    if (wea.indexOf('/') !== -1) {
-      let weas = wea.split('/')
-      if (hour < 12) {
-        num = zuimei.replaceIcon(weas[0])
-        if (num < 6) {
-          num = `${num}_${flg}_night.png`
-        } else {
-          num = `${num}_${flg}.png`
-        }
-      } else if (hour >= 12) {
-        num = zuimei.replaceIcon(weas[1])
-        if (hour >= 18) {
-          num = `${num}_${flg}_night.png`
-        } else {
-          num = `${num}_${flg}.png`
-        }
-      }
-    } else if ((hour >= 18 && hour <= 23) || (hour >= 0 && hour <= 6)) {
-      num = `${num}_${flg}_night.png`
-    } else {
-      num = `${num}_${flg}.png`
-    }
-
-    return num
-  },
-
-  replaceIcon (num) {
-    if (num === 21) {
-      num = 7
-    } else if (num === 22) {
-      num = 8
-    } else if (num === 10 || num === 11 || num === 12 || num === 23 || num === 24 || num === 25) {
-      num = 9
-    } else if (num === 13 || num === 15 || num === 26 || num === 27 || num === 34) {
-      num = 14
-    } else if (num === 17 || num === 28) {
-      num = 16
-    } else if (num === 35) {
-      num = 18
-    } else if (num === 31 || num === 32 || num === 33) {
-      num = 20
-    } else if (num === 30) {
-      num = 29
-    }
-
-    return num
-  },
-
-  getWeatherName (wea) {
-    let name = ''
-    if (wea.indexOf('/') !== -1) {
-      let weas = wea.split('/')
-      name = `${zuimei.getWeatherByCode(weas[0])}转${zuimei.getWeatherByCode(weas[1])}`
-    } else {
-      name = zuimei.getWeatherByCode(wea)
-    }
-
-    return name
-  },
-
-  getWeatherByCode (number) {
-    let wea = ''
-    let num = Number(number)
-    if (num === 0) {
-      wea = '晴'
-    } else if (num === 1) {
-      wea = '多云'
-    } else if (num === 2) {
-      wea = '阴'
-    } else if (num === 3) {
-      wea = '阵雨'
-    } else if (num === 4) {
-      wea = '雷阵雨'
-    } else if (num === 5) {
-      wea = '雷阵雨并伴有冰雹'
-    } else if (num === 6) {
-      wea = '雨夹雪'
-    } else if (num === 7) {
-      wea = '小雨'
-    } else if (num === 8) {
-      wea = '中雨'
-    } else if (num === 9) {
-      wea = '大雨'
-    } else if (num === 10) {
-      wea = '暴雨'
-    } else if (num === 11) {
-      wea = '大暴雨'
-    } else if (num === 12) {
-      wea = '特大暴雨'
-    } else if (num === 13) {
-      wea = '阵雪'
-    } else if (num === 14) {
-      wea = '小雪'
-    } else if (num === 15) {
-      wea = '中雪'
-    } else if (num === 16) {
-      wea = '大雪'
-    } else if (num === 17) {
-      wea = '暴雪'
-    } else if (num === 18) {
-      wea = '雾'
-    } else if (num === 19) {
-      wea = '冻雨'
-    } else if (num === 20) {
-      wea = '沙尘暴'
-    } else if (num === 21) {
-      wea = '小雨-中雨'
-    } else if (num === 22) {
-      wea = '中雨-大雨'
-    } else if (num === 23) {
-      wea = '大雨-暴雨'
-    } else if (num === 24) {
-      wea = '暴雨-大暴雨'
-    } else if (num === 25) {
-      wea = '大暴雨-特大暴雨'
-    } else if (num === 26) {
-      wea = '小雪-中雪'
-    } else if (num === 27) {
-      wea = '中雪-大雪'
-    } else if (num === 28) {
-      wea = '大雪-暴雪'
-    } else if (num === 29) {
-      wea = '浮沉'
-    } else if (num === 30) {
-      wea = '扬沙'
-    } else if (num === 31) {
-      wea = '强沙尘暴'
-    } else if (num === 32) {
-      wea = '飑'
-    } else if (num === 33) {
-      wea = '龙卷风'
-    } else if (num === 34) {
-      wea = '若高吹雪'
-    } else if (num === 35) {
-      wea = '轻雾'
-    } else if (num === 53) {
-      wea = '霾'
-    } else if (num === 99) {
-      wea = '未知'
-    }
-
-    return wea
-  },
-}
-
-export default {
+export default modelExtend(model, {
   namespace: 'dashboard',
   state: {
     weather: {
-      city: '成都',
-      temperature: '5',
+      city: '深圳',
+      temperature: '30',
       name: '晴',
-      icon: 'http://www.zuimeitianqi.com/res/icon/0_big.png',
-      dateTime: new Date().format('MM-dd hh:mm'),
+      icon: '//s5.sencdn.com/web/icons/3d_50/2.png',
     },
     sales: [],
     quote: {
@@ -187,9 +28,13 @@ export default {
     },
   },
   subscriptions: {
-    setup ({ dispatch }) {
-      dispatch({ type: 'query' })
-      dispatch({ type: 'queryWeather' })
+    setup ({ dispatch, history }) {
+      history.listen(({ pathname }) => {
+        if (pathname === '/dashboard' || pathname === '/') {
+          dispatch({ type: 'query' })
+          dispatch({ type: 'queryWeather' })
+        }
+      })
     },
   },
   effects: {
@@ -197,31 +42,32 @@ export default {
       payload,
     }, { call, put }) {
       const data = yield call(query, parse(payload))
-      yield put({ type: 'queryWeather', payload: { ...data } })
+      yield put({
+        type: 'updateState',
+        payload: data,
+      })
     },
-    * queryWeather (action, { call, put }) {
-      const myCityResult = yield call(myCity, { flg: 0 })
-      const result = yield call(queryWeather, { cityCode: myCityResult.selectCityCode })
-      const weather = zuimei.parseActualData(result.data.actual)
-      weather.city = myCityResult.selectCityName
-      yield put({ type: 'queryWeatherSuccess',
-        payload: {
-          weather,
-        } })
-    },
-  },
-  reducers: {
-    queryWeatherSuccess (state, action) {
-      return {
-        ...state,
-        ...action.payload,
-      }
-    },
-    queryWeather (state, action) {
-      return {
-        ...state,
-        ...action.payload,
+    * queryWeather ({
+      payload = {},
+    }, { call, put }) {
+      payload.location = 'shenzhen'
+      const result = yield call(weatherService.query, payload)
+      const { success } = result
+      if (success) {
+        const data = result.results[0]
+        const weather = {
+          city: data.location.name,
+          temperature: data.now.temperature,
+          name: data.now.text,
+          icon: `//s5.sencdn.com/web/icons/3d_50/${data.now.code}.png`,
+        }
+        yield put({
+          type: 'updateState',
+          payload: {
+            weather,
+          },
+        })
       }
     },
   },
-}
+})

src/routes/dashboard/components/weather.js

@@ -1,22 +1,26 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { Spin } from 'antd'
 import styles from './weather.less'
 
-function Weather ({ city, icon, dateTime, temperature, name }) {
-  return (<div className={styles.weather}>
-    <div className={styles.left}>
-      <div className={styles.icon}
-        style={{
-          backgroundImage: `url(${icon})`,
-        }}
-      />
-      <p>{name}</p>
-    </div>
-    <div className={styles.right}>
-      <h1 className={styles.temperature}>{`${temperature}°`}</h1>
-      <p className={styles.description}>{city},{dateTime}</p>
-    </div>
-  </div>)
+function Weather ({ city, icon, dateTime, temperature, name, loading }) {
+  return (
+    <Spin spinning={loading}>
+      <div className={styles.weather}>
+        <div className={styles.left}>
+          <div className={styles.icon}
+            style={{
+              backgroundImage: `url(${icon})`,
+            }}
+          />
+          <p>{name}</p>
+        </div>
+        <div className={styles.right}>
+          <h1 className={styles.temperature}>{`${temperature}°`}</h1>
+          <p className={styles.description}>{city},{dateTime}</p>
+        </div>
+      </div>
+    </Spin>)
 }
 
 Weather.propTypes = {
@@ -25,6 +29,7 @@ Weather.propTypes = {
   dateTime: PropTypes.string,
   temperature: PropTypes.string,
   name: PropTypes.string,
+  loading: PropTypes.bool,
 }
 
 export default Weather

src/routes/dashboard/components/weather.less

@@ -18,7 +18,7 @@
       width: 64px;
       height: 64px;
       background-position: center;
-      background-size: cover;
+      background-size: contain;
     }
 
     p {

src/routes/dashboard/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import { connect } from 'dva'
 import { Row, Col, Card } from 'antd'
 import { color } from 'utils'
+import { Loader } from 'components'
 import { NumberCard, Quote, Sales, Weather, RecentSales, Comments, Completed, Browser, Cpu, User } from './components'
 import styles from './index.less'
 
@@ -13,92 +14,96 @@ const bodyStyle = {
   },
 }
 
-function Dashboard ({ dashboard }) {
+function Dashboard ({ dashboard, loading }) {
   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>))
 
   return (
-    <Row gutter={24}>
-      {numberCards}
-      <Col lg={18} md={24}>
-        <Card bordered={false}
-          bodyStyle={{
-            padding: '24px 36px 24px 0',
-          }}
-        >
-          <Sales data={sales} />
-        </Card>
-      </Col>
-      <Col lg={6} md={24}>
-        <Row gutter={24}>
-          <Col lg={24} md={12}>
-            <Card bordered={false}
-              className={styles.weather}
-              bodyStyle={{
-                padding: 0,
-                height: 204,
-                background: color.blue,
-              }}
-            >
-              <Weather {...weather} />
-            </Card>
-          </Col>
-          <Col lg={24} md={12}>
-            <Card bordered={false}
-              className={styles.quote}
-              bodyStyle={{
-                padding: 0,
-                height: 204,
-                background: color.peach,
-              }}
-            >
-              <Quote {...quote} />
-            </Card>
-          </Col>
-        </Row>
-      </Col>
-      <Col lg={12} md={24}>
-        <Card bordered={false} {...bodyStyle}>
-          <RecentSales data={recentSales} />
-        </Card>
-      </Col>
-      <Col lg={12} md={24}>
-        <Card bordered={false} {...bodyStyle}>
-          <Comments data={comments} />
-        </Card>
-      </Col>
-      <Col lg={24} md={24}>
-        <Card bordered={false}
-          bodyStyle={{
-            padding: '24px 36px 24px 0',
-          }}
-        >
-          <Completed data={completed} />
-        </Card>
-      </Col>
-      <Col lg={8} md={24}>
-        <Card bordered={false} {...bodyStyle}>
-          <Browser data={browser} />
-        </Card>
-      </Col>
-      <Col lg={8} md={24}>
-        <Card bordered={false} {...bodyStyle}>
-          <Cpu {...cpu} />
-        </Card>
-      </Col>
-      <Col lg={8} md={24}>
-        <Card bordered={false} bodyStyle={{ ...bodyStyle.bodyStyle, padding: 0 }}>
-          <User {...user} />
-        </Card>
-      </Col>
-    </Row>
+    <div>
+      <Loader spinning={loading.models.dashboard} />
+      <Row gutter={24}>
+        {numberCards}
+        <Col lg={18} md={24}>
+          <Card bordered={false}
+            bodyStyle={{
+              padding: '24px 36px 24px 0',
+            }}
+          >
+            <Sales data={sales} />
+          </Card>
+        </Col>
+        <Col lg={6} md={24}>
+          <Row gutter={24}>
+            <Col lg={24} md={12}>
+              <Card bordered={false}
+                className={styles.weather}
+                bodyStyle={{
+                  padding: 0,
+                  height: 204,
+                  background: color.blue,
+                }}
+              >
+                <Weather {...weather} loading={loading.effects['dashboard/queryWeather']} />
+              </Card>
+            </Col>
+            <Col lg={24} md={12}>
+              <Card bordered={false}
+                className={styles.quote}
+                bodyStyle={{
+                  padding: 0,
+                  height: 204,
+                  background: color.peach,
+                }}
+              >
+                <Quote {...quote} />
+              </Card>
+            </Col>
+          </Row>
+        </Col>
+        <Col lg={12} md={24}>
+          <Card bordered={false} {...bodyStyle}>
+            <RecentSales data={recentSales} />
+          </Card>
+        </Col>
+        <Col lg={12} md={24}>
+          <Card bordered={false} {...bodyStyle}>
+            <Comments data={comments} />
+          </Card>
+        </Col>
+        <Col lg={24} md={24}>
+          <Card bordered={false}
+            bodyStyle={{
+              padding: '24px 36px 24px 0',
+            }}
+          >
+            <Completed data={completed} />
+          </Card>
+        </Col>
+        <Col lg={8} md={24}>
+          <Card bordered={false} {...bodyStyle}>
+            <Browser data={browser} />
+          </Card>
+        </Col>
+        <Col lg={8} md={24}>
+          <Card bordered={false} {...bodyStyle}>
+            <Cpu {...cpu} />
+          </Card>
+        </Col>
+        <Col lg={8} md={24}>
+          <Card bordered={false} bodyStyle={{ ...bodyStyle.bodyStyle, padding: 0 }}>
+            <User {...user} />
+          </Card>
+        </Col>
+      </Row>
+    </div>
   )
 }
 
 Dashboard.propTypes = {
   dashboard: PropTypes.object,
+  loading: PropTypes.object,
 }
 
-export default connect(({ dashboard }) => ({ dashboard }))(Dashboard)
+export default connect(({ dashboard, loading }) => ({ dashboard, loading }))(Dashboard)

src/services/dashboard.js

@@ -3,20 +3,6 @@ import { request, config } from 'utils'
 const { api } = config
 const { dashboard } = api
 
-export async function myCity (params) {
-  return request({
-    url: 'http://www.zuimeitianqi.com/zuimei/myCity',
-    data: params,
-  })
-}
-
-export async function queryWeather (params) {
-  return request({
-    url: 'http://www.zuimeitianqi.com/zuimei/queryWeather',
-    data: params,
-  })
-}
-
 export async function query (params) {
   return request({
     url: dashboard,

src/services/weather.js

@@ -0,0 +1,12 @@
+import { request, config } from 'utils'
+
+const { APIV1 } = config
+
+export async function query (params) {
+  params.key = 'i7sau1babuzwhycn'
+  return request({
+    url: `${APIV1}/weather/now.json`,
+    method: 'get',
+    data: params,
+  })
+}

src/utils/config.js

@@ -8,10 +8,11 @@ module.exports = {
   logo: '/logo.png',
   iconFontCSS: '/iconfont.css',
   iconFontJS: '/iconfont.js',
-  YQL: ['http://www.zuimeitianqi.com'],
   CORS: [],
   openPages: ['/login'],
   apiPrefix: '/api/v1',
+  APIV1,
+  APIV2,
   api: {
     userLogin: `${APIV1}/user/login`,
     userLogout: `${APIV1}/user/logout`,
@@ -21,6 +22,7 @@ module.exports = {
     user: `${APIV1}/user/:id`,
     dashboard: `${APIV1}/dashboard`,
     menus: `${APIV1}/menus`,
+    weather: `${APIV1}/weather`,
     v1test: `${APIV1}/test`,
     v2test: `${APIV2}/test`,
   },