m.html 17.9 KB

Edit Raw Blame History

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- Favicons -->
    <link rel="icon" href="/assets/img/favicon.png">
    <title>信息发布测试</title>
    <!--     Fonts and icons     -->
    <link rel="stylesheet" type="text/css" href="/assets/css/font.css"/>
    <link rel="stylesheet" href="/assets/css/bootstrap-material-design.min.css">

    <style>
        html, body {
            background: #f4f4f4;
            height: 100%;
        }

        .top_wrap {
            background: #fff;
            height: 138px;
        }

        .ct_auto_wrap {
            position: relative;
            display: inline-block;
            width: 100%;
        }

        .ct_autocompleter_rs {
            position: absolute;
            z-index: 2;
            background: #fefefe;
            width: 100%;
            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
            margin-top: 10px;
        }

        .line_detail_info {
            font-size: 14px;
            padding-left: 15px;
            position: relative;
            padding-bottom: 5px;
        }

        .line_detail_info > div {
            margin-bottom: 7px;
        }

        .line_detail_info .sub_info {
            font-size: 12px;
        }

        .line_detail_info .sub_info span.badge {
            vertical-align: top;
        }

        .line_detail_info i {
            color: #999999;
            vertical-align: middle;
            margin-top: -3px;
        }

        .line_detail_info .change_updown_icon i {
            position: absolute;
            right: 20px;
            font-size: 20px;
            top: 2px;
            color: #6565ff;
        }

        .top_form .form-group > label,
        .top_form .form-group input {
            text-indent: 15px
        }

        .station_chart_wrap {
            background: #fff;
            height: calc(100% - 236px);
            margin-top: 9px;
            overflow: auto;
            position: relative;
        }

        .near_txt {
            position: absolute;
            color: blue;
            font-size: 14px;
        }

        .publish_infos {
            background: #fff;
            height: 80px;
            margin-top: 9px;
        }

        /**
            svg
         */
        text.station_text {
            letter-spacing: -.5px;
            font-size: 13px;
        }

        text.station_text.active {
            fill: red;
        }

        path.station_link {
            stroke-width: 1.5px;
            stroke: #cfd1cf;
            transform: translate(-15px, 0);
        }

        path.cut_link {
            stroke-width: .5px;
            stroke: #dedede;
        }

        text.circle_no {
            transform: translate(-18px, 0);
            font-size: 11px;
            fill: #fff;
        }

        circle.station_circle {
            fill: #cfd1cf;
            r: 9;
            stroke: #ffffff;
            stroke-width: 2;
            transform: translate(-16px, -4px);
        }

        svg g.gps-wrap > rect {
            width: 64px;
            height: 15px;
            rx: 2px;
            cursor: pointer;
            stroke: #c94f21;
            fill: #c94f21;
            transform: translate(-10px, -11px);
        }

        svg g.gps-wrap > text {
            font-size: 12px;
            fill: #fff;
            transform: translate(-9px, 1px);
        }

        .publish_infos {
            display: -webkit-flex;
            display: flex;
        }

        .publish_infos > div {
            -webkit-flex: 1;
            flex: 1;
            text-align: center;
            height: 51px;
            margin-top: 15px;
            border-right: 1px solid #efefef;
            color: #2196F3;
            font-size: 12px;
        }

        .publish_infos > div > h6 {
            font-size: 12px;
            color: grey;
        }

        .publish_infos > div:last-child {
            border-right: none;
        }

        .publish_infos span.no {
            font-size: 18px;
        }

        .publish_infos span.no.red,
        .publish_infos > div > h6.red {
            color: #e22a2a;
            font-size: 12px;
        }

        .publish_infos span.no.red {
            margin-top: 6px;
            display: block;
            margin-bottom: 2px;
        }
    </style>
</head>

<body>
<div class="top_wrap">
    <div class="top_form">
        <form onsubmit="return false;">
            <div class="form-group">
                <label for="lineInput" class="bmd-label-floating">输入线路</label>
                <div class="ct_auto_wrap line_autocompleter">
                    <input type="text" class="form-control" id="lineInput">
                </div>
            </div>
        </form>
    </div>

    <div class="line_detail_info"></div>
