forked from nutcore-net/PZH-BusService
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
191 lines (170 loc) · 6.91 KB
/
index.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
<!--
花城智慧公交 ver 1.0
使用攀枝花公交公司提供的API
By DTSDAO
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>花城智慧公交</title>
<link rel="stylesheet" href="//cdnjs.loli.net/ajax/libs/mdui/0.4.2/css/mdui.min.css">
<style>
.bus-count{
color: white;
border-radius:12px;
background-color: rgba(0,0,0,.54);
}
</style>
</head>
<body class="mdui-appbar-with-toolbar mdui-appbar-with-tab mdui-theme-primary-indigo mdui-theme-accent-pink">
<div class="mdui-appbar mdui-appbar-fixed">
<div class="mdui-toolbar mdui-color-theme">
<a class="mdui-typo-title">花城智慧公交</a>
</div>
<div class="mdui-tab mdui-color-theme" mdui-tab>
<a href="#lin" class="mdui-ripple mdui-ripple-white" id="goto-lin">选择线路</a>
<a href="#dir" class="mdui-ripple mdui-ripple-white" id="goto-dir">选择上下行</a>
<a href="#sta" class="mdui-ripple mdui-ripple-white" id="goto-sta">查看站点</a>
</div>
</div>
<div class="mdui-container-fluid">
<div id="lin">
<ul class="mdui-list" id="lin-select">
<li class="mdui-list-item mdui-list-item-active mdui-ripple">无数据</li>
</ul>
<button class="mdui-fab mdui-fab-fixed mdui-color-theme-accent mdui-ripple" onclick="loadLin()"><i class="mdui-icon material-icons">refresh</i></button>
</div>
<div id="dir">
<ul class="mdui-list" id="dir-select">
<li class="mdui-list-item mdui-list-item-active mdui-ripple dir-element" id="dir-up">
<div class="mdui-list-item-content">
<div class="mdui-list-item-title mdui-list-item-one-line" id="dir-up-name">上行</div>
<div class="mdui-list-item-text mdui-list-item-two-line" id="dir-up-time">未知</div>
</div>
</li>
<li class="mdui-list-item mdui-ripple dir-element" id="dir-down">
<div class="mdui-list-item-content">
<div class="mdui-list-item-title mdui-list-item-one-line" id="dir-down-name">下行</div>
<div class="mdui-list-item-text mdui-list-item-two-line" id="dir-down-time">未知</div>
</div>
</li>
</ul>
<button class="mdui-fab mdui-fab-fixed mdui-color-theme-accent mdui-ripple" onclick="loadDir()"><i class="mdui-icon material-icons">refresh</i></button>
</div>
<div id="sta">
<ul class="mdui-list" id="sta-list">
<li class="mdui-list-item mdui-list-item-active mdui-ripple">无数据</li>
</ul>
<button class="mdui-fab mdui-fab-fixed mdui-color-theme-accent mdui-ripple" onclick="loadSta()"><i class="mdui-icon material-icons">refresh</i></button>
</div>
</div>
<script src="//cdnjs.loli.net/ajax/libs/mdui/0.4.2/js/mdui.min.js"></script>
<script>
var $$ = mdui.JQ,
Assets = {
lineUrl: 'http://{ADDR}:{PORT}/BusService/Require_AllRouteData/',
dirUrl: 'http://{ADDR}:{PORT}/BusService/Require_RouteStatData/',
staUrl: 'http://{ADDR}:{PORT}/BusService/Query_ByRouteID/',
linDir: 0
};
$$(document).ajaxError(function (event, xhr, options) {
mdui.alert('数据加载失败，请稍后重试');
});
$$(document).ready(loadLin);
function getID(str) {return str.slice(4,str.length);}
function loadLin(){
$$.ajax({
method: 'GET',
url: Assets.lineUrl,
success: function (data) {
//Prepare Data
Assets.lineData=JSON.parse(data);
$$('#lin-select').empty();
Assets.sLine=null;
$$.each(Assets.lineData.RouteList, function(i,busLine){
$$('#lin-select').append('<li class="mdui-list-item mdui-ripple lin-element" id="lin-'+busLine.RouteID+'">'+busLine.RouteName+'</li>');
});
//Bind Events
$$('.lin-element').on('click', function (e) {
//Style Setup
if(Assets.sLine){
$$('#'+Assets.sLine).removeClass('mdui-list-item-active');
}
Assets.sLine = this.id;
$$(this).addClass('mdui-list-item-active');
//Load Data
loadDir();
//Goto Direction
$$('#goto-dir')[0].click();
});
}
});
}
function loadDir()
{
$$.ajax({
method: 'GET',
url: Assets.dirUrl,
data: {
RouteID: getID(Assets.sLine)
},
success: function (data) {
//Prepare Data
data=JSON.parse(data);
Assets.dirData = data[0].SegmentList;
//Change Text
$$('#dir-up-name').text('去往 '+Assets.dirData[0].SegmentName);
$$('#dir-up-time').text(Assets.dirData[0].FirtLastShiftInfo);
if(Assets.dirData.length==2)
{
$$('#dir-down-name').text('去往 '+Assets.dirData[1].SegmentName);
$$('#dir-down-time').text(Assets.dirData[1].FirtLastShiftInfo);
}
else
{
$$('#dir-down-name').text('不存在另一个方向');
$$('#dir-down-time').text('未知');
}
}
});
}
$$('.dir-element').on('click', function (e) {
//Style Setup
$$(Assets.linDir==0?'#dir-up':'#dir-down').removeClass('mdui-list-item-active');
Assets.linDir = this.id=='dir-up'?0:1;
$$(this).addClass('mdui-list-item-active');
//Load Data
$$('#sta-list').empty();
$$.each(Assets.dirData[Assets.linDir].StationList, function(i, station){
$$('#sta-list').append('<li class="mdui-list-item mdui-ripple sta-element" id="sta-'+station.StationID+'"><div class="mdui-list-item-content">'+station.StationName+'</div></li>');
})
loadSta();
//Goto Station
$$('#goto-sta')[0].click();
});
function loadSta(){
$$.ajax({
method: 'GET',
url: Assets.staUrl,
data: {
RouteID: getID(Assets.sLine),
SegmentID: Assets.dirData[Assets.linDir].SegmentID
},
success: function (data) {
//Prepare Data
Assets.staData=JSON.parse(data);
$$('.bus-count').remove();
$$.each(Assets.staData.RStaRealTInfoList, function(i, busInfo){
if($$('#sta-'+busInfo.StationID).children().length == 1){
$$('#sta-'+busInfo.StationID).append('<i class="mdui-list-item-icon mdui-icon bus-count">0</i>');
}
$$('#sta-'+busInfo.StationID).children('.bus-count')[0].innerHTML = parseInt($$('#sta-'+busInfo.StationID).children('.bus-count')[0].innerHTML)+1;
});
}
});
}
</script>
</body>
</html>