@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-3 control-label form-group" >
|
<span class="control-label" style="font-size: 30px">今天</span>
|
</div>
|
</div>
|
<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="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>
|
</div>
|
</div>
|
</div>
|
</div>
|
<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="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
|
<style>
|
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;
|
}
|
table{
|
table-layout:fixed;
|
word-break:break-all;
|
}
|
th{
|
text-align: center;
|
}
|
td{
|
width:100px;
|
height:40px
|
}
|
.pro {
|
width: 200px;
|
margin: 100px auto;
|
|
}
|
.result {
|
width: 200px;
|
margin: 100px auto;
|
|
}
|
.result{
|
text-align: center;
|
text-shadow: 0 0 5px #333333;
|
color:#FFFFFF;
|
}
|
</style>
|
<script type="text/javascript">
|
|
$(function (){
|
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;">\n' +
|
' <tr>\n' +
|
' <th>排名</th>\n' +
|
' <th>时间</th>\n' +
|
' <th>姓名</th>\n';
|
if(type == 1){
|
str += ' <th>单量</th>\n' +
|
' </tr>';
|
}
|
if(type == 2){
|
str += ' <th>收入</th>\n' +
|
' </tr>';
|
}
|
if(type == 3){
|
str += ' <th>佣金</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>' + a + '</td><td>' + order[i].monthTime + '</td><td>' + order[i].userName + '</td><td>' + 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())
|
}
|
})
|
|
</script>
|
@}
|
