<template>
|
<div class="weather-wrapper">
|
<el-popover
|
placement="bottom-start"
|
trigger="hover"
|
popper-class="weather-popover">
|
<list-box :address="weather.address" :list="list"></list-box>
|
<div class="weather-body" slot="reference" v-show="show">
|
<span class="weather-item weather-address">{{ weather.address }}</span>
|
<img
|
class="weather-image"
|
v-for="(item, index) in images" :key="index"
|
:src="item" />
|
<div class="weather-details">
|
<span class="weather-item weather-temperature">{{ weather.temperature }}</span>
|
<span class="weather-item weather-style">{{weather.style}}</span>
|
</div>
|
<div class="weather-details">
|
<span class="weather-item weather-wind-level">{{ weather.windLevel }}</span>
|
<span class="weather-item weather-wind">{{ weather.wind }}</span>
|
</div>
|
</div>
|
</el-popover>
|
</div>
|
</template>
|
|
<script>
|
import weathers from "@/assets/images/weathers";
|
import ListBox from "./listBox";
|
import BMap from "BMap";
|
import BMapTools from "@/assets/js/tools/BMapTools";
|
|
export default {
|
name: "weatherComponent",
|
props: {
|
lat: {
|
type: [String, Number],
|
default: 0,
|
},
|
lng: {
|
type: [String, Number],
|
default: 0,
|
},
|
},
|
components: {
|
ListBox
|
},
|
bMapTools: new BMapTools(BMap),
|
data() {
|
return {
|
show: false,
|
province: "",
|
city: "",
|
district: "",
|
weather: {
|
address: '',
|
temperature: '',
|
style: '',
|
wind: '',
|
windLevel: ''
|
},
|
list: [],
|
}
|
},
|
watch: {
|
lat() {
|
this.getLocation();
|
}
|
},
|
methods: {
|
getLocation() {
|
let self = this;
|
let bMapTools = this.$options.bMapTools;
|
let lng = this.lng;
|
let lat = this.lat;
|
this.show = false;
|
if(lng != 0 && lat != 0) {
|
let pt = new BMap.Point(lng, lat);
|
bMapTools.geoc.getLocation(pt, function(rs) {
|
let address = rs.addressComponents;
|
let province = address.province;
|
let city = address.city;
|
let district = address.district;
|
self.province = province ? province.substring(0, province.length - 1) : "";
|
self.city = city ? city.substring(0, city.length - 1) : "";
|
self.district = district ? district.substring(0, district.length - 1) : "";
|
self.searchWeather();
|
});
|
}
|
},
|
searchWeather() {
|
let address = {
|
province: this.province,
|
city: this.city,
|
district: this.district,
|
};
|
if(address.province) {
|
this.$apis.address.getWeather(address).then(res=>{
|
let rs = JSON.parse(res.data.result);
|
if(rs.code == 1) {
|
this.show = true;
|
let data = rs.data;
|
this.weather.address = address.city;
|
this.weather.temperature = data.temperature+"℃";
|
this.weather.style = data.info;
|
this.weather.wind = data.direct;
|
this.weather.windLevel = data.power;
|
let list = rs.data2.map(item=>{
|
let tmp = {
|
date: new Date(item.date).format("yyyy-MM-dd"),
|
temperature: item.temperatureLow+"~"+item.temperatureHigh+"℃",
|
weather: item.infoNight
|
};
|
return tmp
|
});
|
this.list = list.filter((item, key) => {
|
return key != 0;
|
});
|
}else {
|
console.log(rs.msg);
|
}
|
}).catch(error=>{
|
console.log(error);
|
});
|
}
|
}
|
},
|
computed: {
|
address() {
|
return this.province+"-"+this.city+"-"+this.district;
|
},
|
images() {
|
let style = this.weather.style;
|
let list = [];
|
for(let i=0; i<weathers.length; i++) {
|
let item = weathers[i];
|
if(item.weather == style) {
|
list = item.images;
|
break;
|
}
|
}
|
return list;
|
}
|
},
|
mounted() {
|
this.getLocation();
|
},
|
beforeDestroy() {
|
|
}
|
}
|
</script>
|
|
<style scoped>
|
.weather-wrapper {
|
display: inline-block;
|
cursor: pointer;
|
}
|
.weather-item {
|
font-size: 14px;
|
}
|
.weather-details {
|
display: inline-block;
|
margin-left: 8px;
|
}
|
.weather-image {
|
width: 24px;
|
margin-left: 8px;
|
}
|
</style>
|
