skyversation
/
meidu2021


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344
							<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<t:base type="jquery,easyui,tools,DatePicker"></t:base>
<script src = "plug-in/tools/jquery.tips.js"></script>		
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Cq7aZVbka0L3UXDLgkKFoiFqnZAwPdS4"></script>
<body style="overflow-y: hidden" scroll="no">
<style type="text/css">
body{font-size:13px;margin:0px}
#container{width:auto;height:88%;}
.label{margin-left:20px;font-weight:bold;font-size:14px}
.lng-lat{
	margin: 0 0 30px 0px;
}
.lng-lat .item{
	margin: 10px;
}
.angle{
    display: inline-block;
    width: 0px;
    height: 0px;
    position: absolute;
    bottom:-60px;
    border: 14px solid;
    left: 15px;
    bottom: -25px;
    opacity: 0.8;
    border-color: #333333 transparent transparent transparent;
}

.datagrid-btable .datagrid-cell{text-overflow:ellipsis;white-space: nowrap;}  
</style>
<div id="main_list" class="easyui-layout" fit="true">
  <div region="center" style="padding:0px;border:0px;">
  <input id="carid" name="carid" type="hidden" value='${schedule.carid}' }/>
			<input id="scheduleid" name="scheduleid" type="hidden" value='${schedule.id}' />
    <t:datagrid name="detailList" checkbox="false"  pagination="false" fitColumns="fasle" title="作业计划明细" actionUrl="carScheduleDetailController.do?datagrid&scheduleid=${schedule.id}" 
    	autoLoadData="true" idField="id" nowrap="true" extendParams="rownumbers : false," sortName="seq" sortOrder="asc" fit="true" queryMode="group"  onLoadSuccess="onloaded">
	<t:dgCol title="主键"  field="id"  hidden="true"  queryMode="single"  width="120"></t:dgCol>
	<t:dgCol title="序号"  field="seq"  queryMode="single"  width="50"></t:dgCol>
	<t:dgCol title="位置描述"  field="address"  queryMode="single"  width="120" sortable="false"></t:dgCol>
	<t:dgCol title="车辆"  field="carid"  hidden="true"  queryMode="single"  width="120"></t:dgCol>
	<t:dgCol title="计划id"  field="scheduleid"  hidden="true"  queryMode="single"  width="120"></t:dgCol>
	<t:dgCol title="经度"  field="lng"  hidden="true" queryMode="single"  width="80"></t:dgCol>
	<t:dgCol title="纬度"  field="lat"  hidden="true" queryMode="single"  width="80"></t:dgCol>
	<t:dgCol title="操作" field="opt"></t:dgCol>
	<t:dgDelOpt title="删除" url="carScheduleDetailController.do?doDel&id={id}" urlclass="ace_button"  urlfont="fa-trash-o"/> 
	<t:dgFunOpt funname="showPoint(lng,lat,address)" title=" 显示" urlclass="ace_button"  urlfont="fa-map-marker"></t:dgFunOpt>
	<%-- <t:dgToolBar title="录入" icon="icon-add" operationCode="add"  url="carScheduleDetailController.do?goAdd" funname="adddetail"></t:dgToolBar> --%>
	<t:dgToolBar title="修改" icon="icon-edit" operationCode="edit"  url="carScheduleDetailController.do?goUpdate" funname="update"></t:dgToolBar>
	</t:datagrid>
  </div>
 </div>
 
 <div id="eastPanel" region="east" style="width: 1150px;" split="true" >
    <div  id="userListpanel" class="easyui-panel" style="padding:0px;border:0px" fit="true" border="false">
  	<div style="margin:10px">搜&ensp;&ensp;&ensp;&ensp;索: <input type="text" id="suggestId" size="30" value="百度" style="width:300px;" /></div>
		<div class="lng-lat">
	      	<div class="item">
	          当前经度:
	          <input type="text" id="jing" type=""/>
	        </div>
	        <div class="item">
	         当前纬度:
	          <input type="text" id="wei" />
	          
	          <span style="display:-moz-inline-box;display:inline-block;float: right;margin-right: 10px;" >
	          &ensp;&ensp;&ensp;&ensp;路径点序号:
	          <input type="text" id="seq" class="text"  />
				<a href="#" class="easyui-linkbutton l-btn" iconcls="icon-add" style="margin-left: 50px;"	onclick="addPoint()" id="">
					<span>添加到路径点</span>
				</a>
				<a href="#" class="easyui-linkbutton l-btn" iconcls="icon-view" onclick="showAllPoint()"  id="upexport">
					<span>显示全部路径点</span>
				</a>
			</span>
	        </div>
	      </div>
	<div id="container"></div>
    </div>
