LiteyukiBot-TriM/unused_resource/liteyuki_weather/templates/js/weather_now.js
2024-08-15 21:37:25 +08:00

184 lines
7.0 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/**
* @typedef {Object} Location
* @property {string} city - The city name.
* @property {string} country - The country name.
*
* @typedef {Object} Weather
* @property {number} temperature - The current temperature.
* @property {string} description - The weather description.
*
* @typedef {Object} Data
* @property {Location} location - The location data.
* @property {Weather} weather - The weather data.
*/
/** @type {Data} */
let data = JSON.parse(document.getElementById("data").innerText)
let localData = data["localization"] // 本地化数据
let weatherNow = data["weatherNow"]
let weatherDaily = data["weatherDaily"]
let weatherHourly = data["weatherHourly"]
let aqi = data["aqi"]
let weatherAstronomy = data["weatherAstronomy"]
let is_dev = data["is_dev"]
let attr = data["attr"]
let locationData = data["location"]
// 处理aqi
let aqiValue = 0
if ("aqi" in aqi) {
aqi["aqi"].forEach(
(item) => {
if (item["defaultLocalAqi"]) {
document.getElementById("aqi-data").innerText = "AQI " + item["valueDisplay"] + " " + item["category"]
// 将(255,255,255)这种格式的颜色设置给css
if (is_dev) {
//开发版
document.getElementById("aqi-dot").style.backgroundColor = "rgb(" + item["color"]['red'] + "," + item["color"]['green'] + "," + item["color"]['blue'] + "," + item["color"]['alpha'] + ")"
} else {
//正式版
document.getElementById("aqi-dot").style.backgroundColor = "rgb(" + item["color"] + ")"
}
}
}
)
} else {
document.getElementById("aqi-dot").style.backgroundColor = '#fff'
document.getElementById("aqi-data").innerText = localData['no_aqi']
}
let templates = {
"time": weatherNow["now"]["obsTime"],
"city": locationData["name"],
"adm": locationData["country"] + " " + locationData["adm1"] + " " + locationData["adm2"],
"temperature-now": weatherNow["now"]["temp"] + "°",
"temperature-range": weatherDaily["daily"][0]["tempMin"] + "°/" + weatherDaily["daily"][0]["tempMax"] + "°",
"description": weatherNow["now"]["text"]
}
// 遍历每一个id给其赋值
for (let id in templates) {
document.getElementById(id).innerText = templates[id]
}
let subtemplates = {
"now-windDirect": weatherNow["now"]["windDir"] + " " + weatherNow["now"]["wind360"] + "°",
"now-windVelocity": localData["now-windVelocity"] + " " + weatherNow["now"]["windScale"] + "级 " + weatherNow["now"]["windSpeed"] + "km/h",
"now-humidity": localData["now-humidity"] + " " + weatherNow["now"]["humidity"] + "%",
"now-feelsLike": localData["now-feelsLike"] + " " + weatherNow["now"]["feelsLike"] + "°C",
"now-precip": localData["now-precip"] + " " + weatherNow["now"]["precip"] + "mm",
"now-pressure": localData["now-pressure"] + " " + weatherNow["now"]["pressure"] + "hPa",
"now-vis": localData["now-vis"] + " " + weatherNow["now"]["vis"] + "km",
"now-cloud": localData["now-cloud"] + " " + (weatherNow["now"]["cloud"] == "" ? "无数据" : (weatherNow["now"]["cloud"] + "%")),
"astronomy-sunrise": localData["astronomy-sunrise"] + " " + get_time_hour(weatherAstronomy["sunrise"]),
"astronomy-sunset": localData["astronomy-sunset"] + " " + get_time_hour(weatherAstronomy["sunset"])
}
let subiconMap = {
"now-windDirect": "windDirect",
"now-windVelocity": "windVelocity",
"now-humidity": "humidity",
"now-feelsLike": "feelsLike",
"now-precip": "precip",
"now-pressure": "pressure",
"now-vis": "vis",
"now-cloud": "cloud",
"astronomy-sunrise": "sunrise",
"astronomy-sunset": "sunset"
};
let subtemplate = document.getElementById('sub-info-template').content;
let subcontainer = document.getElementById('sub-info');
Object.keys(subtemplates).forEach(id => {
let subItemDiv = document.importNode(subtemplate, true).querySelector('.sub-item');
subItemDiv.querySelector(`div`).innerText = subtemplates[id];
let iconName = subiconMap[id];
subItemDiv.querySelector(`img`).src = `./img/svg/${iconName}.svg`;
subItemDiv.querySelector(`img`).alt = `SVG ${id}`;
subcontainer.appendChild(subItemDiv);
});
let maxHourlyItem = 8
let percentWidth = 1 / (maxHourlyItem * 1.5) * 100
let hourlyStep = 2 // n小时一个数据
let hourlyCount = 0
let hourlyItemDivTemplate = document.importNode(document.getElementById("hourly-item-template").content, true)
weatherHourly['hourly'].forEach(
(item, index) => {
if (index % hourlyStep !== 0) {
return
}
if (hourlyCount >= maxHourlyItem) {
return
}
let hourlyItemDiv = document.importNode(hourlyItemDivTemplate, true)
hourlyItemDiv.className = "hourly-item"
hourlyItemDiv.querySelector('.hourly-icon').setAttribute("src", `./img/qw_icon/${item["icon"]}.png`)
hourlyItemDiv.querySelector('.hourly-time').innerText = get_time_hour(item["fxTime"])
hourlyItemDiv.querySelector('.hourly-temperature').innerText = " " + item["temp"] + "°"
// 设置最大宽度
hourlyItemDiv.querySelector('.hourly-item').style.maxWidth = percentWidth + "%"
hourlyItemDiv.querySelector('.hourly-icon').style.maxWidth = "100%"
document.getElementById("hours-info").appendChild(hourlyItemDiv)
hourlyCount++
}
)
let maxDailyItem = 7
// 第一和第二天用today和tomorrow后面用星期X英文小写
let daysStandard = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday']
let todayDay = new Date().getDay()
let days = [localData['today'], localData['tomorrow']]
for (let i = 0; i < 5; i++) {
days.push(localData[daysStandard[(todayDay + 2 + i) % 7]])
}
let dailyItemDivTemplate = document.importNode(document.getElementById("daily-item-template").content, true)
weatherDaily['daily'].forEach(
(item, index) => {
if (index >= maxDailyItem) {
return
}
let today = days[index]
if (index >= 2) {
today += `(${item["fxDate"].split("-")[1]}.${item["fxDate"].split("-")[2]})`
}
let dailyItemDiv = document.importNode(dailyItemDivTemplate, true)
dailyItemDiv.querySelector('.icon-day').setAttribute("src", `./img/qw_icon/${item["iconDay"]}.png`)
dailyItemDiv.querySelector('.icon-night').setAttribute("src", `./img/qw_icon/${item["iconNight"]}.png`)
dailyItemDiv.querySelector('.daily-day').innerText = today
dailyItemDiv.querySelector('.daily-weather').innerText = item["textDay"]
dailyItemDiv.querySelector('.daily-temperature').innerText = item["tempMin"] + "°~" + item["tempMax"] + "°"
document.getElementById('days-info').appendChild(dailyItemDiv)
}
)
function get_time_hour(fxTime) {
// fxTime 2024-05-03T02:00+/-08:00'
fxTime = fxTime.replace("-", "+")
return fxTime.split("T")[1].split("+")[0]
}
let attrinfo = document.getElementById('attribution-info');
attrinfo.innerText = is_dev ? "Weather Service Drived by QWeather" : (attr ? attr : "Weather Service Drived by QWeather");