skyversation
/
meidu2021


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443
							<%@ 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: 100%;
        height: 80%;
    }

    .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="carScheduleSectionController.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="sectionName" 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="lat" hidden="false" queryMode="single" width="80"></t:dgCol>--%>
            <t:dgCol title="计划完成" field="planEndTime" hidden="false" queryMode="single" width="80"></t:dgCol>
            <t:dgCol title="操作" field="opt"></t:dgCol>
            <t:dgDelOpt title="删除" url="carScheduleSectionController.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"  funname="openSectionSelect('${schedule.id}')"></t:dgToolBar>
            <t:dgToolBar title="修改" icon="icon-edit" operationCode="edit"  url="carScheduleSectionController.do?goUpdate"
                         funname="update"></t:dgToolBar>
        </t:datagrid>
    </div>
</div>

<div id="eastPanel" region="east" style="width: 750px;" split="true">
    <div id="userListpanel" class="easyui-panel" style="padding:0px;border:0px" fit="true" border="false">
        <div style="margin:10px;display: none;">搜&ensp;&ensp;&ensp;&ensp;索: <input type="text" id="suggestId" size="30"
                                                                                   value="百度"
                                                                                   style="width:300px;"/></div>
        <div class="lng-lat" style="display: none;">
            <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'});
        });
    }

    function openSectionSelect(schedule_id) {
        console.log('openSectionSelect schedule_id=' + schedule_id)
        $.dialog({
            content: 'url:publicpageController.do?roadSectionSelect&schedule_id=' + schedule_id,
            zIndex: getzIndex(),
            title: '路段列表',
            lock: true,
            width: '1000px',
            height: '650px',
            opacity: 0.4,
            button: [
                {
                    name: '确定', callback: function () {
                        var iframe = this.iframe.contentWindow;
                        var selectRows = iframe.getReason()
                        if (selectRows) {
                            console.log('selectRows count=' + selectRows.length)
                            selectRows.forEach(function (item) {
                                addRoadSection(schedule_id, item)
                            })
                        }
                    }, focus: true
                },
                {
                    name: '取消', callback: function () {
                    }
                }
            ]
        }).zindex();
    }

    function addRoadSection(scheduleid, item) {
        $.ajax({
            url : "carScheduleSectionController.do?doAdd",
            type : 'post',
            data : {
                scheduleId : scheduleid,
                sectionId : item.id,
                sectionCode : item.code
            },
            cache : false,
            success : function(data) {
                var d = data; // ------ $.parseJSON(data);
                if (d.success) {
                    var msg = d.msg;
                    tip(msg);
                    $("#detailList").datagrid('reload');
                } else {
                    layer.alert(d.msg);
                }
            }
        });
    }
</script>