-
Notifications
You must be signed in to change notification settings - Fork 11
/
airquality.html
79 lines (75 loc) · 2.16 KB
/
airquality.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html>
<head>
<title>空气质量详情</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div class="container" id="app">
<div class="text-center">
<h2>空气质量详情</h2>
<div class="form-inline row">
<input type="text" class="form-control" placeholder="城市名" id="input-location" v-model="inputlocation"/>
<button class="btn btn-primary" @click="loadAir()">搜 索</button>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>监测站</th>
<th>空气质量</th>
<th>空气质量指数</th>
<th>PM2.5</th>
<th>PM10</th>
<th>二氧化氮</th>
<th>二氧化硫</th>
<th>一氧化碳</th>
<th>臭氧</th>
<th>发布时间</th>
</tr>
</thead>
<tbody>
<tr v-for="data in datas">
<td>{{data.air_sta}}</td>
<td>{{data.qlty}}</td>
<td>{{data.aqi}}</td>
<td>{{data.pm25}}</td>
<td>{{data.pm10}}</td>
<td>{{data.no2}}</td>
<td>{{data.so2}}</td>
<td>{{data.co}}</td>
<td>{{data.o3}}</td>
<td>{{data.pub_time}}</td>
</tr>
</tbody>
</table>
</div>
<script>
var vm=new Vue({
el: '#app',
data: {
inputlocation:'',
datas:[]
},
methods: {
loadAir() {
axios.get('https://free-api.heweather.net/s6/air/now',{
params:{
location:this.inputlocation,
key:'89d49e32a26d4067822c9ed361231e2d'
}
})
.then((response)=> {
this.datas=response.data.HeWeather6[0].air_now_station;
})
.catch(function (error) {
console.log(error);
});
}
}
})
</script>
</body>
</html>