diff --git a/src/components/dashboard/weather.js b/src/components/dashboard/weather.js index f781a62..7012bb4 100644 --- a/src/components/dashboard/weather.js +++ b/src/components/dashboard/weather.js @@ -1,26 +1,21 @@ import React, {PropTypes} from 'react' import {Icon} from 'antd' import styles from './weather.less' -import {classnames, request} from '../../utils' -const Ajax = require("robe-ajax") -const Weather = React.createClass({ - componentDidMount() { - this.fetch() - }, - fetch() { - // Ajax.getJSON("http://query.yahooapis.com/v1/public/yql", { - // q: "select * from json where url=\"http://www.zuimeitianqi.com/zuimei/myCity?flg=0\"", - // format: "json" - // }, function (data) { - // console.log(data) - // }) - }, - render() { - return
- 天气 +function Weather(props) { + const {city, icon, dateTime, temperature, name} = props + return
+
+
+

{name}

- } -}) +
+

{temperature + '°'}

+

{city},{dateTime}

+
+
+} export default Weather diff --git a/src/components/dashboard/weather.less b/src/components/dashboard/weather.less index e69de29..0547c34 100644 --- a/src/components/dashboard/weather.less +++ b/src/components/dashboard/weather.less @@ -0,0 +1,20 @@ +@import "../vars.less"; +.weather{ + color: #fff; + .left{ + .icon{ + + } + .name{ + + } + } + .right{ + .temperature{ + + } + .description{ + + } + } +} diff --git a/src/models/dashboard.js b/src/models/dashboard.js index 8047032..ee57992 100644 --- a/src/models/dashboard.js +++ b/src/models/dashboard.js @@ -1,12 +1,178 @@ -import {myCity,queryWeather} from '../services/dashboard' +import {myCity, queryWeather} from '../services/dashboard' import {parse} from 'qs' +// zuimei 摘自 http://www.zuimeitianqi.com/res/js/index.js +let zuimei = { + ParseActualData: function (actual, air) { + 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('hh:mm') + } + return weather + }, + + GetIconName: function (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 (12 <= hour) { + 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: function (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: function (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: function (num) { + let wea = "" + 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 { namespace : 'dashboard', state : { weather: { - - }, + city: '成都', + temperature: '5', + name: '晴', + icon: 'http://www.zuimeitianqi.com/res/icon/res/icon/0_big.png', + dateTime: new Date().format('hh:mm') + } }, subscriptions : { setup({dispatch}) { @@ -17,28 +183,24 @@ export default { *queryWeather({ payload }, {call, put}) { - const myCityResult = yield call(myCity, {flg:0}) + const myCityResult = yield call(myCity, {flg: 0}) const myCityData = myCityResult.query.results.json - - const result = yield call(queryWeather, {cityCode:myCityData.selectCityCode}) + const result = yield call(queryWeather, {cityCode: myCityData.selectCityCode}) const data = result.query.results.json + const weather = zuimei.ParseActualData(data.data.actual) + weather.city = myCityData.selectCityName - console.log(data) - // if (data.success) { - // yield put({ - // type: 'loginSuccess', - // payload: { - // user: { - // name: data.username - // } - // } - // }) - // } else { - // yield put({type: 'hideLoading'}) - // } - }, + yield put({type: 'queryWeatherSuccess', payload: { + weather + }}) + } }, reducers : { - + queryWeatherSuccess(state, action) { + return { + ...state, + ...action.payload + } + } } } diff --git a/src/routes/dashboard.js b/src/routes/dashboard.js index c080606..0ed8612 100644 --- a/src/routes/dashboard.js +++ b/src/routes/dashboard.js @@ -43,15 +43,10 @@ const quoteProps={ avatar:'http://img.hb.aicdn.com/bc442cf0cc6f7940dcc567e465048d1a8d634493198c4-sPx5BR_fw236', } -// http://api.map.baidu.com/telematics/v3/weather?location=%E5%8C%97%E4%BA%AC&output=json&ak=E4805d16520de693a3fe707cdc962045 -const weatherProps={ - weatherText:'雨', - weatherIcon:'雨', - location:'成都', -} -function Dashboard() { +function Dashboard({dashboard}) { + const {weather} = dashboard const numberCards = numberCardData.map((item,key) => ) @@ -72,7 +67,7 @@ function Dashboard() { - + @@ -99,7 +94,7 @@ function Dashboard() { )} Dashboard.propTypes = { - location: PropTypes.object + dashboard: PropTypes.object } function mapStateToProps({ dashboard }) { diff --git a/src/utils/index.js b/src/utils/index.js index d797b36..a1713a4 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -15,7 +15,29 @@ String.prototype.hyphenToHump = function () { // 驼峰转连字符 String.prototype.humpToHyphen = function () { - return this.replace(/([A-Z])/g,"-$1").toLowerCase() + return this.replace(/([A-Z])/g, "-$1").toLowerCase() +} + +// 日期格式化 +Date.prototype.format = function (format) { + var o = { + "M+": this.getMonth() + 1, + "d+": this.getDate(), + "h+": this.getHours(), + 'H+': this.getHours(), + "m+": this.getMinutes(), + "s+": this.getSeconds(), + "q+": Math.floor((this.getMonth() + 3) / 3), + "S": this.getMilliseconds() + } + if (/(y+)/.test(format)) + format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)) + for (var k in o) + if (new RegExp("(" + k + ")").test(format)) + format = format.replace(RegExp.$1, RegExp.$1.length == 1 + ? o[k] + : ("00" + o[k]).substr(("" + o[k]).length)) + return format } module.exports = { @@ -23,5 +45,5 @@ module.exports = { menu, request, color, - classnames, + classnames }