潘钊 / bsth_control · Files

<style>
    .sidebar {/* 左侧导航目录*/
        font-size: 18px;
        width: 250px;
        background-color: steelblue;
        color: white;
        padding-top: 20px;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        position: fixed;
        height: 100%;
        overflow-y: auto;
        z-index: 1000;
    }

    .sidebar a {
        display: block;
        padding: 10px 20px;
        text-decoration: none;
        color: white;
        transition: background-color 0.3s;
    }

    .sidebar h2:before {
        content: '';
        display: inline-block;
        width: 52px;
        height: 52px;
        background: url('image/a.png') no-repeat center center;
        background-size: contain;
        margin-right: 5px;
        vertical-align: middle;
    }

    .sidebar a.nav-item:before {/*导航目录加图标*/
        content: '';
        display: inline-block;
        width: 16px;
        height: 16px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        margin-right: 8px;
        vertical-align: middle;
    }
    .sidebar .submenu-content a:before { /* 新增规则，针对子菜单中的链接 */
        content: '';
        display: inline-block;
        width: 16px;
        height: 16px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        margin-right: 8px;
        vertical-align: middle;
    }
    /* 确保每个特定图标的规则也适用于子菜单中的链接 */
    .sidebar a.open-l2:before,
    .sidebar .submenu-content a[href="#section2"]:before { /* 针对“线路标签”的图标 */
        background-image: url('image/2.png');
    }

    .sidebar a.open-l3:before,
    .sidebar .submenu-content a[href="#section3"]:before { /* 针对“图例说明”的图标 */
        background-image: url('image/3.png');
    }

    .sidebar a.open-l4:before,
    .sidebar .submenu-content a[href="#section4"]:before { /* 针对“班次显示方式”的图标 */
        background-image: url('image/4.png');
    }

    .sidebar a.open-l1:before {
        background-image: url('image/1.png');
    }

    .sidebar a.open-l2:before {
        background-image: url('image/2.png');
    }

    .sidebar a.open-l3:before {
        background-image: url('image/3.png');
    }

    .sidebar a.open-l4:before {
        background-image: url('image/4.png');
    }

    .sidebar a.open-l5:before {
        background-image: url('image/5.png');
    }

    .sidebar a.open-l6:before {
        background-image: url('image/6.png');
    }

    .sidebar a.open-l7:before {
        background-image: url('image/7.png');
    }

    .sidebar a.open-l8:before {
        background-image: url('image/8.png');
    }

    .sidebar a.open-l9:before {
        background-image: url('image/9.png');
    }

    .sidebar a.open-l10:before {
        background-image: url('image/10.png');
    }

    .sidebar a.open-l11:before {
        background-image: url('image/11.png');
    }

    .sidebar a:hover {
        background-color: cornflowerblue;
    }

    .content {
        font-size: 16px;
        margin-left: 270px;
        padding-left: 20px;
        max-width: calc(100% - 270px);
        flex-grow: 1;
    }

    /* 响应式设计，针对小屏幕 */
    @media (max-width: 900px) {
        .sidebar {
            width: 60px;
        }

        .content {
            margin-left: 80px;
            max-width: calc(100% - 80px);
        }
    }


    .content-with-border {  /*灰色边框*/
        border: 2px solid #cccccc;
        padding: 20px;
        margin-top: 50px;
        margin-left: 10px;
        border-radius: 8px;
    }

    .inline-button {
        display: inline-block;
        vertical-align: middle;
    }

    .container {
        max-width: 1200px;
        margin: 20px auto;
        padding: 20px;
        background: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .indent {
        text-indent: 2em;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }

    h1 {
        font-weight: bold;
        text-align: center;
        color: #333;
    }
    h3 {
        font-weight: bold;
        margin-left:20px ;
        color: #333;
    }



    .video-item {
        margin-bottom: 20px;
    }

    .video-item h2 {
        font-weight: bold;
        color: #333333;
        border-bottom: 1px solid #eeeeee;
        padding-bottom: 10px;
    }

    video {
        width: 100%;
        max-width: 720px;
    }

    .video-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        position: relative;
        width: 100%;
    }

    .video-container video {
        max-width: 720px;
        transform: translateX(-1px);
        transition: transform 0.3s ease;
    }

    button {
        padding: 5px 10px;
        font-size: 14px;
        color: #333333;
        background-color: steelblue;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        outline: none;
        margin-left: 5px;
        display: inline-block;
        vertical-align: middle;
    }
    .submenu {
        margin-top: 10px;
    }

    .submenu-title {
        display: block;
        padding: 10px 20px;
        text-decoration: none;
        color: white;
        background-color: steelblue;
        transition: background-color 0.3s;
        cursor: pointer;
    }
    .submenu-title:before {
        content: '';
        display: inline-block;
        width: 16px;
        height: 16px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        margin-right: 8px; /* 图标与文本之间的间距 */
        vertical-align: middle; /* 确保图标垂直居中文本 */
        background-image: url('image/1.png'); /* 图标路径 */
    }
    .submenu-title:hover {
        background-color: steelblue;
    }

    .submenu-content {
        list-style-type: none;
        padding-left: 20px;
        background-color: steelblue;
    }

    .submenu-content a {
        display: block;
        padding: 8px 20px;
        text-decoration: none;
        color: white;
        transition: background-color 0.3s;
    }

    .submenu-content a:hover {
        background-color: cornflowerblue;
    }
