潘钊 / bsth_control · Files

<style>
        /* Tailwind CSS 基础样式 */
        *, ::before, ::after {
            box-sizing: border-box;
            border-width: 0;
            border-style: solid;
            border-color: #e5e7eb;
        }

        html {
            line-height: 1.5;
            -webkit-text-size-adjust: 100%;
            -moz-tab-size: 4;
            tab-size: 4;
            font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        }

        body {
            margin: 0;
            line-height: inherit;
        }

        hr {
            height: 0;
            color: inherit;
            border-top-width: 1px;
        }

        abbr:where([title]) {
            text-decoration: underline dotted;
        }

        h1, h2, h3, h4, h5, h6 {
            font-size: inherit;
            font-weight: inherit;
        }

        a {
            color: inherit;
            text-decoration: inherit;
        }

        b, strong {
            font-weight: bolder;
        }

        code, kbd, samp, pre {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: 1em;
        }

        small {
            font-size: 80%;
        }

        sub, sup {
            font-size: 75%;
            line-height: 0;
            position: relative;
            vertical-align: baseline;
        }

        sub {
            bottom: -0.25em;
        }

        sup {
            top: -0.5em;
        }

        table {
            text-indent: 0;
            border-color: inherit;
            border-collapse: collapse;
        }

        button, input, optgroup, select, textarea {
            font-family: inherit;
            font-size: 100%;
            line-height: inherit;
            color: inherit;
            margin: 0;
            padding: 0;
        }

        button, select {
            text-transform: none;
        }

        button, [type='button'], [type='reset'], [type='submit'] {
            -webkit-appearance: button;
            background-color: transparent;
            background-image: none;
        }

        :-moz-focusring {
            outline: auto;
        }

        :-moz-ui-invalid {
            box-shadow: none;
        }

        progress {
            vertical-align: baseline;
        }

        ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
            height: auto;
        }

        [type='search'] {
            -webkit-appearance: textfield;
            outline-offset: -2px;
        }

        ::-webkit-search-decoration {
            -webkit-appearance: none;
        }

        ::-webkit-file-upload-button {
            -webkit-appearance: button;
            font: inherit;
        }

        summary {
            display: list-item;
        }

        blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
            margin: 0;
        }

        fieldset {
            margin: 0;
            padding: 0;
        }

        legend {
            padding: 0;
        }

        ol, ul, menu {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        textarea {
            resize: vertical;
        }

        input::placeholder, textarea::placeholder {
            opacity: 1;
            color: #9ca3af;
        }

        button, [role="button"] {
            cursor: pointer;
        }

        :disabled {
            cursor: default;
        }

        img, svg, video, canvas, audio, iframe, embed, object {
            display: block;
            vertical-align: middle;
        }

        img, video {
            max-width: 100%;
            height: auto;
        }

        [hidden] {
            display: none;
        }

        /* Tailwind 预检样式结束 */

        /* 容器类 */
        .container {
            width: 100%;
        }

        @media (min-width: 640px) {
            .container {
                max-width: 640px;
            }
        }

        @media (min-width: 768px) {
            .container {
                max-width: 768px;
            }
        }

        @media (min-width: 1024px) {
            .container {
                max-width: 1024px;
            }
        }

        @media (min-width: 1280px) {
            .container {
                max-width: 1280px;
            }
        }

        @media (min-width: 1536px) {
            .container {
                max-width: 1536px;
            }
        }

        /* 布局类 */
        .mx-auto {
            margin-left: auto;
            margin-right: auto;
        }

        .flex {
            display: flex;
        }

        .grid {
            display: grid;
        }

        .hidden {
            display: none;
        }

        .items-center {
            align-items: center;
        }

        .justify-center {
            justify-content: center;
        }

        .justify-between {
            justify-content: space-between;
        }

        .space-y-2 > :not([hidden]) ~ :not([hidden]) {
            margin-top: 0.5rem;
        }

        .space-y-4 > :not([hidden]) ~ :not([hidden]) {
            margin-top: 1rem;
        }

        .space-y-6 > :not([hidden]) ~ :not([hidden]) {
            margin-top: 1.5rem;
        }

        .text-center {
            text-align: center;
        }

        .overflow-y-auto {
            overflow-y: auto;
        }

        .scrollbar-thin::-webkit-scrollbar {
            width: 6px;
        }

        .scrollbar-thumb-gray-300::-webkit-scrollbar-thumb {
            background-color: #d1d5db;
            border-radius: 3px;
        }

        .scrollbar-track-gray-100::-webkit-scrollbar-track {
            background-color: #f3f4f6;
        }

        /* 网格布局 */
        .grid-cols-1 {
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }

        @media (min-width: 768px) {
            .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        }

        @media (min-width: 1024px) {
        .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        }

        .gap-4 {
        gap: 1rem;
        }

        .gap-6 {
        gap: 1.5rem;
        }

        /* 间距 */
        .p-4 {
        padding: 1rem;
        }

        .p-6 {
        padding: 1.5rem;
        }

        .px-3 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        }

        .px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        }

        .py-2 {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        }

        .py-3 {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        }

        .py-8 {
        padding-top: 2rem;
        padding-bottom: 2rem;
        }

        .py-12 {
        padding-top: 3rem;
        padding-bottom: 3rem;
        }

        .mb-4 {
        margin-bottom: 1rem;
        }

        .mb-8 {
        margin-bottom: 2rem;
        }

        .ml-3 {
        margin-left: 0.75rem;
        }

        .mr-2 {
        margin-right: 0.5rem;
        }

        .mr-3 {
        margin-right: 0.75rem;
        }

        .mt-2 {
        margin-top: 0.5rem;
        }

        .mt-8 {
        margin-top: 2rem;
        }

        /* 尺寸 */
        .h-4 {
        height: 1rem;
        }

        .h-5 {
        height: 1.25rem;
        }

        .h-8 {
        height: 2rem;
        }

        .h-12 {
        height: 3rem;
        }

        .w-4 {
        width: 1rem;
        }

        .w-5 {
        width: 1.25rem;
        }

        .w-8 {
        width: 2rem;
        }

        .w-12 {
        width: 3rem;
        }

        .w-full {
        width: 100%;
        }

        .max-w-7xl {
        max-width: 80rem;
        }

        .max-h-96 {
        max-height: 24rem;
        }

        /* 边框 */
        .border {
        border-width: 1px;
        }

        .border-b-2 {
        border-bottom-width: 2px;
        }

        .border-gray-200 {
        border-color: #e5e7eb;
        }

        .border-gray-300 {
        border-color: #d1d5db;
        }

        .border-blue-500 {
        border-color: #3b82f6;
        }

        .border-green-500 {
        border-color: #22c55e;
        }

        .rounded-lg {
        border-radius: 0.5rem;
        }

        .rounded-md {
        border-radius: 0.375rem;
        }

        .rounded-full {
        border-radius: 9999px;
        }

        /* 背景 */
        .bg-white {
        background-color: #ffffff;
        }

        .bg-gray-50 {
        background-color: #f9fafb;
        }

        .bg-blue-50 {
        background-color: #eff6ff;
        }

        .bg-indigo-100 {
        background-color: #e0e7ff;
        }

        .bg-blue-100 {
        background-color: #dbeafe;
        }

        .bg-green-100 {
        background-color: #dcfce7;
        }

        .bg-blue-600 {
        background-color: #2563eb;
        }

        .bg-gradient-to-br {
        background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
        }

        .from-blue-50 {
        --tw-gradient-from: #eff6ff;
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(239 246 255 / 0));
        }

        .to-indigo-100 {
        --tw-gradient-to: #e0e7ff;
        }

        /* 文本 */
        .text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
        }

        .text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
        }

        .text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
        }

        .text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
        }

        .text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
        }

        .text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
        }

        .font-bold {
        font-weight: 700;
        }

        .font-medium {
        font-weight: 500;
        }

        .font-semibold {
        font-weight: 600;
        }

        .text-gray-500 {
        color: #6b7280;
        }

        .text-gray-600 {
        color: #4b5563;
        }

        .text-gray-700 {
        color: #374151;
        }

        .text-gray-800 {
        color: #1f2937;
        }

        .text-blue-600 {
        color: #2563eb;
        }

        .text-blue-800 {
        color: #1e40af;
        }

        .text-green-600 {
        color: #16a34a;
        }

        .text-green-800 {
        color: #15803d;
        }

        .text-white {
        color: #ffffff;
        }

        .text-orange-600 {
        color: #ea580c;
        }

        /* 透明度 */
        .opacity-75 {
        opacity: 0.75;
        }

        /* 阴影 */
        .shadow-lg {
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        }

        /* 过渡 */
        .transition-all {
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
        }

        .transition-colors {
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
        }

        .duration-200 {
        transition-duration: 200ms;
        }

        /* 悬停效果 */
        .hover\:bg-blue-700:hover {
        background-color: #1d4ed8;
        }

        .hover\:bg-gray-50:hover {
        background-color: #f9fafb;
        }

        /* 焦点效果 */
        .focus\:outline-none:focus {
        outline: 2px solid transparent;
        outline-offset: 2px;
        }

        .focus\:ring-2:focus {
        box-shadow: 0 0 0 2px rgb(59 130 246 / 0.5);
        }

        .focus\:ring-blue-500:focus {
        --tw-ring-color: #3b82f6;
        }

        .focus\:border-transparent:focus {
        border-color: transparent;
        }

        /* 动画 */
        .animate-spin {
        animation: spin 1s linear infinite;
        }

        @keyframes spin {
        from {
        transform: rotate(0deg);
        }
        to {
        transform: rotate(360deg);
        }
        }

        /* 自定义样式 */
        .min-h-screen {
        min-height: 100vh;
        }
        #dt_mobal{
            margin-top: 120px;
            max-width: 1200px;

        }
        #dt_mobal .close{
            width: 18px;
            height: 18px;
            margin-top: 5px;
        }
        .dt_bt{
            background-color: #ffffff;
            height: 60px;
        }
    </style>
