| | |
| | | <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> |
| | | |
| | |
| | | </div><br/> |
| | | <div id="chart1" style="height: 90%;width: 100%"></div> |
| | | </div> |
| | | |
| | | <div class="initialLevel col-sm-4 control-label form-group" > |
| | | </div> |
| | | |
| | |
| | | </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"> |
| | |
| | | <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 class="row content" id="orderDiv">--> |
| | | <!--<div class="col-sm-10" >--> |
| | | <!--<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="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> |
| | | |
| | | <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script> |
| | | <script src="${ctxPath}/static/modular/system/tCoupon/tAgent_info.js"></script> |
| | | <script src="${ctxPath}/static/modular/system/tCoupon/tAgent.js"></script> |
| | | |
| | | <link rel="stylesheet" href="${ctxPath}/static/css/plugins/lineProgressbar/jquery.lineProgressbar.css"> |
| | | <script src="${ctxPath}/static/js/plugins/lineProgressbar/jquery.lineProgressbar.js"></script> |
| | | |
| | |
| | | queryOrderCount() |
| | | break; |
| | | case "map": |
| | | map("",113.264434,23.129162); |
| | | break; |
| | | case "order": |
| | | mapOrder(""); |
| | |
| | | } |
| | | |
| | | }) |
| | | // $('#mapDiv').hide() |
| | | // $('#orderDiv').hide() |
| | | // loading() |
| | | // orderByMonth(new Date().getMonth() + 1) |
| | | // orderByYear(new Date().getFullYear()) |
| | | // queryOrderCount() |
| | | }) |
| | | |
| | | function selectYear(e){ |
| | |
| | | selectMonth(value)// change 每点一次都会监听一遍 |
| | | } |
| | | }); |
| | | laydate.render({ |
| | | elem: '#createTime', |
| | | type: 'date', |
| | | range: true |
| | | }); |
| | | |
| | | // 进度条加载 |
| | | function loading(){ |
| | | var options = $.extend({ |
| | | percentage : $('#agentTotal').text(), |
| | | percentage : $('#agentTotal').text()<100?$('#agentTotal').text():($('#agentTotal').text()>1000?$('#agentTotal').text()/100:$('#agentTotal').text()/10), |
| | | ShowProgressCount: false, |
| | | duration: 10, |
| | | |
| | |
| | | }); |
| | | $('#pro1').LineProgressbar(options); |
| | | var options = $.extend({ |
| | | percentage : $('#agentMonthTotal').text(), |
| | | percentage : $('#agentMonthTotal').text()<100?$('#agentMonthTotal').text():($('#agentMonthTotal').text()>1000?$('#agentMonthTotal').text()/100:$('#agentMonthTotal').text()/10), |
| | | ShowProgressCount: false, |
| | | duration: 10, |
| | | |
| | |
| | | }); |
| | | $('#pro3').LineProgressbar(options); |
| | | var options = $.extend({ |
| | | percentage : $('#driverMonthTotal').text(), |
| | | percentage : $('#driverMonthTotal').text()<100?$('#driverMonthTotal').text():($('#driverMonthTotal').text()>1000?$('#driverMonthTotal').text()/100:$('#driverMonthTotal').text()/10), |
| | | ShowProgressCount: false, |
| | | duration: 10, |
| | | |
| | |
| | | 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) |
| | | map(data.allList,data.addressLon,data.addressLat) |
| | | $('#onLineDriver').val(data.onLineDriver); |
| | | console.log(data.onLineDriver) |
| | | map(data.onLineDriver,data.addressLon,data.addressLat) |
| | | getOrderData() |
| | | |
| | | }, function (data) { |
| | |
| | | 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,data.addressLon,data.addressLat) |
| | | getOrderData() |
| | | }, function (data) { |
| | | }); |
| | | ajax.set("agentId",$("#agentId").val()); |
| | | ajax.set("type",$("#orderType").val()); |
| | | 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) |
| | | $('#onLineDriver').val(data.onLineDriver); |
| | | map(data.onLineDriver,data.addressLon,data.addressLat) |
| | | getOrderData() |
| | | }, function (data) { |
| | | }); |
| | |
| | | } |
| | | |
| | | |
| | | function map(e,addressLon,addressLat){ |
| | | 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: [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) |
| | | }); |
| | | }); |
| | | // 创建地图实例 |
| | | var map = new AMap.Map("container", { |
| | | zoom: 13, |
| | | center: [103.924660,30.588548], |
| | | resizeEnable: true |
| | | }); |
| | | |
| | | // 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); //加载错误提示 |
| | | }); |
| | | } |
| | | 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;//流失 |
| | | 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); |
| | | } |
| | | 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); |
| | | } |
| | | 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); |
| | | |
| | | function mapOrder(e){ |
| | | window._AMapSecurityConfig = { |