</style>
<div class="sidebar">
    <!--h2 style="text-align: left; margin-bottom: 20px;">功能导航</h2-->
    <a href="#section1" class="nav-item open-l1">打开线调</a><!--1-->
    <a href="#section2" class="nav-item open-l8">核对当日计划排班</a><!--2-->
    <div class="submenu">
        <a href="#" class="submenu-title" >检查车载设备</a><!--3-->
        <ul class="submenu-content" style="display:none;">
            <li><a href="#section3-1" class="nav-item open-l2">检查车载设备情况</a></li>
            <li><a href="#section3-2" class="nav-item open-l3">检查车载设备情况（续）</a></li>
        </ul>
    </div>

    <div class="submenu">
        <a href="#" class="submenu-title" >配套说明</a><!--4-->
        <ul class="submenu-content" style="display:none;">
            <li><a href="#section4-1" class="nav-item open-l2">线路标签</a></li>
            <li><a href="#section4-2" class="nav-item open-l3">图例说明</a></li>
            <li><a href="#section4-3" class="nav-item open-l4">班次显示方式</a></li>
        </ul>
    </div>
    <div class="submenu">
        <a href="#" class="submenu-title" >营运班次操作</a><!--5-->
        <ul class="submenu-content" style="display:none;">
            <li><a href="#section5-1-1" class="nav-item open-l2">待发调整</a></li>
            <li><a href="#section5-1-2" class="nav-item open-l3">误点调整</a></li>
            <li><a href="#section5-2" class="nav-item open-l3">实发调整</a></li>
            <li><a href="#section5-3" class="nav-item open-l4">发车信息微调及撤销实发</a></li>
        </ul>
    </div>
    <a href="#section6" class="nav-item open-l6">烂班操作</a><!--6-->
    <a href="#section7" class="nav-item open-l6">临加班次</a><!--7-->
    <div class="submenu">
        <a href="#" class="submenu-title" >子任务操作</a><!--8-->
        <ul class="submenu-content" style="display:none;">
            <li><a href="#section8-1" class="nav-item open-l2">新增子任务</a></li>
            <li><a href="#section8-2" class="nav-item open-l3">修改与删除子任务</a></li>
        </ul>
    </div>
    <a href="#section9" class="nav-item open-l6">调整人车和路牌对调</a><!--9-->
    <a href="#section10" class="nav-item open-l6">指令重发</a><!--10-->
    <a href="#section11" class="nav-item open-l6">批量调整修改</a><!--11-->
    <div class="submenu">
        <a href="#" class="submenu-title" >车载互动</a><!--12-->
        <ul class="submenu-content" style="display:none;">
            <li><a href="#section12-1" class="nav-item open-l2">发送消息</a></li>
            <li><a href="#section12-2" class="nav-item open-l3">发送车载状态</a></li>
        </ul>
    </div>
    <a href="#section13" class="nav-item open-l10">核对当日营运数据</a><!--13-->
    <a href="#section14" class="nav-item open-l11">退出线调</a><!--14-->
