| | |
| | | @layout("/common/_container.html"){ |
| | | <style> |
| | | .contact-box { |
| | | background: unset; |
| | | border: unset; |
| | | } |
| | | strong{ |
| | | line-height: 23px; |
| | | } |
| | | </style> |
| | | |
| | | <div class="wrapper wrapper-content animated fadeInRight"> |
| | | <div class="container-fluid" style="padding: 0 !important;"> |
| | | <div class="row"> |
| | | <div class="col-sm-6"> |
| | | <div class="contact-box"> |
| | | <div class="col-sm-4"> |
| | | <div class="text-center"> |
| | | @if(user.avatar!=null){ |
| | | <img alt="image" class="img-circle " src="${user.avatar}" style="width: 120px;height: 120px " > |
| | | @} |
| | | @if(user.avatar==null){ |
| | | <img alt="image" class="img-circle " src="${ctxPath}/static/img/login-background.jpg" style="width: 120px;height: 120px" > |
| | | @} |
| | | <div class="col-sm-12"> |
| | | <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> |
| | | </ul> |
| | | </div> |
| | | |
| | | <div class="m-t-xs font-bold">${deptName}</div> |
| | | <div class="row content" id="statisticsDiv"> |
| | | <div class="initialLevel col-sm-12 control-label form-group" style="cursor: pointer;text-align: left;"> |
| | | <div class="initialLevel col-sm-3 control-label form-group" > |
| | | <span class="control-label" style="font-size: 30px">今天</span> |
| | | </div> |
| | | </div> |
| | | <div class="col-sm-8"> |
| | | <h3><strong>${user.name}</strong></h3> |
| | | <p><i class="fa fa-user-secret"></i> ${roleName}</p> |
| | | <address> |
| | | <strong>E-mail:${user.email}</strong><br> |
| | | <strong>Tel:${user.phone}</strong><br> |
| | | <strong>登录次数:${loginNum}次</strong><br> |
| | | <strong>登录时间:${date}</strong><br> |
| | | </address> |
| | | <div class="initialLevel col-sm-12 control-label form-group" > |
| | | <div class="initialLevel col-sm-8 control-label form-group" style="cursor: pointer;text-align: left;" > |
| | | <label>${txt}</label> |
| | | </div> |
| | | <div class="initialLevel col-sm-4 form-group" style="cursor: pointer;text-align: right;" > |
| | | <label class="col-sm-2">代理商</label> |
| | | <select class="col-sm-2 " id="agentName" style="width: 200px;height: 33px" name="agentName"> |
| | | <option value="">请选择</option> |
| | | @for(i in agentList){ |
| | | <option value="${i.id}">${i.principal}</option> |
| | | @} |
| | | </select> |
| | | </div> |
| | | </div> |
| | | <div class="clearfix"></div> |
| | | <div class="initialLevel col-sm-12 control-label form-group" > |
| | | <div class="initialLevel col-sm-3 control-label form-group" style="border: 1px solid;border-color: #c2ccd1;height: 130px"> |
| | | <br/> |
| | | <div class="ibox float-e-margins"> |
| | | <div class="col-sm-3" ><br/> |
| | | <label style="font-size: 16px">代理商</label><br/> |
| | | <img src="https://newok.oss-cn-shenzhen.aliyuncs.com/img/0e257d6fe5af4275919d039b40e30e19.png"> |
| | | </div> |
| | | <div class="initialLevel col-sm-9 control-label form-group" > |
| | | <div> |
| | | <div class="col-sm-8" style="font-size: 16px">总数</div> |
| | | <div class="col-sm-1" id="agentTotal">${agentTotal}</div> |
| | | </div><br/> |
| | | <div id="pro1" style="height: 20px"></div><br/> |
| | | <div> |
| | | <div class="col-sm-8" style="font-size: 16px">近一月新增</div> |
| | | <div class="col-sm-1" id="agentMonthTotal">${agentMonthTotal}</div> |
| | | </div><br/> |
| | | <div id="pro2" style="height: 20px"></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="col-sm-1"></div> |
| | | <div class="initialLevel col-sm-3 control-label form-group" style="border: 1px solid;border-color: #c2ccd1;height: 130px"> |
| | | <br/> |
| | | <div class="ibox float-e-margins"> |
| | | <div class="col-sm-3" ><br/> |
| | | <label style="font-size: 16px">司机</label><br/> |
| | | <img src="https://newok.oss-cn-shenzhen.aliyuncs.com/img/0e257d6fe5af4275919d039b40e30e19.png" > |
| | | </div> |
| | | <div class="initialLevel col-sm-9 control-label form-group" > |
| | | <div> |
| | | <div class="col-sm-8" style="font-size: 16px">总数</div> |
| | | <div class="col-sm-1" id="driverTotal">${driverTotal}</div> |
| | | </div><br/> |
| | | <div id="pro3" style="height: 20px"></div><br/> |
| | | <div> |
| | | <div class="col-sm-8" style="font-size: 16px">近一月新增</div> |
| | | <div class="col-sm-1" id="driverMonthTotal">${driverMonthTotal}</div> |
| | | </div><br/> |
| | | <div id="pro4" style="height: 20px"></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="col-sm-1"></div> |
| | | <div class="initialLevel col-sm-4 control-label form-group" style="border: 1px solid;border-color: #c2ccd1;height: 600px"><br/> |
| | | <div> |
| | | <div class="initialLevel col-sm-4 control-label form-group" > |
| | | <label style="font-size: 20px">业绩排名</label> |
| | | </div> |
| | | <div class="col-sm-2"></div> |
| | | <div class="initialLevel col-sm-6 control-label form-group" > |
| | | <div style="font-size: 0px;width: 100%"> |
| | | <button id="btn1" onclick="queryOrderCount()">单量</button> |
| | | <button id="btn2" onclick="queryIncome()">收入</button> |
| | | <button id="btn3" onclick="queryCommission()">佣金</button> |
| | | </div> |
| | | <div> |
| | | <input type="text" class="form-control layer-date" placeholder="请选择" id="insertTimeMonth"> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div id="performanceResp"> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="initialLevel col-sm-12 control-label form-group" ><br/><br/> |
| | | <div class="initialLevel col-sm-3 control-label form-group" style="border: 1px solid;border-color: #c2ccd1;margin-top: -400px;height: 300px"> |
| | | <br/> |
| | | <div class="col-sm-5" > |
| | | <label style="font-size: 16px">订单统计(本月)</label> |
| | | </div> |
| | | <div class="col-sm-3"></div> |
| | | <div class="initialLevel col-sm-4 control-label form-group" style="text-align: right" > |
| | | </div> |
| | | <div id="chart2" style="height: 90%;width: 100%"></div> |
| | | </div> |
| | | <div class="col-sm-1"></div> |
| | | <div class="initialLevel col-sm-3 control-label form-group" style="border: 1px solid;border-color: #c2ccd1;margin-top: -400px;margin-left: 25%;height: 300px"> |
| | | <br/> |
| | | <div> |
| | | <div class="col-sm-5" > |
| | | <label style="font-size: 16px">订单统计(年份)</label> |
| | | </div> |
| | | <div class="col-sm-3"></div> |
| | | <div class="initialLevel col-sm-4 control-label form-group" style="text-align: right"> |
| | | <input type="text" class="form-control layer-date" placeholder="请选择" id="insertTime"> |
| | | </div> |
| | | </div><br/> |
| | | <div id="chart1" style="height: 90%;width: 100%"></div> |
| | | </div> |
| | | |
| | | <div class="initialLevel col-sm-4 control-label form-group" > |
| | | </div> |
| | | |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="row content" id="mapDiv"> |
| | | <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="agentId" style="width: 200px;height: 34px" name="agentId"> |
| | | <option value="">请选择代理商</option> |
| | | @for(i in agentList){ |
| | | <option value="${i.id}">${i.principal}</option> |
| | | @} |
| | | </select> |
| | | </div> |
| | | <div class="initialLevel col-sm-2 control-label form-group" > |
| | | <#button name="搜索" icon="fa-search" clickFun="getData()"/> |
| | | <#button name="重置" icon="fa-trash" clickFun="reset()" space="true"/> |
| | | </div> |
| | | </div> |
| | | <div class="col-sm-12" > |
| | | <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> |
| | | </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 name="搜索" icon="fa-search" clickFun="getDataOrder()"/> |
| | | <#button name="重置" icon="fa-trash" clickFun="resetOrder()" space="true"/> |
| | | </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 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> |
| | | $(document).ready(function () { |
| | | $('.contact-box').each(function () { |
| | | animationHover(this, 'pulse'); |
| | | }); |
| | | $(".row").css({ |
| | | height: window.innerHeight+"px", |
| | | display:"flex", |
| | | alignItems: "center", |
| | | justifyContent: "center", |
| | | }) |
| | | }); |
| | | </script> |
| | | |
| | | <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> |
| | | |
| | | <script src="${ctxPath}/static/modular/system/tHomePage/tOrder.js"></script> |
| | | <script src="https://webapi.amap.com/loader.js"></script> |
| | | |
| | | <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> |
| | | |
| | | <style> |
| | | .name1{ |
| | | width:25%; |
| | | font-size:2px |
| | | } |
| | | #container { |
| | | background-color: white; |
| | | height: 620px; |
| | | width: 100%; |
| | | flex-grow: initial; |
| | | flex-shrink: initial; |
| | | flex-basis: initial; |
| | | align-self: initial; |
| | | } |
| | | #panel { |
| | | position: fixed; |
| | | background-color: white; |
| | | max-height: 90%; |
| | | overflow-y: auto; |
| | | top: 10px; |
| | | right: 10px; |
| | | width: 280px; |
| | | } |
| | | #containerOrder { |
| | | background-color: white; |
| | | height: 620px; |
| | | width: 100%; |
| | | flex-grow: initial; |
| | | flex-shrink: initial; |
| | | flex-basis: initial; |
| | | align-self: initial; |
| | | } |
| | | #panelOrder { |
| | | 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; |
| | | } |
| | | img{ |
| | | height: 30px; |
| | | width: 30px; |
| | | } |
| | | #chart1 { |
| | | position: relative; |
| | | height: 100vh; |
| | | overflow: hidden; |
| | | } |
| | | button{ |
| | | width: 70px; |
| | | height: 25px; |
| | | margin-bottom: 5px; |
| | | } |
| | | #btn1{ |
| | | border-top-left-radius: 5px; |
| | | border-bottom-left-radius: 5px; |
| | | font-size: 1px; |
| | | } |
| | | #btn2{ |
| | | font-size: 1px; |
| | | } |
| | | #btn3{ |
| | | border-top-right-radius: 5px; |
| | | border-bottom-right-radius: 5px; |
| | | font-size: 1px; |
| | | } |
| | | .orderTh{ |
| | | text-align: center; |
| | | } |
| | | .orderTd{ |
| | | width:100px; |
| | | height:40px |
| | | } |
| | | </style> |
| | | <script type="text/javascript"> |
| | | |
| | | $(function (){ |
| | | |
| | | $('#mapDiv').hide() |
| | | $('#orderDiv').hide() |
| | | loading() |
| | | orderByMonth(new Date().getMonth() + 1) |
| | | orderByYear(new Date().getFullYear()) |
| | | queryOrderCount() |
| | | |
| | | var first = $('.breadcrumb').children('li:first').children('a'); |
| | | first.css({ |
| | | 'color': '#AB2626' |
| | | }) |
| | | var className = first.attr('class'); |
| | | $('.content').hide(); |
| | | $('#' + className + 'Div').show(); |
| | | |
| | | $('.breadcrumb').find('a').on('click', function () { |
| | | $('.breadcrumb').children('li').each(function () { |
| | | $(this).children('a').removeAttr('style'); |
| | | }) |
| | | |
| | | $(this).css({ |
| | | 'color': '#AB2626' |
| | | }); |
| | | var className = $(this).attr('class'); |
| | | $('.content').hide(); |
| | | $('#' + className + "Div").show(); |
| | | switch (className) { |
| | | case "statistics": |
| | | $('#mapDiv').hide() |
| | | $('#orderDiv').hide() |
| | | loading() |
| | | orderByMonth(new Date().getMonth() + 1) |
| | | orderByYear(new Date().getFullYear()) |
| | | queryOrderCount() |
| | | break; |
| | | case "map": |
| | | map(""); |
| | | break; |
| | | case "order": |
| | | mapOrder(""); |
| | | getOrderData(); |
| | | break; |
| | | } |
| | | |
| | | }) |
| | | // $('#mapDiv').hide() |
| | | // $('#orderDiv').hide() |
| | | // loading() |
| | | // orderByMonth(new Date().getMonth() + 1) |
| | | // orderByYear(new Date().getFullYear()) |
| | | // queryOrderCount() |
| | | }) |
| | | |
| | | function selectYear(e){ |
| | | orderByYear(e) |
| | | } |
| | | function selectMonth(e){ |
| | | // 查询排行榜 |
| | | if($('#btn1').val() != null && $('#btn1').val() != ''){ |
| | | console.log(11111) |
| | | getOrder($('#btn1').val(),e) |
| | | } |
| | | if($('#btn2').val() != null && $('#btn2').val() != ''){ |
| | | console.log(22222) |
| | | getOrder($('#btn2').val(),e) |
| | | } |
| | | if($('#btn3').val() != null && $('#btn3').val() != ''){ |
| | | console.log(33333) |
| | | getOrder($('#btn3').val(),e) |
| | | } |
| | | } |
| | | laydate.render({ |
| | | elem: '#insertTime', |
| | | range: false, |
| | | type: "year", |
| | | change:function(value,date) { |
| | | selectYear(value)// change 每点一次都会监听一遍 |
| | | } |
| | | }); |
| | | laydate.render({ |
| | | elem: '#insertTimeMonth', |
| | | range: false, |
| | | type: "month", |
| | | change:function(value,date) { |
| | | selectMonth(value)// change 每点一次都会监听一遍 |
| | | } |
| | | }); |
| | | |
| | | // 进度条加载 |
| | | function loading(){ |
| | | var options = $.extend({ |
| | | percentage : $('#agentTotal').text(), |
| | | ShowProgressCount: false, |
| | | duration: 10, |
| | | |
| | | // Styling Options |
| | | fillBackgroundColor: '#3498db', |
| | | backgroundColor: '#EEEEEE', |
| | | radius: '10px', |
| | | height: '20px', |
| | | width: '80%' |
| | | }); |
| | | $('#pro1').LineProgressbar(options); |
| | | var options = $.extend({ |
| | | percentage : $('#agentMonthTotal').text(), |
| | | ShowProgressCount: false, |
| | | duration: 10, |
| | | |
| | | // Styling Options |
| | | fillBackgroundColor: '#3498db', |
| | | backgroundColor: '#EEEEEE', |
| | | radius: '10px', |
| | | height: '20px', |
| | | width: '80%' |
| | | }); |
| | | $('#pro2').LineProgressbar(options); |
| | | var options = $.extend({ |
| | | percentage : $('#driverTotal').text(), |
| | | ShowProgressCount: false, |
| | | duration: 10, |
| | | |
| | | // Styling Options |
| | | fillBackgroundColor: '#3498db', |
| | | backgroundColor: '#EEEEEE', |
| | | radius: '10px', |
| | | height: '20px', |
| | | width: '80%' |
| | | }); |
| | | $('#pro3').LineProgressbar(options); |
| | | var options = $.extend({ |
| | | percentage : $('#driverMonthTotal').text(), |
| | | ShowProgressCount: false, |
| | | duration: 10, |
| | | |
| | | // Styling Options |
| | | fillBackgroundColor: '#3498db', |
| | | backgroundColor: '#EEEEEE', |
| | | radius: '10px', |
| | | height: '20px', |
| | | width: '80%' |
| | | }); |
| | | $('#pro4').LineProgressbar(options); |
| | | } |
| | | |
| | | // 单量 |
| | | function queryOrderCount(){ |
| | | $('#btn1').css("backgroundColor","dodgerblue") |
| | | $('#btn1').css("borderColor","dodgerblue") |
| | | $('#btn1').css("color","#FFFFFF") |
| | | $('#btn2').css("backgroundColor","#FFFFFF") |
| | | $('#btn2').css("borderColor","dodgerblue") |
| | | $('#btn2').css("color","black") |
| | | $('#btn3').css("backgroundColor","#FFFFFF") |
| | | $('#btn3').css("borderColor","dodgerblue") |
| | | $('#btn3').css("color","black") |
| | | $('#btn1').val(1) |
| | | $('#btn2').val('') |
| | | $('#btn3').val('') |
| | | getOrder($('#btn1').val(),$('#insertTimeMonth').val()) |
| | | } |
| | | // 收入 |
| | | function queryIncome(){ |
| | | $('#btn1').css("backgroundColor","#FFFFFF") |
| | | $('#btn1').css("borderColor","dodgerblue") |
| | | $('#btn1').css("color","black") |
| | | $('#btn2').css("backgroundColor","dodgerblue") |
| | | $('#btn2').css("borderColor","dodgerblue") |
| | | $('#btn2').css("color","#FFFFFF") |
| | | $('#btn3').css("backgroundColor","#FFFFFF") |
| | | $('#btn3').css("borderColor","dodgerblue") |
| | | $('#btn3').css("color","black") |
| | | $('#btn1').val('') |
| | | $('#btn2').val(2) |
| | | $('#btn3').val('') |
| | | getOrder($('#btn2').val(),$('#insertTimeMonth').val()) |
| | | } |
| | | // 佣金 |
| | | function queryCommission(){ |
| | | $('#btn1').css("backgroundColor","#FFFFFF") |
| | | $('#btn1').css("borderColor","dodgerblue") |
| | | $('#btn1').css("color","black") |
| | | $('#btn2').css("backgroundColor","#FFFFFF") |
| | | $('#btn2').css("borderColor","dodgerblue") |
| | | $('#btn2').css("color","black") |
| | | $('#btn3').css("backgroundColor","dodgerblue") |
| | | $('#btn3').css("borderColor","dodgerblue") |
| | | $('#btn3').css("color","#FFFFFF") |
| | | $('#btn1').val('') |
| | | $('#btn2').val('') |
| | | $('#btn3').val(3) |
| | | getOrder($('#btn3').val(),$('#insertTimeMonth').val()) |
| | | } |
| | | |
| | | // 通过年查询订单数量(查询每月) |
| | | function orderByYear(e){ |
| | | var dom = document.getElementById('chart1'); |
| | | var ajax = new $ax(Feng.ctxPath+"/tHomePage/statisticsYearByAgentId",function(data){ |
| | | data = data.yearResp |
| | | var myChart = echarts.init(dom, null, { |
| | | renderer: 'canvas', |
| | | useDirtyRect: false |
| | | }); |
| | | var option; |
| | | option = { |
| | | tooltip: { |
| | | trigger: 'axis', //坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用 |
| | | axisPointer: {// 坐标轴指示器,坐标轴触发有效 |
| | | type: 'line' // 默认为直线,可选为:'line' | 'shadow' |
| | | }, |
| | | formatter: '日期: {b} <br/>订单数量 : {c}' |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | data: [data[0].month+'月',data[1].month+'月', data[2].month+'月', data[3].month+'月',data[4].month+'月',data[5].month+'月',data[6].month+'月',data[7].month+'月',data[8].month+'月',data[9].month+'月',data[10].month+'月',data[11].month+'月'] |
| | | }, |
| | | yAxis: { |
| | | type: 'value' |
| | | }, |
| | | series: [ |
| | | { |
| | | data: [data[0].orderCount,data[1].orderCount, data[2].orderCount, data[3].orderCount,data[4].orderCount,data[5].orderCount,data[6].orderCount,data[7].orderCount,data[8].orderCount,data[9].orderCount,data[10].orderCount,data[11].orderCount], |
| | | type: 'line', |
| | | color: '#00b7ee' |
| | | } |
| | | ] |
| | | }; |
| | | option && myChart.setOption(option); |
| | | }, function (data) { |
| | | }); |
| | | ajax.set("agentId",$("#agentName").val()); |
| | | if(e==''){ |
| | | ajax.set("yearDate",$("#year").val()); |
| | | }else{ |
| | | ajax.set("yearDate",e); |
| | | } |
| | | |
| | | ajax.start(); |
| | | } |
| | | |
| | | // 通过本月查询订单数量(查询本月每天) |
| | | function orderByMonth(){ |
| | | var dom = document.getElementById('chart2'); |
| | | var ajax = new $ax(Feng.ctxPath+"/tHomePage/statisticsMonthByAgentId",function(data){ |
| | | data = data.monthResp |
| | | var mon = new Date().getMonth()+1; |
| | | if(mon < 10){ |
| | | mon = '0'+mon; |
| | | } |
| | | var yResp = []; |
| | | var xResp = []; |
| | | for (var i =0;i<data.length;i++){ |
| | | yResp.push({ |
| | | value:data[i].orderCount, |
| | | }) |
| | | xResp.push({ |
| | | value:mon+'-'+data[i].month, |
| | | }) |
| | | } |
| | | var myChart = echarts.init(dom, null, { |
| | | renderer: 'canvas', |
| | | useDirtyRect: false |
| | | }); |
| | | var option; |
| | | option = { |
| | | tooltip: { |
| | | trigger: 'axis', //坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用 |
| | | axisPointer: {// 坐标轴指示器,坐标轴触发有效 |
| | | type: 'line' // 默认为直线,可选为:'line' | 'shadow' |
| | | }, |
| | | formatter: '日期: {b} <br/>订单数量 : {c}' |
| | | }, |
| | | |
| | | xAxis: { |
| | | type: 'category', |
| | | data: xResp |
| | | }, |
| | | yAxis: { |
| | | type: 'value' |
| | | }, |
| | | series: [ |
| | | { |
| | | data: yResp, |
| | | type: 'line', |
| | | color: '#00b7ee' |
| | | } |
| | | ] |
| | | }; |
| | | option && myChart.setOption(option); |
| | | }, function (data) { |
| | | }); |
| | | ajax.set("agentId",$("#agentName").val()); |
| | | ajax.start(); |
| | | } |
| | | |
| | | function getOrder(type,e){ |
| | | $.ajax({ |
| | | url: Feng.ctxPath + '/tHomePage/statisticsOrderByAgentId', |
| | | type: 'POST', |
| | | data: { |
| | | agentId: $("#agentName").val(), |
| | | monthDate: e, |
| | | type: type |
| | | }, |
| | | success: function (res) { |
| | | var str = '<table border="1" style="border: #c2ccd1;border-radius: 1px;height: 90%;width: 100%;text-align:center;table-layout:fixed;tword-break:break-all;">\n' + |
| | | ' <tr style="text-align: center;width:100px;height:40px">\n' + |
| | | ' <th class="orderTh">排名</th>\n' + |
| | | ' <th class="orderTh">时间</th>\n' + |
| | | ' <th class="orderTh">姓名</th>\n'; |
| | | if(type == 1){ |
| | | str += ' <th class="orderTh">单量</th>\n' + |
| | | ' </tr>'; |
| | | } |
| | | if(type == 2){ |
| | | str += ' <th class="orderTh">收入</th>\n' + |
| | | ' </tr>'; |
| | | } |
| | | if(type == 3){ |
| | | str += ' <th class="orderTh">佣金</th>\n' + |
| | | ' </tr>'; |
| | | } |
| | | if(!$.isEmptyObject(res)){ |
| | | var order = res.performanceResp |
| | | if(order.length > 0){ |
| | | for(var i in order){ |
| | | var a=parseInt(i)+1 |
| | | str += |
| | | '<tr><td class="orderTd">' + a + '</td><td class="orderTd">' + order[i].monthTime + '</td><td class="orderTd">' + order[i].userName + '</td><td class="orderTd">' + order[i].amount + '</td></tr>'; |
| | | } |
| | | } |
| | | } |
| | | str += '</table>'; |
| | | $('#performanceResp').html(''); |
| | | $('#performanceResp').html(str); |
| | | } |
| | | }); |
| | | } |
| | | |
| | | // 动态查询代理商司机数量 |
| | | function getInfo(){ |
| | | var ajax = new $ax(Feng.ctxPath+"/tHomePage/statisticsDriverByAgentId",function(data){ |
| | | $("#agentTotal").text(data.agentTotal) |
| | | $("#agentMonthTotal").text(data.agentMonthTotal) |
| | | $("#driverTotal").text(data.driverTotal) |
| | | $("#driverMonthTotal").text(data.driverMonthTotal) |
| | | loading() |
| | | }, function (data) { |
| | | }); |
| | | ajax.set("agentId",$("#agentName").val()); |
| | | ajax.start(); |
| | | } |
| | | |
| | | // 代理商选择事件 |
| | | $('#agentName').change(function(){ |
| | | // 查询代理商 查询司机 |
| | | getInfo() |
| | | // 查询月度报表 |
| | | orderByMonth() |
| | | // 通过年查询订单报表 |
| | | orderByYear($('#insertTime').val()) |
| | | // 查询排行榜 |
| | | if($('#btn1').val() != null && $('#btn1').val() != ''){ |
| | | console.log(111) |
| | | getOrder($('#btn1').val(),$('#insertTimeMonth').val()) |
| | | } |
| | | if($('#btn2').val() != null && $('#btn2').val() != ''){ |
| | | console.log(222) |
| | | getOrder($('#btn2').val(),$('#insertTimeMonth').val()) |
| | | } |
| | | if($('#btn3').val() != null && $('#btn3').val() != ''){ |
| | | console.log(333) |
| | | getOrder($('#btn3').val(),$('#insertTimeMonth').val()) |
| | | } |
| | | }) |
| | | |
| | | |
| | | |
| | | |
| | | 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); |
| | | console.log(data.allList) |
| | | map(data.allList) |
| | | getOrderData() |
| | | |
| | | }, function (data) { |
| | | }); |
| | | ajax.set("agentId",$("#agentId").val()); |
| | | ajax.set("type",$("#orderType").val()); |
| | | ajax.start(); |
| | | } |
| | | function reset(){ |
| | | $("#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); |
| | | map(data.allList) |
| | | 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) |
| | | getOrderData() |
| | | }, function (data) { |
| | | }); |
| | | ajax.set("agentId",$("#agentId").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: [104.043246,30.641849] //初始化地图中心点 |
| | | }); |
| | | // 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?'//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-5.png':'//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-6.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 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: [104.043246,30.641849] //初始化地图中心点 |
| | | }); |
| | | // map.clearMap(); // 清除地图覆盖物 |
| | | // 经纬度坐标数组 |
| | | var allList; |
| | | if(e==""){ |
| | | allList = $('#allList').val(); |
| | | console.log(1111111111) |
| | | var list = JSON.stringify(allList) |
| | | console.log(2222222222) |
| | | const jsonArray = JSON.parse(list) |
| | | console.log(3333333333333) |
| | | 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)?'//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-2.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) |
| | | }); |
| | | }); |
| | | // 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); //加载错误提示 |
| | | }); |
| | | } |
| | | |
| | | 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); |
| | | } |
| | | }); |
| | | } |
| | | |
| | | </script> |
| | | @} |
| | | |