JT-CIM-ZHNY/src/views/Map3d/components/weather.vue

<template>
	<div class="box">
		<p class="boxCity">{{weatcherData.city}}</p>
		<p class="boxWeather">{{weatcherData.weather}}<br>
		<label class="boxTemperature">
			{{weatcherData.humidity}}°
		</label>
		</p>


		<!--  <p class="boxWind">{{weatcherData.win}}{{weatcherData.win_speed}}</p> -->

	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		data() {
			return {
				weatcherData: {}
			}
		},
		mounted() {
			this.getWeather();
			this.timer = setInterval(() => {
				this.getWeather();
			}, 1000 * 60 * 60) //每小时调用一次	
		},
		methods: {
			getWeather() { // 第三方天气api接口
				axios.get('https://restapi.amap.com/v3/weather/weatherInfo', {
					params: {
						key: "3e7e20b74481bb09b90dade55acc35c3",
						city: '370100',
						output: 'JSON',
						// version: 'v91'
					}
				}).then(res => {
					
					if (res.data.lives) {
						this.weatcherData = res.data.lives[0];
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style scoped>
	.box {
		display: flex;
		align-items: center;
		color: #fff;
		margin-right: 20rem;
	}

	.boxTemperature {
		font-size: 18rem;
	}

	.boxWeather {
		font-size: 14rem;
		margin: 0 0 0 15rem;
	}

	.boxWind {
		margin: 0 15rem 0 8rem;
		font-size: 14rem;

	}

	.boxCity {
		font-size: 16rem;
	}
</style>