</div>

<div class="content">
    <h1>峨眉公交线路调度演示说明</h1>
    <div class="content-with-border">

        <div class="video-item" id="section1">

            <h2>打开线调</h2>
            <p class="indent">
                登录系统后，打开功能列表中的线调，选择需要的路线，上次登录成功的线路将默认显示在已选列表中。选择线路时，可选择多条线路进入线调，可通过在搜索框中检索或者在左侧筛选栏中筛选来选择线路。完成选择后，点击进入线路调度。</p>
            <p class="indent">注意：线路主调默认勾选“主调模式”登录，非当班调度需取消“主调模式”勾选。</p>
            <p class="indent">进入线路加载，线路加载成功，“进入线调”完成。
                <button onclick="playVideo('video1')">点击播放演示视频</button>
            </p>
            <div class="video-container">
                <video id="video1" controls style="display: none;">
                    <source src="Videos/1打开线调.mp4" type="video/mp4">
                    您的浏览器不支持 video 标签。
                </video>
            </div>
        </div>

        <div class="video-item" id="section2">
            <h2>核对当日计划排班</h2>
            <p class="indent">打开页面顶端“数据&统计”标签，选择“当日计划排班”功能，显示计划排班，在登录多条线路的情况下可点击标签页切换线路，请</p>
            <p>仔细核对线路人员、路牌、车辆的对应关系，如与当天计划不一致，需及时修改调整。
                <button onclick="playVideo('video2')">点击播放演示视频</button>
            </p>

            <div class="video-container">
                <video id="video2" controls style="display: none;">
                    <source src="Videos/2核对当日计划排班.mp4" type="video/mp4">
                    您的浏览器不支持 video 标签。
                </video>
            </div>
        </div>


        <div class="video-item" id="section3-1">
            <h2>检查车载设备</h2>
            <h3>检查车载设备情况</h3>
            <p class="indent">
                查看班次执行列表，关注即将出场的车辆，切换到“地图”标签，在搜索框中输入数字，在联想结果中选择需要查找的车号，查看车载最后报告时间是否与当前时间一致，来判定车载当前是否在线，车辆是否已做好发车准备。</p>
            <p class="indent">
                切换回线路班次执行界面，关注信息框中的信息并及时对各种请求做出响应，车载信号正常，驾驶员规范行驶的前提下，系统会根据车载信号进出站自动计算班次的发出和到达时间，这类信息会倒计时后自动确认，并不需要人工干预。
                <button onclick="playVideo('video3')">点击播放演示视频</button>
            </p>

            <div class="video-container">
                <video id="video3" controls style="display: none;">
                    <source src="Videos/3-1检查车载设备情况.mp4" type="video/mp4">
                    您的浏览器不支持 video 标签。
                </video>
            </div>
        </div>

        <div class="video-item" id="section3-2">
            <h3>检查车载设备情况</h3>
            <p class="indent">如果车辆情况异常，点击车载设备，选择设备管理，看车载是否在线、发送线路ID是否正确，如果当前时间有班次，但是车载离线，</p>
            <p>查找车载离线原因，是调整车辆了还是车载设备损坏。
                <button onclick="playVideo('video4')">点击播放演示视频</button>
            </p>
            <div class="video-container">
                <video id="video4" controls style="display: none;">
                    <source src="Videos/3-2检查车载设备情况.mp4" type="video/mp4">
                    您的浏览器不支持 video 标签。
                </video>
            </div>
        </div>

        <div class="video-item" id="section4-1">
            <h2>配套说明</h2>
            <h3>线路标签</h3>
            <p class="indent">
                线调标签每条线路名旁有数字及字母标识，线路名称后第一个数字代表当前线路信息框内未处理信息数量，遵循人对人，机对机原则；定位信号自动判定的班次执行由系统自动处理，驾驶员手动发送的各种请求需主调做出响应。</p>
            <p class="indent">线路名称后的第二个数字代表该线路对照当前时间应发而未发的班次数量，当班调度需及时查询未发原因并对该班次进行处理。</p>
            <p class="indent">线路名称后的最后一项代表本线路的大间隔等级。
                <button onclick="playVideo('video5')">点击播放演示视频</button>
            </p>

            <div class="video-container">
                <video id="video5" controls style="display: none;">
                    <source src="Videos/4-1配套说明-线路标签.mp4" type="video/mp4">
                    您的浏览器不支持 video 标签。
                </video>
            </div>
        </div>

        <div class="video-item" id="section4-2">
            <h3>图例说明</h3>
            <p class="indent">在班次执行界面主页有图例说明，点击线路上行或者下行首站名称旁的“？”图标。</p>
            <p class="indent">图例说明分为三个模块，分别是班次执行状态、车载信息状态及RFID，其中RFID为各线路首末站点安装设备，会捕捉该站点发出或途经车辆班次，辅助计算，该系统只做显示，不做进一步说明。
                <button onclick="playVideo('video6')">点击播放演示视频</button>
            </p>

            <div class="video-container">
                <video id="video6" controls style="display: none;">
                    <source src="Videos/4-2配套说明-图例说明.mp4" type="video/mp4">
                    您的浏览器不支持 video 标签。
                </video>
            </div>
        </div>

        <div class="video-item" id="section4-3">
            <h3>班次显示方式</h3>
            <p class="indent">
                在图例“？”后另有两个图标，点击眼睛形状图标，会改变班次显示界面（单元格加边框），用户根据自己使用习惯来改变显示方式，点击二维码形状图标，“实到”字段会改变形态（显示与“应到”时间的误差对比），用户可根据自己使用习惯改变显示方式。
                <button onclick="playVideo('video7')">点击播放演示视频</button>
            </p>
            <div class="video-container">
                <video id="video7" controls style="display: none;">
                    <source src="Videos/4-3配套说明-班次显示方式.mp4" type="video/mp4">
                    您的浏览器不支持 video 标签。
                </video>
            </div>
        </div>

        <div class="video-item" id="section5-1-1">
            <h2>营运班次操作</h2>
            <h3>待发调整</h3>
            <p class="indent">
                先确认登陆模式，查询只需监控模式，如箭头所指区域为灰色，需要修改班次为主调模式，如箭头所指区域为蓝色。</p>
            <p class="indent">待发调整，选中需要调整的班次，点击鼠标右键，选择“待发调整“，比较常用的场景为调整待发时间，一般是因为前后班次烂班等原因，需要调整发车间隔，如在本车前一班次未到达的情况下调整之后的班次待发时间，上一班次完成时，信使播报剩余班次、下一班次发车时间时将会直接提示调整后的待发时间，如在本车前一班次已到达的情况下调整后一班次的待发时间，因车载已收到下一班次发车时间提示，建议选择”指令重发“将新的待发时间发送到车载上。</p>
            <p class="indent">待发调整的其他应用场景为班次站点相关调整，有”直放“场景，到终点站，中途站不停靠。选择班次，选择直放后，直接保存，有”放站“场景，放站为直放到某一站点后，开始正常营运载客，选择班次，选择”放站“，再选择开始正常营运的站点后，保存班次，另一种场景为”两点间空驶“，”两点间空驶”不必行驶在线路预设路径，但求高效到达目的地，请根据线路实际运营情况来进行各项干预调整。
                <button onclick="playVideo('video8')">点击播放演示视频</button>
            </p>

            <div class="video-container">
                <video id="video8" controls style="display: none;">
                    <source src="Videos/5-1-1营运班次操作未-待发调整.mp4" type="video/mp4">
                    您的浏览器不支持 video 标签。
                </video>
            </div>
        </div>

        <div class="video-item" id="section5-1-2">
            <h3>误点调整</h3>
            <p class="indent">
                误点调整的应用场景为：因路阻等原因，前一列班次将无法按照计划时间到达，且无法预估到达时间。
            </p>
            <p class="indent">操作方式如下：选中对应班次，点击鼠标右键调出菜单，选择“误点调整”，在弹出的对话框中输入“误点停靠时间“，然后点击”确认调整“，该操作的含有是：不管前一班次何时到达，前一班次到达时间加上”误点停靠时间“，即为下一班次待发时间，该操作可改善因班次误点造成的待发调整不及时情况。
                <button onclick="playVideo('video9')">点击播放演示视频</button>
            </p>

            <div class="video-container">
                <video id="video9" controls style="display: none;">
                    <source src="Videos/5-1-2营运班次操作未-误点调整.mp4" type="video/mp4">
                    您的浏览器不支持 video 标签。
                </video>
            </div>
        </div>

        <div class="video-item" id="section5-2">
            <h3>实发调整</h3>
            <p class="indent">
                一般情况下，系统会根据车载信号自动计算班次的到离站，如发生车载掉线等情况影响班次自动判定，则需要人工干预辅助调整，选中班次，点击鼠标右键调出菜单选择”实发调整“，根据实际发车情况填入实发时间，在“调整说明”项下拉菜单中选择调整原因，在备注框中输入调整说明后，点击“保存”。
            </p>
            <p class="indent">如因车辆调整停车位置等情况重复出入电子围栏，造成班次误报实发情况，或者人工干预后发现调整错误，可选择“撤销实发”，请根据线路班次实际情况调整班次。
                <button onclick="playVideo('video10')">点击播放演示视频</button>
            </p>

            <div class="video-container">
                <video id="video10" controls style="display: none;">
                    <source src="Videos/5-2营运班次操作正-实发调整.mp4" type="video/mp4">
                    您的浏览器不支持 video 标签。
                </video>
            </div>
        </div>

        <div class="video-item" id="section5-3">
            <h3>发车信息微调及撤销实发</h3>
            <p class="indent">
                发车信息微调一般适用场景为：班次到达时间因车载掉线等原因未自动计算，可双击班次打开“发车信息微调”窗口，输入到达时间，在调整说明框中输入调整原因后保存。
            </p>
            <p class="indent">如遇操作错误、或者班次误报等情况，也可撤销，选中班次后右击调出菜单，选择“撤销执行”，在弹出确认窗口选择“确认撤销执行”。请根据实际情况调整班次。
                <button onclick="playVideo('video11')">点击播放演示视频</button>
            </p>

            <div class="video-container">
                <video id="video11" controls style="display: none;">
                    <source src="Videos/5-3营运班次操作已-发车信息微调及撤销实发.mp4" type="video/mp4">
                    您的浏览器不支持 video 标签。
                </video>
            </div>
        </div>


        <div class="video-item" id="section6">
            <h2>烂班操作</h2>
            <p class="indent">
                计划班次无法完成的情况会进行烂班操作，常见场景：车辆故障，导致之后的班次都无法执行，操作方式为：选中班次，点击鼠标右键调出菜单，选中“计划烂班”，在“计划烂班”窗口中选中需要烂班的班次，在“调整说明”下拉列表中选择烂班原因后，点击“保存”。</p>
            <p class="indent">如操作失误、或者故障车辆修复后重新投入营运，也可对烂班班次进行“撤销烂班”操作，选中班次，点击鼠标右键调出菜单，选择“撤销烂班”，在弹出的确认窗口选择“确认撤销”。请根据线路实际情况调整班次。
                <button onclick="playVideo('video12')">点击播放演示视频</button>
            </p>

            <div class="video-container">
                <video id="video12" controls style="display: none;">
                    <source src="Videos/6烂班操作.mp4" type="video/mp4">
                    您的浏览器不支持 video 标签。
                </video>
            </div>
        </div>

        <div class="video-item" id="section7">
            <h2>临加班次</h2>
            <p class="indent">
                临加班次为计划外班次，一般适用于临时性运营增能，或计划外进出场等情况，临加功能在原有的基础上经过优化，目前可以进行无计划添加，计调相关人员无需再对包车等无固定营运班次线路进行虚拟配车及预排班。
            </p>
            <p class="indent">在页面空白出点击鼠标右键，调出“新增临加班次”功能，点击鼠标左键你打开，在对应框中输入车辆、路牌，出发及到达时间、驾驶员、里程等信息。临加班次本身为计划外班次，无需添加全程后做子任务，根据实际行驶情况选择班次类型、班次首末站点，检查有无遗漏字段，填写完整后点击“保存”，参照上述步骤，添加下行进场班次，也可根据实际情况选择预设场景（往返、场到场），如临加班次车辆、人员、备注等信息编辑错误可与常规班次一样使用“发车信息微调”调整。
            </p>
            <p class="indent">如涉及站点、计划时间、路牌等字段错误，建议删除该临加班次后重新添加，选出对应的路牌，右击调出菜单后选择“临加/子任务”，选中需要删除的临加班次，点击鼠标右键后选择删除。请根据实际情况编辑临加班次。
                <button onclick="playVideo('video13')">点击播放演示视频</button>
            </p>

            <div class="video-container">
                <video id="video13" controls style="display: none;">
                    <source src="Videos/7临加班次.mp4" type="video/mp4">
                    您的浏览器不支持 video 标签。
                </video>
            </div>
        </div>

        <div class="video-item" id="section8-1">
            <h2>子任务操作</h2>
            <h3>新增子任务</h3>
            <p class="indent">
                子任务的作用是对未完全完成的班次，其营运里程做出明细解释，最常用的场景为：班次营运到中途车辆故障，不能完成剩余里程。
            </p>
            <p class="indent">一、首先将主任务调整为完成状态（该班次执行营运里程不为0，主任务就不做烂班），选中班次，右键调出菜单，选择“新增子任务”，子任务功能中已预设多种场景，该案例无需选择，直接自定义添加子任务明细，在弹出的子任务窗口默认页面中逐个加入，计划班次已完成部分（选择终点站为已执行完成到达的站点，输入营运公里数）；二、点击“+”号开始添加第二个子任务，计划班次未完成部分（选择起始站为已执行完成到达的站点，勾选“是否烂班”，输入烂班公里数）。三、点击“+”号开始添加第三个子任务，因故障需进场维修的空驶公里（选择班次类型为进场，起点为班次完成站点，终点为维修停车场），输入空驶公里数，添加各子任务备注后点击保存。
            </p>
            <p class="indent">注意，营运+烂班的合计数需与计划里程数保持一致，否则影响公里数统计（空驶公里不在此列）。请按线路实际班次执行此操作。
                <button onclick="playVideo('video14')">点击播放演示视频</button>
            </p>

            <div class="video-container">
                <video id="video14" controls style="display: none;">
                    <source src="Videos/8-1子任务操作-新增子任务.mp4" type="video/mp4">
                    您的浏览器不支持 video 标签。
                </video>
            </div>
        </div>

        <div class="video-item" id="section8-2">
            <h3>修改与删除子任务</h3>
            <p class="indent">
                班次计发时间旁有数字，表明该班次有子任务，光标悬浮数字旁，可预览子任务明细，选中班次，右键点击“临加/子任务”功能，可对已添加的子任务进行编辑修改，选择相应的子任务对其进行修正后保存。
            </p>
            <p class="indent">也可删除错误子任务后重新添加，删除部分子任务或者修改子任务公里数后会造成营运公里统计与计划不一致，在箭头所示位置会出现统计提示，请核对后修改。请根据实际情况修改子任务。
                <button onclick="playVideo('video15')">点击播放演示视频</button>
            </p>

            <div class="video-container">
                <video id="video15" controls style="display: none;">
                    <source src="Videos/8-2子任务操作-修改与删除子任务.mp4" type="video/mp4">
                    您的浏览器不支持 video 标签。
                </video>
            </div>
        </div>

        <div class="video-item" id="section9">
            <h2>调整人车和路牌对调</h2>
            <p class="indent">
                一般遇到驾驶员临时请假，车辆突发故障等情况，需要调整班次驾驶员、调用备车执行班次、调用备车执行班次，会使用到该功能。</p>
            <p class="indent">选中需要调整的路牌的任意班次，鼠标右键调出菜单选择”调整人车“，选择需要调整人车的具体班次（一般已执行的不修改），调整人员时输入工号后在下拉框中选择工号/姓名组合，否则会出现只更新工号，未更新姓名的情况，调整车辆时请仔细核对车号，避免误操作相似车号，影响其他公司/分公司线路车辆运营。
            </p>
            <p class="indent">如果是线路内部人员/车辆临时调整，可使用”路牌对调“功能，选中任意班次，鼠标右键调出菜单，选择”路牌对调“，在窗口两侧选择需要更换的2个路牌及对应班次。在窗口低端，根据实际情况，选择需要”只调人“，”只调车“或”调人并调车“。
                <button onclick="playVideo('video16')">点击播放演示视频</button>
            </p>

            <div class="video-container">
                <video id="video16" controls style="display: none;">
                    <source src="Videos/9调整人车和路牌对调.mp4" type="video/mp4">
                    您的浏览器不支持 video 标签。
                </video>
            </div>
        </div>

        <div class="video-item" id="section10">
            <h2>指令重发</h2>
            <p class="indent">
                注意：所有修改或者与车辆交互都需要主调模式，此视频仅为操作演示。
            </p>
            <p class="indent">指令重发功能一般适用于两个场景：1.在前班次已执行完成状态下修改将发车班次的待发，需”指令重发“。2.将新的计划发车时间发送到车载，前后班次间有分班、长时间间隔甚至有分班换人安排，需要在分班后首个班次发车前重发计划时间到车载来提醒驾驶员。
                <button onclick="playVideo('video17')">点击播放演示视频</button>
            </p>

            <div class="video-container">
                <video id="video17" controls style="display: none;">
                    <source src="Videos/10指令重发.mp4" type="video/mp4">
                    您的浏览器不支持 video 标签。
                </video>
            </div>
        </div>

        <div class="video-item" id="section11">
            <h2>批量调整修改</h2>
            <p class="indent">批量调整能够快速进行多个班次的待发调整、间隔调整和误点调整，如果需要对多个班次待发时间进行调整，可点击左侧序号列表，</p>
            <p>选择多个班次，右键菜单选择待发调整功能，进入批量待发调整页面。</p>
            <p class="indent">间隔调整，当多个班次间隔过大或过小时，可使用批量间隔调整对班次进行均衡优化。</p>
            <p class="indent">误点调整是在本班车晚点之后，进行误点调整，当车辆到站后，如果有晚点情况，对下一班次的待发时间进行调整，如果没有就不</p>
            <p>会调整；当遇到大规模堵车或者异常天气导致多个班次晚点时，可使用批量误点调整，对多个班次设置车辆进站后的停靠站时间。
                <button onclick="playVideo('video18')">点击播放演示视频</button>
            </p>

            <div class="video-container">
                <video id="video18" controls style="display: none;">
                    <source src="Videos/11批量调整修改.mp4" type="video/mp4">
                    您的浏览器不支持 video 标签。
                </video>
            </div>
        </div>

        <div class="video-item" id="section12-1">
            <h2>车载互动</h2>
            <h3>发送消息</h3>
            <p class="indent">消息短语分群发和单发两种模式，单发消息短语一般适用于：乘客遗失物品在车辆上，调度”到离站查询“缩小查找范围后向驾驶员确认。
            </p>
            <p>操作方式为在主页车辆列表中选择对应车号，鼠标右键调出菜单，选择”发送消息短语“，在对话框中输入需要向驾驶员发送的语句，请检查输入文字，确认无误后点击”发送“，群发消息短语一般适用于通知，范围选择可自定义，操作方式为在主页车辆列表中选择任意车号，鼠标右键调出菜单，选择”群发消息短语“，可选择授权的所有线路车辆，或部分线路（部分车辆），在对话框右侧文本框中输入需要发送的语句，请检查输入文字，确认无误后点击”发送“。
                <button onclick="playVideo('video19')">点击播放演示视频</button>
            </p>

            <div class="video-container">
                <video id="video19" controls style="display: none;">
                    <source src="Videos/12-1车载互动-发送消息.mp4" type="video/mp4">
                    您的浏览器不支持 video 标签。
                </video>
            </div>
        </div>



        <div class="video-item" id="section12-2">
            <h3>发送车载状态</h3>
            <p class="indent">当查看车辆状态有问题时使用发送车载状态对车辆运营方向进行改变，可以将车辆运营状态切换为上行非营运、下行非营运、上行</p>
            <p>营运、下行营运。
                <button onclick="playVideo('video20')">点击播放演示视频</button>
            </p>
            <div class="video-container">
                <video id="video20" controls style="display: none;">
                    <source src="Videos/12-2车载互动-发送车载状态.mp4" type="video/mp4">
                    您的浏览器不支持 video 标签。
                </video>
            </div>
        </div>



        <div class="video-item" id="section13">
            <h2>核对当日营运数据</h2>
            <p class="indent">在线路调度中右上侧点击报表管理，选择其中的行车路单，选择查询，可查看特定人员的行车路单，退出点击右上角的叉号；仍在</p>
            <p>报表管理中选择统计日报，可以查看线路的统计日报；在报表管理下选择调度日报，可查看特定线路当日调度日报；
                <button onclick="playVideo('video21')">点击播放演示视频</button>
            </p>
            <div class="video-container">
                <video id="video21" controls style="display: none;">
                    <source src="Videos/13核对当日营运数据.mp4" type="video/mp4">
                    您的浏览器不支持 video 标签。
                </video>
            </div>
        </div>

        <div class="video-item" id="section14">
            <h2>退出线调</h2>
            <p class="indent">全部检查无误后，点击右上角退出线调，再点击右上角图形标记，点击注销登录，即可退出线调系统。
                <button onclick="playVideo('video22')">点击播放演示视频</button>
            </p>
            <div class="video-container">
                <video id="video22" controls style="display: none;">
                    <source src="Videos/14退出线调.mp4" type="video/mp4">
                    您的浏览器不支持 video 标签。
                </video>
            </div>
        </div>
    </div>
</div>

<script>
    function playVideo(videoId) {
        var video = document.getElementById(videoId);
        if (video.style.display === 'none') {
            video.style.display = 'block';
            video.play();
        } else {
            video.pause();
            video.style.display = 'none';
        }
    }
    (function(){
        $('.submenu-title').on('click', function() {
            var display = $(this).next().css('display');
            $(this).next().css('display', display === 'none' ? 'block' : 'none');

            return false;
        })

        $('.nav-item').on('click', function() {
            var target = $($(this).attr('href'));
            $('html, body').animate({scrollTop: target.offset().top - 100}, 1000);

            return false;
        })
    })();
</script>