123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506 |
- <%@ 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>
|