潘钊 / bsth_control · Files

<style>
    .line-select {
        border: 1px solid #ddd;
        height: 310px;
        margin-top: 15px;
        box-shadow: 0 2px 5px 0 rgba(221, 221, 221, 0.24), 0 2px 10px 0 rgba(221, 221, 221, 0.24);
    }

    .line-select.selected {
        height: 210px;
    }

    .line-select .company {
        font-family: 仿宋;
        font-weight: 600;
    }

    .line-select .line {
        display: inline-block;
        padding: 8px;
        min-width: 85px;
        text-align: center;
        border: 1px solid #C1C1C1;
        color: #666;
        border-radius: 5px !important;
        margin: 5px;
    }

    .line-select .line.active {
        color: white;
        background: #32C5D2;
        border: 1px solid #32C5D2;
    }

    .line-select-cont {
        text-align: left;
        overflow: auto;
        height: 230px;
        padding-right: 0px;
    }

    .line-select-cont .slimScrollBar {
        background: rgb(50, 197, 210) !important;
        border-radius: 5px !important;
    }

    .line-select .search-input {
        margin: 25px 0 5px 0;
        padding-left: 0;
    }

    .line-select .search-input .input-icon-lg {
        box-shadow: 0 2px 5px 0 rgba(194, 202, 216, 0.49), 0 2px 10px 0 rgba(194, 202, 216, 0.49) !important;
    }

    .line-select .fa-search {
        color: #32c5d2 !important;
    }

    .line-select .fa-plus-circle {
        cursor: pointer;
        transform: rotate(43deg);
    }

    .line-select .fa-plus-circle:hover {
        color: #A9A9A9;
    }

    .selected .line {
        display: inline-block !important;
    }

    .load-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%);
        font-size: 14px;
        font-family: 仿宋;
    }

    /* .selected a{
        position: absolute;
        bottom: 20px;
    }
    .selected a.btn{
        bottom: 10px;
    } */

    .lb_panel {
        position: absolute;
        bottom: 20px;
    }

    .lb_panel a {
        margin-right: 5px;
    }

    .gotoControl.red {
        background: #ec7b7b;
        border-color: #ec7b7b;
    }

    .gotoControl.red:hover {
        background: #d96262;
        border-color: #d96262;
    }

    #resetBtn, #historyBtn {
        vertical-align: bottom;
        display: inline-block;
        margin-bottom: 5px;
    }

    .main_type_checkbox{
        vertical-align: bottom;
        display: inline-block;
        margin-bottom: 3px;
        margin-right: 15px;
        display: none;
    }

    /** 闵行没有分公司，直接隐藏
    .company, .sub-company {
        display: none !important;
    } */
</style>

<div class="page-head">
    <div class="page-title">
        <h1>线路分配</h1>
    </div>
</div>

<ul class="page-breadcrumb breadcrumb">
    <li><a href="/pages/home.html" data-pjax>首页</a> <i
            class="fa fa-circle"></i></li>
    <li><span class="active">线路调度管理</span> <i class="fa fa-circle"></i></li>
    <li><span class="active">线路分配</span></li>
</ul>

<div class="portlet light bordered">
    <div class="portlet-title">
        <div class="caption">
            <i class="icon-social-dribbble font-green"></i> <span
                class="caption-subject font-green bold uppercase">选择线路</span>
        </div>
    </div>
    <div class="alert alert-info">
        <strong>ps</strong> 可选择的线路，进入后是监控还是主调模式。可在 权限管理-> 用户管理里 进行配置。 </div>
    <div class="portlet-body">
        <div class="row" style="margin-bottom: 30px;">
            <div class="col-md-8 col-sm-12 col-md-offset-2" style="text-align: center;">
                <div class="col-md-12 line-select">
                    <div class="col-md-12 search-input">
                        <div class="col-md-6" style="padding-left: 0;">
                            <div class="input-icon input-icon-lg right">
                                <i class="fa fa-search"></i>
                                <input type="text" id="searchLineInput" class="form-control input-lg"
                                       placeholder="搜索线路"></div>
                        </div>
                    </div>
                    <div class="line-select-cont col-md-12">
                        <div class="line-select-body" style="margin-top: 20px;">
                            <span class="load-text">加载中...</span>
                        </div>
                    </div>
                </div>

                <div class="col-md-12 line-select selected" style="text-align: left;">
                    <h5 style="font-family: 仿宋; display: block;">已选中线路</h5>
                    <div class="selected-body"></div>

                    <div class="lb_panel">
                        <a href="javascript:;" class="btn btn-lg gotoControl grey" data-status=1>
                            <i class="fa fa-power-off"></i> 进入线路调度 </a>

                        <!--<a href="javascript:;" id="monitor" class="btn btn-lg grey gotoControl" data-status=0>
                            <i class="fa fa-tv"></i> 监控模式 </a>-->
                        &nbsp;
                        <!--<a href="javascript:;" id="resetBtn" style="left: 120px;color: #3598DC;">
                            <i class="fa fa-history"></i> 重置</a>-->

                        <div class="main_type_checkbox" >
                            <input type="checkbox" class="group-checkable icheck is_main_icheck" >
                            主调模式登录
                        </div>
                        <a href="javascript:;" id="historyBtn" style="left: 180px;color: #f36a5a;">
                            <i class="fa fa-history"></i> 历史纪录 </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="clone_line">
