|
|
|
@ -4,37 +4,84 @@ |
|
|
|
<div class="board"> |
|
|
|
<div class="showRoad"> |
|
|
|
<div class="weaterIcon"> |
|
|
|
<img src="./assets/weather.png" /> |
|
|
|
<!-- <img src="./assets/weather.png" /> --> |
|
|
|
<div> |
|
|
|
{{ weaterType }} |
|
|
|
{{ cityWeather.text ? cityWeather.text : "-" }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="weaterNum"> |
|
|
|
<div class="num">{{ weaterNum }}°</div> |
|
|
|
<div class="num"> |
|
|
|
{{ cityWeather.temp ? cityWeather.temp : "-" }}° |
|
|
|
</div> |
|
|
|
<div class="maxMin"> |
|
|
|
{{ weaterMaxMin }} |
|
|
|
{{ cityWeather.windDir ? cityWeather.windDir : "-" |
|
|
|
}}{{ cityWeather.windScale ? cityWeather.windScale : "-" }}级 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="windType"> |
|
|
|
<!-- <div class="windType"> |
|
|
|
<div class="Warnings">{{ windWarnings }}</div> |
|
|
|
<div class="windTypeStr"> |
|
|
|
{{ windType }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
<div class="line"></div> |
|
|
|
<div class="cityType"> |
|
|
|
<img src="./assets/cityPosition.png" /> |
|
|
|
<div class="cityText"> |
|
|
|
{{ city }} |
|
|
|
<el-select |
|
|
|
v-model="city" |
|
|
|
placeholder="请选择" |
|
|
|
@change="handleChange" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in regionList" |
|
|
|
:key="item.regionName" |
|
|
|
:label="item.regionName" |
|
|
|
:value="item.regionName" |
|
|
|
> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="temperature"> |
|
|
|
<div class="temperItem" v-for="(it, index) in temperatures"> |
|
|
|
<div class="temperItem"> |
|
|
|
<div class="text"> |
|
|
|
<img src="./assets/polygon.png" /><span>体感温度</span> |
|
|
|
</div> |
|
|
|
<div class="val"> |
|
|
|
{{ cityWeather.feelsLike ? cityWeather.feelsLike : "-" }}℃ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="temperItem"> |
|
|
|
<div class="text"> |
|
|
|
<img src="./assets/polygon.png" /><span>湿度</span> |
|
|
|
</div> |
|
|
|
<div class="val"> |
|
|
|
{{ cityWeather.humidity ? cityWeather.humidity : "-" }}% |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="temperItem"> |
|
|
|
<div class="text"> |
|
|
|
<img src="./assets/polygon.png" /><span>{{ it.text }}</span> |
|
|
|
<img src="./assets/polygon.png" /><span>降雨量</span> |
|
|
|
</div> |
|
|
|
<div class="val"> |
|
|
|
{{ it.value }} |
|
|
|
{{ cityWeather.precip ? cityWeather.precip : "-" }}mm |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="temperItem"> |
|
|
|
<div class="text"> |
|
|
|
<img src="./assets/polygon.png" /><span>能见度</span> |
|
|
|
</div> |
|
|
|
<div class="val"> |
|
|
|
{{ cityWeather.vis ? cityWeather.vis : "-" }}km |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="temperItem"> |
|
|
|
<div class="text"> |
|
|
|
<img src="./assets/polygon.png" /><span>压力</span> |
|
|
|
</div> |
|
|
|
<div class="val"> |
|
|
|
{{ cityWeather.pressure ? cityWeather.pressure : "-" }}hPa |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -45,6 +92,10 @@ |
|
|
|
|
|
|
|
<script> |
|
|
|
import WgtTitle from "../../../widgets/title"; |
|
|
|
import { |
|
|
|
getRegionList, |
|
|
|
getWeatherFacts, |
|
|
|
} from "@/api/perception/meteorologyCheck"; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: "MonthStatistics", |
|
|
|
@ -53,36 +104,35 @@ export default { |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
weaterNum: "21", |
|
|
|
weaterMaxMin: "12 / 23°", |
|
|
|
weaterType: "睛转小雨", |
|
|
|
windWarnings: "大风预警", |
|
|
|
windType: "东北风三级", |
|
|
|
city: "济南", |
|
|
|
temperatures: [ |
|
|
|
{ |
|
|
|
text: "体感", |
|
|
|
value: "-14℃", |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "PM2.5", |
|
|
|
value: "90", |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "湿度", |
|
|
|
value: "94%", |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "紫外线", |
|
|
|
value: "3", |
|
|
|
}, |
|
|
|
], |
|
|
|
regionList: [], |
|
|
|
city: "长清区", |
|
|
|
cityWeather: {}, |
|
|
|
}; |
|
|
|
}, |
|
|
|
|
|
|
|
created() {}, |
|
|
|
methods: {}, |
|
|
|
methods: { |
|
|
|
initData() { |
|
|
|
getRegionList().then((res) => { |
|
|
|
this.regionList = res.rows; |
|
|
|
this.handleChange(); |
|
|
|
}); |
|
|
|
}, |
|
|
|
handleChange() { |
|
|
|
getWeatherFacts().then((response) => { |
|
|
|
console.log("response", response.data); |
|
|
|
for (let key in response.data) { |
|
|
|
debugger; |
|
|
|
if (response.data[key].name == this.city) { |
|
|
|
this.cityWeather = response.data[key]; |
|
|
|
console.log("this.cityWeather", this.cityWeather); |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.initData(); |
|
|
|
setTimeout(() => { |
|
|
|
this.$nextTick(() => {}); |
|
|
|
}); |
|
|
|
@ -139,7 +189,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
> div { |
|
|
|
font-size: 12px; |
|
|
|
font-size: 22px; |
|
|
|
font-family: PingFang SC, PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
color: #ffffff; |
|
|
|
@ -222,11 +272,11 @@ export default { |
|
|
|
|
|
|
|
.cityType { |
|
|
|
display: inline-flex; |
|
|
|
width: 60px; |
|
|
|
width: 100px; |
|
|
|
height: 80px; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
margin-right: 27px; |
|
|
|
margin-right: 40px; |
|
|
|
|
|
|
|
img { |
|
|
|
width: 38px; |
|
|
|
@ -245,7 +295,7 @@ export default { |
|
|
|
.temperature { |
|
|
|
display: inline-flex; |
|
|
|
flex-direction: row; |
|
|
|
width: 349px; |
|
|
|
width: 430px; |
|
|
|
height: 66px; |
|
|
|
background: transparent; |
|
|
|
opacity: 1; |
|
|
|
@ -257,6 +307,9 @@ export default { |
|
|
|
) |
|
|
|
1 1; |
|
|
|
border-radius: 8px; |
|
|
|
img { |
|
|
|
width: 7px; |
|
|
|
} |
|
|
|
|
|
|
|
> div { |
|
|
|
display: inline-flex; |
|
|
|
@ -272,7 +325,7 @@ export default { |
|
|
|
font-weight: 500; |
|
|
|
> span { |
|
|
|
opacity: 0.5; |
|
|
|
margin-left: 10px; |
|
|
|
margin-left: 5px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -282,16 +335,15 @@ export default { |
|
|
|
font-family: PingFang SC, PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
color: #ffffff; |
|
|
|
position: relative; |
|
|
|
left: 10px; |
|
|
|
// position: relative; |
|
|
|
// left: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.charts { |
|
|
|
height: 180px; |
|
|
|
width: 100%; |
|
|
|
::v-deep input.el-input__inner { |
|
|
|
font-size: 12px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
