潘钊 / bsth_control · Commits

Commit 2df0767e69f3f441475bf2297b54f6341cdb76fa

Authored by 潘钊
1 parent 3354548b

线调 线路选择

Inline Side-by-side
Showing 3 changed files with 534 additions and 0 deletions
src/main/resources/static/pages/control/line/js/tooltip.js 0 → 100644
  View file @2df0767
  1 +
  2 +var _tooltip = (function(){
  3 +
  4 + var pt;
  5 + var et;
  6 + var tip = $('#tooltip');
  7 + var tipShade = $('#tooltipShade');
  8 + //百度坐标转换
  9 + var convertor = new BMap.Convertor();
  10 + //百度地理解析
  11 + var geoc = new BMap.Geocoder();
  12 +
  13 + var position = {};
  14 + var lastDom;
  15 + //toolTip hover
  16 + tip.hover(function() {
  17 + clearTime();
  18 + $(this).addClass('hover');
  19 + }, function() {
  20 + tip.removeClass('hover open');
  21 + pt = setTimeout(function() {
  22 + if (tip.hasClass('open'))
  23 + return;
  24 + if (tip.hasClass('fixed'))
  25 + return;
  26 + tip.hide();
  27 + }, 300);
  28 + });
  29 +
  30 +
  31 + tip.on('click', '.tip_modal' , function(){
  32 + if(!tip.hasClass('fixed'))
  33 + fixedTip();
  34 + else
  35 + tipShade.removeClass('level2');
  36 +
  37 + if(!tip.hasClass('tooltip-modal')){
  38 + lastDom = tip.html();
  39 + showTipModal();
  40 + }
  41 +
  42 + tipModal[$(this).data('for')](this);
  43 + });
  44 +
  45 + function showTipModal(){
  46 + var w = 700,h = 400;
  47 + var top = $(document.body).height() / 2 - h / 2 - 50;
  48 + var left = $(document.body).width() / 2 - w / 2;
  49 +
  50 + //记住之前的位置
  51 + position.top = tip.css('top');
  52 + position.left = tip.css('left');
  53 +
  54 + tip.css('top', top).css('left', left)
  55 + .addClass('tooltip-modal');
  56 + }
  57 +
  58 + var tooltipObject = {
  59 + //正常 GPS toolTip
  60 + initGpsTip: function(e){
  61 + var lineIds = _data.getLineIds();
  62 +
  63 + e.on('mouseover', function(d){
  64 + clearTime();
  65 + var offset = $(this).offset()
  66 + ,y = $(this).attr('y');
  67 +
  68 + if(!d.lineName)
  69 + d.lineName = lineIds[d.lineId];
  70 + var html = template('tooltip_gps_temp', d);
  71 + showTip({
  72 + top: offset.top - 45,
  73 + left: offset.left,
  74 + container: html
  75 + });
  76 + })
  77 + .on('mouseout', function(){
  78 + et = setTimeout(function(){
  79 + if(tip.hasClass('fixed'))
  80 + return;
  81 + if(tip.hasClass('hover'))
  82 + return;
  83 +
  84 + tip.hide();
  85 + },300);
  86 + });
  87 + }
  88 + };
  89 +
  90 +
  91 + function showTip(op){
  92 + tip.css('top', op.top)
  93 + .css('left', op.left)
  94 + .html(op.container)
  95 + .addClass('open').show();
  96 + }
  97 +
  98 + function clearTime(){
  99 + clearTimeout(pt);
  100 + clearTimeout(et);
  101 + }
  102 +
  103 +
  104 + function fixedTip(){
  105 + tip.addClass('fixed');
  106 + tipShade.show();
  107 + }
  108 +
  109 + tipShade.on('click', function(){
  110 + clearTime();
  111 + if(tip.hasClass('tooltip-modal')){
  112 + tip.css('top', position.top)
  113 + .css('left', position.left)
  114 + .removeClass('tooltip-modal')
  115 + .html(lastDom);
  116 +
  117 + tipShade.addClass('level2');
  118 + }
  119 + else{
  120 + tip.removeClass('fixed').hide();
  121 + tipShade.removeClass('level2').hide();
  122 + }
  123 + });
  124 +
  125 +/* function geocTranslate(d){
  126 + //地理解析
  127 + var pArr = [new BMap.Point(d.lon,d.lat)];
  128 + convertor.translate(pArr, 1, 5, function(data){
  129 + geoc.getLocation(data.points[0] , function(rs){
  130 + d.address = rs.address;
  131 + $('.geocoder').text(rs.address);
  132 + });
  133 + });
  134 + }*/
  135 +
  136 + var tipModal = {
  137 + //地图查看位置
  138 + map: function(that){//new BMap.Point(CENTER_POINT.lng,CENTER_POINT.lat)
  139 + tip.html('<div id="tip_map_wrap"><span class="load-text">加载中..</span></div>');
  140 + setTimeout(function(){
  141 + var bm = new BMap.Map('tip_map_wrap');
  142 + bm.centerAndZoom('上海', 15);
  143 + bm.enableScrollWheelZoom();
  144 +
  145 + var lon = $(that).data('lon')
  146 + ,lat = $(that).data('lat')
  147 + ,nbbm = $(that).data('nbbm');
  148 +
  149 + bm.addEventListener("tilesloaded", function() {
  150 +
  151 + //画出车辆
  152 + convertor.translate([new BMap.Point(lon,lat)], 1, 5, function(data){
  153 + var point = data.points[0];
  154 + var marker = new BMap.Marker(point)
  155 + ,label = new BMap.Label(nbbm ,{offset:new BMap.Size(-25,-27)});
  156 + label.setStyle({borderColor: 'blue',borderRadius: '5px', padding: '5px 9px 5px 9px', color: '#0F5EC3'});
  157 +
  158 + marker.setLabel(label);
  159 + bm.addOverlay(marker);
  160 + bm.setCenter(point);
  161 + });
  162 +
  163 + });
  164 + }, 650);
  165 + }
  166 + };
  167 +
  168 + return tooltipObject;
  169 +})();
