时刻表地铁接轨

ljq
1 parent 3def45f6
Showing 8 changed files with 1507 additions and 0 deletions
src/main/java/com/bsth/controller/ttinfo/DtController.java
src/main/java/com/bsth/entity/ttinfo/ScheduleDt.java
src/main/java/com/bsth/repository/ttinfo/DtRepository.java
src/main/java/com/bsth/service/ttinfo/DtService.java
src/main/java/com/bsth/service/ttinfo/impl/DtServiceImpl.java
src/main/resources/static/pages/base/timesmodel/dt/dt.html
src/main/resources/static/pages/base/timesmodel/gantt.html
src/main/resources/static/pages/base/timesmodel/js/systemTools.js
+package com.bsth.controller.ttinfo;
+
+import com.bsth.controller.BaseController;
+import com.bsth.entity.ttinfo.ScheduleDt;
+import com.bsth.service.ttinfo.DtService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.util.Map;
+
+@RestController
+@RequestMapping("dt")
+public class DtController extends BaseController<ScheduleDt, Integer> {
+
+    @Autowired
+    private DtService dtService;
+    //分组查询地铁线路及站点
+    @RequestMapping("list_group")
+    public Map<String, Object> listGroup(){
+        return dtService.listGroup();
+    }
+}
+package com.bsth.entity.ttinfo;
+
+import javax.persistence.*;
+
+@Entity
+@Table(name = "bsth_c_schedule_dt")
+public class ScheduleDt {
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Integer id;
+    private String line;
+    private String direction;
+    private String station;
+    private String trainNumber;
+    private String arrivalTime;
+
+    public Integer getId() {
+        return id;
+    }
+
+    public void setId(Integer id) {
+        this.id = id;
+    }
+
+    public String getLine() {
+        return line;
+    }
+
+    public void setLine(String line) {
+        this.line = line;
+    }
+
+    public String getDirection() {
+        return direction;
+    }
+
+    public void setDirection(String direction) {
+        this.direction = direction;
+    }
+
+    public String getStation() {
+        return station;
+    }
+
+    public void setStation(String station) {
+        this.station = station;
+    }
+
+    public String getTrainNumber() {
+        return trainNumber;
+    }
+
+    public void setTrainNumber(String trainNumber) {
+        this.trainNumber = trainNumber;
+    }
+
+    public String getArrivalTime() {
+        return arrivalTime;
+    }
+
+    public void setArrivalTime(String arrivalTime) {
+        this.arrivalTime = arrivalTime;
+    }
+}
+package com.bsth.repository.ttinfo;
+
+import com.bsth.entity.ttinfo.ScheduleDt;
+import com.bsth.repository.BaseRepository;
+import org.springframework.data.jpa.repository.Query;
+import org.springframework.stereotype.Repository;
+
+import java.util.List;
+import java.util.Map;
+
+@Repository
+public interface DtRepository extends BaseRepository<ScheduleDt, Integer> {
+
+    @Query(value = "SELECT line,direction,station from bsth_c_schedule_dt GROUP BY line,direction,station,order_station",nativeQuery=true)
+    List<Map> listGroup();
+
+}
+package com.bsth.service.ttinfo;
+
+import com.bsth.entity.ttinfo.ScheduleDt;
+import com.bsth.service.BaseService;
+
+import java.util.Map;
+
+public interface DtService extends BaseService<ScheduleDt, Integer> {
+
+    Map<String, Object> listGroup();
+}
+package com.bsth.service.ttinfo.impl;
+
+import com.bsth.entity.ttinfo.ScheduleDt;
+import com.bsth.repository.ttinfo.DtRepository;
+import com.bsth.service.impl.BaseServiceImpl;
+import com.bsth.service.ttinfo.DtService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+
+import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+@Service
+public class DtServiceImpl extends BaseServiceImpl<ScheduleDt, Integer> implements DtService  {
+
+    @Autowired
+    private DtRepository dtRepository;
+    @Override
+    public  Map<String, Object> listGroup() {
+        //防止后期加入新的地铁线路
+        List<Map> list = dtRepository.listGroup();
+        // 需将读取到的数据按照 "线路 - 上下行 - 站点" 的结构进行保存
+        Map<String, Object> lineMap = new HashMap<>();  // 储存线路
+        List<Map> directionList = new ArrayList<>();// 储存方向
+
+        if (list != null) {
+            String currentLine = null;
+            for (Map item : list) {
+                String lineKey = item.get("line").toString();
+                String directionKey = item.get("direction").toString();
+
+                if (lineKey != null && !lineKey.isEmpty()) {
+                    // 如果线路发生变化，先将 directionList 保存到 lineMap 中，然后清空 directionList
+                    if (currentLine != null && !currentLine.equals(lineKey)) {
+                        lineMap.put(currentLine, directionList);
+                        directionList = new ArrayList<>();
+                    }
+                    currentLine = lineKey;
+
+                    // 将当前方向数据放入 directionList
+                    if (directionKey != null && !directionKey.isEmpty()) {
+                        directionList.add(item);
+                    }
+                }
+            }
+            // 循环结束后，将最后一组数据存入 lineMap
+            if (currentLine != null) {
+                lineMap.put(currentLine, directionList);
+            }
+        }
+
+        return lineMap;
+    }
+}
+<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>
 \ No newline at end of file
