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