潘钊 / bsth_control · Files

<link href="/metronic_v4.5.4/css/animate.min.css" rel="stylesheet" type="text/css" />
<style>
#lineConfigPanel{
    background: #fff;
    overflow: hidden;
    font-family: 'Segoe UI',Arial,'Microsoft Yahei',sans-serif !important;
}

#lineConfigPanel h1{
	-webkit-margin-start: 23px;
    color: rgb(92, 97, 102);
    margin-bottom: 1em;
    margin-top: 21px;
    font-size: 1.5em;
}

#lineConfigPanel .line_config_tree ul {
	list-style-type: none;
    padding: 0;
    height: 100% !important;
}

#lineConfigPanel .line_config_tree ul li{
	 -webkit-border-start: 6px solid transparent;
    -webkit-padding-start: 18px;
    -webkit-user-select: none;
    cursor: pointer;
}

#lineConfigPanel .line_config_tree ul li.selected{
	-webkit-border-start-color: #1bbc9b;
    cursor: default;
    pointer-events: none;
}

#lineConfigPanel .line_config_tree ul li button{
	background-color: white;
    border: 0;
    color: #999;
    cursor: pointer;
    font: inherit;
    line-height: 1.417em;
    margin: 6px 0;
    padding: 0;
}

#lineConfigPanel .line_config_tree ul li.selected button{
	color: #1bbc9b;
}

.line_config_tree{
	width: 155px;
	float: left;
	height: 100%;
}

.line_config_content{
    width: calc(100% - 155px);
    float: left;
    height: 100%;
}

.line_config_content .body{
	height: 100% !important;
    overflow: auto;
    color: rgb(48, 57, 66);
}

#lineConfigPanel .slimScrollBar{
	border-radius: 7px !important;
	    background: rgb(176, 173, 173) !important;
}

.line_config_content .body section{
	padding-left: 42px;
	margin: 30px 0;
}

.line_config_content .body section div.text{
    margin-top: 6px;
}

.line_config_content .body h3{
    -webkit-margin-start: -18px;
    color: rgb(48, 57, 66);
    margin-bottom: 0.8em;
    font-size: 85%;
    font-family: 'Segoe UI',Arial,'Microsoft Yahei',sans-serif !important;
}


.line_config_content .body a {
    color: rgb(17, 85, 204);
    text-decoration: underline;
}

butto.line-config-btn{
	-webkit-padding-end: 10px;
    -webkit-padding-start: 10px;
    min-height: 2em;
    min-width: 4em;
    background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 2px !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75);
    color: #444;
    
    font-size: 85%;
}

butto.line-config-btn:HOVER{
    background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
    border-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.95);
    color: black;
}


butto.line-config-btn:active{
	background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
    border-color: #5b5bec;
    box-shadow: 0 1px 0 rgba(91, 91, 236, 0.32), inset 0 1px 2px rgba(91, 91, 236, 0.32);
    color: black;
}

/* .line_config_content .body select{
    -webkit-padding-end: 24px;
    -webkit-padding-start: 10px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAAUklEQVQY02P4z0AMRGZGMaShwCisyhITmb8huMzfEhOxKvuvsGAh208Ik+3ngoX/FbBbClcIUcSAw21QhXxfIIrwKAMpfNsEUYRXGVCEFc6CQwBqq4CCCtU4VgAAAABJRU5ErkJggg==), -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
    background-position: right center;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 2px !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75);
    color: #444;
    font: inherit;
    margin: 0 1px 0 0;
    outline: none;
    text-shadow: 0 1px 0 rgb(240, 240, 240);
} */

.line_config_content .body p{
	margin: 15px 0;
}

.web-content-select-label span{
    width: 120px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    margin-right: 4px;
}

.line_config_content .body a.handle-link{
    color: rgb(17, 85, 204);
    text-decoration: none;
    font-size: 85%;
}

.line_config_content .body a.handle-link:hover {
    text-decoration: underline;
}

.input-medium.input-edtable-sm{
	width: 180px !important;
}

.text.indent30{
    text-indent: 30px;
    color: #7b7d80;
    font-family: 宋体;
    font-size: 13px;
    font-weight: 300;
}
.editable-popup{
	text-indent: 0;
}
</style>

<div id="lineConfigPanel">
	<div class="line_config_tree" >
		<h1 >线路</h1>
		<ul></ul>
	</div>
	
	<div class="line_config_content">
		<h1>配置</h1>
		<div class="body ">
		</div>
	</div>