</div>

<script id="line_select_cont_temp" type="text/html">
    {{each list as line i}}
    <div class="line" name="line_{{line.lineCode}}" data-id={{line.lineCode}}>{{line.name}}</div>
    {{/each}}

    {{if list.length == 0}}
    <span style="color: #ff4444;font-family: 微软雅黑;"><i class="fa fa-question-circle"></i> 当前用户没有可调度的线路</span>
    {{/if}}
</script>
<script src="/assets/js/eventproxy.js"></script>
<script>
    $(function () {
        $('.is_main_icheck').iCheck({
            checkboxClass: 'icheckbox_flat-blue',
            increaseArea: '20%'
        });

        //大写字母映射
        var camelChars = {};
        //全拼映射
        var fullChars = {};
        //中文映射
        var zhChars = {};
        //合并所有映射
        var allChars = {};

        //线路编码映射
        var lineIdMap = {};

        //线路编码和名称对照 （写入localStorage，线调用）
        var lineIds = {};

        var storage = window.localStorage;
        //线调权限
        var auth;
        $get('/line/all', {destroy_eq: 0}, function (allLine) {
            //用户分配的线路
            $.get('/realControAuthority/findByCurrentUser', function (t) {
                //console.log('ttt', t);
                if(t.pattern==1){
                    $('.main_type_checkbox').css('display', 'inline-block');
                    $('.gotoControl').addClass('blue');

                    //$('.is_main_icheck').attr('checked', 'checked').trigger('change');
                    $('.is_main_icheck').on('ifChanged', function () {
                        if(this.checked){
                            $('.gotoControl').removeClass('grey').addClass('blue');
                        }
                        else{
                            $('.gotoControl').removeClass('blue').addClass('grey');
                        }
                    }).iCheck('check');
                }

                auth = t;
                var newArray = [], authArray = [];

                try{
                    authArray = t.lineCodeStr.split(',');
                }catch (e){}

                $.each(allLine, function () {
                    if (this.lineCode && authArray.indexOf(this.lineCode) != -1) {
                        newArray.push(this);
                    }
                });

                var htmlStr = template('line_select_cont_temp', {list: newArray});
                $('.line-select-body').html(htmlStr)
                        .slimscroll({//滚动条
                            height: '230px'
                        });

                //映射
                $.each(allLine, function (s, line) {
                    camelChars[pinyin.getCamelChars(line.name)] = line.lineCode;
                    fullChars[pinyin.getFullChars(line.name).toUpperCase()] = line.lineCode;
                    zhChars[line.name] = line.lineCode;
                    lineIdMap[line.lineCode] = line;

                    lineIds[line.lineCode] = line.name;
                });
                //合并映射
                $.extend(allChars, camelChars, fullChars, zhChars);

                //线路选中事件
                $('.line-select-body .line').on('click', function () {
                    if ($(this).hasClass('active')) {
                        $(this).removeClass('active');
                        $('.selected-body .line[name=' + $(this).attr('name') + ']').remove();
                    }
                    else {
                        $(this).addClass('active');
                        $('.selected-body').append($(this).clone());
                    }
                });

                storage.setItem('lineIds', JSON.stringify(lineIds));
            });

            $('#searchLineInput').focus();
        });

        //搜索框事件
        $('#searchLineInput').on('keyup', filterLines);

        $('.line-select .input-icon i').on('click', function () {
            if ($(this).hasClass('fa-plus-circle')) {
                $('#searchLineInput').val('');
                filterLines();
            }
        });

        $('.selected-body').on('click', '.line', function () {
            $('.line-select-body .line[name=' + $(this).attr('name') + ']').removeClass('active');
            $(this).remove();
        });

        //确定
        $('.gotoControl').on('click', function () {
            var lines = $('.selected-body .line');
            if (lines.length == 0) {
                layer.alert('你还没有选择线路！', {icon: 3});
                return;
            }

            showLoad('更新缓存信息...');
            //清理一下localStorage
            /*var rms=[];
            for (var i=0, len = storage.length; i  <  len; i++){
                var key = storage.key(i);
                if(key=='car2DeviceId' || key.endsWith('_route'))
                    rms.push(key);
            }
            $.each(rms, function () {
                storage.removeItem(this);
            });*/

            //将选择的线路写入localstorage
            var lsData = [];
            $.each(lines, function (i, e) {
                lsData.push(lineIdMap[$(e).data('id')]);
            });
            storage.setItem('lineControlItems', JSON.stringify(lsData));

            //ar operationMode = $(this).data('status');
            //监控模式还是主调模式
            storage.setItem('operationMode', $('.is_main_icheck')[0].checked?1:0);

            var ep = new EventProxy();
            //缓存车辆自编号和设备号对照
            //cacheCar2DeviceId(function () {
                delayEmit(ep, 'cacheRoute');
            //});

            //缓存线路路由
            ep.tail('cacheRoute', function () {
                cacheRoute(lsData, function (cacheData) {
                    delayEmit(ep, 'checkLineConfig');
                });
            });

            //检查线路配置信息
            ep.tail('checkLineConfig', function () {
                checkLineConfig(lsData, function (rs) {
                    if (rs.status == 0)
                        delayEmit(ep, 'gotoControl', rs);
                    else if (rs.status == 1)
                        delayEmit(ep, 'initLineConfig', rs);
                });
            });

            //初始化没有 线路配置信息 的线路
            ep.tail('initLineConfig', function (rs) {
                initLineConfig(rs.not, function () {
                    delayEmit(ep, 'gotoControl', rs);
                });
            });

            //进入线调
            ep.tail('gotoControl', function () {
                layer.closeAll();
                window.location.href = "/real_control/v2";
            });
        });

        function checkLineConfig(lsData, cb) {
            showLoad('检查线路配置信息...');
            var lineCodeArray = [];
            $.each(lsData, function () {
                lineCodeArray.push(this.lineCode);
            });

            $.ajax({
                url: '/lineConfig/check',
                traditional: true,
                data: {codeArray: lineCodeArray},
                method: 'POST',
                success: cb
            });
        }

        function initLineConfig(arr, cb) {
            var i = 0;
            (function () {
                if (i >= arr.length) {
                    cb && cb();
                    return;
                }
                var f = arguments.callee
                        , lineCode = arr[i];

                showLoad('初始化' + lineIds[lineCode] + '配置信息...');
                $.post('/lineConfig/init/' + lineCode, function (rs) {
                    if (rs == 1) {
                        i++;
                        f();
                    }
                });
            })();
        }

/*        function cacheCar2DeviceId(cb) {
            //showLoad('缓存基础对照信息...');
            $.get('/gps/Car2DeviceId', function (rs) {
                storage.setItem('car2DeviceId', JSON.stringify(rs));
                cb && cb();
            });
        }*/

        function cacheRoute(lsData, cb) {
            //showLoad('缓存线路路由信息...');
            //拼接线路编码
            var idx='';
            $.each(lsData, function () {
                idx+=(this.lineCode + ',');
            });
            idx=idx.substr(0, idx.length - 1);
            $.get('/realMap/findRouteByLine', {idx: idx}, function (rs) {
                if (rs) {
                    //cacheData[item.lineCode] = rs;
                    for(var lineCode in rs){
                        storage.setItem(lineCode + '_route', JSON.stringify(rs[lineCode]));
                    }
                    cb && cb();
                }
            });
/*            var i = 0, cacheData = {};
            (function () {
                if (i >= lsData.length) {
                    //写入localStorage
                    for (var lineCode in cacheData)
                        storage.setItem(lineCode + '_route', JSON.stringify(cacheData[lineCode]));

                    cb && cb();
                    return;
                }
                var f = arguments.callee
                        , item = lsData[i];

                $.get('/realMap/findRouteByLine', {lineCode: item.lineCode}, function (rs) {
                    //$.get('/realSchedule/findRouteByLine', {lineCode: item.lineCode}, function(rs){
                    if (rs && rs.lineId) {
                        cacheData[item.lineCode] = rs;
                        i++;
                        f();
                    }
                });
            })();*/
        }

        //历史纪录
        $('#historyBtn').on('click', function () {
            var lineControlItems = window.localStorage.getItem('lineControlItems');
            if (!lineControlItems) {
                layer.alert('没有在当前电脑找到历史纪录！', {icon: 3});
                return;
            }
            else {
                var array = JSON.parse(lineControlItems);
                clear();
                $.each(array, function (i, line) {
                    $('.line-select-body .line[name=line_' + line.lineCode + ']').click();
                });
            }
        });

        //重置
        //$('#resetBtn').on('click', clear);

        function clear() {
            $('.line-select-body .line.active').removeClass('active');
            $('.selected-body .line').remove();

            $('.line-select .input-icon i.fa-plus-circle').click();
            filterLines();
        }

        function filterLines() {
            var t = $('#searchLineInput').val().toUpperCase()
                    , es = []
                    , bs = $('.line-select-body .line, .line-select-body .company, .line-select-body .sub-company')
                    , icon = $('.line-select .input-icon i');

            if (!t) {
                bs.show();
                icon.removeClass('fa-plus-circle').addClass('fa-search');
                return;
            }
            else
                icon.removeClass('fa-search').addClass('fa-plus-circle');

            for (var c in allChars) {
                if (c.indexOf(t) != -1)
                    es.push('.line-select-body .line[name=line_' + allChars[c] + ']');
            }

            bs.hide();
            $.each(es, function (i, e) {
                $(e).show();
            });
        }

        function groupData(array, g) {
            var groups = {}, key;

            $.each(array, function (i, item) {
                key = item[g];
                if (!groups[key])
                    groups[key] = [];

                groups[key].push(item);
            });

            return groups;
        }

        function showLoad(text) {
            layer.msg(text, {icon: 16, time: 0, shade: 0.3});
        }

        function delayEmit(ep, t, p) {
            setTimeout(function () {
                ep.emit(t, p);
            }, 300);
        }
    });
</script>