{template 'public/header'}
{template 'public/comhead'}
<link rel="stylesheet" type="text/css" href="https://static.jianshukeji.com/hcode/images/favicon.ico">
<style type="text/css">
    .yg9_content{padding:0px;}
    .yg9_content>li>.col-xs-12{
        height: 130px;
        box-shadow: 0px 0px 8px rgba(0,0,0,0.1);
        border-radius: 6px;
    }    
    .yg9_content>li:nth-child(1)>.col-xs-12{
        background-color: #32CC7F;
        color: white;
        /*background:url(../addons/zh_cjdianc/template/images/tuceng4.png) no-repeat center;
        background-size: 100%;*/
    }
    .yg9_content>li:nth-child(2)>.col-xs-12{
        background-color: #f17c67;
        color: white;
    }
    .yg9_content>li:nth-child(3)>.col-xs-12{
        background-color: #99CC33;
        color: white;
    }
    .yg9_content>li:nth-child(4)>.col-xs-12{
        background-color: #6C6FBF;
        color: #fff;
    }
    .tmoney{font-size: 26px;margin-top: 30px;text-align: center;}
    .today{font-size: 14px;text-align: center;cursor: pointer;}
    
    .todaybox2,.todaybox3,.todaybox4,.todaybox1{position: absolute;left: -10%;top: 5px;z-index: 10;width: 200px;height: 65px;padding: 10px;
        background-color: rgba(0,0,0,0.7);border-radius: 6px;color: white;font-size: 12px;text-indent: 1em;display: none;}
    .arrow-down{width: 0;height: 0;border-bottom: 10px solid rgba(0,0,0,0.7);  border-left: 10px solid transparent;transform: rotate(45deg);
        position: absolute;left: 50%;top: 60px;
    }
    .backimg{
        width: 71px;
        height: 74px;
        margin-top: 30px;
    }
    .yingye{text-align: center;}
</style>
<script type="text/javascript" src="../addons/zh_cjdianc/template/public/highcharts.js"></script>
<div class="main">
    <div class="panel panel-default">
        <div class="panel-heading">数据概况信息</div>
            <div class="panel-body">        
            <ul class="col-xs-12 yg9_content" style="margin-bottom: 10px;">
                <li class="col-xs-3">
                    <div class="col-xs-12">
                        <div class="col-xs-4">
                            <img class="backimg" src="../addons/zh_cjdianc/template/images/wx.png">
                        </div>
                        <div class="col-xs-8">
                            <p class="tmoney">¥&nbsp;{if $total}{$total}{else}0.00{/if}</p>
                            <p class="today jinri1">今日微信支付营业额
                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                                <div class="todaybox1">指来自外卖、店内、预约、优惠买单等业务中，状态为已完成的微信支付订单总金额
                                    <div class="arrow-down"></div>
                                </div>                                
                            </p>
                            
                        </div>
                    </div>
                </li>
                <li class="col-xs-3">
                    <div class="col-xs-12">
                        <div class="col-xs-4">
                            <img class="backimg" src="../addons/zh_cjdianc/template/images/yue.png">
                        </div>
                        <div class="col-xs-8">
                             <p class="tmoney">¥&nbsp;{if $total2}{$total2}{else}0.00{/if}</p>
                            <p class="today jinri2">今日余额支付营业额
                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                                <div class="todaybox2">指来自外卖、店内、预约、优惠买单等业务中，状态为已完成的余额支付有效订单总金额
                                    <div class="arrow-down"></div>
                                </div>
                            </p>
                        </div>
                    </div>
                </li>
                <li class="col-xs-3">
                    <div class="col-xs-12">
                        <div class="col-xs-4">
                            <img class="backimg" src="../addons/zh_cjdianc/template/images/jf.png">
                        </div>
                        <div class="col-xs-8">
                            <p class="tmoney">¥&nbsp;{if $total3}{$total3}{else}0.00{/if}</p>
                            <p class="today jinri3">今日积分支付营业额
                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                                <div class="todaybox3">指来自外卖、店内、预约、优惠买单等业务中，状态为已完成的积分支付有效订单总金额
                                    <div class="arrow-down"></div>
                                </div>
                            </p>
                        </div>
                    </div>
                </li>
         <!--        <li class="col-xs-3">
                    <div class="col-xs-12">
                    <div class="col-xs-6">
                            <img class="backimg" src="../addons/zh_cjdianc/template/images/xinxi4.png">
                        </div>
                        <div class="col-xs-6">
                            <p class="tmoney">¥&nbsp;{if $tk}{$tk}{else}0.00{/if}</p>
                            <p class="today jinri4">今日新增退款
                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                                <div class="todaybox4">指来自外卖、店内状态为已退款的订单数量
                                    <div class="arrow-down"></div>
                                </div>
                            </p>
                        </div>
                    </div>
                </li> -->
            </ul>
        </div>        
    </div>
 <!--    <div class="panel panel-default">
        <div class="panel-heading">数据概况信息</div>
        <div class="panel-body">        
            <ul class="col-xs-12 yg9_content" style="margin-bottom: 10px;">
                <li class="col-xs-3">
                    <div class="col-xs-12">
                        <div class="col-xs-6">
                            <img class="backimg" src="../addons/zh_cjdianc/template/images/xinxi1.png">
                        </div>
                        <div class="col-xs-6">
                            <p class="tmoney">¥&nbsp;{if $total}{$total}{else}0.00{/if}</p>
                            <p class="today jinri1">今日营业总额
                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                                <div class="todaybox1">指来自外卖、店内、预约、优惠买单等业务中，状态为已完成的订单总金额
                                    <div class="arrow-down"></div>
                                </div>                                
                            </p>
                            
                        </div>
                    </div>
                </li>
                <li class="col-xs-3">
                    <div class="col-xs-12">
                        <div class="col-xs-6">
                            <img class="backimg" src="../addons/zh_cjdianc/template/images/xinxi2.png">
                        </div>
                        <div class="col-xs-6">
                            <p class="tmoney">{$total2}</p>
                            <p class="today jinri2">今日有效订单
                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                                <div class="todaybox2">指来自外卖、店内、预约、优惠买单等业务中，状态为已完成的有效订单数量
                                    <div class="arrow-down"></div>
                                </div>
                            </p>
                        </div>
                    </div>
                </li>
                <li class="col-xs-3">
                    <div class="col-xs-12">
                        <div class="col-xs-6">
                            <img class="backimg" src="../addons/zh_cjdianc/template/images/xinxi3.png">
                        </div>
                        <div class="col-xs-6">
                            <p class="tmoney">¥&nbsp;{if $cz}{$cz}{else}0.00{/if}</p>
                            <p class="today jinri3">今日新增储值
                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                                <div class="todaybox3">指来自用户有效充值的金额
                                    <div class="arrow-down"></div>
                                </div>
                            </p>
                        </div>
                    </div>
                </li>
                <li class="col-xs-3">
                    <div class="col-xs-12">
                    <div class="col-xs-6">
                            <img class="backimg" src="../addons/zh_cjdianc/template/images/xinxi4.png">
                        </div>
                        <div class="col-xs-6">
                            <p class="tmoney">¥&nbsp;{if $tk}{$tk}{else}0.00{/if}</p>
                            <p class="today jinri4">今日新增退款
                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                                <div class="todaybox4">指来自外卖、店内状态为已退款的订单数量
                                    <div class="arrow-down"></div>
                                </div>
                            </p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>        
    </div> -->

    <!-- ——————————————数据统计图———————————————— -->
