@layout("/common/_container.html"){
|
<div class="row">
|
<div class="col-sm-12">
|
<div class="ibox float-e-margins">
|
<div class="ibox-title">
|
<h5>首页-地图</h5>
|
</div>
|
<div class="ibox-content" id="couponInfoForm">
|
|
<div class="row row-lg">
|
<div class="col-sm-12" >
|
|
<div class="initialLevel col-sm-12 control-label form-group" style="cursor: pointer;text-align: left;">
|
<div class="initialLevel col-sm-1 control-label form-group" >
|
<select class="input-group" id="agentName" style="width: 100px;height: 33px" name="agentName">
|
<option value="">请选择代理商</option>
|
@for(i in agentList){
|
<option value="${i.id}">${i.principal}</option>
|
@}
|
</select>
|
</div>
|
<div class="initialLevel col-sm-1 control-label form-group" >
|
<select class="input-group" id="orderType" style="width: 100px;height: 33px" name="orderType">
|
<option value="">请选择订单类型</option>
|
<option value="1">未接单</option>
|
<option value="2">服务中</option>
|
<option value="3">已完成</option>
|
<option value="4">已取消</option>
|
</select>
|
</div>
|
<div class="col-sm-2">
|
<button type="button" class="btn btn-primary " onclick="getData()" style="height: 33px">
|
<i class="fa fa-search"></i> 查询
|
</button>
|
<button type="button" class="btn btn-primary button-margin" onclick="reset()" style="height: 33px">
|
<i class="fa fa-trash"></i> 重置
|
</button>
|
</div>
|
</div>
|
<div class="col-sm-10" >
|
<input hidden id="allList" value="${allList}">
|
<input hidden id="onLineDriver" value="${onLineDriver}">
|
<div class="initialLevel col-sm-12 control-label form-group" style="cursor: pointer;text-align: left;">
|
<div class="initialLevel col-sm-12 control-label form-group" >
|
<div id="container" ></div>
|
<div id="panel" ></div>
|
</div>
|
</div>
|
|
<div class="initialLevel col-sm-12 control-label form-group" style="cursor: pointer;text-align: left;">
|
<div class="initialLevel col-sm-2 control-label form-group" >
|
<label>在线司机:</label>
|
<label id="onLineDriverCount">${onLineDriverCount}</label>
|
<label>人</label>
|
</div>
|
<div class="initialLevel col-sm-2 control-label form-group" >
|
<label>未接单</label>
|
<label id="pendingOrderCount">${pendingOrderCount}</label>
|
</div>
|
<div class="initialLevel col-sm-2 control-label form-group" >
|
<label>服务中</label>
|
<label id="serverCount">${serverCount}</label>
|
</div>
|
<div class="initialLevel col-sm-2 control-label form-group" >
|
<label>已完成</label>
|
<label id="finishCount">${finishCount}</label>
|
</div>
|
<div class="initialLevel col-sm-2 control-label form-group" >
|
<label>已取消</label>
|
<label id="cancelCount">${cancelCount}</label>
|
</div>
|
</div>
|
</div>
|
|
<div class="col-sm-2">
|
<div class="ibox float-e-margins">
|
<div class="ibox-content">
|
<div class="form-horizontal" id="serverOrder" style="overflow:scroll;width: 100%; height:650px;">
|
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<script src="${ctxPath}/static/modular/system/tHomePage/tOrder.js"></script>
|
<script src="https://webapi.amap.com/loader.js"></script>
|
|
<style type="text/css">
|
#container {
|
background-color: white;
|
height: 620px;
|
width: 100%;
|
flex-grow: initial;
|
flex-shrink: initial;
|
flex-basis: initial;
|
align-self: initial;
|
}
|
td{
|
width: 25%;
|
font-size: 2px;
|
}
|
#panel {
|
position: fixed;
|
background-color: white;
|
max-height: 90%;
|
overflow-y: auto;
|
top: 10px;
|
right: 10px;
|
width: 280px;
|
}
|
#panel .amap-call {
|
background-color: #009cf9;
|
border-top-left-radius: 4px;
|
border-top-right-radius: 4px;
|
}
|
#panel .amap-lib-driving {
|
border-bottom-left-radius: 4px;
|
border-bottom-right-radius: 4px;
|
overflow: hidden;
|
}
|
.btn{
|
height: 33px
|
}
|
</style>
|
<script type="text/javascript">
|
|
function getData(){
|
var ajax = new $ax(Feng.ctxPath + "/tHomePage/getMap", function (data) {
|
document.getElementById("onLineDriverCount").innerText=data.onLineDriverCount
|
document.getElementById("pendingOrderCount").innerText=data.pendingOrderCount
|
document.getElementById("serverCount").innerText=data.serverCount
|
document.getElementById("finishCount").innerText=data.finishCount
|
document.getElementById("cancelCount").innerText=data.cancelCount
|
$('#allList').val(data.allList);
|
map(data.allList)
|
getOrder()
|
|
}, function (data) {
|
});
|
ajax.set("agentId",$("#agentName").val());
|
ajax.set("type",$("#orderType").val());
|
ajax.start();
|
}
|
function reset(){
|
$("#agentName").val('')
|
$("#orderType").val('')
|
var ajax = new $ax(Feng.ctxPath + "/tHomePage/getMap", function (data) {
|
document.getElementById("onLineDriverCount").innerText=data.onLineDriverCount
|
document.getElementById("pendingOrderCount").innerText=data.pendingOrderCount
|
document.getElementById("serverCount").innerText=data.serverCount
|
document.getElementById("finishCount").innerText=data.finishCount
|
document.getElementById("cancelCount").innerText=data.cancelCount
|
$('#allList').val(data.allList);
|
map(data.allList)
|
getOrder()
|
}, function (data) {
|
});
|
ajax.set("agentId",$("#agentName").val());
|
ajax.set("type",$("#orderType").val());
|
ajax.start();
|
}
|
|
|
function map(e){
|
window._AMapSecurityConfig = {
|
securityJsCode:'b62d9146929db08c4c2f4537d045320d',
|
};
|
laydate.render({
|
elem: '#createTime',
|
type: 'date',
|
range: true
|
});
|
|
AMapLoader.reset() // 需要把这个reset一下
|
AMapLoader.load({
|
"key": "1d43098bcd98ab124623e7e4bcc9595e", // 申请好的Web端开发者Key，首次调用 load 时必填
|
"version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
"plugins": ['AMap.Driving'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
"AMapUI": { // 是否加载 AMapUI，缺省不加载
|
"version": '1.1', // AMapUI 版本
|
"plugins":['overlay/SimpleMarker'], // 需要加载的 AMapUI ui插件
|
},
|
"Loca":{ // 是否加载 Loca， 缺省不加载
|
"version": '2.0' // Loca 版本
|
},
|
}).then((AMap)=>{
|
//初始化地图对象，加载地图
|
var map = new AMap.Map('container', {
|
viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
|
zoom:10, //初始化地图层级
|
center: [102.709,25.0635] //初始化地图中心点
|
});
|
// map.clearMap(); // 清除地图覆盖物
|
// 经纬度坐标数组
|
var allList;
|
if(e==""){
|
allList = $('#allList').val();
|
var list = JSON.stringify(allList)
|
const jsonArray = JSON.parse(list)
|
const jsonArray1 = JSON.parse(jsonArray);
|
console.log(jsonArray1)
|
M = jsonArray1;
|
}else{
|
M=e;
|
|
}
|
console.log(M)
|
M.forEach(function(marker) {
|
new AMap.Marker({
|
map: map,
|
icon: marker[2]==301?'//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png':((marker[2]==109||marker[2]==107||marker[2]==108)?'https://csxdj.obs.cn-south-1.myhuaweicloud.com/c1d2f38187de40daa353fcc70993288e.png':
|
(marker[2]==101?'//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-3.png':'//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-4.png')
|
),
|
position: [marker[0], marker[1]],
|
offset: new AMap.Pixel(-13, -30)
|
});
|
});
|
|
const onLineDriver = $('#onLineDriver').val();
|
var list1 = JSON.stringify(onLineDriver)
|
const jsonArr = JSON.parse(list1)
|
const jsonArr1 = JSON.parse(jsonArr);
|
console.log(jsonArr1)
|
M = jsonArr1;
|
M.forEach(function(marker) {
|
new AMap.Marker({
|
map: map,
|
icon: 'https://csxdj.obs.cn-south-1.myhuaweicloud.com/c1d2f38187de40daa353fcc70993288e.png',
|
position: [marker[0], marker[1]],
|
offset: new AMap.Pixel(-13, -30)
|
});
|
});
|
|
// var center = map.getCenter();
|
// var centerText = '当前中心点坐标：' + center.getLng() + ',' + center.getLat();
|
// 添加事件监听, 使地图自适应显示到合适的范围
|
AMap.event.addDomListener(document.getElementById('container'), 'click', function() {
|
var newCenter = map.setFitView();
|
});
|
}).catch((e)=>{
|
console.error(e); //加载错误提示
|
});
|
}
|
|
function getOrder(){
|
$.ajax({
|
url: Feng.ctxPath + '/tHomePage/getServerOrder',
|
type: 'POST',
|
data: {
|
agentId: $("#agentName").val()
|
},
|
success: function (res) {
|
var order = res.serverList
|
var str = '<table><tr><h3>服务中</h3></tr><hr/><br>';
|
if(order.length > 0){
|
for(var i in order){
|
console.log(order[i].startTime)
|
str +=
|
'<tr><img src=' + order[i].avatar + ' style="height: 40px;width: 40px"></img>' + order[i].driverName +'</tr><br>' +
|
'<table><tr><td>驾龄</td><td>' + order[i].drivingExperience + '年'+'</td><td>代驾次数</td><td>' + order[i].valetDrivingCount + '次'+'</td></tr><br></table>' +
|
'<table><br><tr><td>出行时间</td><td>' + order[i].startTime + '</td></tr>' +
|
'<tr><td>起点</td><td>' + order[i].startAddress + '</td></tr>' +
|
'<tr><td>终点</td><td>' + order[i].endAddress + '</td></tr></table><br>' +
|
'<table><tr><td>预估费用</td><td>' + order[i].estimatedPrice + '元'+'</td><td>行驶里程</td><td>' + order[i].mileageTraveled + '公里'+'</td></tr>' +
|
'<tr><td>等待时间</td><td>' + order[i].waitTime + '分钟'+'</td><td>行驶时间</td><td>' + order[i].goTime + '分钟'+'</td></tr></table><hr/>';
|
}
|
}
|
str += '</table>';
|
$('#serverOrder').html(str);
|
}
|
});
|
}
|
|
|
$(function(){
|
$('.btn').css('height','33px')
|
map("");
|
getOrder();
|
})
|
|
</script>
|
@}
|
