inanalysis.html 14.1 KB
{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-5").show();
        $("#yframe-5").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 = [];
                for (var i = 0; i <12; i++) {
                    var y = 0;
                    data.push({
                        y: parseInt(Math.random()*1000),
                        x: i+1                                             
                    });
                } 
                return data;
            })()
        }]
    });
    }); 
</script>