</div>
 </body>
 <script src = "webpage/cn/com/lzt/car/schedule/carScheduleList.js"></script>		
 <script type="text/javascript">
 $(function(){
	var newtitle =  '【' +'${schedule.carname}' + '】' + '${schedule.start}' + '~' +'${schedule.end}'+' 作业途径点位列表';  //
	$("#detailList").datagrid({title:newtitle});
});
function addPoint(){
	if(!$('#jing').val()){
		tip('请先在地图上选择位置，然后再添加到路径点');
		return;
	}
	var str = $('#seq').val();
	var n = Number(str);
	if (isNaN(n))
	{
		tip('序号只能填写数字，请重新录入');
		return;
	}
	$.ajax({
	    url:"carScheduleDetailController.do?doAddFromMap",
	    data:{scheduleid:$('#scheduleid').val(),
	    	lng:$('#jing').val(),
	    	lat:$('#wei').val(),
	    	seq:$('#seq').val()},
		type:"Post",
	    dataType:"json",
	    success:function(data){
		    if(data.success){
		    	tip(data.msg);
		    	$("#detailList").datagrid('reload');
		    	$('#seq').val('');
		    }else{
		    	$.messager.alert('提示信息',data.msg);
		    }
	  }});
	/* //添加完刷新表格
	$('#detailList').datagrid({
	      queryParams:{scheduleid:$('#scheduleid').val()}
	  });
	$("#detailList").datagrid('reload'); */
}
var myLabels = [];
function showAllPoint(){
	$.ajax({
	    url:"carScheduleDetailController.do?all",
	    data:{scheduleid:$('#scheduleid').val()},
		type:"Post",
	    dataType:"json",
	    success:function(data){
		    if(data.status=="success"){
		    	map.clearOverlays();
		    	var point = new BMap.Point(data.details[0]['lng'],data.details[0]['lat']);
		    	map.centerAndZoom(point,13);
		    	myLabels = [];
		    	for(var i =0; i < data.details.length;i++){
		    		var maker = addMarker(new BMap.Point(data.details[i]['lng'], data.details[i]['lat']));
                    addInfoWindow(maker, data.details[i]['address'],data.details[i]['seq']);
		    	}
		    }else{
		    	$.messager.alert('提示信息',"未查询到途经点信息");
		    }
	  }});
}
//添加信息窗口
function addInfoWindow(marker, content,number) {
	var offsetSize = new BMap.Size(0, 0);
    var labelStyle = {
        color: "#fff",
        backgroundColor: "0.05",
        border: "0"
    };

    //不同数字长度需要设置不同的样式。
    switch((number + '').length) {
        case 1:
            labelStyle.fontSize = "14px";
            offsetSize = new BMap.Size(4, 2);
            break;
        case 2:
            labelStyle.fontSize = "12px";
            offsetSize = new BMap.Size(2, 4);
            break;
        case 3:
            labelStyle.fontSize = "10px";
            offsetSize = new BMap.Size(-2, 4);
            break;
        default:
            break;
    }
    var label = new BMap.Label(number, {
        offset: offsetSize
    });
    label.setStyle(labelStyle);
    marker.setLabel(label);
    
    var label = new window.BMap.Label(content, { offset: new BMap.Size(20, -10) });
    marker.setLabel(label);
}

