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.
|
|
|
|
<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>
|
