main.html 18.9 KB

Edit Raw Blame History

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/assets/plugins/uk3.0/uikit.min.css"/>
    <link rel="stylesheet" href="/real_control_v2/assets/plugins/perfect-scrollbar/perfect-scrollbar.css"/>
    <!-- flatpickr -->
    <link rel="stylesheet" href="/real_control_v2/assets/plugins/flatpickr/flatpickr.min.css">
    <style>
        html, body {
            height: 100%;
        }

        .ct_page {
            padding: 25px 15px;
            height: 100%;
            height: calc(100% - 65px);
        }

        .ct_cont {
            height: calc(100% - 41px);
        }

        .ct_cont > div > div.uk-card {
            height: 99%;
        }

        .loading {
            height: 100%;
            text-align: center;
        }

        .loading .uk-spinner {
            margin-top: 200px;
        }

        .loading circle {
            stroke: red;
        }

        .ps-container > .ps-scrollbar-x-rail, .ps-container > .ps-scrollbar-y-rail {
            opacity: 0.6 !important;
            padding: 0 !important;
        }

        .line_list_all_wrap {
            height: 200px;
            overflow: auto;
            position: relative;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }

        .line_list_all_wrap > .item {
            background: #fff;
            color: #666;
            box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.08);
            padding: 7px 12px;
            border: 1px solid #ececec;
            display: inline-block;
            margin: 5px;
            min-width: 70px;
            text-align: center;
            cursor: default;
        }

        .line_list_all_wrap > .item.active{
            background: #ffe9a5;
        }

        .checked_list {
            padding-left: 4px;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }

        .checked_list > .item {
            color: #fbfbfb;
            box-shadow: 0px 3px 12px rgba(50, 197, 210, 0.3);
            padding: 7px 12px;
            border: 1px solid #ececec;
            display: inline-block;
            margin: 5px 2px;
            min-width: 70px;
            text-align: center;
            background: #32C5D2;
            cursor: move;
        }

        .company_search_wrap {
            width: 610px;
            margin-left: 6px;
        }

        .company_search_wrap select {
            display: inline-block;
            width: 128px;
            margin-right: 12px;
        }

        .uk-card {
            border: 1px solid #eeeeee;
        }

        .footer_tools_card {
            margin-top: 20px;
            padding: 20px 40px;
        }

        .footer_tools_card label {
            vertical-align: bottom;
            display: inline-block;
            font-size: 13px;
            margin-left: 13px;
            margin-bottom: 3px !important;
        }

        .uk-button-default{
            background: #e0e0e0 !important;
        }

        .line_list_all_wrap > .item.destroy{
            color: #f64242;
        }

        .checked_list > .item.destroy{
            background: #ff5c5c;
        }
    </style>
</head>

<body>
<div class="loading">
    <div uk-spinner></div>
</div>
<div class="ct_page" style="display: none;">
    <h2 class="uk-heading-line uk-heading-bullet"><span>线调 <h5 style="display: inline-block;">-选择线路</h5></span></h2>
    <div class="ct_cont">
        <div class="allot_wrap uk-flex-center" uk-grid>
            <div class="uk-card uk-card-hover uk-card-body uk-width-2-3@m"
                 style="padding-top: 20px;padding-bottom: 20px;">
                <div class="company_search_wrap">
                    <select class="uk-select company_search_select"></select>
                    <select class="uk-select fgs_search_select" disabled>
                        <option value="">分公司搜索</option>
                    </select>
                    <div class="uk-inline">
                        <span class="uk-form-icon uk-form-icon-flip" uk-icon="icon: search"></span>
                        <input class="uk-input line_search_input" style="width: 310px;" placeholder="搜索线路">
                    </div>
                </div>
                <hr>
                <div class="line_list_all_wrap"></div>
                <hr>
                <div class="checked_list" uk-sortable> </div>
            </div>

            <div class="uk-card uk-card-hover uk-card-body uk-width-2-3@m footer_tools_card">
                <button class="uk-button uk-button-default uk-button-large" style="font-size: 16px" id="go_to_real_system_btn"><i
                        uk-icon=" icon: sign-in" style="margin-right: 5px;" ></i>进入线路调度
                </button>
                <label class="pattern_type_label"><input class="uk-checkbox" type="checkbox" > 主调模式登录</label>
                <label class="new_window_open_label" title="可能会被浏览器阻止新建窗口" uk-tooltip><input class="uk-checkbox" type="checkbox"> 新窗口打开</label>
            </div>

            <div class="uk-alert-warning uk-width-2-3@m " uk-alert>
                <p>注意！！！ 相关“设备调试人员”和“测试人员”不要以主调模式进入线调。</p>
            </div>
        </div>
    </div>