... ...
src/main/resources/static/pages/control/line/temps/tooltip_tp.html 0 → 100644
  View file @2df0767
  1 +<script id="tooltip_gps_temp" type="text/html">
  2 +<div id="tooltip-Container" >
  3 + <div class="title">
  4 + <a href="javascript:;" data-for="station" class="tip_modal">{{nbbm}}</a>
  5 + </div>
  6 + <div>
  7 + {{lineName}} -{{if upDown==0}}上行{{else}}下行{{/if}}
  8 + </div>
  9 + <div><a href="javascript:;" data-for="station" class="tip_modal">{{stationName}}</a></div>
  10 + <div>速度：{{speed}}</div>
  11 + <hr >
  12 + <div>预计2分钟后到达<a href="javascript:;" data-for="station" class="tip_modal">下一站</a></div>
  13 + <div>终点站：<a href="javascript:;" data-for="station" > 终点</a></div>
  14 + <hr >
  15 + <div class="subtitle">10秒前更新（在线）</div>
  16 + <div class="subtitle" style="margin-top: 8px;">
  17 + <a href="javascript:;" data-for="map" class="tip_modal" data-lon={{lon}} data-lat={{lat}} data-nbbm={{nbbm}}>
  18 + <i class="fa fa-map-marker"></i>
  19 + 地图查看
  20 + </a>
  21 + </div>
  22 +</div>
  23 +</script>
