潘钊 / bsth_control · Commits

Commit ea6adf215e4609f1904e96a890c93a2881e6e1d8

Authored by lizhuojun
1 parent 1e768a44
build: skipped

移动线调

Inline Side-by-side
Showing 1 changed file with 553 additions and 0 deletions
src/main/resources/static/pages/control/lineallot/allot_mobile.html 0 → 100644
  View file @ea6adf2
  1 +<style>
  2 + .line-select {
  3 + border: 1px solid #ddd;
  4 + height: 310px;
  5 + margin-top: 15px;
  6 + box-shadow: 0 2px 5px 0 rgba(221, 221, 221, 0.24), 0 2px 10px 0 rgba(221, 221, 221, 0.24);
  7 + }
  8 +
  9 + .line-select.selected {
  10 + height: 210px;
  11 + }
  12 +
  13 + .line-select .company {
  14 + font-family: 仿宋;
  15 + font-weight: 600;
  16 + }
  17 +
  18 + .line-select .line {
  19 + display: inline-block;
  20 + padding: 8px;
  21 + min-width: 85px;
  22 + text-align: center;
  23 + border: 1px solid #C1C1C1;
  24 + color: #666;
  25 + border-radius: 5px !important;
  26 + margin: 5px;
  27 + }
  28 +
  29 + .line-select .line.active {
  30 + color: white;
  31 + background: #32C5D2;
  32 + border: 1px solid #32C5D2;
  33 + }
  34 +
  35 + .line-select-cont {
  36 + text-align: left;
  37 + overflow: auto;
  38 + height: 230px;
  39 + padding-right: 0px;
  40 + }
  41 +
  42 + .line-select-cont .slimScrollBar {
  43 + background: rgb(50, 197, 210) !important;
  44 + border-radius: 5px !important;
  45 + }
  46 +
  47 + .line-select .search-input {
  48 + margin: 25px 0 5px 0;
  49 + padding-left: 0;
  50 + }
  51 +
  52 + .line-select .search-input .input-icon-lg {
  53 + box-shadow: 0 2px 5px 0 rgba(194, 202, 216, 0.49), 0 2px 10px 0 rgba(194, 202, 216, 0.49) !important;
  54 + }
  55 +
  56 + .line-select .fa-search {
  57 + color: #32c5d2 !important;
  58 + }
  59 +
  60 + .line-select .fa-plus-circle {
  61 + cursor: pointer;
  62 + transform: rotate(43deg);
  63 + }
  64 +
  65 + .line-select .fa-plus-circle:hover {
  66 + color: #A9A9A9;
  67 + }
  68 +
  69 + .selected .line {
  70 + display: inline-block !important;
  71 + }
  72 +
  73 + .load-text {
  74 + position: absolute;
  75 + top: 50%;
  76 + left: 50%;
  77 + transform: translate(-50%);
  78 + font-size: 14px;
  79 + font-family: 仿宋;
  80 + }
  81 +
  82 + /* .selected a{
  83 + position: absolute;
  84 + bottom: 20px;
  85 + }
  86 + .selected a.btn{
  87 + bottom: 10px;
  88 + } */
  89 +
  90 + .lb_panel {
  91 + position: absolute;
  92 + bottom: 20px;
  93 + }
  94 +
  95 + .lb_panel a {
  96 + margin-right: 5px;
  97 + }
  98 +
  99 + .gotoControl.red {
  100 + background: #ec7b7b;
  101 + border-color: #ec7b7b;
  102 + }
  103 +
  104 + .gotoControl.red:hover {
  105 + background: #d96262;
  106 + border-color: #d96262;
  107 + }
  108 +
  109 + #resetBtn, #historyBtn {
  110 + vertical-align: bottom;
  111 + display: inline-block;
  112 + margin-bottom: 5px;
  113 + }
  114 +
  115 + .main_type_checkbox{
  116 + vertical-align: bottom;
  117 + display: inline-block;
  118 + margin-bottom: 3px;
  119 + margin-right: 15px;
  120 + display: none;
  121 + }
  122 +
  123 + /** 闵行没有分公司，直接隐藏
  124 + .company, .sub-company {
  125 + display: none !important;
  126 + } */
  127 +</style>
  128 +
  129 +<div class="page-head">
  130 + <div class="page-title">
  131 + <h1>线路分配</h1>
  132 + </div>
  133 +</div>
  134 +
  135 +<ul class="page-breadcrumb breadcrumb">
  136 + <li><a href="/pages/home.html" data-pjax>首页</a> <i
  137 + class="fa fa-circle"></i></li>
  138 + <li><span class="active">线路调度管理</span> <i class="fa fa-circle"></i></li>
  139 + <li><span class="active">线路分配</span></li>
  140 +</ul>
  141 +
  142 +<div class="portlet light bordered">
  143 + <div class="portlet-title">
  144 + <div class="caption">
  145 + <i class="icon-social-dribbble font-green"></i> <span
  146 + class="caption-subject font-green bold uppercase">选择线路</span>
  147 + </div>
  148 + </div>
  149 + <div class="alert alert-info">
  150 + <a href="#xd_position"><span id="go_xd_position"></span></a>
  151 + <strong>ps</strong> 可选择的线路，进入后是监控还是主调模式。可在 权限管理-> 用户管理里 进行配置。 </div>
  152 + <div class="portlet-body">
  153 + <div class="row" style="margin-bottom: 30px;">
  154 + <div class="col-md-8 col-sm-12 col-md-offset-2" style="text-align: center;">
  155 + <div class="col-md-12 line-select">
  156 + <div class="col-md-12 search-input">
  157 + <div class="col-md-6" style="padding-left: 0;">
  158 + <div class="input-icon input-icon-lg right">
  159 + <i class="fa fa-search"></i>
  160 + <input type="text" id="searchLineInput" class="form-control input-lg"
  161 + placeholder="搜索线路"></div>
  162 + </div>
  163 + </div>
  164 + <div class="line-select-cont col-md-12">
  165 + <div class="line-select-body" style="margin-top: 20px;">
  166 + <span class="load-text">加载中...</span>
  167 + </div>
  168 + </div>
  169 + </div>
  170 +
  171 + <div class="col-md-12 line-select selected" style="text-align: left;">
  172 + <h5 style="font-family: 仿宋; display: block;">已选中线路</h5>
  173 + <div class="selected-body"></div>
  174 +
  175 + <div class="lb_panel">
  176 + <a href="javascript:;" class="btn btn-lg gotoControl grey" data-status=1>
  177 + <i class="fa fa-power-off"></i> 进入线路调度 </a>
  178 +
  179 +
  180 +
  181 + <div class="main_type_checkbox" >
  182 + <input type="checkbox" class="group-checkable icheck is_main_icheck" >
  183 + 主调模式登录
  184 + </div>
  185 + <a href="javascript:;" id="historyBtn" style="left: 180px;color: #f36a5a;">
  186 + <i class="fa fa-history"></i> 历史纪录 </a>
  187 + </div>
  188 + </div>
  189 + </div>
  190 + </div>
  191 + </div>
  192 +</div>
  193 +
  194 +<div class="clone_line">
  195 +</div>
  196 +
  197 +<script id="line_select_cont_temp" type="text/html">
  198 + {{each list as line i}}
  199 + <div class="line" name="line_{{line.lineCode}}" data-id={{line.lineCode}}>{{line.name}}</div>
  200 + {{/each}}
  201 +
  202 + {{if list.length == 0}}
  203 + <span style="color: #ff4444;font-family: 微软雅黑;"><i class="fa fa-question-circle"></i> 当前用户没有可调度的线路</span>
  204 + {{/if}}
  205 +</script>
  206 +<script src="/assets/js/eventproxy.js"></script>
  207 +<script>
  208 + $(function () {
  209 + $('.is_main_icheck').iCheck({
  210 + checkboxClass: 'icheckbox_flat-blue',
  211 + increaseArea: '20%'
  212 + });
  213 +
  214 + //大写字母映射
  215 + var camelChars = {};
  216 + //全拼映射
  217 + var fullChars = {};
  218 + //中文映射
  219 + var zhChars = {};
  220 + //合并所有映射
  221 + var allChars = {};
  222 +
  223 + //线路编码映射
  224 + var lineIdMap = {};
  225 +
  226 + //线路编码和名称对照 （写入localStorage，线调用）
  227 + var lineIds = {};
  228 +
  229 + var storage = window.localStorage;
  230 + //线调权限
  231 + var auth;
  232 + $get('/line/all', {destroy_eq: 0}, function (allLine) {
  233 + //用户分配的线路
  234 + $.get('/realControAuthority/findByCurrentUser', function (t) {
  235 + //console.log('ttt', t);
  236 + if(t.pattern==1){
  237 + $('.main_type_checkbox').css('display', 'inline-block');
  238 + $('.gotoControl').addClass('blue');
  239 +
  240 + //$('.is_main_icheck').attr('checked', 'checked').trigger('change');
  241 + $('.is_main_icheck').on('ifChanged', function () {
  242 + if(this.checked){
  243 + $('.gotoControl').removeClass('grey').addClass('blue');
  244 + }
  245 + else{
  246 + $('.gotoControl').removeClass('blue').addClass('grey');
  247 + }
  248 + }).iCheck('check');
  249 + }
  250 +
  251 + auth = t;
  252 + var newArray = [], authArray = [];
  253 +
  254 + try{
  255 + authArray = t.lineCodeStr.split(',');
  256 + }catch (e){}
  257 +
  258 + $.each(allLine, function () {
  259 + if (this.lineCode && authArray.indexOf(this.lineCode) != -1) {
  260 + newArray.push(this);
  261 + }
  262 + });
  263 +
  264 + var htmlStr = template('line_select_cont_temp', {list: newArray});
  265 + $('.line-select-body').html(htmlStr)
  266 + .slimscroll({//滚动条
  267 + height: '230px'
  268 + });
  269 +
  270 + //映射
  271 + $.each(allLine, function (s, line) {
  272 + camelChars[pinyin.getCamelChars(line.name)] = line.lineCode;
  273 + fullChars[pinyin.getFullChars(line.name).toUpperCase()] = line.lineCode;
  274 + zhChars[line.name] = line.lineCode;
  275 + lineIdMap[line.lineCode] = line;
  276 +
  277 + lineIds[line.lineCode] = line.name;
  278 + });
  279 + //合并映射
  280 + $.extend(allChars, camelChars, fullChars, zhChars);
  281 +
  282 + //线路选中事件
  283 + $('.line-select-body .line').on('click', function () {
  284 + if ($(this).hasClass('active')) {
  285 + $(this).removeClass('active');
  286 + $('.selected-body .line[name=' + $(this).attr('name') + ']').remove();
  287 + }
  288 + else {
  289 + $(this).addClass('active');
  290 + $('.selected-body').append($(this).clone());
  291 + }
  292 + });
  293 +
  294 + storage.setItem('lineIds', JSON.stringify(lineIds));
  295 + });
  296 +
  297 + $('#searchLineInput').focus();
  298 + });
  299 +
  300 + //搜索框事件
  301 + $('#searchLineInput').on('keyup', filterLines);
  302 +
  303 + $('.line-select .input-icon i').on('click', function () {
  304 + if ($(this).hasClass('fa-plus-circle')) {
  305 + $('#searchLineInput').val('');
  306 + filterLines();
  307 + }
  308 + });
  309 +
  310 + $('.selected-body').on('click', '.line', function () {
  311 + $('.line-select-body .line[name=' + $(this).attr('name') + ']').removeClass('active');
  312 + $(this).remove();
  313 + });
  314 +
  315 + //确定
  316 + $('.gotoControl').on('click', function () {
  317 + var lines = $('.selected-body .line');
  318 + if (lines.length == 0) {
  319 + layer.alert('你还没有选择线路！', {icon: 3});
  320 + return;
  321 + }
  322 +
  323 + showLoad('更新缓存信息...');
  324 + //清理一下localStorage
  325 + /*var rms=[];
  326 + for (var i=0, len = storage.length; i < len; i++){
  327 + var key = storage.key(i);
  328 + if(key=='car2DeviceId' || key.endsWith('_route'))
  329 + rms.push(key);
  330 + }
  331 + $.each(rms, function () {
  332 + storage.removeItem(this);
  333 + });*/
  334 +
  335 + //将选择的线路写入localstorage
  336 + var lsData = [];
  337 + $.each(lines, function (i, e) {
  338 + lsData.push(lineIdMap[$(e).data('id')]);
  339 + });
  340 + storage.setItem('lineControlItems', JSON.stringify(lsData));
  341 +
  342 + //ar operationMode = $(this).data('status');
  343 + //监控模式还是主调模式
  344 + storage.setItem('operationMode', $('.is_main_icheck')[0].checked?1:0);
  345 +
  346 + var ep = new EventProxy();
  347 + //缓存车辆自编号和设备号对照
  348 + //cacheCar2DeviceId(function () {
  349 + delayEmit(ep, 'cacheRoute');
  350 + //});
  351 +
  352 + //缓存线路路由
  353 + ep.tail('cacheRoute', function () {
  354 + cacheRoute(lsData, function (cacheData) {
  355 + delayEmit(ep, 'checkLineConfig');
  356 + });
  357 + });
  358 +
  359 + //检查线路配置信息
  360 + ep.tail('checkLineConfig', function () {
  361 + checkLineConfig(lsData, function (rs) {
  362 + if (rs.status == 0)
  363 + delayEmit(ep, 'gotoControl', rs);
  364 + else if (rs.status == 1)
  365 + delayEmit(ep, 'initLineConfig', rs);
  366 + });
  367 + });
  368 +
  369 + //初始化没有 线路配置信息 的线路
  370 + ep.tail('initLineConfig', function (rs) {
  371 + initLineConfig(rs.not, function () {
  372 + delayEmit(ep, 'gotoControl', rs);
  373 + });
  374 + });
  375 +
  376 + //进入线调
  377 + ep.tail('gotoControl', function () {
  378 + layer.closeAll();
  379 + window.location.href = "/real_control/v2_mobile";//移动端线调
  380 + });
  381 + });
  382 +
  383 + function checkLineConfig(lsData, cb) {
  384 + showLoad('检查线路配置信息...');
  385 + var lineCodeArray = [];
  386 + $.each(lsData, function () {
  387 + lineCodeArray.push(this.lineCode);
  388 + });
  389 +
  390 + $.ajax({
  391 + url: '/lineConfig/check',
  392 + traditional: true,
  393 + data: {codeArray: lineCodeArray},
  394 + method: 'POST',
  395 + success: cb
  396 + });
  397 + }
  398 +
  399 + function initLineConfig(arr, cb) {
  400 + var i = 0;
  401 + (function () {
  402 + if (i >= arr.length) {
  403 + cb && cb();
  404 + return;
  405 + }
  406 + var f = arguments.callee
  407 + , lineCode = arr[i];
  408 +
  409 + showLoad('初始化' + lineIds[lineCode] + '配置信息...');
  410 + $.post('/lineConfig/init/' + lineCode, function (rs) {
  411 + if (rs == 1) {
  412 + i++;
  413 + f();
  414 + }
  415 + });
  416 + })();
  417 + }
  418 +
  419 +/* function cacheCar2DeviceId(cb) {
  420 + //showLoad('缓存基础对照信息...');
  421 + $.get('/gps/Car2DeviceId', function (rs) {
  422 + storage.setItem('car2DeviceId', JSON.stringify(rs));
  423 + cb && cb();
  424 + });
  425 + }*/
  426 +
  427 + function cacheRoute(lsData, cb) {
  428 + //showLoad('缓存线路路由信息...');
  429 + //拼接线路编码
  430 + var idx='';
  431 + $.each(lsData, function () {
  432 + idx+=(this.lineCode + ',');
  433 + });
  434 + idx=idx.substr(0, idx.length - 1);
  435 + $.get('/realMap/findRouteByLine', {idx: idx}, function (rs) {
  436 + if (rs) {
  437 + //cacheData[item.lineCode] = rs;
  438 + for(var lineCode in rs){
  439 + storage.setItem(lineCode + '_route', JSON.stringify(rs[lineCode]));
  440 + }
  441 + cb && cb();
  442 + }
  443 + });
  444 +/* var i = 0, cacheData = {};
  445 + (function () {
  446 + if (i >= lsData.length) {
  447 + //写入localStorage
  448 + for (var lineCode in cacheData)
  449 + storage.setItem(lineCode + '_route', JSON.stringify(cacheData[lineCode]));
  450 +
  451 + cb && cb();
  452 + return;
  453 + }
  454 + var f = arguments.callee
  455 + , item = lsData[i];
  456 +
  457 + $.get('/realMap/findRouteByLine', {lineCode: item.lineCode}, function (rs) {
  458 + //$.get('/realSchedule/findRouteByLine', {lineCode: item.lineCode}, function(rs){
  459 + if (rs && rs.lineId) {
  460 + cacheData[item.lineCode] = rs;
  461 + i++;
  462 + f();
  463 + }
  464 + });
  465 + })();*/
  466 + }
  467 +
  468 + //历史纪录
  469 + $('#historyBtn').on('click', function () {
  470 + var lineControlItems = window.localStorage.getItem('lineControlItems');
  471 + if (!lineControlItems) {
  472 + layer.alert('没有在当前电脑找到历史纪录！', {icon: 3});
  473 + return;
  474 + }
  475 + else {
  476 + var array = JSON.parse(lineControlItems);
  477 + clear();
  478 + $.each(array, function (i, line) {
  479 + $('.line-select-body .line[name=line_' + line.lineCode + ']').click();
  480 + });
  481 + }
  482 + });
  483 +
  484 + //重置
  485 + //$('#resetBtn').on('click', clear);
  486 +
  487 + function clear() {
  488 + $('.line-select-body .line.active').removeClass('active');
  489 + $('.selected-body .line').remove();
  490 +
  491 + $('.line-select .input-icon i.fa-plus-circle').click();
  492 + filterLines();
  493 + }
  494 +
  495 + function filterLines() {
  496 + var t = $('#searchLineInput').val().toUpperCase()
  497 + , es = []
  498 + , bs = $('.line-select-body .line, .line-select-body .company, .line-select-body .sub-company')
  499 + , icon = $('.line-select .input-icon i');
  500 +
  501 + if (!t) {
  502 + bs.show();
  503 + icon.removeClass('fa-plus-circle').addClass('fa-search');
  504 + return;
  505 + }
  506 + else
  507 + icon.removeClass('fa-search').addClass('fa-plus-circle');
  508 +
  509 + for (var c in allChars) {
  510 + if (c.indexOf(t) != -1)
  511 + es.push('.line-select-body .line[name=line_' + allChars[c] + ']');
  512 + }
  513 +
  514 + bs.hide();
  515 + $.each(es, function (i, e) {
  516 + $(e).show();
  517 + });
  518 + }
  519 +
  520 + function groupData(array, g) {
  521 + var groups = {}, key;
  522 +
  523 + $.each(array, function (i, item) {
  524 + key = item[g];
  525 + if (!groups[key])
  526 + groups[key] = [];
  527 +
  528 + groups[key].push(item);
  529 + });
  530 +
  531 + return groups;
  532 + }
  533 +
  534 + function showLoad(text) {
  535 + layer.msg(text, {icon: 16, time: 0, shade: 0.3});
  536 + }
  537 +
  538 + function delayEmit(ep, t, p) {
  539 + setTimeout(function () {
  540 + ep.emit(t, p);
  541 + }, 300);
  542 + }
  543 +
  544 + ///////////////////////是否是移动端打开 start////////////////////////////////////////
  545 + if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
  546 + setTimeout(function(){
  547 + document.getElementById("go_xd_position").click();
  548 + },50)
  549 + $(".lb_panel").find('a')[0].innerText = "进入移动端线调系统";
  550 + }
  551 + ///////////////////////是否是移动端打开 end////////////////////////////////////////
  552 + });
  553 +</script>
0 554 \ No newline at end of file
... ...