<!--     <div class="panel panel-default">
        <div class="panel-heading">商家营业额</div>
        <div class="panel-body">        
            <div class="col-xs-12 yg9_content" style="margin-bottom: 10px;">
                <div id="container" style="height:400px;margin:0 auto;"></div>
            </div>
        </div>
    </div> -->
 </div>
<script type="text/javascript">
    
    $(function(){
        $("#frame-15").show();
        $("#yframe-15").addClass("wyactive");
        $(".jinri1").mouseover(function(){
            $(".todaybox1").show();
        })
        $(".jinri1").mouseout(function(){
            $(".todaybox1").hide();
        })
        $(".jinri2").mouseover(function(){
            $(".todaybox2").show();
        })
        $(".jinri2").mouseout(function(){
            $(".todaybox2").hide();
        })
        $(".jinri3").mouseover(function(){
            $(".todaybox3").show();
        })
        $(".jinri3").mouseout(function(){
            $(".todaybox3").hide();
        })
        $(".jinri4").mouseover(function(){
            $(".todaybox4").show();
        })
        $(".jinri4").mouseout(function(){
            $(".todaybox4").hide();
        })

        //折线图
        Highcharts.setOptions({                                                     
            global: {                                                               
                useUTC: false                                                       
            }                                                                       
        });                                                                         
                                                                                    
        var chart;                                                                  
        $('#container').highcharts({                                                
            chart: {                                                                
                type: 'spline',                                                     
                animation: Highcharts.svg, // don't animate in old IE               
                marginRight: 0,                                                    
                // events: {                                                           
                //  load: function() {                                              
                                                                                    
                //      // set up the updating of the chart each second             
                //      var series = this.series[0];                                
                //      setInterval(function() {                                    
                //          var x = (new Date()).getTime(), // current time         
                //              y = Math.random();                                  
                //          series.addPoint([x, y], true, true);                    
                //      }, 1000);                                                   
                //  }                                                               
                // }                                                                   
            },                                                                      
            title: {
                text: '2018年1月营业额'
            },            
            xAxis: { 
                type: '0',
                tickPixelInterval: 100
            },
            yAxis: {
                title: {
                    text: '2018年1月营业额'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {                                             
                        return '<b>'+this.x+'月'+ this.series.name+'</b><br/><p class="yingye">'+this.y+'</p>';
                }
            },
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [{
                name: '营业额',
                data: (function() {
                    var data = [
                    {x:1,y:30},
                    {x:2,y:530},
                    {x:3,y:1330},
                    {x:4,y:5630},
                    {x:5,y:3330},
                    {x:6,y:2300},
                    {x:7,y:830},
                    {x:8,y:4430},
                    {x:9,y:5000},
                    {x:10,y:1000},
                    {x:11,y:800},
                    {x:12,y:1300}
                    ];
                    // for (var i = 0; i <12; i++) {
                    //     var y = 0;
                    //     data.push({
                    //         y: parseInt(Math.random()*1000),
                    //         x: i+1                                             
                    //     });
                    // } 
                    return data;
                })()
            }]
        });
    }); 
</script>
{template 'common/footer'}