forgeplus-react/src/forge/SoftwareFactory/components/Home/centerPanel.jsx

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;