You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
36 lines
1.2 KiB
36 lines
1.2 KiB
<template> |
|
<section style="padding: 4px 12px" class="flex items-center gap-8px"> |
|
<Icon :icon="weatherInfo.icon" :size="32" /> |
|
<section>{{ weatherInfo.dayWeather }}</section> |
|
<section> {{ weatherInfo.nightTemp }}℃ ~ {{ weatherInfo.dayTemp }}℃</section> |
|
<section>{{ weatherInfo.dayWindDir }} {{ weatherInfo.dayWindPower }}级</section> |
|
</section> |
|
</template> |
|
|
|
<script setup lang="ts"> |
|
const weatherInfo: any = ref({}) |
|
const AMap = (window as any).AMap |
|
|
|
const init = () => { |
|
AMap.plugin('AMap.Weather', function () { |
|
const weather = new AMap.Weather() |
|
weather.getForecast('锦州市', (err, data) => { |
|
weatherInfo.value = data.forecasts[0] |
|
weatherInfo.value.icon = setIcon(weatherInfo.value.dayWeather) |
|
|
|
}) |
|
}) |
|
} |
|
|
|
const setIcon = (weather: any) => { |
|
if (['平静', '晴'].includes(weather)) return 'svg-icon:weather-qing' |
|
if (weather.includes('雨')) return 'svg-icon:weather-yu' |
|
if (weather.includes('雪')) return 'svg-icon:weather-xue' |
|
if (['阴天', '多云'].includes(weather)) return 'svg-icon:weather-yin' |
|
if (weather.includes('风')) return 'svg-icon:weather-feng' |
|
return 'svg-icon:weather-yin' |
|
} |
|
init() |
|
</script> |
|
|
|
<style scoped lang="scss"></style>
|
|
|