110 lines
2.9 KiB
Vue
110 lines
2.9 KiB
Vue
<template>
|
|
<div class="weather" v-if="weatherData.adCode.city && weatherData.weather.weather">
|
|
<span>{{ weatherData.adCode.city }} </span>
|
|
<span>{{ weatherData.weather.weather }} </span>
|
|
<span>{{ weatherData.weather.temperature }}℃</span>
|
|
<span class="sm-hidden">
|
|
{{
|
|
weatherData.weather.winddirection?.endsWith("风")
|
|
? weatherData.weather.winddirection
|
|
: weatherData.weather.winddirection + "风"
|
|
}}
|
|
</span>
|
|
<span class="sm-hidden">{{ weatherData.weather.windpower }} 级</span>
|
|
</div>
|
|
<div class="weather" v-else>
|
|
<span>天气数据获取失败</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { getAdcode, getWeather, getOtherWeather } from "@/api";
|
|
import { Error } from "@icon-park/vue-next";
|
|
|
|
// 高德开发者 Key
|
|
const mainKey = import.meta.env.VITE_WEATHER_KEY;
|
|
|
|
// 天气数据
|
|
const weatherData = reactive({
|
|
adCode: {
|
|
city: null, // 城市
|
|
adcode: null, // 城市编码
|
|
},
|
|
weather: {
|
|
weather: null, // 天气现象
|
|
temperature: null, // 实时气温
|
|
winddirection: null, // 风向描述
|
|
windpower: null, // 风力级别
|
|
},
|
|
});
|
|
|
|
// 获取天气数据
|
|
const getWeatherData = () => {
|
|
// 获取地理位置信息
|
|
if (!mainKey) {
|
|
getOtherWeather()
|
|
.then((res) => {
|
|
console.log(res);
|
|
const data = res.result;
|
|
weatherData.adCode = {
|
|
city: data.city.name,
|
|
adcode: data.city.cityId,
|
|
};
|
|
weatherData.weather = {
|
|
weather: data.condition.condition,
|
|
temperature: data.condition.temp,
|
|
winddirection: data.condition.windDir,
|
|
windpower: data.condition.windLevel,
|
|
};
|
|
})
|
|
.catch((err) => {
|
|
console.error("天气信息获取失败:" + err);
|
|
onError("天气信息获取失败");
|
|
});
|
|
} else {
|
|
getAdcode(mainKey)
|
|
.then((res) => {
|
|
weatherData.adCode = {
|
|
city: res.city,
|
|
adcode: res.adcode,
|
|
};
|
|
// 获取天气信息
|
|
getWeather(mainKey, weatherData.adCode.adcode)
|
|
.then((res) => {
|
|
weatherData.weather = {
|
|
weather: res.lives[0].weather,
|
|
temperature: res.lives[0].temperature,
|
|
winddirection: res.lives[0].winddirection,
|
|
windpower: res.lives[0].windpower,
|
|
};
|
|
})
|
|
.catch((err) => {
|
|
console.error("天气信息获取失败:" + err);
|
|
onError("天气信息获取失败");
|
|
});
|
|
})
|
|
.catch((err) => {
|
|
console.error("地理位置获取失败:" + err);
|
|
onError("地理位置获取失败");
|
|
});
|
|
}
|
|
};
|
|
|
|
// 报错信息
|
|
const onError = (message) => {
|
|
ElMessage({
|
|
message,
|
|
icon: h(Error, {
|
|
theme: "filled",
|
|
fill: "#efefef",
|
|
}),
|
|
});
|
|
console.error(message);
|
|
};
|
|
|
|
onMounted(() => {
|
|
// 调用获取天气
|
|
getWeatherData();
|
|
});
|
|
</script>
|