forked from BusLineDesigner/buslinedesigner.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·202 lines (202 loc) · 16.2 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
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<html lang="zh" class="h-100">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="description" content="Bus Line Designer,设计公交线路的小工具" />
<meta name="keywords" content="公交,公交线路,自制,设计" />
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
<meta name="baidu-site-verification" content="codeva-nPW0jG0imx" />
<title>Bus Line Designer</title>
<link rel="icon" href="assets/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="assets/bootstrap.min.css" />
<link rel="stylesheet" href="assets/style.css" />
<link rel="manifest" href="manifest.json" />
<script src="tools/jquery.min.js"></script>
<script src="tools/bootstrap.min.js"></script>
<script src="tools/vue.global.prod.js"></script>
<script src="tools/reactivity.global.prod.js"></script>
<script src="tools/crc32c.js"></script>
<script src="tools/deepclone.js"></script>
<script src="tools/utils.js"></script>
<script src="tools/clipboard.min.js"></script>
<script src="tools/jscolor.min.js"></script>
<script src="tools/html2canvas.min.js"></script>
<script src="tools/xlsx.full.min.js"></script>
<script src="amapConfig.js"></script>
<script src="https://webapi.amap.com/loader.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</symbol>
<symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</symbol>
<symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
</symbol>
</svg>
</head>
<body class="d-flex flex-column h-100" style="overflow-y:auto; overflow-x:hidden; height: 100%;">
<div id="app" class="d-flex flex-column h-100">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="javascript: void(0)">Bus Line Designer</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-content">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-content">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="javascript: void(0)" data-bs-toggle="dropdown">文件</a>
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item" href="javascript: void(0)" @click="newLine()">新建空白线路</a></li>
<li><a class="dropdown-item" href="javascript: void(0)" @click="downloadLine()">保存线路为文件</a></li>
<li><a class="dropdown-item" href="javascript: void(0)" id="copyLine" :data-clipboard-text="JSON.stringify(lineFile)">保存线路至剪贴板</a></li>
<li><a class="dropdown-item" href="javascript: void(0)" @click="uploadLine()">从文件读取线路</a></li>
<li><a class="dropdown-item" href="javascript: void(0)" @click="pasteLine()">从剪贴板读取线路</a></li>
<li><a class="dropdown-item" href="javascript: void(0)" @click="loadLineFromReality()">读取现存线路</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="javascript: void(0)" :class="{ 'disabled': (!undoable || settings.general.enableUndoFunc.current != '1') }" v-text="settings.general.enableUndoFunc.current == '1' ? '撤销上一步操作' : '撤销 (已禁用)'" @click="undo()"></a></li>
</ul>
</li>
<li v-for="tab in tabs" class="nav-item"><a class="nav-link" :class="{ 'active': currentTab == tab.id }" v-text="tab.name" @click="setTab(tab.id)" href="#"></a></li>
</ul>
</div>
</div>
</nav>
<main role="main" class="flex-shrink-0 pt-3 mx-3">
<div class="modal fade" id="modalConfirm" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title">{{ modalConfirm.title }}</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<span>{{ modalConfirm.content }}</span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">取消</button>
<button type="button" id="modalConfirmOK" class="btn btn-primary" data-bs-dismiss="modal">确定</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modalLineSearch" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title">读取线路</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="col-form-label">线路名称:</label>
<input type="text" class="form-control" autocomplete="off" placeholder="填写线路完整名称" v-model.trim="modalLineSearch.lineName" />
</div>
<div class="mb-3" v-if="modalLineSearch.dataSource == 'AMap'">
<label class="col-form-label">所在城市:(选填)</label>
<input type="text" class="form-control" autocomplete="off" placeholder='支持城市名称、行政区划代码和电话区号' v-model.trim="modalLineSearch.city" />
</div>
<div class="mb-3" v-if="modalLineSearch.dataSource == 'chelaile' && !Object.getOwnPropertyNames(regions).length">
<label class="col-form-label">所在省份:</label>
<select class="form-select" disabled>
<option>{{ modalLineSearch.CitiesLoadingPrompt }}</option>
</select>
</div>
<div class="mb-3" v-if="modalLineSearch.dataSource == 'chelaile' && Object.getOwnPropertyNames(regions).length">
<label class="col-form-label">所在省份:</label>
<select class="form-select" v-model="modalLineSearch.chelaile.province">
<option v-for="province in regions" :value="province.name">{{ province.name }}</option>
</select>
</div>
<div class="mb-3" v-if="modalLineSearch.dataSource == 'chelaile' && modalLineSearch.chelaile.province != ''">
<label class="col-form-label">所在城市:</label>
<select class="form-select" v-model="modalLineSearch.chelaile.city">
<option v-for="(city, index) in regions[modalLineSearch.chelaile.province].cities" :value="city">{{ city.name }}</option>
</select>
</div>
<div class="mb-3">
<label class="col-form-label">数据源:</label>
<select class="form-select" v-model="modalLineSearch.dataSource">
<option selected value="AMap">高德地图</option>
<option value="chelaile" disabled>车来了 (暂不支持)</option>
<option disabled value="BMap">未来可能会添加更多数据源…</option>
<option disabled value="CMap">如有相关数据源推荐,可以联系 BobLiu</option>
<option disabled value="DMap">不过腾讯地图和百度地图估计没希望了</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">取消</button>
<button type="button" id="modalLineSearchOKAdvanced" class="btn btn-outline-primary" @click="loadLineFromRealitySearch(true)" data-bs-dismiss="modal">高级搜索</button>
<button type="button" id="modalLineSearchOK" class="btn btn-primary" @click="loadLineFromRealitySearch(false)" data-bs-dismiss="modal">读取</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modalLineSearchAdvanced" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title">读取线路</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body form-control" style="border: 0px; padding: 0px; overflow-y:auto; overflow-x:hidden;">
<div class="list-group list-group-flush">
<li v-if="modalLineSearch.dataSource == 'AMap'" v-for="(item, index) in modalLineSearchAdvanced.data" class="list-group-item list-group-item-action d-flex align-content-center justify-content-between">
<span v-text="(item.name.replace(/\(.*\)$/, '').replace('内环', '').replace('外环', '').replace('内圈', '').replace('外圈', '')) + ' (' + item.start_stop + ((item.direc == item.id)?' ⇀ ':' ⇌ ') + item.end_stop + ')'"></span>
<div class="btn-group btn-group-sm pull-right" role="group">
<button type="button" class="btn btn-outline-primary" @click="getLineFromAmapAdvancedSelect(index)" data-bs-dismiss="modal">读取</button>
</div>
</li>
<li v-if="modalLineSearch.dataSource == 'chelaile'" v-for="(item, index) in modalLineSearchAdvanced.data" class="list-group-item list-group-item-action d-flex align-content-center justify-content-between">
<span v-text="item.name + ' (' + item.startSn + ' → ' + item.endSn + ')'"></span>
<div class="btn-group btn-group-sm pull-right" role="group">
<button type="button" class="btn btn-outline-primary" @click="getLineFromChelaileAdvancedSelect(index)" data-bs-dismiss="modal">读取</button>
</div>
</li>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
<tab-station ref="tabStation" :hidden="currentTab != 'stations'" v-model:line="lineFile" v-model:settings="settings" @modified="saveOriginal" @undo="undo" @confirm="showModalConfirmForComponents" @loadline="loadLine" @toast="showMessage" @toggletab="toggleTab"></tab-station>
<tab-fare ref="tabFare" v-if="currentTab == 'fare'" v-model:line="lineFile" v-model:settings="settings" @toast="showMessage"></tab-fare>
<tab-schematic :hidden="currentTab != 'schematic'"></tab-schematic>
<tab-settings :hidden="currentTab != 'settings'" v-model:settings="settings"></tab-settings>
<tab-about :hidden="currentTab != 'about'"></tab-about>
<div class="position-fixed top-0 end-0 p-3" style="z-index: 11">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" :data-bs-autohide="toast.autohide">
<div class="toast-header">
<strong class="me-auto">{{ toast.title }}</strong>
<small>{{ toast.subtitle }}</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">{{ toast.content }}</div>
</div>
</div>
</main>
<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted font-monospace">Version 2.1.1 Beta. Code by <a class="text-reset" href="https://github.com/BobLiu0518" target="_blank">BobLiu</a>.</span>
  
<span class="text-muted" style="float: right;">友情链接: <a class="text-reset" href="https://ccbus.huijiwiki.com/" target="_blank">长春交通百科</a> <a class="text-reset" href="https://railmapgen.github.io/?utm_source=BusLineDesigner" target="_blank">地铁线路图工具包</a></span>
</div>
</footer>
</div>
<script src="./main.js"></script>
<script src="./components/TabStation.js"></script>
<script src="./components/TabFare.js"></script>
<script src="./components/TabSchematic.js"></script>
<script src="./components/TabSettings.js"></script>
<script src="./components/TabAbout.js"></script>
<script>
const mountedApp = bld.mount('#app')
</script>
</body>
</html>