@@ -52,6 +52,10 @@
                     <div class="btn-group btn-group-devided " data-toggle="buttons">
                         <a class="btn btn-circle blue parambtns" href="javascript:;" data-pjax><i class="fa fa-list-ol" aria-hidden="true"></i> 只看实际</a>
                     </div>
+
+                    <div class="btn-group btn-group-devided " data-toggle="buttons">
+                        <a class="btn btn-circle blue dt_param" href="javascript:;" data-pjax><i class="fa fa-list-ol" aria-hidden="true"></i> 地铁接轨</a>
+                    </div>
                <!--     <div class="btn-group btn-group-devided countbtn" data-toggle="buttons">
                         <a class="btn btn-circle blue jhpbonsjpb" href="javascript:;" data-pjax><i class="fa fa-database"></i> 计划排班与实际班次</a>
                     </div>-->
@@ -595,6 +595,65 @@ $(&#39;.parambtns&#39;).on(&#39;click&#39;,function (){
     })
 })
+
+$('.dt_param').on('click',function (){
+    var historyData = echartsDrawGTT.getHistoryData(),
+        list = historyData[0];
+    var ListData ={};
+    var ListUpData =[];
+    var ListDoData =[];
+    //区分上下行班次  --线路  上下行 站点名称  时间
+    for(var i = 0;i<list.length;i++) {
+        var bcObj = list[i].value;
+        if (bcObj[6]=='normal') {
+            if (bcObj[8] == "1") { //上下行
+                ListUpData.push({time: getHoursAndMinutes(bcObj[1])})
+            } else {
+                ListDoData.push({time: getHoursAndMinutes(bcObj[1])})
+            }
+        }
+    }
+    var lineid = list[0].value[12];
+    ListUpData.sort(function(a,b){
+        return a.time.localeCompare(b.time);
+    });
+    ListDoData.sort(function(a,b){
+        return a.time.localeCompare(b.time);
+    });
+    // 查询线路编码的顺延号
+        $get('/line/' + lineid ,null,function(line){
+        ListData = {
+            "line":line,
+            "ListUpData":ListUpData,
+            "ListDoData":ListDoData
+        }
+        // 弹出层mobal页面
+        $.get('/pages/base/timesmodel/dt/dt.html', function(m){
+            $(pjaxContainer).append(m);
+            /*   // 关闭左侧栏
+               if (!$('body').hasClass('page-sidebar-closed'))
+                   $('.menu-toggler.sidebar-toggler').click();*/
+            // 规定被选元素要触发的事件。可以使自定义事件（使用 bind() 函数来附加），或者任何标准事件。
+            $('#dt_mobal').trigger('dtAddMobal.show',[ListData]);
+        });
+    });
+
+
+
+
+});
+// 时间戳转时间（时间：分钟）
+var getHoursAndMinutes = function (timestamp) {
+    var date = new Date(timestamp);
+    var Hours = swallowTow(date.getHours());
+    var Minutes = swallowTow(date.getMinutes());
+    return Hours+":"+Minutes;
+};
+// 补齐两位
+var swallowTow = function (date) {
+    return date>=10?date:(date="0"+date);
+};
+
 /**
  * @description : (TODO) 监听保存数据事件.
  *