<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>东旭营销平台</title>
<meta name="keywords" content="东旭营销平台 Bate1.0">
<meta name="description" content="东旭营销平台 Bate1.0">
<%@ include file="common/head.jsp"%>
<base href=" <%=basePath%>" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
<div class="row">
<div class="col-sm-3">
<div class="ibox float-e-margins">
<div class="ibox-title">
<span class="label label-success pull-right">今天</span>
<h5>成交总额</h5>
</div>
<div class="ibox-content">
<h1 class="no-margins">${todayMapSuc.total}</h1>
<div class="stat-percent font-bold text-success">分佣：${dayMap.commission}<i class="fa fa-bolt"></i>
</div>
<small>保单量：${todayMapSuc.cnt}</small>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="ibox float-e-margins">
<div class="ibox-title">
<span class="label label-success pull-right">今天</span>
<h5>利润总额</h5>
</div>
<div class="ibox-content">
<h1 class="no-margins">${todayMapSuc.total-todayMapSuc.commission-todayMapSuc.policyAmount}</h1>
<div class="stat-percent font-bold text-success">支出：${dayMap.commission+todayMapSuc.policyAmount}<i class="fa fa-bolt"></i>
</div>
<small>保单量：${todayMapSuc.cnt}</small>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="ibox float-e-margins">
<div class="ibox-title">
<span class="label label-info pull-right">今天</span>
<h5>未成交</h5>
</div>
<div class="ibox-content">
<h1 class="no-margins">${todayMap.total-todayMapSuc.total}</h1>
<div class="stat-percent font-bold text-info"><i class="fa fa-level-up"></i>
</div>
<small>未成交单数:${todayMap.cnt-todayMapSuc.cnt}</small>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="ibox float-e-margins">
<div class="ibox-title">
<span class="label label-danger pull-right">近一个月</span>
<h5>收入</h5>
</div>
<div class="ibox-content">
<h1 class="no-margins">${monthSuc.total-monthSuc.commission-monthSuc.policyAmount}</h1>
<div class="stat-percent font-bold text-navy">支出：${monthSuc.commission+monthSuc.policyAmount}<i class="fa fa-level-up"></i>
</div>
<small>保单量：${monthSuc.cnt}</small>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>近一月订单量</h5>
<%--<div class="pull-right">
<div class="btn-group">
<button type="button" class="btn btn-xs btn-white active">天</button>
<button type="button" class="btn btn-xs btn-white">月</button>
<button type="button" class="btn btn-xs btn-white">年</button>
</div>
</div>--%>
</div>
<div class="ibox-content" id="ibox-content_pt">
<div class="row">
<div class="col-sm-9">
<div class="flot-chart">
<div class="flot-chart-content" id="flot-dashboard-chart"></div>
</div>
</div>
<div class="col-sm-3">
<ul class="stat-list">
<li>
<h2 class="no-margins"></h2>
<small>订单总数</small>
<div class="stat-percent">
</div>
<div class="progress progress-mini">
<div style="width: 100%;" class="progress-bar"></div>
</div>
</li>
<li>
<h2 class="no-margins "></h2>
<small>最近一个月订单</small>
<div class="stat-percent">
</div>
<div class="progress progress-mini">
<div style="width: 0%;" class="progress-bar"></div>
</div>
</li>
<li>
<h2 class="no-margins "></h2>
<small>最近一个月未付款订单</small>
<div class="stat-percent">
</div>
<div class="progress progress-mini">
<div style="width: 0%;" class="progress-bar"></div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-content" id="ibox-content_po">
<div class="row" style="height: 280px;">
<div class="col-sm-9">
<div class="flot-chart">
<div class="flot-chart-content" style="height: 280px;" id="echarts-sales"></div>
</div>
</div>
<div class="col-sm-3">
<ul class="stat-list">
<li>
<h2 class="no-margins"></h2>
<small>总销售额(单位：元)</small>
<div class="stat-percent">
</div>
<div class="progress progress-mini">
<div style="width: 100%;" class="progress-bar"></div>
</div>
</li>
<li>
<h2 class="no-margins "></h2>
<small>总收入(单位：元)</small>
<div class="stat-percent">
</div>
<div class="progress progress-mini">
<div style="width: 0%;" class="progress-bar"></div>
</div>
</li>
<li>
<h2 class="no-margins "></h2>
<small>最近一个月销售额(单位：元)</small>
<div class="stat-percent">
</div>
<div class="progress progress-mini">
<div style="width: 100%;" class="progress-bar"></div>
</div>
</li>
<li>
<h2 class="no-margins "></h2>
<small>最近一个月收入额(单位：元)</small>
<div class="stat-percent">
</div>
<div class="progress progress-mini">
<div style="width: 0%;" class="progress-bar"></div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 全局js -->
<!-- <script src="js/jquery.min.js?v=2.1.4"></script> -->
<!-- <script src="js/bootstrap.min.js?v=3.3.6"></script> -->
<!-- Flot -->
<script src="res/js/plugins/flot/jquery.flot.js"></script>
<script src="res/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
<script src="res/js/plugins/flot/jquery.flot.spline.js"></script>
<script src="res/js/plugins/flot/jquery.flot.resize.js"></script>
<script src="res/js/plugins/flot/jquery.flot.pie.js"></script>
<script src="res/js/plugins/flot/jquery.flot.symbol.js"></script>
<!-- Peity -->
<script src="res/js/plugins/peity/jquery.peity.min.js"></script>
<script src="res/js/demo/peity-demo.js"></script>
<!-- 自定义js -->
<script src="res/js/content.js?v=1.0.0"></script>
<!-- jQuery UI -->
<script src="res/js/plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Jvectormap -->
<script src="res/js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="res/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- EayPIE -->
<script src="res/js/plugins/easypiechart/jquery.easypiechart.js"></script>
<!-- Sparkline -->
<script src="res/js/plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- Sparkline demo data -->
<script src="res/js/demo/sparkline-demo.js"></script>
<script src="res/js/plugins/echarts/echarts-all.js"></script>
<script>
$(document).ready(function () {
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}
var dataset = [];
var options = { };
var xAxisData = [];
var yAxisOrderAmount = [];
var yAxisPayAmount = [];
var yAxisIncomeAmount = [];
var url1='<%=basePath%>statistics/orderByMonth.cs';
$.get(url1, function(result, status) {
var dataAllOrder = [];
var dataSucOrder = [];
var listAll = result.listAll;
var listSuc = result.listSuc;
var orderAllCnt = 0;
var orderSucCnt = 0;
var orderMonthTotal = 0;
var orderMonthIncome = 0;
var maxOrderCnt = 0;
for(var i=0; i < listAll.length; i++){
if(maxOrderCnt < parseInt(listAll[i]['cnt'])){
maxOrderCnt = parseInt(listAll[i]['cnt']);
}
var cdate = listAll[i]['createdate'].split("-");
var myArray=new Array()
myArray[0]=gd(cdate[0],cdate[1],cdate[2]);
myArray[1]=listAll[i]['cnt'];
dataAllOrder[i]=myArray;
orderAllCnt += parseInt(listAll[i]['cnt']);
}
for(var j = 0; j < listSuc.length; j++){
if(maxOrderCnt < parseInt(listSuc[j]['cnt'])){
maxOrderCnt = parseInt(listSuc[j]['cnt']);
}
var cdate = listSuc[j]['createdate'].split("-");
var myArray=new Array()
myArray[0]=gd(cdate[0],cdate[1],cdate[2]);
myArray[1]=listSuc[j]['cnt'];
dataSucOrder[j]=myArray;
orderSucCnt += parseInt(listSuc[j]['cnt']);
xAxisData[j] = listSuc[j]['createdate'];
yAxisOrderAmount[j] = listSuc[j]['total'];
yAxisPayAmount[j] = listSuc[j]['commission']+listSuc[j]['policyAmount'];
yAxisIncomeAmount[j] = listSuc[j]['total']-listSuc[j]['commission']-listSuc[j]['policyAmount'];
orderMonthTotal += yAxisOrderAmount[j];
orderMonthIncome += yAxisIncomeAmount[j];
}
maxOrderCnt += 10;
dataset = [
{
label: "订单总数",
data: dataAllOrder,
color: "#1ab394",
bars: {
show: true,
align: "center",
barWidth: 24 * 60 * 60 * 600,
numbers: {
show: true
},
lineWidth: 0
}
}, {
label: "付款数",
data: dataSucOrder,
yaxis: 1,
color: "#464f88",
lines: {
lineWidth: 1,
show: true,
fill: true,
fillColor: {
colors: [{
opacity: 0.2
}, {
opacity: 0.2
}]
}
},
splines: {
show: false,
tension: 0.6,
lineWidth: 1,
fill: 0.1
},
}
];
options = {
xaxis: {
mode: "time",
tickSize: [1, "day"],
tickLength: 0,
axisLabel: "Date",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Arial',
axisLabelPadding: 10,
color: "#838383"
},
yaxes: [{
position: "left",
max: maxOrderCnt,
color: "#838383",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Arial',
axisLabelPadding: 3
}, {
position: "right",
clolor: "#838383",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: ' Arial',
axisLabelPadding: 67
}
],
legend: {
noColumns: 1,
labelBoxBorderColor: "#000000",
position: "nw"
},
grid: {
hoverable: false,
borderWidth: 0,
color: '#838383'
}
};
$.plot($("#flot-dashboard-chart"), dataset, options);
//百度echarts*************/
var myChart = echarts.init(document.getElementById('echarts-sales'));
var option = {
title : {
text: '近一个月销售变化'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['销售总额','支出额','收入额']
},
toolbox: {
show : true,
feature : {
// mark : {show: true},
// dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : xAxisData
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value}'
}
}
],
series : [
{
name:'销售总额',
type:'line',
data: yAxisOrderAmount,
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'支出额',
type:'line',
data:yAxisPayAmount,
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
},
{
name:'收入额',
type:'line',
data:yAxisIncomeAmount,
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
}
myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
});
//******************* echarts end*********************/
$("#ibox-content_pt ul li").each(function (index) {
if(index==0){
$(this).find('.no-margins').html(orderAllCnt);
}else if(index==1){
$(this).find('.no-margins').html(orderSucCnt);
$(this).find('.progress-bar').css("width", (100*(orderSucCnt/orderAllCnt))+"%");
}else{
$(this).find('.no-margins').html(orderAllCnt - orderSucCnt);
$(this).find('.progress-bar').css("width", (100*((orderAllCnt - orderSucCnt)/orderAllCnt))+"%");
}
});
//ibox-content_po
$("#ibox-content_po ul li").each(function (index) {
if(index==0){
$(this).find('.no-margins').html(result.orderAmount['total']);
}else if(index==1){
$(this).find('.no-margins').html(result.orderAmount['income']);
$(this).find('.progress-bar').css("width", (100*(result.orderAmount['income']/result.orderAmount['total']))+"%");
}else if(index==2){
$(this).find('.no-margins').html(orderMonthTotal);
}else{
$(this).find('.no-margins').html(orderMonthIncome);
$(this).find('.progress-bar').css("width", (100*(orderMonthIncome/orderMonthTotal))+"%");
}
});
});
$.plot($("#flot-dashboard-chart"), dataset, options);
});
</script>
</body>
</html>