潘钊 / bsth_control · Files

<style type="text/css">
    .table-bordered {
        border: 1px solid; }
    .table-bordered > thead > tr > th,
    .table-bordered > thead > tr > td,
    .table-bordered > tbody > tr > th,
    .table-bordered > tbody > tr > td,
    .table-bordered > tfoot > tr > th,
    .table-bordered > tfoot > tr > td {
        border: 1px solid; }
    .table-bordered > thead > tr > th,
    .table-bordered > thead > tr > td {
        border-bottom-width: 2px; }

    .table > tbody + tbody {
        border-top: 1px solid; }

    * { margin: 0; padding: 0; box-sizing: border-box; }
/*    body { background: #f0f5fa; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; padding: 20px; }*/
    .card { background: white; border-radius: 32px; padding: 30px; box-shadow: 0 20px 35px rgba(0,40,60,0.15); width: fit-content; max-width: 100%; position: relative; }
    canvas { display: block; background: white; width: 100%; height: auto; cursor: pointer; }

    /* 垂直滑块容器 - 固定在坐标轴右侧中心 */
    .slider-wrapper {
        position: absolute;
        right: 45px;
        top: 40%;
        transform: translateY(-50%);
        width: 40px; /* 加宽以容纳数字 */
        height: 200px; /* 滑块高度 */
        z-index: 10;
        pointer-events: none;
    }

    /* 实际可交互的滑块区域 - 垂直 */
    .slider-container {
        position: relative;
        width: 18px;
        height: 100px;
        border-radius: 4px;
        background: linear-gradient(to bottom, #BF444C 0%, #D88273 50%, #F6EFA6 100%);
        cursor: pointer;
        pointer-events: auto;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        margin-left: 12px; /* 为数字留出空间 */
    }

    /* 人数显示 - 放在滑块右侧（保持原样式） */
    .value-side {
        position: absolute;
        top: -10%;
        transform: translateY(-50%);
        background: #1e4b6e;
        color: white;
        padding: 2px 8px;
        border-radius: 14px;
        font-weight: 600;
        font-size: 11px;
        min-width: 36px;
        text-align: center;
        pointer-events: none;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
        border: 1px solid rgba(255,255,255,0.2);
        line-height: 1.4;
        white-space: nowrap;
    }

    /* 滑块按钮 - 水平矩形（垂直滑块用）保持原样式 */
    .slider-handle {
        position: absolute;
        width: 23px; /* 比滑块宽一点 */
        height: 8px;
        background: #D88273;
        border: 1px solid white;
        border-radius: 1px;
        left: 50%;
        transform: translate(-50%, -50%);
        cursor: grab;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        transition: box-shadow 0.1s;
        pointer-events: auto;
    }

    .slider-handle:hover {
        box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    }

    .slider-handle:active {
        cursor: grabbing;
    }

    .tooltip {
        position: fixed;
        background: rgba(30, 30, 30, 0.95);
        color: white;
        padding: 8px 14px;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 600;
        pointer-events: none;
        z-index: 1000;
        box-shadow: 0 6px 16px rgba(0,0,0,0.25);
        backdrop-filter: blur(4px);
        border: 1px solid rgba(255,255,255,0.1);
        transition: opacity 0.15s ease;
        max-width: 260px;
        line-height: 1.4;
    }

    .tooltip strong {
        color: #ffd966;
    }
</style>

<div class="page-head">
    <div class="page-title">
        <h1>OD飞线</h1>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="portlet light porttlet-fit bordered">
            <div class="portlet-title">
                <form class="form-inline" action="">
                    <div style="display: inline-block;">
                        <span class="item-label" style="width: 80px;">线路: </span>
                        <select class="form-control" name="line" id="line" style="width: 180px;"></select>
                    </div>
                    <div style="display: inline-block;margin-left: 24px;">
                        <span class="item-label" style="width: 80px;">&nbsp;时间: </span>
                        <input class="form-control" type="text" id="date" style="width: 180px;"/>
                    </div>
                    <div style="display: inline-block; margin-left: 30px;">
                        <div class="md-radio-inline">
                            <div class="md-radio">
                                <input type="radio" id="radio1" name="dir" class="md-radiobtn" value="0"
                                       data-title="是" checked="checked">
                                <label for="radio1">
                                    <span></span>
                                    <span class="check"></span>
                                    <span class="box"></span> 上行
                                </label>
                            </div>
                            <div class="md-radio">
                                <input type="radio" id="radio2" name="dir" class="md-radiobtn" value="1"
                                       data-title="否">
                                <label for="radio2">
                                    <span></span>
                                    <span class="check"></span>
                                    <span class="box"></span> 下行
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <input class="btn btn-default" type="button" id="query" value="查询"/>
                    </div>
                </form>
            </div>
            <div class="portlet-body">
                <canvas id="canvas" width="2000" height="950"></canvas>

                <div class="slider-wrapper">
                    <div class="slider-container" id="sliderContainer">
                        <div class="slider-handle" id="sliderHandle"></div>
                    </div>
                    <div class="value-side" id="valueSide">20</div>
                </div>

                <div class="tooltip" id="tooltip" style="opacity: 0; display: none;"></div>
            </div>
        </div>
    </div>
</div>

<script>
    (function() {

        $("#date").datetimepicker({
            format : 'YYYY-MM-DD',
            locale : 'zh-cn'
        });
        var d = new Date();
        var year = d.getFullYear();
        var month = d.getMonth() + 1;
        var day = d.getDate();
        if(month < 10)
            month = "0" + month;
        if(day < 10)
            day = "0" + day;
        $("#date").val(year + "-" + month + "-" + day);

        $.get('/report/lineList',function(xlList){
            var data = [];
// 			data.push({id: " ", text: "全部线路"});
            $.get('/user/companyData', function(result){
                for(var i = 0; i < result.length; i++){
                    var companyCode = result[i].companyCode;
                    var children = result[i].children;
                    for(var j = 0; j < children.length; j++){
                        var code = children[j].code;
                        for(var k=0;k < xlList.length;k++ ){
                            if(xlList[k]["fgsbm"]==code && xlList[k]["gsbm"]==companyCode){
                                data.push({id: xlList[k]["xlbm"], text: xlList[k]["xlname"]});
// 								tempData[xlList[k]["xlbm"]] = companyCode+":"+code;
                            }
                        }
                    }
                }
                initPinYinSelect2('#line',data,'');
            });
        });


        $("#query").on("click",function(){
            if($("#date").val() == null || $("#date").val().trim().length == 0){
                layer.msg("请选择时间");
                return;
            }
            var lineCode = $("#line").val();
            var date = $("#date").val();
            var dir = $('input[name="dir"]:checked').val();
            var i = layer.load(2);
            $get('/ODInfo/odTable',{lineCode:lineCode,dir:dir,date:date},function(result){
                load(result.stations,result.kl);
                layer.close(i);
            });
        });

        function load(stations,kl){
            // 生成客流数据
            const links = kl;

            /*            const hubs = [0, 5, 9, 19, 27, 31, 36];
                        for (let i = 0; i < stations.length; i++) {
                            for (let j = i + 1; j < stations.length; j++) {
                                const dist = j - i;
                                let prob = 0;
                                if (dist <= 2) prob = 0.85;
                                else if (dist <= 5) prob = 0.45;
                                else if (dist <= 10) prob = 0.2;
                                else if (hubs.includes(i) || hubs.includes(j)) prob = 0.25;
                                else prob = 0.1;

                                if (Math.random() < prob) {
                                    let val = Math.round(60 - dist * 1.5 + Math.random() * 30);
                                    val = Math.min(100, Math.max(20, val));
                                    if (j === 36) val = Math.min(100, val + 15);
                                    links.push([i, j, val]);
                                }
                            }
                        }

                        // 确保每个站点至少有一条连接
                        for (let i = 0; i < stations.length - 1; i++) {
                            if (!links.some(l => l[0] === i)) {
                                const val = 30 + Math.floor(Math.random() * 30);
                                links.push([i, i + 1, val]);
                            }
                        }*/

            const canvas = document.getElementById('canvas');
            const ctx = canvas.getContext('2d');
            const tooltip = document.getElementById('tooltip');
            const sliderContainer = document.getElementById('sliderContainer');
            const sliderHandle = document.getElementById('sliderHandle');
            const valueSide = document.getElementById('valueSide');

            const w = canvas.width, h = canvas.height;
            const margin = { top: 70, bottom: 200, left: 110, right: 70 };
            const innerW = w - margin.left - margin.right;
            const innerH = h - margin.top - margin.bottom;
            const baseY = h - margin.bottom;

            // 计算站点X坐标
            const points = stations.map((name, i) => ({
                name, index: i,
                x: margin.left + (i * innerW) / (stations.length - 1)
            }));

            // Y轴设置
            const maxVal = Math.max(...links.map(l => l[2]));
            const yAxisMax = Math.ceil(maxVal / 10) * 10;

            // Y映射函数
            const getY = val => baseY - (val / yAxisMax) * innerH;

            // 状态
            let selectedStation = null;
            let filterThreshold = 5;//滑块初始值
            let filterMax = 20;//滑块最大值

            // 预计算飞线
            const flyLines = links.map(([i, j, val]) => {
                const p1 = points[i], p2 = points[j];
                const midX = (p1.x + p2.x) / 2;
                const targetPeakY = getY(val);
                const peakY = 2 * targetPeakY - baseY;

                // 预计算采样点（用于tooltip检测）
                const samplePoints = [];
                for (let t = 0; t <= 1; t += 0.02) {
                    const x = Math.pow(1-t, 2) * p1.x + 2 * (1-t) * t * midX + Math.pow(t, 2) * p2.x;
                    const y = Math.pow(1-t, 2) * baseY + 2 * (1-t) * t * peakY + Math.pow(t, 2) * baseY;
                    samplePoints.push({x, y});
                }

                return { i, j, val, p1, p2, midX, peakY, samplePoints };
            });

            function draw() {
                ctx.clearRect(0, 0, w, h);

                // 坐标轴
                ctx.beginPath();
                ctx.strokeStyle = '#7f7f86';
                ctx.lineWidth = 2.2;
                ctx.moveTo(margin.left, margin.top - 10);
                ctx.lineTo(margin.left, h - margin.bottom + 10);
                ctx.moveTo(margin.left - 10, baseY);
                ctx.lineTo(w - margin.right, baseY);
                ctx.stroke();

                // Y轴刻度
                ctx.fillStyle = '#54555a';
                ctx.font = '17px "Microsoft YaHei",sans-serif';
                ctx.textAlign = 'right';
                ctx.textBaseline = 'middle';

                for (let val = 0; val <= yAxisMax; val += 10) {
                    const y = getY(val);
                    if (y >= margin.top - 5 && y <= baseY + 5) {
                        ctx.beginPath();
                        ctx.strokeStyle = '#54555a';
                        ctx.lineWidth = 1.5;
                        ctx.moveTo(margin.left - 8, y);
                        ctx.lineTo(margin.left, y);
                        ctx.stroke();
                        ctx.fillText(val, margin.left - 15, y);
                    }
                }

                // 站点名称
                ctx.save();
                ctx.fillStyle = '#54555a';
                ctx.font = '17px "Microsoft YaHei",sans-serif';
                ctx.textBaseline = 'bottom';
                points.forEach(p => {
                    ctx.save();
                    ctx.translate(p.x, baseY + 18);
                    ctx.rotate(-0.8);
                    ctx.fillText(p.name, 0, 0);
                    ctx.restore();
                });
                ctx.restore();

                // 绘制飞线
                ctx.lineWidth = 1.5;
                ctx.lineCap = 'round';
                flyLines.forEach(line => {
                    const {i, j, val, peakY} = line;

                    if (val < filterThreshold) return;

                    let shouldDraw = selectedStation === null || (i === selectedStation && j > selectedStation);
                    if (!shouldDraw) return;

                    const p1 = points[i], p2 = points[j];
                    const midX = (p1.x + p2.x) / 2;

                    ctx.beginPath();
                    ctx.moveTo(p1.x, baseY);
                    ctx.quadraticCurveTo(midX, peakY, p2.x, baseY);

                    const opacity = 0.3 + (val / yAxisMax) * 0.7;
                    ctx.strokeStyle = `rgba(74, 163, 255, ${opacity})`;
                    ctx.stroke();
                });

                // 站点圆点
                points.forEach(p => {
                    ctx.beginPath();
                    ctx.arc(p.x, baseY, 5, 0, 2*Math.PI);
                    ctx.fillStyle = '#5a8bb0';
                    ctx.fill();
                    ctx.beginPath();
                    ctx.arc(p.x, baseY, 2.5, 0, 2*Math.PI);
                    ctx.fillStyle = 'white';
                    ctx.fill();
                    ctx.beginPath();
                    ctx.arc(p.x, baseY, 5, 0, 2*Math.PI);
                    ctx.strokeStyle = '#2c5068';
                    ctx.lineWidth = 1;
                    ctx.stroke();
                });

                // 高亮选中的站点
                if (selectedStation !== null) {
                    const p = points[selectedStation];
                    ctx.beginPath();
                    ctx.arc(p.x, baseY, 12, 0, 2*Math.PI);
                    ctx.strokeStyle = '#f9a825';
                    ctx.lineWidth = 3;
                    ctx.stroke();
                }

                // Y轴标签
                ctx.save();
                ctx.fillStyle = '#54555a';
                ctx.font = '18px "Microsoft YaHei",sans-serif';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'bottom';
                ctx.fillText('客流人数', margin.left, margin.top - 30);
                ctx.restore();
            }

            // 鼠标移动检测
            canvas.addEventListener('mousemove', (e) => {
                const rect = canvas.getBoundingClientRect();
                const scaleX = canvas.width / rect.width;
                const scaleY = canvas.height / rect.height;
                const mouseX = (e.clientX - rect.left) * scaleX;
                const mouseY = (e.clientY - rect.top) * scaleY;

                let closestLine = null;
                let minDist = 15;

                flyLines.forEach(line => {
                    if (line.val < filterThreshold) return;

                    let shouldCheck = selectedStation === null || (line.i === selectedStation && line.j > selectedStation);
                    if (!shouldCheck) return;

                    for (let k = 0; k < line.samplePoints.length; k++) {
                        const point = line.samplePoints[k];
                        const dist = Math.hypot(mouseX - point.x, mouseY - point.y);
                        if (dist < minDist) {
                            minDist = dist;
                            closestLine = line;
                        }
                    }
                });

                if (closestLine) {
                    tooltip.style.display = 'block';
                    tooltip.style.opacity = '1';
                    tooltip.style.left = (e.clientX + 15) + 'px';
                    tooltip.style.top = (e.clientY - 40) + 'px';
                    tooltip.innerHTML = `
                <div><strong>${stations[closestLine.i]}</strong> → <strong>${stations[closestLine.j]}</strong></div>
                <div>客流人数: <span style="color: #4aa3ff; font-weight: 600;">${closestLine.val}</span> 人</div>
            `;
                } else {
                    tooltip.style.opacity = '0';
                    setTimeout(() => {
                        if (tooltip.style.opacity === '0') tooltip.style.display = 'none';
                    }, 150);
                }
            });

            canvas.addEventListener('mouseleave', () => {
                tooltip.style.opacity = '0';
                setTimeout(() => {
                    if (tooltip.style.opacity === '0') tooltip.style.display = 'none';
                }, 150);
            });

            // 点击交互
            canvas.addEventListener('click', (e) => {
                const rect = canvas.getBoundingClientRect();
                const scaleX = canvas.width / rect.width;
                const scaleY = canvas.height / rect.height;
                const mouseX = (e.clientX - rect.left) * scaleX;
                const mouseY = (e.clientY - rect.top) * scaleY;

                let clickedIndex = null;
                points.forEach((p, idx) => {
                    if (Math.hypot(mouseX - p.x, mouseY - baseY) < 20) clickedIndex = idx;
                });

                selectedStation = (clickedIndex !== null && selectedStation === clickedIndex) ? null : clickedIndex;
                draw();
            });

            // 滑块交互
            function updateSliderFromEvent(clientY) {
                const rect = sliderContainer.getBoundingClientRect();
                let y = Math.max(0, Math.min(rect.height, clientY - rect.top));
                const percent = 1 - (y / rect.height);
                filterThreshold = Math.min(filterMax, Math.max(0, Math.round(percent * filterMax / 5) * 5));
                sliderHandle.style.top = (1 - percent) * 100 + '%';
                valueSide.textContent = filterThreshold;
                draw();
            }

            sliderHandle.addEventListener('mousedown', (e) => {
                e.preventDefault();
                const onMouseMove = (e) => updateSliderFromEvent(e.clientY);
                const onMouseUp = () => {
                    document.removeEventListener('mousemove', onMouseMove);
                    document.removeEventListener('mouseup', onMouseUp);
                };
                document.addEventListener('mousemove', onMouseMove);
                document.addEventListener('mouseup', onMouseUp);
            });

            sliderContainer.addEventListener('click', (e) => updateSliderFromEvent(e.clientY));

            // 初始化滑块
            setTimeout(() => {
                sliderHandle.style.top = (1 - filterThreshold/filterMax) * 100 + '%';
                valueSide.textContent = filterThreshold;
            }, 0);

            draw();
        }

    })();
</script>