</div>

<script id="line_list_items_temp" type="text/html">
    {{each list as obj i}}
    <span class="item {{obj.destroy==1?'destroy':''}}" data-id="{{obj.lineCode}}" data-gsbm="{{obj.company}}_{{obj.brancheCompany}}">{{obj.name}}</span>
    {{/each}}
</script>

<script src="/metronic_v4.5.4/plugins/jquery.min.js"></script>
<script src="/assets/plugins/uk3.0/uikit.min.js"></script>
<script src="/assets/plugins/uk3.0/uikit-icons.min.js"></script>
<script src="/real_control_v2/assets/plugins/perfect-scrollbar/perfect-scrollbar.jquery.js"></script>
<!-- EventProxy  -->
<script src="/assets/js/eventproxy.js"></script>
<!-- art-template 模版引擎 -->
<script src="/assets/plugins/template.js"></script>
<script src="/real_control_v2/assets/plugins/moment/moment.min.js"></script>
<script src="/assets/plugins/pinyin.js"></script>
<script>
    var allMapps = {};//线路搜索映射
    var companyData = {};
    var codeMapps={}; //线路编码映射
    //滚动条
    $('.line_list_all_wrap').perfectScrollbar();

    var ep = EventProxy.create('all_lines', 'user_author', 'company_data', function (allLines, userAuthor, company_data) {
        //按用户权限过滤线路
        var authArray = userAuthor.lineCodeStr.split(','),
                newArray = [];
        $.each(allLines, function () {
            if (this.lineCode && authArray.indexOf(this.lineCode) != -1) {
                newArray.push(this);
                codeMapps[this.lineCode] = this;
            }
        });
        //排序
        newArray.sort(function (a, b) {
            return a.name.localeCompare(b.name);
        });
        //创建线路搜索映射
        createLineSearchMapps(newArray);

        var htmlStr = template('line_list_items_temp', {list: newArray});
        $('.line_list_all_wrap').html(htmlStr);

        //过滤公司编码数据
        filter_company_data.filter(newArray, convert_buss_data(company_data));
        initCompanySelect();
        //更新滚动条高度
        setTimeout(function () {
            $('.line_list_all_wrap').perfectScrollbar('update');
        }, 1000);

        //登录模式
        changePattern(userAuthor.pattern);
        if(!userAuthor.pattern)
            $('.pattern_type_label').hide().find('input')[0].checked=false;
        else
            $('input','.pattern_type_label')[0].checked=true;

        $('.loading').remove();
        $('.ct_page').show();

        //默认选中上次记录
        var lineControlItems = window.localStorage.getItem('lineControlItems');
        if (lineControlItems) {
            var array = JSON.parse(lineControlItems);
            $.each(array, function (i, line) {
                $('.item[data-id='+line.lineCode+']','.line_list_all_wrap').trigger('click');
            });
        }
    });

    $('.pattern_type_label').on('click', function () {
        var checked = $('input',this)[0].checked;
        changePattern(checked);
    });

    function changePattern(status) {
        var btn = $('#go_to_real_system_btn'),
                def='uk-button-default',
                prim='uk-button-primary';
        if(status){
            btn.removeClass(def).addClass(prim);
        }
        else{
            btn.removeClass(prim).addClass(def);
        }
    }

    /**
     * 查询所有线路
     */
    $.get('/line/all', {remove_ne: 1}, function (list) {
        ep.emit('all_lines', list);
    });

    /**用户分配的线路*/
    $.get('/realControAuthority/findByCurrentUser', function (t) {
        ep.emit('user_author', t);
    });

    /** 查询公司编码 */
    $.get('/business/all', function (rs) {
        ep.emit('company_data', rs);
    });

    //点击选择线路
    $('.line_list_all_wrap').on('click', 'span.item', function () {
        var lineCode = $(this).data('id'),
                name = $(this).text();
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');

            $('.item[data-id='+lineCode+']','.checked_list').remove();
        }
        else {
            $(this).addClass('active');
            var span = $('<span data-id="'+lineCode+'" class="item uk-card uk-card-default uk-animation-slide-bottom '+($(this).hasClass('destroy')?"destroy":"")+'">'+name+'</span>')
                    .one('webkitAnimationEnd', function () {
                        $(this).removeClass('uk-animation-slide-bottom');
                    });
            $('.checked_list').append(span);
        }
    });

    $('.checked_list').on('click', '.item', function () {
        var lineCode = $(this).data('id');
        $('.item[data-id='+lineCode+']','.line_list_all_wrap').removeClass('active');
        $(this).remove();
    });

    /**
     *  搜索线路
     */
    function search_line_list() {
        var comp = $('select.company_search_select').val(),
                fgs = $('select.fgs_search_select').val(),
                gsbm = comp + '_' + fgs;

        if(gsbm=='_')
            gsbm=null;
        var allDoms = $('.line_list_all_wrap span.item');
        //线路
        var lineCodeArray = [];
        var t = $('.line_search_input').val();
        if(t){
            t = t.toUpperCase();
            for(var m in allMapps){
                if(m.indexOf(t)!=-1)
                    lineCodeArray.push(allMapps[m]);
            }
        }

        //搜索
        var show_elems = [];
        for (var i=0, dom; dom = allDoms[i++];) {
            if(gsbm && $(dom).data('gsbm').indexOf(gsbm)==-1)
                continue;

            if(t && lineCodeArray.indexOf($(dom).data('id')+'') == -1)
                continue;

            show_elems.push($(dom));
        }

        //show
        allDoms.hide();
        for(var j=0,$dom;$dom=show_elems[j++];)
            $dom.show();
    }

    function createLineSearchMapps(list) {
        allMapps = {};
        var name, code;
        for (var i = 0, line; line = list[i++];) {
            name = line.name;
            code = line.lineCode;
            //拼音映射
            allMapps[pinyin.getCamelChars(name)] = code;
            allMapps[pinyin.getFullChars(name).toUpperCase()] = code;
            //中文映射
            allMapps[name] = code;
        }
    }


    //构建公司级联下拉框
    function initCompanySelect() {
        var opts = '<option value="">公司搜索</option>';
        for (var k in companyData) {
            opts += '<option value="' + k + '">' + companyData[k].name + '</option>';
        }
        $('select.company_search_select').html(opts);
    }

    //公司切换
    $('select.company_search_select').on('change', function () {
        var opts = '<option value="">分公司搜索</option>',
                t = $(this).val(),
                fgsSelect = $('select.fgs_search_select');
        if (!t) {
            fgsSelect.html(opts).attr('disabled', 'disabled');
        }
        else{
            var array = companyData[t].childs;
            for (var i = 0, fgs; fgs = array[i++];) {
                opts += '<option value="' + fgs.businessCode + '">' + fgs.businessName + '</option>';
            }

            fgsSelect.html(opts).removeAttr('disabled');
        }
        search_line_list();
    });

    //分公司切换
    $('select.fgs_search_select').on('change', search_line_list);

    //线路文本框输入
    var flag;
    $('.line_search_input').on('input', function () {
        if(flag)
            return;
        flag = true;
        setTimeout(function () {
            //延迟
            search_line_list();
            flag = false;
        }, 200);
    });

    function convert_buss_data(rs) {
        var baseCode;
        //找到跟节点
        $.each(rs, function () {
            if (this.upCode == 0) {
                baseCode = this.businessCode;
                return false;
            }
        });
        if (!baseCode)return;
        //提取二级节点
        var secondMap = {};
        $.each(rs, function () {
            if (this.upCode == baseCode)
                secondMap[this.businessCode] = {name: this.businessName, childs: []};
        });
        //分公司节点
        $.each(rs, function () {
            if (secondMap[this.upCode])
                secondMap[this.upCode].childs.push(this);
        });
        //排序
        for (var sid in secondMap)
            secondMap[sid].childs.sort(naturalSort);
        return secondMap;
    }

    var naturalSort = function (a, b) {
        return a.businessName.localeCompare(b.businessName);
    };

    /**
     * 根据用户线路权限过滤公司编码数据
     */
    var filter_company_data = (function () {
        var filter = function (lineArray, data) {
            companyData = {};
            var com, fCom;
            $.each(lineArray, function () {
                com = this.company;
                fCom = this.brancheCompany;
                if (!companyData[com]) {
                    companyData[com] = {name: data[com].name, childs: []};
                }

                if (!get(fCom, companyData[com].childs)) {
                    companyData[com].childs.push(get(fCom, data[com].childs));
                }
            });
        };

        function get(fgsCode, fgsArray) {
            for (var i = 0, fgs; fgs = fgsArray[i++];) {
                if (fgs.businessCode == fgsCode)
                    return fgs;
            }
            return null;
        }

        return {
            filter: filter
        }
    })();
    var storage = window.localStorage;
    $('#go_to_real_system_btn').on('click', go_to_xd_sys);
    /**
     * 进入线调
     */
    function go_to_xd_sys() {
        var items = $('.checked_list .item');
        if(items.length==0)
            return UIkit.notification({message: '你还没有选择线路！', pos: 'bottom-center', status: 'danger'});
        $(this).attr('disabled', 'disabled');

        show_btn_load(this, '更新缓存数据...');
        (function () {
            var ls_line_data = [];
            $.each(items, function () {
                ls_line_data.push(codeMapps[$(this).data('id')]);
            });
            //将线路基础信息写入localStorage
            storage.setItem('lineControlItems', JSON.stringify(ls_line_data));
            //监控模式还是主调模式
            storage.setItem('operationMode', $('.pattern_type_label>input')[0].checked?1:0);

            //进入线调
            var eq = EventProxy.create('cache_route', 'check_line_config', function () {
                var newWinOpen = $('input','.new_window_open_label')[0].checked;
                if(!newWinOpen)
                    top.window.location.href = "/real_control/v2";
                else{
                    window.open("/real_control/v2");
                    $('#go_to_real_system_btn').html('已经尝试打开新窗口，如看不到，可能被浏览器阻止了');
                }
            });

            //拼接线路编码
            var idx='';
            $.each(ls_line_data, function () {
                idx+=(this.lineCode + ',');
            });
            //缓存路由
            idx=idx.substr(0, idx.length - 1);
            $.get('/realMap/findRouteAndVersionByLine', {idx: idx}, function (rs) {
                if (rs) {
                    for(var lineCode in rs)
                        storage.setItem(lineCode + '_route', JSON.stringify(rs[lineCode]));

                    eq.emit('cache_route');
                }
            });
            $.get('/realMap/findRouteByLine', {idx: idx}, function (rs) {
                if (rs) {
                    for(var lineCode in rs)
                        storage.setItem(lineCode + '_route', JSON.stringify(rs[lineCode]));

                    eq.emit('cache_route');
                }
            });


            //检查线路配置
            checkLineConfig(ls_line_data, function (rs) {
                if (rs.status == 0)
                    eq.emit('check_line_config');
                else if (rs.status == 1){
                    initLineConfig(rs.not, function () {
                        eq.emit('check_line_config');
                    });
                }
            })
        })();
    }

    function checkLineConfig(lsData, cb) {
        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 show_btn_load(btn, msg) {
        $(btn).html('<div uk-spinner></div> ' + msg);
    }
</script>
</body>
</html>