<div class="dt max-w-7xl mx-auto modal fade" id="dt_mobal">

    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
    <!-- 标题区域 -->
    <div class="text-center  shadow-lg dt_bt">
        <div class="flex items-center justify-center mb-4 dt_bt">
            <i class="fa fa-subway text-blue-600 text-2xl mr-3"></i>
            <h1 class="text-3xl font-bold text-gray-800">地铁公交接轨查询</h1>
            <i class="fa fa-bus text-green-600 text-2xl ml-3"></i>
        </div>
    </div>
    <!-- 搜索表单 -->
    <div class="bg-white rounded-lg shadow-lg p-6 ">
        <form id="searchForm" class="space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <!-- 公交线路搜索 -->
                <div class="space-y-2">
                    <label class="flex items-center text-sm font-medium text-gray-700">
                        <i class="fa fa-bus text-green-600 mr-2"></i>
                        公交线路
                    </label>
                    <input id="busLine" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                </div>

                <!-- 公交方向 -->
                <div class="space-y-2">
                    <label class="flex items-center text-sm font-medium text-gray-700">
                        <i class="fa fa-exchange-alt text-green-600 mr-2"></i>
                        公交方向
                    </label>
                    <select id="busDirection" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        <option value="">选择方向</option>
                        <option value="上行">上行</option>
                        <option value="下行">下行</option>
                    </select>
                </div>

                <!-- 公交站点 -->
                <div class="space-y-2">
                    <label class="flex items-center text-sm font-medium text-gray-700">
                        <i class="fa fa-bus text-green-600 mr-2"></i>
                        公交站点
                    </label>
                    <select id="busStation" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">

                    </select>
                </div>

                <!-- 地铁线路 -->
                <div class="space-y-2">
                    <label class="flex items-center text-sm font-medium text-gray-700">
                        <i class="fa fa-subway text-blue-600 mr-2"></i>
                        地铁线路
                    </label>
                    <select id="metroLine" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">

                    </select>
                </div>

                <!-- 地铁方向 -->
                <div class="space-y-2">
                    <label class="flex items-center text-sm font-medium text-gray-700">
                        <i class="fa fa-exchange-alt text-blue-600 mr-2"></i>
                        地铁方向
                    </label>
                    <select id="metroDirection" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">

                    </select>
                </div>

                <!-- 地铁站点 -->
                <div class="space-y-2">
                    <label class="flex items-center text-sm font-medium text-gray-700">
                        <i class="fa fa-subway text-blue-600 mr-2"></i>
                        地铁站点
                    </label>
                    <select id="metroStation" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">

                    </select>
                </div>
            </div>

            <!-- 搜索按钮 -->
            <div class="flex justify-center">
                <button type="submit" class="flex items-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200 font-medium">
                    <i class="fa fa-search mr-2"></i>
                    查询接轨时刻表
                </button>
            </div>
        </form>
    </div>

    <!-- 时刻表区域 -->
    <div id="scheduleContainer" class="hidden grid grid-cols-1 lg:grid-cols-2 ">
        <!-- 左侧时刻表 -->
        <div class="bg-white rounded-lg shadow-lg p-6">
            <div class="flex items-center mb-4">
                <i class="fa fa-clock text-blue-600 mr-2"></i>
                <h2 id="leftTitle" class="text-xl font-semibold text-gray-800"></h2>
            </div>
            <div id="leftSchedule" class="space-y-4">
                <!-- 时刻表内容将通过JavaScript动态生成 -->
            </div>
        </div>

        <!-- 右侧时刻表 -->
        <div class="bg-white rounded-lg shadow-lg p-6">
            <div class="flex items-center mb-4">
                <i class="fa fa-clock text-green-600 mr-2"></i>
                <h2 id="rightTitle" class="text-xl font-semibold text-gray-800"></h2>
            </div>
            <div id="rightSchedule" class="space-y-4">
                <!-- 时刻表内容将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>

    <!-- 加载状态 -->
    <div id="loading" class="hidden flex items-center justify-center py-12">
        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
        <span class="ml-3 text-gray-600">正在加载时刻表...</span>
    </div>

