forked from Gitlink/forgeplus-react
91 lines
2.9 KiB
JavaScript
91 lines
2.9 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
||
import duoyun from "../../img/duoyun.png";
|
||
import fengsu from "../../img/fengsu.png";
|
||
import shidu from "../../img/shidu.png";
|
||
import ziwaixian from "../../img/ziwaixian.png";
|
||
|
||
function CenterPanel(props) {
|
||
let { timeObj } = props;
|
||
const [weatherObj, setWetherObj] = useState({});
|
||
useEffect(() => {
|
||
const timer = setInterval(() => {
|
||
//天气5分钟更新一次
|
||
getWether();
|
||
}, Number(localStorage.getItem('apiTime')) || 300000);
|
||
getWether();
|
||
return () => {
|
||
clearInterval(timer);
|
||
};
|
||
}, []);
|
||
|
||
function getWether() {
|
||
// fxLink 当前数据的响应式页面，便于嵌入网站或应用
|
||
// now.obsTime 数据观测时间
|
||
// now.temp 温度，默认单位：摄氏度
|
||
// now.feelsLike 体感温度，默认单位：摄氏度
|
||
// now.icon 天气状况的图标代码，另请参考天气图标项目
|
||
// now.text 天气状况的文字描述，包括阴晴雨雪等天气状态的描述
|
||
// now.wind360 风向360角度
|
||
// now.windDir 风向
|
||
// now.windScale 风力等级
|
||
// now.windSpeed 风速，公里/小时
|
||
// now.humidity 相对湿度，百分比数值
|
||
// now.precip 过去1小时降水量，默认单位：毫米
|
||
// now.pressure 大气压强，默认单位：百帕
|
||
// now.vis 能见度，默认单位：公里
|
||
// now.cloud 云量，百分比数值。可能为空
|
||
// now.dew 露点温度。可能为空
|
||
fetch(
|
||
`https://devapi.qweather.com/v7/weather/now?location=112.87,28.22&key=18a193299e4944a7bf3ccf23b38474c2`
|
||
)
|
||
.then((response) => response.json())
|
||
.then((data) => {
|
||
setWetherObj({
|
||
text: data.now.text,
|
||
temp: data.now.temp,
|
||
windDir: data.now.windDir,
|
||
humidity: data.now.humidity,
|
||
});
|
||
})
|
||
.catch((err) => {});
|
||
}
|
||
return (
|
||
<div className="center-panel">
|
||
<div className="first-section">
|
||
<div className="content">
|
||
<img src={duoyun} alt="" />
|
||
<div>{weatherObj.text}</div>
|
||
</div>
|
||
</div>
|
||
<div className="second-section">
|
||
<div className="content">
|
||
<img src={ziwaixian} alt="" />
|
||
<div>{weatherObj.temp}℃</div>
|
||
</div>
|
||
</div>
|
||
<div className="third-section">
|
||
<div className="content">
|
||
<img src={fengsu} alt="" />
|
||
<div>{weatherObj.windDir}</div>
|
||
</div>
|
||
</div>
|
||
<div className="forth-section">
|
||
<div className="content">
|
||
<img src={shidu} alt="" />
|
||
<div>{weatherObj.humidity}%</div>
|
||
</div>
|
||
</div>
|
||
<div className="center-section">
|
||
<div>{timeObj.week}</div>
|
||
<div>
|
||
<span className="month">{timeObj.month}/</span>
|
||
<span className="date">{timeObj.day}</span>
|
||
</div>
|
||
<div>{timeObj.lunar}</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default CenterPanel;
|