</div>

<div class="station_chart_wrap">
    <svg></svg>
</div>
<div class="publish_infos"></div>

<script id="line_detail_info-temp" type="text/html">
    <div class="change_updown_icon">
        <i class="material-icons">repeat</i>
    </div>
    <div>
        {{qd}}
        <i class="material-icons">arrow_right</i>
        {{zd}}
    </div>
    <div class="sub_info">
        <span class="badge badge-primary">首</span> {{t1}} &nbsp; &nbsp;
        <span class="badge badge-danger">末</span> {{t2}}
    </div>
</script>
</body>

<script src="/assets/js/core/jquery.min.js"></script>
<script src="/assets/js/plugins/template.js"></script>
<script src="/assets/js/plugins/popper.min.js"></script>
<script src="/assets/js/bootstrap-material-design.min.js"></script>
<script src="/assets/js/utils/ct_autocompleter.js"></script>
<script src="/assets/js/plugins/d3.min.js"></script>
<script src="/assets/js/plugins/moment/moment.min.js"></script>
<script src="/assets/js/geolib/geolib.min.js"></script>

<script>
    $('body').bootstrapMaterialDesign();
    var lineMaps = {};

    var _curr;
    //线路自动补全
    $.get('/basic/lines', function (rs) {
        var data = [], item;
        for (var i = 0, len = rs.length; i < len; i++) {
            item = rs[i];
            data.push({
                code: item.lineCode,
                text: item.name,
                others: [item.fullChars, item.camelChars]
            });

            lineMaps[item.lineCode] = {
                qd: item.startStationName,
                zd: item.endStationName,
                st_0: item.startStationFirstTime,
                et_0: item.startStationEndTime,
                st_1: item.endStationFirstTime,
                et_1: item.endStationEndTime
            }
        }
        gb_ct_autocompleter.build($('.line_autocompleter', '.top_form'), data);
    });

    //线路选择事件
    $('.line_autocompleter input', '.top_form').on('auto_change', function () {
        var lineCode = $(this).data('val');

        _curr = {
            lineCode: lineCode,
            upDown: 0
        }

        $.get('/geo_data/stations/' + lineCode, function (rs) {
            _curr.data = rs.stations;

            clearTimeout(timer);
            timer = null;
            changeDetailInfo();
        });
    });

    var changeDetailInfo = function () {
        var info = lineMaps[_curr.lineCode]
            , data;

        if (_curr.upDown == 0) {
            data = {
                qd: info.qd,
                zd: info.zd,
                t1: info.st_0,
                t2: info.et_0
            }
        }
        else {
            data = {
                qd: info.zd,
                zd: info.qd,
                t1: info.st_1,
                t2: info.et_1
            }
        }

        var htmlStr = template('line_detail_info-temp', data);
        $('.line_detail_info').html(htmlStr);

        //站点图
        showStationChart();
    };

    var showStationChart = function () {
        var srs = _curr.data[_curr.upDown];
        //当前有选中站点
        var $cs = $('text.station_text.active');
        _call_info = [];
        if ($cs.length > 0) {
            var name = $cs.text();
            var station;
            var ci;
            for (var i = 0, len = srs.length; i < len; i++) {
                if (srs[i].name == name) {
                    station = srs[i]
                    ci = i;
                    break;
                }
            }

            if (station) {
                _call_info.auto = 1;
                _call_info.id = station.stationCode;
                _call_info.ci = ci;
                _call_info.srs = srs;
            }
        }
        drawSvgCharts(srs);

        if (_call_info.auto) {
            _call_info.auto = null;
            var $text = $('text.station_text[_id=' + _call_info.id + ']').trigger('click');

            $('.station_chart_wrap').animate({
                scrollTop: $text.attr('y') - 25
            });
        }
    }

    var drawSvgCharts = function (data) {
        var wrap = '.station_chart_wrap';
        var len = data.length;
        var h = len * 65;

        var yScale = d3.scale.linear().range([30, h - 30]).domain([0, len - 1]);
        var cx = 105;
        var cy = function (d, i) {
            return yScale(i);
        };
        var tText = function (d, i) {
            return d.name.replace('(', '（').replace(')', '）');
        };

        var line = d3.svg.line().x(cx).y(yScale);

        $('svg', wrap).empty();
        var svg = d3.select('svg', wrap).style('height', h);
        //add item g
        var items = svg.selectAll('g.item').data(data)
            .enter().append('g').classed({
                'item': true
            });

        //text
        items.append('text').classed({'station_text': true})
            .text(tText)
            .attr('x', cx)
            .attr('y', cy)
            .attr('_id', function (d) {
                return d.stationCode;
            });

        //path
        items.append('path').classed({'station_link': true})
            .attr('d', function (d, i) {
                return i < len - 1 ? line([i, i + 1]) : '';
            });

        //circle
        items.append('circle').classed({'station_circle': true})
            .attr('cx', cx)
            .attr('cy', cy)
            .attr('data-id', function (d) {
                return d.stationCode;
            });

        //circle num
        items.append('text').classed({'circle_no': true})
            .attr('x', function (d, i) {
                return i >= 9 ? cx - 4.7 : cx - 1;
            })
            .attr('y', cy)
            .text(function (d, i) {
                return i + 1;
            });

        //分割线
        var w = $(wrap).width();
        items.append('path').classed({'cut_link': true})
            .attr('d', function (d, i) {
                var y = yScale(i) + 26;
                return i == len - 1 ? 'M15,' + y + 'L' + w + ',' + y : 'M85,' + y + 'L' + w + ',' + y;
            });

        svg.append('g').classed({
            'gps-wrap': true
        });

        //定位到最靠近的站点
        if(!_call_info.auto)
            focusNearStation(data);
        $('.publish_infos').empty();
    }

    var focusNearStation = function (arr) {
        $('.near_txt', '.station_chart_wrap').remove();
        navigator.geolocation.getCurrentPosition(function (position) {

            var near;
            var point = {latitude: position.coords.latitude, longitude: position.coords.longitude}
                , sp;
            var distance, min = -1;
            for (var i = 0, len = arr.length; i < len; i++) {
                sp = {latitude: arr[i].lat, longitude: arr[i].lon};

                distance = geolib.getDistance(point, sp);

                if (min == -1 || distance < min) {
                    min = distance;
                    near = arr[i];
                }
            }

            if (min < 2000 && near) {
                var $text = $('text.station_text[_id=' + near.stationCode + ']', '.station_chart_wrap');
                var x = parseFloat($text.attr('x')) + $text[0].getBBox().width;
                var y = $text.attr('y') - 15;

                var $nt = $('<span class="near_txt" style="top: ' + y + 'px;left: ' + x + 'px;">(离我最近)</span>');
                $('.station_chart_wrap').append($nt);

                //滚动条
                $('.station_chart_wrap').animate({
                    scrollTop: y - 10
                });
            }
        }, null, {enableHighAccuracy: true});
    };

    $(document).on('click', 'svg text.station_text', function () {
        $('text.station_text.active').attr('class', 'station_text');
        $(this).attr('class', 'station_text active');

        var _id = $(this).attr('_id');
        var ci;
        var srs = _curr.data[_curr.upDown];
        for (var i = 0, len = srs.length; i < len; i++) {
            if (srs[i].stationCode == _id) {
                ci = i;
                break;
            }
        }

        _call_info.id = _id;
        _call_info.ci = ci;
        _call_info.srs = srs;
        start_call_xxfb();
    });

    var delay = 1000 * 7;
    var timer;
    var _call_info = {};
    var start_call_xxfb = function () {
        //定时调用信息发布接口
        if (timer) {
            clearTimeout(timer);
            timer = null;
        }

        (function () {
            var f = arguments.callee;
            _call_xxfb(function () {
                timer = setTimeout(f, delay);
            });
        })();
    }

    var _call_xxfb = function (cb) {
        //调用信息发布接口 /xxfb/carMonitor
        $.ajax({
            url: '/xxfb/carMonitor?lineid=' + _curr.lineCode + '&direction=' + _curr.upDown + '&stopid=' + _call_info.id,
            dataType: 'xml',
            success: function (data) {
                var array = [];
                $(data).find('car').each(function () {
                    var stopdis = parseInt($('stopdis', this).text());
                    array.push({
                        terminal: $('terminal', this).text(),
                        stopdis: stopdis,
                        distance: $('distance', this).text(),
                        time: $('time', this).text(),
                        sCode: _call_info.srs[_call_info.ci - stopdis].stationCode
                    });
                });

                showXXFBResult(array);

                cb && cb();
            }
        });
    }

    var gps_key = function (d) {
        return d.terminal;
    };

    var tx_id = function (d) {
        return 'tx_' + d.terminal;
    };
    var g_text = function (d) {
        return !d.terminal ? 'null' : d.terminal.replace('-', '');
    };
    var line_gps_index = {};
    var showXXFBResult = function (data) {
        data.sort(function (a, b) {
            return a.stopdis - b.stopdis;
        });
        var array = data.slice(0, 3);
        var htmlStr = '';
        var seconds;
        for (var i = 0, len = array.length; i < len; i++) {
            seconds = parseInt(array[i].time / 60);
            if (seconds == 0)
                htmlStr += '<div><span class="no red">即将到站</span><h6 class="red">' + array[i].stopdis + '站</h6></div>';
            else
                htmlStr += '<div><span class="no">' + seconds + '</span>分&nbsp;'+(array[i].time % 60)+'秒<h6>' + array[i].stopdis + '站</h6></div>';
        }
        $('.publish_infos').html(htmlStr);


        var svg = d3.select('.station_chart_wrap svg');
        var gps_cont = svg.select('.gps-wrap');

        line_gps_index = gps_index_mapp(data);
        //rect
        var rects = gps_cont.selectAll('rect').data(data, gps_key);
        rects.enter().append('rect');
        rects.exit().remove();

        gps_update_point(rects, svg);

        //text
        var ts = gps_cont.selectAll('text').data(data, gps_key);
        ts.enter().append('text');
        ts.exit().remove();
        ts.text(g_text)
        gps_update_point(ts, svg);
    };

    var gps_index_mapp = function (data) {
        var rs = {};
        var dataGroupStop = groupByStation(data);
        for (var stopNo in dataGroupStop) {
            rs[stopNo] = {};
            $.each(dataGroupStop[stopNo], function (i, gps) {
                rs[stopNo][gps.terminal] = i;
            });
        }
        return rs;
    };

    var groupByStation = function (data) {
        var rs = {},
            key;
        $.each(data, function () {
            key = this['sCode'];
            if (!rs[key])
                rs[key] = [];

            rs[key].push(this);
        });

        return rs;
    };

    var get_circle = function (dataId, svg) {
        try {
            var circle = $('.station_circle[data-id=' + dataId + ']', svg[0]);
            if (circle.length == 0)
                circle = null;
        } catch (e) {
            console.log('get_circle error! station_circle data-id:' + dataId);
            return null;
        }
        return circle;
    };

    var gx = function (gps, svg, wrapId) {
        var circle = get_circle(gps.sCode, svg);
        if (!circle) return -300;

        var x = circle.attr('cx') - 80;
        return x;
    };

    var gy = function (gps, svg) {
        var circle = get_circle(gps.sCode, svg);
        if (!circle) return -300;

        var cy = parseInt(circle.attr('cy')),
            index = line_gps_index[gps.sCode][gps.terminal];

        if (index >= 3)
            return -100;
        return cy + (index * 19);
    };

    function gps_update_point(e, svg) {
        var x;

        e.attr('x', function (d) {
            x = gx(d, svg);
            if (x == -100)
                $(this).css('transition-duration', 0).hide();
            else
                $(this).show();//找不到停靠点，直接隐藏
            return x;
        })
            .attr('y', function (d) {
                return gy(d, svg);
            });
    }

    $(document).on('click', '.change_updown_icon', function () {
        if (!_curr)
            return;

        _curr.upDown = _curr.upDown ? 0 : 1;
        changeDetailInfo();
    });
</script>
</html>