</div>
<script>
    var ListDatal;
    var DtDatal;
    $('#dt_mobal').on('dtAddMobal.show', function(e,ListData){
        // 加载延迟200毫秒显示mobal
        ListDatal = ListData;
        var line = ListData.line;
        $("#busLine").val(line.name);
        setTimeout(function(){$('#dt_mobal').modal({show : true,backdrop: 'static', keyboard: false});},200);
        $get("/dt/list_group",null,function (data){
            debugger
            DtDatal = data;
            var lineNames = Object.keys(data);
            console.log('所有线路:', lineNames);
            // 用于存储每个线路的方向（去重）
            var lineDirectionsMap = {};
            // 遍历所有线路
            for (var i = 0; i < lineNames.length; i++) {
                var lineName = lineNames[i];  // 例如："16 号线"
                var lineData = data[lineName];  // 这是该线路的数组 Array(26)

                console.log('线路名称:', lineName);
                console.log('该线路数据数量:', lineData.length);

                // 初始化该线路的方向数组
                lineDirectionsMap[lineName] = [];

                // 遍历该线路的所有数据，提取方向（去重）
                var directionSet = new Set();  // 使用 Set 自动去重
                for (var j = 0; j < lineData.length; j++) {
                    var item = lineData[j];

                    if (item.direction && !directionSet.has(item.direction)) {
                        directionSet.add(item.direction);
                        lineDirectionsMap[lineName].push(item.direction);

                        console.log('发现新方向 "' + item.direction + '" 在 ' + lineName);
                    }
                }

                console.log(lineName + ' 的所有方向:', lineDirectionsMap[lineName]);

                // 添加线路到下拉框
                $("#metroLine").append('<option value="' + lineName + '">' + lineName + '</option>');
            }

            // 将方向和线路数据都保存到全局变量供后续使用
            window.metroDataMap = data;
            window.metroDirectionsMap = lineDirectionsMap;

            // 默认选中第一条线路时，自动加载其方向
            if (lineNames.length > 0) {
                var firstLineName = lineNames[0];
                var directions = lineDirectionsMap[firstLineName];
                $("#metroDirection").empty().append('<option value="">选择方向</option>');
                for (var n in directions){
                    var direction = directions[n];
                    $("#metroDirection").append('<option value="' + direction + '">' + direction + '</option>');
                }
            }
        })
    });

    // 地铁线路改变事件
    document.getElementById('metroLine').addEventListener('change', function() {
        var metroLine = this.value;
        // 清空后续选择
        $("#metroDirection").empty().append('<option value="">选择方向</option>');
        $("#metroStation").empty().append('<option value="">选择站点</option>');

        // 加载地铁方向
        if (metroLine && window.metroDirectionsMap) {
            var directions = window.metroDirectionsMap[metroLine] || [];

            if (directions.length > 0) {
                var options = '<option value="">选择方向</option>';
                directions.forEach(function(dir) {
                    options += '<option value="' + dir + '">' + dir + '</option>';
                });
                $("#metroDirection").empty().append(options);
            }
        }
    });
    // 地铁方向改变事件
    document.getElementById('metroDirection').addEventListener('change', function() {
        var metroLine = document.getElementById('metroLine').value;
        var direction = this.value;
        // 清空站点
        $("#metroStation").empty().append('<option value="">选择站点</option>');

        // 加载地铁站点
        if (metroLine && direction) {
            loadMetroStations(metroLine, direction);
        }
    });

    // 公交方向改变事件
    document.getElementById('busDirection').addEventListener('change', function() {
        var lineName = document.getElementById('busLine').value;
        var direction = this.value;
        // 清空站点
        $("#busStation").empty().append('<option value="">选择站点</option>');

        // 加载公交站点
        if (lineName && direction) {
            loadBusStations(lineName, direction);
        }
    });


    // 加载公交站点（根据方向显示不同的站点列表）
    function loadBusStations(lineName, direction) {
        if (!lineName || !direction) {
            $("#busStation").empty().append('<option value="">请先选择线路和方向</option>');
            return;
        }
        // 从 ListDatal 中获取线路信息
        if (ListDatal && ListDatal.line) {
            var line = ListDatal.line;
            var startStationName = line.startStationName;  // 起点站
            var endStationName = line.endStationName;      // 终点站

            var options = '';

            if (direction === '上行') {
                // 上行：只显示起点站（上行方向的站点）
                options += '<option value="' + startStationName + '">' + startStationName + '</option>';
            } else if (direction === '下行') {
                // 下行：只显示终点站（下行方向的站点）
                options += '<option value="' + endStationName + '">' + endStationName + '</option>';
            }

            $("#busStation").empty().append(options);
        } else {
            // 如果没有线路数据，显示默认选项
            $("#busStation").empty().append('<option value="">暂无站点数据</option>');
        }
    }

    function loadMetroStations(metroLine, direction) {
        if (!metroLine || !direction) {
            $("#metroStation").empty().append('<option value="">请先选择线路和方向</option>');
            return;
        }

        // 从已加载的数据中提取站点
        var allData = window.metroDataMap;
        if (!allData || !allData[metroLine]) {
            $("#metroStation").empty().append('<option value="">暂无该线路数据</option>');
            return;
        }

        var lineData = allData[metroLine];  // 该线路的所有数据
        var stationSet = new Set();  // 去重
        var stations = [];

        // 筛选指定方向的数据并提取站点
        for (var i = 0; i < lineData.length; i++) {
            var item = lineData[i];
            if (item.direction === direction && item.station && !stationSet.has(item.station)) {
                stationSet.add(item.station);
                stations.push(item.station);
            }
        }

        console.log(metroLine + ' - ' + direction + ' 的站点:', stations);

        var options = '';
        if (stations.length > 0) {
            stations.forEach(function(station) {
                options += '<option value="' + station + '">' + station + '</option>';
            });
        } else {
            options += '<option value="">该方向暂无站点</option>';
        }

        $("#metroStation").empty().append(options);
    }

    // 转换时间为分钟数
    function convertTimeToMinutes(timeStr) {
        if (typeof timeStr !== 'string') {
            console.error('convertTimeToMinutes 接收到非字符串参数:', timeStr);
            timeStr = String(timeStr);
        }

        if (!/^\d{1,2}:\d{2}$/.test(timeStr)) {
            console.error('时间格式不正确:', timeStr);
            return 0;
        }

        const [hours, minutes] = timeStr.split(':').map(Number);
        return hours * 60 + minutes;
    }

    // 找到最接近的时间
    function findNearestTime(targetTime, timeArray) {
        if (!timeArray.length) return null;

        const targetTimeStr = typeof targetTime === 'string' ? targetTime : targetTime.time;
        const targetMinutes = convertTimeToMinutes(targetTimeStr);

        let nearest = timeArray[0];
        let minDiff = Math.abs(convertTimeToMinutes(nearest.time) - targetMinutes);

        timeArray.forEach(item => {
            const diff = Math.abs(convertTimeToMinutes(item.time) - targetMinutes);
            if (diff < minDiff) {
                minDiff = diff;
                nearest = item;
            }
        });

        return nearest;
    }

    // 渲染时刻表
    function renderSchedule(schedule, containerId, selectedTime, side) {
        const container = document.getElementById(containerId);
        container.innerHTML = '';

        if (!schedule || schedule.length === 0) {
            container.innerHTML = `
          <div class="text-center py-8 text-gray-500">
            <i class="fa fa-clock text-gray-300 text-4xl mb-4"></i>
            <p>暂无时刻表数据</p>
            <p class="text-sm">请选择搜索条件</p>
          </div>
        `;
            return;
        }

        // 添加时刻表头部信息
        const header = document.createElement('div');
        header.className = 'bg-gray-50 rounded-lg p-4 mb-4';
        header.innerHTML = `
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <i class="fa fa-map-marker-alt text-gray-500 mr-2"></i>
            <span class="text-sm text-gray-600">
              共 ${schedule.length} 班次
            </span>
          </div>
          <div class="text-sm text-gray-500">
            运营时间: ${schedule[0].time} - ${schedule[schedule.length - 1].time}
          </div>
        </div>
      `;
        container.appendChild(header);

        // 创建滚动容器
        const scrollContainer = document.createElement('div');
        scrollContainer.className = 'max-h-96 overflow-y-auto space-y-2 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100';

        // 添加时刻表项
        schedule.forEach((timeItem, index) => {
            const timeElement = document.createElement('div');
            timeElement.className = `border rounded-lg p-4 cursor-pointer transition-all duration-200 ${
                selectedTime && selectedTime.time === timeItem.time
                    ? side === 'left'
                        ? 'bg-blue-100 border-blue-500 text-blue-800'
                        : 'bg-green-100 border-green-500 text-green-800'
                    : 'bg-white border-gray-200 text-gray-700 hover:bg-gray-50'
            }`;
            timeElement.dataset.time = timeItem.time;
            timeElement.dataset.index = index;

            timeElement.innerHTML = `
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <i class="fa fa-clock mr-3"></i>
              <div>
                <div class="font-semibold text-lg">
                  ${timeItem.time}
                </div>
                <div class="text-sm opacity-75">
                  ${timeItem.station}
                </div>
              </div>
            </div>

            <div class="flex items-center text-sm">
              <span class="mr-2">${timeItem.type}</span>
              <i class="fa fa-arrow-right"></i>
            </div>
          </div>

          <!-- 额外信息 -->
          ${timeItem.platform ? `<div class="mt-2 text-xs opacity-75">站台: ${timeItem.platform}</div>` : ''}
          ${timeItem.note ? `<div class="mt-1 text-xs text-orange-600">备注: ${timeItem.note}</div>` : ''}
        `;

            // 添加点击事件
            timeElement.addEventListener('click', () => {
                handleTimeSelect(side, timeItem);
            });

            scrollContainer.appendChild(timeElement);
        });

        container.appendChild(scrollContainer);

        // 添加底部提示
        const footer = document.createElement('div');
        footer.className = 'text-xs text-gray-500 text-center py-2';
        footer.textContent = `点击时间可${side === 'left' ? '联动选择右侧' : '联动选择左侧'}最接近时刻`;
        container.appendChild(footer);
    }

    // 处理时间选择
    function handleTimeSelect(side, time) {
        if (side === 'left') {
            selectedTime.left = time;
            selectedTime.right = findNearestTime(time, scheduleData.rightSchedule || []);
        } else {
            selectedTime.right = time;
            selectedTime.left = findNearestTime(time, scheduleData.leftSchedule || []);
        }

        // 重新渲染时刻表
        renderSchedule(scheduleData.leftSchedule, 'leftSchedule', selectedTime.left, 'left');
        renderSchedule(scheduleData.rightSchedule, 'rightSchedule', selectedTime.right, 'right');

        // 滚动到选中项
        setTimeout(() => {
            scrollToSelectedItem('left');
            scrollToSelectedItem('right');
        }, 100);
    }

    // 滚动到选中项
    function scrollToSelectedItem(side) {
        const container = document.querySelector(`#${side}Schedule .overflow-y-auto`);
        const selectedItem = document.querySelector(`#${side}Schedule [data-time="${side === 'left' ? selectedTime.left?.time : selectedTime.right?.time}"]`);

        if (container && selectedItem) {
            const containerRect = container.getBoundingClientRect();
            const itemRect = selectedItem.getBoundingClientRect();

            const scrollTop = selectedItem.offsetTop - container.offsetTop - (container.clientHeight / 2) + (selectedItem.clientHeight / 2);

            container.scrollTo({
                top: scrollTop,
                behavior: 'smooth'
            });
        }
    }

    // 获取表单数据
    function getFormData() {
        return {
            busLine: document.getElementById('busLine').value,
            busDirection: document.getElementById('busDirection').value,
            busStation: document.getElementById('busStation').value,
            metroLine: document.getElementById('metroLine').value,
            metroDirection: document.getElementById('metroDirection').value,
            metroStation: document.getElementById('metroStation').value
        };
    }

    // 显示加载状态
    function showLoading() {
        document.getElementById('loading').classList.remove('hidden');
        document.getElementById('scheduleContainer').classList.add('hidden');
    }

    // 隐藏加载状态
    function hideLoading() {
        document.getElementById('loading').classList.add('hidden');
    }

    // 显示时刻表
    function showSchedule() {
        document.getElementById('scheduleContainer').classList.remove('hidden');
    }

    // 模拟API调用
    function fetchScheduleData(searchParams) {
        return new Promise((resolve) => {
            const { busLine, busDirection, busStation, metroLine, metroDirection, metroStation } = searchParams;

            const busSchedule =[];
            const metroSchedule = [];

            $.get("/dt/all",{line_eq:metroLine,direction_eq:metroDirection,station_eq:metroStation},function(rs){
                for (var i in  rs){
                    var item = rs[i];
                    metroSchedule.push({
                        time: item.arrivalTime,
                        station: item.station,
                        type: '地铁',
                        direction: metroDirection
                    });
                }
                // 获取公交数据 - 从 ListDatal 读取
                var busDataList = [];
                if (busDirection === '上行') {
                    busDataList = ListDatal.ListUpData || [];
                } else if (busDirection === '下行') {
                    busDataList = ListDatal.ListDoData || [];
                }
                debugger;
                var line = ListDatal.line;
                // 筛选指定站点的数据
                for (var i = 0; i < busDataList.length; i++) {
                    var item = busDataList[i];
                    busSchedule.push({
                        time: item.time,
                        station: busStation,
                        type: '公交',
                        direction: busDirection
                    });

                }

                resolve({
                    leftTitle: `${busLine}路公交 ${busDirection}方向${busStation ? ` - ${busStation}` : ''}`,
                    rightTitle: `${metroLine} ${metroDirection}方向${metroStation ? ` - ${metroStation}` : ''}`,
                    leftSchedule: busSchedule,
                    rightSchedule: metroSchedule
                });
            })

        });
    }

    // 初始化
    let scheduleData = null;
    let selectedTime = {
        left: null,
        right: null
    };

    // 表单提交事件
    document.getElementById('searchForm').addEventListener('submit', async function(e) {
        e.preventDefault();

        const formData = getFormData();

        // 验证必填字段
        if (!formData.busLine || !formData.busDirection || !formData.metroDirection) {
            alert('请填写公交线路、公交方向和地铁方向');
            return;
        }

        // 重置选中时间
        selectedTime = {
            left: null,
            right: null
        };

        // 显示加载状态
        showLoading();

        try {
            // 获取数据
            scheduleData = await fetchScheduleData(formData);

            if (scheduleData) {
                // 更新标题
                document.getElementById('leftTitle').textContent = scheduleData.leftTitle;
                document.getElementById('rightTitle').textContent = scheduleData.rightTitle;

                // 渲染时刻表
                renderSchedule(scheduleData.leftSchedule, 'leftSchedule', selectedTime.left, 'left');
                renderSchedule(scheduleData.rightSchedule, 'rightSchedule', selectedTime.right, 'right');

                // 显示时刻表
                showSchedule();
            } else {
                alert('未找到相关时刻表数据');
            }
        } catch (error) {
            console.error('获取时刻表数据失败:', error);
            alert('获取时刻表数据失败，请稍后重试');
        } finally {
            // 隐藏加载状态
            hideLoading();
        }
    });
</script>