-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathNMC.html
264 lines (243 loc) · 9.26 KB
/
NMC.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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/mdui.min.css" />
<link rel="stylesheet" href="./mdui.css" />
</head>
<body class="mdui-appbar-with-toolbar mdui-appbar-with-tab mdui-theme-accent-pink">
<div id="app">
<!-- mdui appbar+tabbar -->
<div class="mdui-appbar mdui-appbar-fixed mdui-color-white mdui-appbar-inset">
<div class="mdui-toolbar">
<a href="javascript:;" class="mdui-btn mdui-btn-icon" mdui-menu="{target: '#left-drawer'}">
<i class="mdui-icon material-icons">menu</i>
</a>
<a href="javascript:;" class="mdui-typo-headline mdui-hidden-xs">B天气</a>
<a href="javascript:;" class="mdui-typo-title">中央气象台</a>
<div class="mdui-toolbar-spacer"></div>
<div class="mdui-chip" :style="{flexShrink:0}">
<span class="mdui-chip-title" :class="{needUpdate:refreshTime.needUpdate}"
id="refreshDisplay">{{refreshTime.display}}</span>
</div>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons" onclick="location.reload()">refresh</i>
</a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon" mdui-menu="{target: '#exmenu'}">
<i class="mdui-icon material-icons">more_vert</i>
</a>
<ul class="mdui-menu" id="exmenu">
<li class="mdui-divider"></li>
<li class="mdui-menu-item" mdui-dialog="{target: '#settingsDialog'}">
<a href="javascript:;" class="mdui-ripple">
<i class=" mdui-menu-item-icon mdui-icon material-icons">settings</i>
设置
</a>
</li>
</ul>
<ul class="mdui-menu" id="left-drawer">
<li class="mdui-menu-item mdui-ripple">
<a class="mdui-menu-item-content" href="./BMS.html">
<i class="mdui-menu-item-icon mdui-icon material-icons">move_to_inbox</i>
北京气象台
</a>
</li>
<li class="mdui-menu-item mdui-ripple mdui-list-item-active">
<a class="mdui-menu-item-content" href="./NMC.html">
<i class="mdui-menu-item-icon mdui-icon material-icons">move_to_inbox</i>
中央气象台
</a>
</li>
<li class="mdui-menu-item mdui-ripple">
<a class="mdui-menu-item-content" href="./CMA.html">
<i class="mdui-menu-item-icon mdui-icon material-icons">move_to_inbox</i>
中国气象局
</a>
</li>
<li class="mdui-menu-item mdui-ripple">
<a class="mdui-menu-item-content" href="./CMDC.html">
<i class="mdui-menu-item-icon mdui-icon material-icons">move_to_inbox</i>
国家气象信息中心
</a>
</li>
<li class="mdui-menu-item mdui-ripple">
<a class="mdui-menu-item-content" href="./BM.html">
<i class="mdui-menu-item-icon mdui-icon material-icons">move_to_inbox</i>
北京气象
</a>
</li>
<li class="mdui-menu-item mdui-ripple">
<a class="mdui-menu-item-content" href="./weatherol.html">
<i class="mdui-menu-item-icon mdui-icon material-icons">move_to_inbox</i>
北京气象在线
</a>
</li>
<li class="mdui-divider"></li>
<li class="mdui-menu-item mdui-ripple">
<a class="mdui-menu-item-content" href="./12379.html">
<i class="mdui-menu-item-icon mdui-icon material-icons">move_to_inbox</i>
国家预警信息发布中心
</a>
</li>
</ul>
</div>
<div class="mdui-tab mdui-tab-centered" mdui-tab>
<a href="#tab1" class="mdui-ripple">当前</a>
<a href="#tab2" class="mdui-ripple">雷达图</a>
</div>
</div>
<div class="mdui-progress" v-if="isLoading">
<div class="mdui-progress-indeterminate"></div>
</div>
<!-- sidebar -->
<!-- 设置 -->
<div class="mdui-dialog" id="settingsDialog">
<div class="mdui-dialog-content">
<div class="mdui-dialog-title">设置</div>自动深色模式
<label class="mdui-switch mdui-float-right">
<input type="checkbox" v-model="isAutoDark" onclick="app.autoDark()" />
<i class="mdui-switch-icon"></i>
</label>
</div>
<div class="mdui-dialog-actions">
<button class="mdui-btn mdui-ripple" mdui-dialog-confirm>ok</button>
</div>
</div>
<div id="tab1" class="mdui-p-a-2">
<h2>当前天气(发布时间{{current.publish_time}}):</h2>
<ul>
<li>天气：{{current.weather.info}}</li>
<li>气温：{{current.weather.temperature}}℃</li>
<li>风力：{{current.wind.power}}</li>
<li>风速：{{current.wind.speed}}m/s</li>
<li>风向：{{current.wind.direct}} {{current.wind.degree}}°</li>
<li>气压：{{current.weather.airpressure}}hPa</li>
<li>相对湿度：{{current.weather.humidity}}%</li>
<li>AQI：{{currentAQI.aqi}} {{currentAQI.text}}</li>
</ul>
</div>
<div id="tab2" class="mdui-p-a-2" style="max-width: 800px;">
<div class="mdui-card">
<div class="mdui-card-media">
<img class="mdui-img-fluid" :src="radar.img" />
<div class="mdui-card-media-covered">
<div class="mdui-card-primary">
<div class="mdui-card-primary-title">华北雷达图</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/[email protected]/dist/js/mdui.min.js"></script>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--
"warn": {
"alert": "2023年07月27日18时北京市气象台发布暴雨蓝色预警信号",
"pic": "http://image.nmc.cn/assets/img/alarm/p0002004.png",
"province": "北京市",
"city": "9999",
"url": "/publish/alarm/11000041600000_20230727183640.html",
"issuecontent": "市防汛办提示您，市气象台2023年7月27日18时25分发布暴雨蓝色预警信号：预计，当前至27日22时，房山、门头沟、昌平东部、怀柔、密云、平谷、顺义、海淀、丰台、朝阳、石景山、西城、东城、大兴、通州等地的部分地区将出现小时降雨量30毫米以上的短时强降水，山区及浅山区出现强降水诱发的中小河流洪水、山洪、地质灾害等次生灾害风险较大，城市低洼地区容易出现积水，请注意防范。",
"fmeans": "1.政府及相关部门按照职责做好防暴雨准备工作；2.学校、幼儿园采取适当措施，保证学生和幼儿安全； 3.驾驶人员应当注意道路积水和交通阻塞，确保安全；4.检查城市、农田、鱼塘排水系统，做好排涝准备.",
"signaltype": "暴雨",
"signallevel": "蓝色",
"pic2": "p0002004.png"
}
-->
<script>
const app = new Vue({
el: "#app",
data: {
current: {
weather: {},
wind: {},
},
radar: {},
currentAQI: "",
refreshTime: {
display: "刚刚刷新",
min: 0,
secound: 0,
needUpdate: false,
startTime: 0,
},
isLoading: true,
isAutoDark: false,
warningList: [],
updateTime: ""
},
async created() {
if (localStorage.isAutoDark == "true") {
this.isAutoDark = true;
document.body.classList.add("mdui-theme-layout-auto");
document.querySelector(".mdui-appbar").classList.add("autoDarkAppBar");
}
const forecastRes = await axios.get("http://www.nmc.cn/rest/weather?stationid=54511");
console.log("天气预报：", forecastRes);
let forecastData = forecastRes.data.data;
//当前天气
this.current = forecastData.real;
this.currentAQI = forecastData.air;
console.log("当前天气：", this.current.weather);
//雷达图
let radarData = forecastData.radar;
console.log("雷达图：", radarData);
this.radar = {
img: "//image.nmc.cn" + radarData.image,
}
this.startTime = new Date().getTime();
document.addEventListener("visibilitychange", function () {
console.log(document.visibilityState, performance.now());
if (document.visibilityState == "visible") {
app.refreshTimeChange();
}
});
setInterval(() => {
this.refreshTimeChange();
}, 10000);
this.$nextTick(function () {
this.isLoading = false;
})
},
methods: {
refreshTimeChange() {
let timeTemp = (new Date().getTime() - this.startTime) / 1000;
console.log("11", timeTemp);
if (timeTemp > 10) {
app.refreshTime.display = "T+";
if (timeTemp / 60 > 30) {
app.refreshTime.display = "已过时"
app.refreshTime.needUpdate = true;
} else {
if (Math.floor(timeTemp / 60) > 0) {
app.refreshTime.display += Math.floor(timeTemp / 60) + "m";
}
app.refreshTime.display += Math.floor(timeTemp % 60) + "s";
}
}
},
autoDark() {
// setTimeout(() => {
// this.$nextTick(function () {
if (!this.isAutoDark) {
document.body.classList.add("mdui-theme-layout-auto");
document.querySelector(".mdui-appbar").classList.add("autoDarkAppBar");
localStorage.isAutoDark = true;
} else {
console.log(111);
document.body.classList.remove("mdui-theme-layout-auto");
document.querySelector(".mdui-appbar").classList.remove("autoDarkAppBar");
localStorage.isAutoDark = false;
}
// })
// }, 1000);
},
},
});
</script>
</html>