0 24 \ No newline at end of file
... ...
src/main/resources/static/pages/control/lineallot/allot.html 0 → 100644
  View file @2df0767
  1 +<style>
  2 +.line-select{
  3 + border: 1px solid #ddd;
  4 + height: 350px;
  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: 190px;
  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 #666;
  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: 270px;
  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 +.load-text{
  73 + position: absolute;
  74 + top: 50%;
  75 + left: 50%;
  76 + transform: translate(-50%);
  77 + font-size: 14px;
  78 + font-family: 仿宋;
  79 +}
  80 +
  81 +.selected a{
  82 + position: absolute;
  83 + bottom: 20px;
  84 +}
  85 +.selected a.btn{
  86 + bottom: 10px;
  87 +}
  88 +</style>
  89 +
  90 +<div class="page-head">
  91 + <div class="page-title">
  92 + <h1>线路分配</h1>
  93 + </div>
  94 +</div>
  95 +
  96 +<ul class="page-breadcrumb breadcrumb">
  97 + <li><a href="/pages/home.html" data-pjax>首页</a> <i
  98 + class="fa fa-circle"></i></li>
  99 + <li><span class="active">线路调度管理</span> <i class="fa fa-circle"></i></li>
  100 + <li><span class="active">线路分配</span></li>
  101 +</ul>
  102 +
  103 +<div class="portlet light bordered">
  104 + <div class="portlet-title">
  105 + <div class="caption">
  106 + <i class="icon-social-dribbble font-green"></i> <span
  107 + class="caption-subject font-green bold uppercase">选择线路</span>
  108 + </div>
  109 + </div>
  110 + <div class="portlet-body">
  111 + <div class="row" style="margin-bottom: 30px;">
  112 + <div class="col-md-8 col-sm-12 col-md-offset-2" style="text-align: center;">
  113 + <div class="col-md-12 line-select" >
  114 + <div class="col-md-12 search-input" >
  115 + <div class="col-md-6" style="padding-left: 0;">
  116 + <div class="input-icon input-icon-lg right" >
  117 + <i class="fa fa-search"></i>
  118 + <input type="text" id="searchLineInput" class="form-control input-lg" placeholder="搜索线路"> </div>
  119 + </div>
  120 + </div>
  121 +
  122 + <div class="line-select-cont col-md-12" >
  123 + <div class="line-select-body">
  124 + <span class="load-text">加载中...</span>
  125 + </div>
  126 + </div>
  127 + </div>
  128 +
  129 + <div class="col-md-12 line-select selected" style="text-align: left;">
  130 + <h5 style="font-family: 仿宋; display: block;">已选中线路</h5>
  131 + <div class="selected-body"></div>
  132 +
  133 + <a href="javascript:;" id="gotoControl" class="btn btn-lg blue" >
  134 + <i class="fa fa-check"></i> 确定 </a>
  135 +
  136 +
  137 + <a href="javascript:;" id="resetBtn" style="left: 120px;color: #3598DC;">
  138 + <i class="fa fa-history"></i> 重置</a>
  139 +
  140 + <a href="javascript:;" id="historyBtn" style="left: 180px;color: #f36a5a;">
  141 + <i class="fa fa-history"></i> 历史纪录 </a>
  142 + </div>
  143 + </div>
  144 + </div>
  145 + </div>
  146 +</div>
  147 +
  148 +<div class="clone_line">
  149 +</div>
  150 +
  151 +<script id="line_select_cont_temp" type="text/html">
  152 +{{each data as obj company}}
  153 + <h3 class="company" >{{company}}</h3>
  154 + {{each data[company] as subObj subCompany}}
  155 + <h5 class="sub-company" style="font-family: 仿宋;">{{company}}_{{subCompany}}</h5>
  156 + {{each data[company][subCompany] as line i}}
  157 + <div class="line" name="line_{{line.lineCode}}" data-id={{line.lineCode}}>{{line.name}}</div>
  158 + {{/each}}
  159 + {{/each}}
  160 +{{/each}}
  161 +</script>
  162 +
  163 +<script>
  164 +$(function(){
  165 + //大写字母映射
  166 + var camelChars = {};
  167 + //全拼映射
  168 + var fullChars = {};
  169 + //中文映射
  170 + var zhChars = {};
  171 + //合并所有映射
  172 + var allChars = {};
  173 +
  174 + //线路编码映射
  175 + var lineIdMap = {};
  176 +
  177 + //线路编码和名称对照 （写入localStorage，线调用）
  178 + var lineIds = {};
  179 +
  180 + var storage = window.localStorage;
  181 +
  182 + $get('/line/all', null, function(allLine){
  183 + $('#searchLineInput').focus();
  184 + //按公司分组
  185 + var companyJson = groupData(allLine, 'company');
  186 + //按分公司分组
  187 + for(var company in companyJson){
  188 + companyJson[company] = groupData(companyJson[company], 'brancheCompany');
  189 + }
  190 +
  191 + var htmlStr = template('line_select_cont_temp', {data: companyJson});
  192 + $('.line-select-body').html(htmlStr)
  193 + .slimscroll({//滚动条
  194 + height: '270px'
  195 + });
  196 +
  197 + //替换公司编码
  198 + var gsmap = {};
  199 + $get('/business/all', null, function(array){
  200 + $.each(array, function(i, gs){
  201 + var k = gs.upCode + '_' + gs.businessCode;
  202 + if(gs.upCode === '88'){
  203 + k = gs.businessCode;
  204 + }
  205 + gsmap[k] = gs.businessName;
  206 + });
  207 +
  208 + $.each($('.company,.sub-company'), function(j , e){
  209 + var k = $(e).text();
  210 + gsmap[k] && $(e).text(gsmap[k]);
  211 + })
  212 + });
  213 +
  214 + //映射
  215 + $.each(allLine, function(s, line){
  216 + camelChars[pinyin.getCamelChars(line.name)] = line.lineCode;
  217 + fullChars[pinyin.getFullChars(line.name).toUpperCase()] = line.lineCode;
  218 + zhChars[line.name] = line.lineCode;
  219 + lineIdMap[line.lineCode] = line;
  220 +
  221 + lineIds[line.lineCode] = line.name;
  222 + });
  223 + //合并映射
  224 + $.extend(allChars, camelChars, fullChars, zhChars);
  225 +
  226 + //线路选中事件
  227 + $('.line-select-body .line').on('click', function(){
  228 + if($(this).hasClass('active')){
  229 + $(this).removeClass('active');
  230 + $('.selected-body .line[name='+$(this).attr('name')+']').remove();
  231 + }
  232 + else{
  233 + $(this).addClass('active');
  234 + $('.selected-body').append($(this).clone());
  235 + }
  236 + });
  237 +
  238 + storage.setItem('lineIds', JSON.stringify(lineIds));
  239 + });
  240 +
  241 + //搜索框事件
  242 + $('#searchLineInput').on('keyup', filterLines);
  243 +
  244 + $('.line-select .input-icon i').on('click', function(){
  245 + if($(this).hasClass('fa-plus-circle')){
  246 + $('#searchLineInput').val('');
  247 + filterLines();
  248 + }
  249 + });
  250 +
  251 + $('.selected-body').on('click', '.line', function(){
  252 + $('.line-select-body .line[name='+$(this).attr('name')+']').removeClass('active');
  253 + $(this).remove();
  254 + });
  255 +
  256 + //确定
  257 + $('#gotoControl').on('click', function(){
  258 + var lines = $('.selected-body .line');
  259 + if(lines.length == 0){
  260 + layer.alert('你还没有选择线路！',{icon: 3});
  261 + return;
  262 + }
  263 + //将选择的线路写入localstorage
  264 +
  265 + var lsData = [];
  266 + $.each(lines, function(i, e){
  267 + lsData.push(lineIdMap[$(e).data('id')]);
  268 + });
  269 + storage.setItem('lineControlItems', JSON.stringify(lsData));
  270 +
  271 + //跳转到线路调度
  272 + loadPage('/pages/control/line/index.html');
  273 + //window.location.href = '/pages/control/line/index.html';
  274 + });
  275 +
  276 + //历史纪录
  277 + $('#historyBtn').on('click', function(){
  278 + var lineControlItems = window.localStorage.getItem('lineControlItems');
  279 + if(!lineControlItems){
  280 + layer.alert('没有在当前电脑找到历史纪录！',{icon: 3});
  281 + return;
  282 + }
  283 + else{
  284 + var array = JSON.parse(lineControlItems);
  285 + clear();
  286 + $.each(array, function(i, line){
  287 + $('.line-select-body .line[name=line_'+line.lineCode+']').click();
  288 + });
  289 + }
  290 + });
  291 +
  292 + //重置
  293 + $('#resetBtn').on('click', clear);
  294 +
  295 + function clear(){
  296 + $('.line-select-body .line.active').removeClass('active');
  297 + $('.selected-body .line').remove();
  298 +
  299 + $('.line-select .input-icon i.fa-plus-circle').click();
  300 + filterLines();
  301 + }
  302 +
  303 + function filterLines(){
  304 + var t = $('#searchLineInput').val().toUpperCase()
  305 + ,es = []
  306 + ,bs = $('.line-select-body .line, .line-select-body .company, .line-select-body .sub-company')
  307 + ,icon = $('.line-select .input-icon i');
  308 +
  309 + if(!t){
  310 + bs.show();
  311 + icon.removeClass('fa-plus-circle').addClass('fa-search');
  312 + return;
  313 + }
  314 + else
  315 + icon.removeClass('fa-search').addClass('fa-plus-circle');
  316 +
  317 + for(var c in allChars){
  318 + if(c.indexOf(t) != -1)
  319 + es.push('.line-select-body .line[name=line_' + allChars[c] + ']');
  320 + }
  321 +
  322 + bs.hide();
  323 + $.each(es, function(i, e){
  324 + $(e).show();
  325 + });
  326 + }
  327 +
  328 + function groupData(array, g){
  329 + var groups = {}, key;
  330 +
  331 + $.each(array, function(i, item){
  332 + key = item[g];
  333 + if(!groups[key])
  334 + groups[key] = [];
  335 +
  336 + groups[key].push(item);
  337 + });
  338 +
  339 + return groups;
  340 + }
  341 +});
  342 +</script>
0 343 \ No newline at end of file
... ...