//添加标注
function addMarker(point) {
    var marker = new BMap.Marker(point);
    map.addOverlay(marker);
    return marker;
}
function deletePoine(){
	$.ajax({
	    url:"carScheduleDetailController.do?doDelByPoint",
	    data:{scheduleid:$('#scheduleid').val(),
	    	lng:$('#jing').val(),
	    	lat:$('#wei').val()},
		type:"Post",
	    dataType:"json",
	    success:function(data){
		    if(data.status=="success"){
		    }else{
		    	$.messager.alert('提示信息',"添加到路径点失败");
		    }
	  }});
}
function showPoint(lng,lat,address){
	 //清除地图上的marker
    map.clearOverlays();
    var marker = new BMap.Marker(new BMap.Point(lng, lat));
    var myLabel = setLabelStyle(address);
    marker.addEventListener("mouseover", function() {
    	marker.setLabel(myLabel) //鼠标移入maker显示文字标签
    });
    marker.addEventListener("mouseout", function (e) {
    	map.removeOverlay(marker.getLabel()) //鼠标移除maker隐藏文字标签
    });
	map.addOverlay(marker);
}
function setLabelStyle(content) {
    //左偏移  右偏移
    var offsetSize = new BMap.Size(0, 0);
    var labelStyle = {
        color: "#fff",
        backgroundColor: "#333333",
        border: "0",
        fontSize : "14px",
        width:"200px",
        opacity:"0.8",
        verticalAlign:"center",
        borderRadius: "2px",
        whiteSpace:"normal",
        wordWrap:"break-word",
        padding:"7px",
    };
    //用于设置样式
    var spanA="<span class='angle'><span>";
    //不同数字长度需要设置不同的样式。
    var num=parseInt(content.length/10)
    switch(num) {
        case 0:
            offsetSize = new BMap.Size(-20, -40);
            break;
        case 1:
            offsetSize = new BMap.Size(-20, -40);
            break;
        case 2:
            offsetSize = new BMap.Size(-20, -60);
            break;
        case 3:
            offsetSize = new BMap.Size(-20, -80);
            break;
        default:
            break;
    }
 
    var label = new BMap.Label(content+spanA, {
        offset: offsetSize
    });
    label.setStyle(labelStyle);
    return label;
}
var lng = document.getElementById('jing');
var lat = document.getElementById('wei');
var map = new BMap.Map("container");
var point = new BMap.Point(121.130254,31.156433);
var myGeo = new BMap.Geocoder();// 将地址解析结果显示在地图上,并调整地图视野
map.centerAndZoom(point,13);
map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl()); //缩放按钮 
var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
    {"input" : "suggestId"
    ,"location" : map
});
 
ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
	
	/* var str = "";
    var _value = e.fromitem.value;
    var value = "";
    if (e.fromitem.index > -1) {
        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    }    
    str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
    
    value = "";
    if (e.toitem.index > -1) {
        _value = e.toitem.value;
        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    }    
    str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
    G("searchResultPanel").innerHTML = str; */
});
 
var myValue;
ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
	lng.value = '';
	lat.value = '';
	var _value = e.item.value;
    myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
   /*  G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue; */
    
    setPlace();
});
 
function setPlace(){// 创建地址解析器实例
myGeo.getPoint(myValue, function(point){
  if (point) {
	lng.value = point.lng;
	lat.value = point.lat;
    map.centerAndZoom(point, 16);
    map.addOverlay(new BMap.Marker(point));
  }
}, "上海");
}
 
map.addEventListener('click', function (e) {
 
	lng.value = e.point.lng;
	lat.value = e.point.lat;
	 //清除地图上的marker
    map.clearOverlays();
	var pt = e.point;
    var marker = new BMap.Marker(new BMap.Point(pt.lng, pt.lat));
	map.addOverlay(marker);
	//myGeo.getLocation(pt, function(rs){
        //addressComponents对象可以获取到详细的地址信息
        //var addComp = rs.addressComponents;
        //var site = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
        //$("#address").val(site);
        //设置放大倍数
        //map.centerAndZoom(new BMap.Point(pt.lng, pt.lat), 18);
        //将对应的HTML元素设置值
        //$("#addressLonglat").val(pt.lng+","+pt.lat);
   // });
})
function onloaded(){
	var _grid = $('#detailList');
         var tableTd = $('div.datagrid-body td[field="address"]'); 
         tableTd.each(function () {
             var $this = $(this);
             var index = $this.parent('tr').attr('datagrid-row-index');
             var rows = _grid.datagrid('getRows');
             var currentRow = rows[index];
             var content = '<div style="font-size:16px; max-width:700px;word-break: break-all; word-wrap: break-word;">' + currentRow.address + '</div>'; 
             $this.tips({ content: content, wrapColor: 'black' });
         });
 }
 </script>