</div>

<script id="line_config_tree_item_temp" type="text/html">
{{each array as line }}
<li data-code={{line.lineCode}}>
	<button>{{line.name}}</button>
</li>
{{/each}}
</script>

<script id="line_config_content_body_temp" type="text/html">
<form class="animated fadeIn" data-id={{conf.id}} data-line={{conf.line.lineCode}}>
	<section>
	  <h3>线路运营</h3>
	
	  <div class="settings-row" >
	    <p > {{conf.line.name}} 每日 <a href="javascript:;" id="startOptTimeLink">{{conf.startOpt}}</a> 时切换当日排班。</p>
	  </div>
	</section>

	<section>
	  <h3>班次进出场时间</h3>
	
	  <div class="settings-row" >
	    <p > 使用 <a href="javascript:;" data-type="select" id="outTimeType"></a> 时间作为出场班次的实际时间。</p>
	  </div>
	</section>

</form>
</script>

<script>
!function(){
	var $panel = $('#lineConfigPanel')
		,$body = $('.line_config_content .body');
	var h = $('.page-container>.page-sidebar-wrapper>.page-sidebar').height();
	$panel.css('height', h - 18);
	
	//滚动条
	$('.line_config_tree ul,'
			+'.line_config_content .body').slimscroll({
		height : 'calc(100% - 68px)',
		alwaysVisible : true,
		opacity : .8
	});
	
	
	$get('/line/all', {destroy_eq:0}, function(rs){
		//console.log(rs);
		var itemsHtml = template('line_config_tree_item_temp', {array: rs});
		$('.line_config_tree ul').html(itemsHtml)
			.find('li:eq(0)').click();
		
	});
	
	$panel.on('click', '.line_config_tree li', function(){
		$('.line_config_tree li.selected').removeClass('selected');
		$(this).addClass('selected');
		
		showConfDetail();
	});
	
	function showConfDetail(){
		var selected = $('.line_config_tree li.selected');
		var lineCode = selected.data('code')
			,name = selected.text();
		$.get('/lineConfig/all', {'line.lineCode_eq': lineCode}, 
				function(rs){
			
			layer.closeAll();
			if(!rs || rs.length == 0){
				defaultConfig(lineCode, name);
				return;
			}
			var htmlStr = template('line_config_content_body_temp', {conf: rs[0]});
			$body.html(htmlStr);
			
			initEditHandle(rs[0]);
		}); 
	}
	
	function defaultConfig(lineCode, name){
		layer.confirm('没有找到['+name+']的配置信息，系统将生成默认配置？', {
			btn : [ '我同意' ],
			icon : 3,
			shift: 5,
			closeBtn: 0
		}, function(){
			showLoad('生成中...');
			$.post('/lineConfig/init/' + lineCode, function(rs){
				if(rs == 1)
					showConfDetail();
			});
		});
	}
	
	function showLoad(text){
		return layer.msg(text, {icon: 16, time: 0, shade: 0.3});
	}
	
	function initEditHandle(conf){
		var lineCode = $('.line_config_tree li.selected').data('code');
		//运营开始时间
		$('#startOptTimeLink').editable({
			 type: 'time',
			 placement: 'right',
			 display: false,
			 validate: function(value){
				 if(!value)
					 return '值不能为空！';
			 },
			 inputclass: 'form-control input-medium input-edtable-sm'
		})
		.on('save', function(e, params) {
			var index = showLoad('提交数据...');
		    $post('/lineConfig/editTime', {lineCode: getLineCode(), time: params.newValue}
		    	,function(rs){
		    		layer.close(index);
		    		$('#startOptTimeLink').text(rs.time);
		    	});
		});
		
		//进出场时间类型
        $('#outTimeType').editable({
        	value: conf.outConfig,
            inputclass: 'form-control',
            placement: 'right',
            source: [{
                value: 0,
                text: 'gps出场'
            }, {
                value: 1,
                text: '请求出场'
            }, {
            	value: 2,
            	text: '出站即出场'
            }]
        })
        .on('save', function(e, params) {
			var index = showLoad('提交数据...');
		   $post('/lineConfig/editOutTimeType', {lineCode: lineCode, type: params.newValue}
		    	,function(rs){
		    		layer.close(index);
		    		$('#outTimeType').val(rs.type);
		    });
		});
	}
	
	function getLineCode(){
		return $('.line_config_tree li.selected').data('code');
	}
}();
</script>