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