Commit c2d594c8f3aafb446b2a3e117a9c59ae2c3c0db2
1 parent
af003b64
1.
Showing
1 changed file
with
252 additions
and
0 deletions
src/main/resources/static/pages/demo/demo.html
0 → 100644
| 1 | +<style> | |
| 2 | + body { | |
| 3 | + font-family: Arial, sans-serif; | |
| 4 | + margin: 0; | |
| 5 | + padding: 0; | |
| 6 | + background-color: #eeeeee; | |
| 7 | + font-size: 18px; | |
| 8 | + } | |
| 9 | + | |
| 10 | + .inline-button { | |
| 11 | + display: inline-block; | |
| 12 | + vertical-align: middle; | |
| 13 | + } | |
| 14 | + | |
| 15 | + .container { | |
| 16 | + width: 95%; | |
| 17 | + margin: 20px auto; | |
| 18 | + padding: 20px; | |
| 19 | + background: #fff; | |
| 20 | + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | |
| 21 | + } | |
| 22 | + | |
| 23 | + .indent { | |
| 24 | + padding-left: 40px; | |
| 25 | + } | |
| 26 | + | |
| 27 | + h1 { | |
| 28 | + text-align: center; | |
| 29 | + color: #333; | |
| 30 | + } | |
| 31 | + | |
| 32 | + .video-item { | |
| 33 | + margin-bottom: 20px; | |
| 34 | + | |
| 35 | + } | |
| 36 | + | |
| 37 | + .video-item h2 { | |
| 38 | + color: #333333; | |
| 39 | + border-bottom: 1px solid #eee; | |
| 40 | + padding-bottom: 10px; | |
| 41 | + } | |
| 42 | + | |
| 43 | + video { | |
| 44 | + width: 100%; | |
| 45 | + max-width: 720px; | |
| 46 | + | |
| 47 | + } | |
| 48 | + | |
| 49 | + /* 新视频容器 */ | |
| 50 | + .video-container { | |
| 51 | + display: flex; | |
| 52 | + justify-content: center; | |
| 53 | + align-items: center; | |
| 54 | + margin-top: 20px; | |
| 55 | + position: relative; | |
| 56 | + width: 100%; | |
| 57 | + } | |
| 58 | + | |
| 59 | + /* 使视频偏移 */ | |
| 60 | + .video-container video { | |
| 61 | + max-width: 720px; | |
| 62 | + transform: translateX(-10px); | |
| 63 | + transition: transform 0.3s ease; | |
| 64 | + } | |
| 65 | + | |
| 66 | + button { | |
| 67 | + padding: 5px 10px; | |
| 68 | + font-size: 14px; | |
| 69 | + color: #333333; | |
| 70 | + background-color: bisque; | |
| 71 | + border: none; | |
| 72 | + border-radius: 5px; | |
| 73 | + cursor: pointer; | |
| 74 | + outline: none; | |
| 75 | + margin-left: 5px; | |
| 76 | + display: inline-block; | |
| 77 | + vertical-align: middle; | |
| 78 | + } | |
| 79 | + | |
| 80 | + button:hover { | |
| 81 | + background-color: #AAAAAA; | |
| 82 | + } | |
| 83 | +</style> | |
| 84 | +<div class="container"> | |
| 85 | + <h1>线调操作演示说明</h1> | |
| 86 | + <div class="video-item"> | |
| 87 | + <!--<h2>线路调度管理说明</h2>--> | |
| 88 | + <p>1.打开线调</p> | |
| 89 | + <p class="indent">登录系统后，打开功能列表中的线调，选择需要的路线，上次登录成功的线路将默认显示在已选列表中。选择线路时，可选择多条</p> | |
| 90 | + <p>线路进入线调，可通过在搜索框中检索或者在左侧筛选栏中筛选来选择线路。完成选择后，点击进入线路调度。</p> | |
| 91 | + <p class="indent">注意：线路主调默认勾选“主调模式”登录，非当班调度需取消“主调模式”勾选。</p> | |
| 92 | + <p class="indent">进入线路加载，线路加载成功，“进入线调”完成。 | |
| 93 | + <button onclick="playVideo('video1')">点击播放演示视频</button> | |
| 94 | + </p> | |
| 95 | + <div class="video-container"> | |
| 96 | + <video id="video1" width="720" controls style="display: none;"> | |
| 97 | + <source src="1打开线调.mp4" type="video/mp4"> | |
| 98 | + 您的浏览器不支持 video 标签。 | |
| 99 | + </video> | |
| 100 | + </div> | |
| 101 | + </div> | |
| 102 | + | |
| 103 | + <div class="video-item"> | |
| 104 | + <p>2.线路标签</p> | |
| 105 | + <p class="indent">线调标签每条线路名旁有数字及字母标识，线路名称后第一个数字代表当前线路信息框内未处理信息数量，遵循人对人，机对机原</p> | |
| 106 | + <p>则；定位信号自动判定的班次执行由系统自动处理，驾驶员手动发送的各种请求需主调做出响应。</p> | |
| 107 | + <p class="indent">线路名称后的第二个数字代表该线路对照当前时间应发而未发的班次数量，当班调度需及时查询未发原因并对该班次进行处理。</p> | |
| 108 | + <p class="indent">线路名称后的最后一项代表本线路的大间隔等级。 | |
| 109 | + <button onclick="playVideo('video2')">点击播放演示视频</button> | |
| 110 | + </p> | |
| 111 | + <div class="video-container"> | |
| 112 | + <video id="video2" width="720" controls style="display: none;"> | |
| 113 | + <source src="2线路标签.mp4" type="video/mp4"> | |
| 114 | + 您的浏览器不支持 video 标签。 | |
| 115 | + </video> | |
| 116 | + </div> | |
| 117 | + </div> | |
| 118 | + <div class="video-item"> | |
| 119 | + <p>3.图例说明</p> | |
| 120 | + <p class="indent">在班次执行界面主页有图例说明，点击线路上行或者下行首站名称旁的“？”图标。</p> | |
| 121 | + <p class="indent">图例说明分为三个模块，分别是班次执行状态、车载信息状态及RFID，其中RFID为各线路首末站点安装设备，会捕捉该站点发出</p> | |
| 122 | + <p>或途经车辆班次，辅助计算该系统只做显示，不做进一步说明。 | |
| 123 | + <button onclick="playVideo('video3')">点击播放演示视频</button> | |
| 124 | + </p> | |
| 125 | + <div class="video-container"> | |
| 126 | + <video id="video3" width="720" controls style="display: none;"> | |
| 127 | + <source src="3图例说明.mp4" type="video/mp4"> | |
| 128 | + 您的浏览器不支持 video 标签。 | |
| 129 | + </video> | |
| 130 | + </div> | |
| 131 | + </div> | |
| 132 | + <div class="video-item"> | |
| 133 | + <p>4.班次显示方式</p> | |
| 134 | + <p class="indent">在图例“？”后另有两个图标，点击眼睛形状图标，会改变班次显示界面（单元格加边框），用户根据自己使用习惯来改变显示方式，</p> | |
| 135 | + <p>点击二维码形状图标，“实到”字段会改变形态（显示与“应到”时间的误差对比），用户可根据自己使用习惯改变显示方式 | |
| 136 | + <button onclick="playVideo('video4')">点击播放演示视频</button> | |
| 137 | + </p> | |
| 138 | + <div class="video-container"> | |
| 139 | + <video id="video4" width="720" controls style="display: none;"> | |
| 140 | + <source src="4班次显示方式.mp4" type="video/mp4"> | |
| 141 | + 您的浏览器不支持 video 标签。 | |
| 142 | + </video> | |
| 143 | + </div> | |
| 144 | + </div> | |
| 145 | + <div class="video-item"> | |
| 146 | + <p>5.检查车载设备情况</p> | |
| 147 | + <p class="indent">查看班次执行列表，关注即将出场的车辆，切换到“地图”标签，在搜索框中输入数字，在联想结果中选择需要查找的车号，查看车</p> | |
| 148 | + <p>载最后报告时间是否与当前时间一致，来判定车载当前是否在线，车辆是否已做好发车准备。</p> | |
| 149 | + <p class="indent">切换回线路班次执行界面，关注信息框中的信息并及时对各种请求做出响应，车载信号正常，驾驶员规范行驶的前提下，系统会根</p> | |
| 150 | + <p>据车载信号进出站自动计算班次的发出和到达时间，这类信息会倒计时后自动确认，并不需要人工干预。 | |
| 151 | + <button onclick="playVideo('video5')">点击播放演示视频</button> | |
| 152 | + </p> | |
| 153 | + <div class="video-container"> | |
| 154 | + <video id="video5" width="720" controls style="display: none;"> | |
| 155 | + <source src="5检查车载设备情况1.mp4" type="video/mp4"> | |
| 156 | + 您的浏览器不支持 video 标签。 | |
| 157 | + </video> | |
| 158 | + </div> | |
| 159 | + </div> | |
| 160 | + <div class="video-item"> | |
| 161 | + <p>6.发送车载状态</p> | |
| 162 | + <p class="indent">当查看车辆状态有问题时使用发送车载状态对车辆运营方向进行改变，可以将车辆运营状态切换为上行非营运、下行非营运、上行</p> | |
| 163 | + <p>营运、下行营运。 | |
| 164 | + <button onclick="playVideo('video6')">点击播放演示视频</button> | |
| 165 | + </p> | |
| 166 | + <div class="video-container"> | |
| 167 | + <video id="video6" width="720" controls style="display: none;"> | |
| 168 | + <source src="6发送车载状态.mp4" type="video/mp4"> | |
| 169 | + 您的浏览器不支持 video 标签。 | |
| 170 | + </video> | |
| 171 | + </div> | |
| 172 | + </div> | |
| 173 | + <div class="video-item"> | |
| 174 | + <p>7.检查车载设备情况</p> | |
| 175 | + <p class="indent">如果车辆情况异常，点击车载设备，选择设备管理，看车载是否在线、发送线路ID是否正确，如果当前时间有班次，但是车载离线，</p> | |
| 176 | + <p>查找车载离线原因，是调整车辆了还是车载设备损坏。 | |
| 177 | + <button onclick="playVideo('video7')">点击播放演示视频</button> | |
| 178 | + </p> | |
| 179 | + <div class="video-container"> | |
| 180 | + <video id="video7" width="720" controls style="display: none;"> | |
| 181 | + <source src="7检查车载设备情况.mp4" type="video/mp4"> | |
| 182 | + 您的浏览器不支持 video 标签。 | |
| 183 | + </video> | |
| 184 | + </div> | |
| 185 | + </div> | |
| 186 | + <div class="video-item"> | |
| 187 | + <p>8.核对当日计划排班</p> | |
| 188 | + <p class="indent">打开页面顶端“数据&统计”标签，选择“当日计划排班”功能，显示计划排班，在登录多条线路的情况下可点击标签页切换线路，请</p> | |
| 189 | + <p>仔细核对线路人员、路牌、车辆的对应关系，如与当天计划不一致，需及时修改调整。 | |
| 190 | + <button onclick="playVideo('video8')">点击播放演示视频</button> | |
| 191 | + </p> | |
| 192 | + <div class="video-container"> | |
| 193 | + <video id="video8" width="720" controls style="display: none;"> | |
| 194 | + <source src="8核对当日计划排班.mp4" type="video/mp4"> | |
| 195 | + 您的浏览器不支持 video 标签。 | |
| 196 | + </video> | |
| 197 | + </div> | |
| 198 | + </div> | |
| 199 | + <div class="video-item"> | |
| 200 | + <p>9.批量调整修改</p> | |
| 201 | + <p class="indent">批量调整能够快速进行多个班次的待发调整、间隔调整和误点调整，如果需要对多个班次待发时间进行调整，可点击左侧序号列表，</p> | |
| 202 | + <p>选择多个班次，右键菜单选择待发调整功能，进入批量待发调整页面。 | |
| 203 | + <button onclick="playVideo('video9')">点击播放演示视频</button> | |
| 204 | + </p> | |
| 205 | + <div class="video-container"> | |
| 206 | + <video id="video9" width="720" controls style="display: none;"> | |
| 207 | + <source src="9批量调整修改.mp4" type="video/mp4"> | |
| 208 | + 您的浏览器不支持 video 标签。 | |
| 209 | + </video> | |
| 210 | + </div> | |
| 211 | + </div> | |
| 212 | + <div class="video-item"> | |
| 213 | + <p>10.核对当日营运数据</p> | |
| 214 | + <p class="indent">在线路调度中右上侧点击报表管理，选择其中的行车路单，选择查询，可查看特定人员的行车路单，退出点击右上角的叉号；仍在</p> | |
| 215 | + <p>报表管理中选择统计日报，可以查看线路的统计日报；在报表管理下选择调度日报，可查看特定线路当日调度日报；</p> | |
| 216 | + <p class="indent">间隔调整，当多个班次间隔过大或过小时，可使用批量间隔调整对班次进行均衡优化。</p> | |
| 217 | + <p class="indent">误点调整是在本班车晚点之后，进行误点调整，当车辆到站后，如果有晚点情况，对下一班次的待发时间进行调整，如果没有就不</p> | |
| 218 | + <p>会调整；当遇到大规模堵车或者异常天气导致多个班次晚点时，可使用批量误点调整，对多个班次设置车辆进站后的停靠站时间。 | |
| 219 | + <button onclick="playVideo('video10')">点击播放演示视频</button> | |
| 220 | + </p> | |
| 221 | + <div class="video-container"> | |
| 222 | + <video id="video10" width="720" controls style="display: none;"> | |
| 223 | + <source src="10核对当日营运数据.mp4" type="video/mp4"> | |
| 224 | + 您的浏览器不支持 video 标签。 | |
| 225 | + </video> | |
| 226 | + </div> | |
| 227 | + </div> | |
| 228 | + <div class="video-item"> | |
| 229 | + <p>11.退出线调</p> | |
| 230 | + <p class="indent">全部检查无误后，点击右上角退出线调，再点击右上角图形标记，点击注销登良路，即可退出线调系统。 | |
| 231 | + <button onclick="playVideo('video11')">点击播放演示视频</button> | |
| 232 | + </p> | |
| 233 | + <div class="video-container"> | |
| 234 | + <video id="video11" width="720" controls style="display: none;"> | |
| 235 | + <source src="11退出线调.mp4" type="video/mp4"> | |
| 236 | + 您的浏览器不支持 video 标签。 | |
| 237 | + </video> | |
| 238 | + </div> | |
| 239 | + </div> | |
| 240 | +</div> | |
| 241 | +<script> | |
| 242 | + function playVideo(videoId) { | |
| 243 | + var video = document.getElementById(videoId); | |
| 244 | + if (video.style.display === 'none') { | |
| 245 | + video.style.display = 'block'; | |
| 246 | + video.play(); | |
| 247 | + } else { | |
| 248 | + video.pause(); | |
| 249 | + video.style.display = 'none'; | |
| 250 | + } | |
| 251 | + } | |
| 252 | +</script> | |
| 0 | 253 | \ No newline at end of file | ... | ... |