潘钊 / bsth_control · Files

<style>
.line-select{
    border: 1px solid #ddd;
    height: 350px;
    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: 190px;
}

.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: 270px;
	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: 3px;
}

/** 闵行没有分公司，直接隐藏 */
.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="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 blue gotoControl red" 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>
	                    	
	                    <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 data as obj company}}
	<h3 class="company" >{{company}}</h3>
	{{each data[company] as subObj subCompany}}
		<h5 class="sub-company" style="font-family: 仿宋;">{{company}}_{{subCompany}}</h5>
		{{each data[company][subCompany] as line i}}
			<div class="line" name="line_{{line.lineCode}}" data-id={{line.lineCode}}>{{line.name}}</div>
		{{/each}}
	{{/each}}
{{/each}}
</script>

<script>
$(function(){
	//大写字母映射
	var camelChars = {};
	//全拼映射
	var fullChars = {};
	//中文映射
	var zhChars = {};
	//合并所有映射
	var allChars = {};
	
	//线路编码映射
	var lineIdMap = {};
	
	//线路编码和名称对照 （写入localStorage，线调用）
	var lineIds = {};
	
	var storage = window.localStorage;
	
	$get('/line/all', null, function(allLine){
		$('#searchLineInput').focus();
		//按公司分组
		var companyJson = groupData(allLine, 'company');
		//按分公司分组
		for(var company in companyJson){
			companyJson[company] = groupData(companyJson[company], 'brancheCompany');
		}
		
		var htmlStr = template('line_select_cont_temp', {data: companyJson});
		$('.line-select-body').html(htmlStr)
			.slimscroll({//滚动条
				height: '270px'
			});
		
		//替换公司编码
		var gsmap = {};
		$get('/business/all', null, function(array){
			$.each(array, function(i, gs){
				var k = gs.upCode + '_' + gs.businessCode;
				if(gs.upCode === '88'){
					k = gs.businessCode;
				}
				gsmap[k] = gs.businessName;
			});
			
			$.each($('.company,.sub-company'), function(j , e){
				var k = $(e).text();
				gsmap[k] &&	$(e).text(gsmap[k]);
			})
		});
		
		//映射
		$.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').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;
		}
		
		layer.msg('正在更新缓存...', {icon: 16});
		//将选择的线路写入localstorage
		var lsData = [];
		$.each(lines, function(i, e){
			lsData.push(lineIdMap[$(e).data('id')]);
		});
		storage.setItem('lineControlItems', JSON.stringify(lsData));
		//监控模式还是主调模式
		storage.setItem('operationMode', $(this).data('status'));
		//将线路路由缓存到localstorage
		cacheRoute(lsData, function(cacheData){
			for(var lineCode in cacheData){
				storage.setItem(lineCode + '_route', JSON.stringify(cacheData[lineCode]));
			}
			
			layer.closeAll();
			loadPage('/pages/control/line/index.html');
		});
		//window.location.href = '/pages/control/line/index.html';
	});
	
	
	function cacheRoute(lsData, cb){
		var i = 0, cacheData = {};
		(function(){
			if(i >= lsData.length){
				cb && cb(cacheData);
				return;
			}
			var f = arguments.callee
				,item = lsData[i];
			
			$.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;
	}
});
</script>