From d6c02727ff5005990c704873668769ee2c6375b4 Mon Sep 17 00:00:00 2001 From: puzhibing <393733352@qq.com> Date: 星期三, 26 七月 2023 17:16:49 +0800 Subject: [PATCH] 开发2.0功能 --- management/guns-admin/src/main/webapp/WEB-INF/view/blackboardBlank.html | 369 ++++++++++++++++++++-------------------------------- 1 files changed, 143 insertions(+), 226 deletions(-) diff --git a/management/guns-admin/src/main/webapp/WEB-INF/view/blackboardBlank.html b/management/guns-admin/src/main/webapp/WEB-INF/view/blackboardBlank.html index 2b98994..a48a2a9 100644 --- a/management/guns-admin/src/main/webapp/WEB-INF/view/blackboardBlank.html +++ b/management/guns-admin/src/main/webapp/WEB-INF/view/blackboardBlank.html @@ -5,8 +5,7 @@ <div class="row" style="border-style: none none solid; border-color: #e7eaec; border-width: 1px 0px;"> <ul class="breadcrumb" style="height: 45px; line-height: 45px; padding-left: 20px;"> <li><a href="#" class="statistics">运营数据总览</a></li> - <li><a href="#" class="map">车辆地图总览</a></li> - <li><a href="#" class="order">订单热点图</a></li> + <li><a href="#" class="map">地图总览</a></li> </ul> </div> @@ -139,7 +138,7 @@ </select> </div> <div class="initialLevel col-sm-2 control-label form-group" > - <button type="button" class="btn btn-primary" onclick="getData()" style="height: 33px"> + <button type="button" class="btn btn-primary" onclick="getMapData()" style="height: 33px"> <i class="fa fa-search"></i> 查询 </button> <button type="button" class="btn btn-primary button-margin" onclick="reset()" style="height: 33px"> @@ -162,68 +161,25 @@ <label id="onLineDriverCount">${onLineDriverCount}</label> <label>人</label> </div> - </div> - </div> - </div> - - <div class="row content" id="orderDiv"> - <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" > - <select class="input-group" id="orderType" style="width: 180px;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="initialLevel col-sm-2 control-label form-group" > - <button type="button" class="btn btn-primary " onclick="getDataOrder()" style="height: 33px"> - <i class="fa fa-search"></i> 查询 - </button> - <button type="button" class="btn btn-primary button-margin" onclick="resetOrder()" style="height: 33px"> - <i class="fa fa-trash"></i> 重置 - </button> - </div> - </div> - <div class="col-sm-10" > - <input hidden id="allList" value="${allList}"> - <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="containerOrder" ></div> - <div id="panelOrder" ></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>未接单:</label> <label id="pendingOrderCount">${pendingOrderCount}</label> </div> <div class="initialLevel col-sm-2 control-label form-group" > - <label>服务中</label> + <label>服务中:</label> <label id="serverCount">${serverCount}</label> </div> <div class="initialLevel col-sm-2 control-label form-group" > - <label>已完成</label> + <label>已完成:</label> <label id="finishCount">${finishCount}</label> </div> <div class="initialLevel col-sm-2 control-label form-group" > - <label>已取消</label> + <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> @@ -366,7 +322,6 @@ queryOrderCount() break; case "map": - map("",113.264434,23.129162); break; case "order": mapOrder(""); @@ -745,187 +700,149 @@ ajax.start(); } - function getDataOrder(){ - 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); - console.log(data.allList) - mapOrder(data.allList) - getOrderData() - - }, function (data) { - }); - ajax.set("agentId",$("#agentId").val()); - ajax.set("type",$("#orderType").val()); - ajax.start(); - } - function resetOrder(){ - $("#agentId").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); - mapOrder(data.allList) - getOrderData() - }, function (data) { - }); - ajax.set("agentId",$("#agentId").val()); - ajax.set("type",$("#orderType").val()); - ajax.start(); - } - function map(e,addressLon,addressLat){ - window._AMapSecurityConfig = { - securityJsCode:'b62d9146929db08c4c2f4537d045320d', - }; - laydate.render({ - elem: '#createTime', - type: 'date', - range: true - }); + // 创建地图实例 + var map = new AMap.Map("container", { + zoom: 13, + center: [103.924660,30.588548], + resizeEnable: 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: [addressLon,addressLat] //初始化地图中心点 - }); - // map.clearMap(); // 清除地图覆盖物 - // 经纬度坐标数组 - 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: marker[2]==1?'https://csxdj.obs.cn-south-1.myhuaweicloud.com/c1d2f38187de40daa353fcc70993288e.png':'https://csxdj.obs.cn-south-1.myhuaweicloud.com/c1d2f38187de40daa353fcc70993288e.png', - position: [marker[0], marker[1]], - offset: new AMap.Pixel(-13, -30) - }); - }); + let texts = []; + function getMapData() { + map.remove(texts); + var ajax = new $ax(Feng.ctxPath + "/tHomePage/getMap", function (data) { + let lobby = data.lobby;//大厅 + let service = data.service;//服务中 + let receivedOrder = data.receivedOrder;//已接单 + let leisure = data.leisure;//空闲 + let cancel = data.cancel;//流失 - // 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); //加载错误提示 - }); - } + for (let i = 0; i < cancel.length; i++) { + let lonLat = cancel[i].lonLat; + let positon = lonLat.split(","); + var text = new AMap.Text({ + text:'流 失', + anchor:'center', // 设置文本标记锚点 + draggable:true, + cursor:'pointer', + style:{ + // 'padding': '.75rem 1.25rem', + // 'margin-bottom': '1rem', + // 'border-radius': '.25rem', + // 'background-color': 'white', + // 'width': '15rem', + 'border-width': 0, + 'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)', + 'text-align': 'center', + 'font-size': '16px', + 'color': 'red' + }, + position: [parseFloat(positon[0]),parseFloat(positon[1])] + }); + text.setMap(map); + texts.push(text); + } + for (let i = 0; i < lobby.length; i++) { + let lonLat = lobby[i].lonLat; + let positon = lonLat.split(","); + var text = new AMap.Text({ + text:'大 厅', + anchor:'center', // 设置文本标记锚点 + draggable:true, + cursor:'pointer', + style:{ + 'border-width': 0, + 'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)', + 'text-align': 'center', + 'font-size': '16px', + 'color': 'blue' + }, + position: [parseFloat(positon[0]),parseFloat(positon[1])] + }); + text.setMap(map); + texts.push(text); + } - function mapOrder(e){ - window._AMapSecurityConfig = { - securityJsCode:'b62d9146929db08c4c2f4537d045320d', - }; - 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('containerOrder', { - viewMode: '2D', // 默认使用 2D 模式,如果希望使用带有俯仰角的 3D 模式,请设置 viewMode: '3D', - zoom:10, //初始化地图层级 - center: [113.264434,23.129162] //初始化地图中心点 - }); - // 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?'https://csxdj.obs.cn-south-1.myhuaweicloud.com/8a6bb84da305438faba9fa1552c59f64.png':((marker[2]==109||marker[2]==107||marker[2]==108)?'https://csxdj.obs.cn-south-1.myhuaweicloud.com/6132e18884e24916a507b4b55d38d07b.png': - (marker[2]==101?'https://csxdj.obs.cn-south-1.myhuaweicloud.com/7461e4a7e4004c548e91aafa538246a1.png':'https://csxdj.obs.cn-south-1.myhuaweicloud.com/d8739241fa36482b80df7cacac2cc3d1.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('containerOrder'), 'click', function() { - var newCenter = map.setFitView(); - }); - }).catch((e)=>{ - console.error(e); //加载错误提示 - }); - } + for (let i = 0; i < leisure.length; i++) { + let name = leisure[i].name; + let lonLat = leisure[i].lonLat; + let positon = lonLat.split(","); + var text = new AMap.Text({ + text:name, + anchor:'center', // 设置文本标记锚点 + draggable:true, + cursor:'pointer', + style:{ + 'border-width': 0, + 'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)', + 'text-align': 'center', + 'font-size': '16px', + 'color': 'white', + 'background-color':'green' + }, + position: [parseFloat(positon[0]),parseFloat(positon[1])] + }); + text.setMap(map); + texts.push(text); + } - function getOrderData(){ - $.ajax({ - url: Feng.ctxPath + '/tHomePage/getServerOrder', - type: 'POST', - data: { - agentId: $("#agentId").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 class="name1">驾龄</td><td class="name1">' + order[i].drivingExperience + '年'+'</td><td class="name1">代驾次数</td><td class="name1">' + order[i].valetDrivingCount + '次'+'</td></tr><br></table>' + - '<table><br><tr><td class="name1">出行时间</td><td class="name1">' + order[i].startTime + '</td></tr>' + - '<tr><td class="name1">起点</td><td class="name1">' + order[i].startAddress + '</td></tr>' + - '<tr><td class="name1">终点</td><td class="name1">' + order[i].endAddress + '</td></tr></table><br>' + - '<table><tr><td class="name1">预估费用</td><td class="name1">' + order[i].estimatedPrice + '元'+'</td><td class="name1">行驶里程</td><td class="name1">' + order[i].mileageTraveled + '公里'+'</td></tr>' + - '<tr><td class="name1">等待时间</td><td class="name1">' + order[i].waitTime + '分钟'+'</td><td class="name1">行驶时间</td><td class="name1">' + order[i].goTime + '分钟'+'</td></tr></table><hr/>'; - } - } - str += '</table>'; - $('#serverOrder').html(str); - } - }); - } + for (let i = 0; i < service.length; i++) { + let name = service[i].name; + let lonLat = service[i].lonLat; + let positon = lonLat.split(","); + var text = new AMap.Text({ + text:name, + anchor:'center', // 设置文本标记锚点 + draggable:true, + cursor:'pointer', + style:{ + 'border-width': 0, + 'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)', + 'text-align': 'center', + 'font-size': '16px', + 'color': 'white', + 'background-color':'red' + }, + position: [parseFloat(positon[0]),parseFloat(positon[1])] + }); + text.setMap(map); + texts.push(text); + } + + for (let i = 0; i < receivedOrder.length; i++) { + let name = receivedOrder[i].name; + let lonLat = receivedOrder[i].lonLat; + let positon = lonLat.split(","); + var text = new AMap.Text({ + text:name, + anchor:'center', // 设置文本标记锚点 + draggable:true, + cursor:'pointer', + style:{ + 'border-width': 0, + 'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)', + 'text-align': 'center', + 'font-size': '16px', + 'color': 'black', + 'background-color':'yellow' + }, + position: [parseFloat(positon[0]),parseFloat(positon[1])] + }); + text.setMap(map); + texts.push(text); + } + }, function (data) { + }); + ajax.set("agentId", $("#agentId").val()); + ajax.start(); + } + + getMapData(); + setInterval(function () { + getMapData(); + }, 30000); </script> @} -- Gitblit v1.7.1