<style type="text/css"> .sm-st { background: #fff; padding: 20px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-bottom: 20px; -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05); } .sm-st-icon { width: 60px; height: 60px; display: inline-block; line-height: 60px; text-align: center; font-size: 30px; background: #eee; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; float: left; margin-right: 10px; color: #fff; } .sm-st-info { font-size: 12px; padding-top: 2px; } .sm-st-info span { display: block; font-size: 24px; font-weight: 600; } .orange { background: #fa8564 !important; } .tar { background: #45cf95 !important; } .sm-st .green { background: #86ba41 !important; } .pink { background: #AC75F0 !important; } .yellow-b { background: #fdd752 !important; } .stat-elem { background-color: #fff; padding: 18px; border-radius: 40px; } .stat-info { text-align: center; background-color: #fff; border-radius: 5px; margin-top: -5px; padding: 8px; -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05); font-style: italic; } .stat-icon { text-align: center; margin-bottom: 5px; } .st-red { background-color: #F05050; } .st-green { background-color: #27C24C; } .st-violet { background-color: #7266ba; } .st-blue { background-color: #23b7e5; } .stats .stat-icon { color: #28bb9c; display: inline-block; font-size: 26px; text-align: center; vertical-align: middle; width: 50px; float: left; } .stat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; } .stat .value { font-size: 20px; line-height: 24px; overflow: hidden; text-overflow: ellipsis; font-weight: 500; } .stat .name { overflow: hidden; text-overflow: ellipsis; } .stat.lg .value { font-size: 26px; line-height: 28px; } .stat.lg .name { font-size: 16px; } .stat-col .progress { height: 2px; } .stat-col .progress-bar { line-height: 2px; height: 2px; } .item { padding: 30px 0; } #statistics .panel { min-height: 150px; } #statistics .panel h5 { font-size: 13px; } </style> <div class="panel panel-default panel-intro"> <div class="panel-heading"> <!--<div class="form-group col-lg-3">--> <div style="margin-bottom: 10px;"> <a href="javascript:;" id="onload" style="float: left;margin-left: -16px;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a> <div class="input-group form_datetime" style="width: 300px;float:left;margin-left: 10px"> <span class="input-group-addon">开始时间:</span> <input class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" type="text" data-rule="required" name="collecttime" id="start" placeholder="请选择开始时间" > </div> <!--</div>--> <!--<div class="form-group col-lg-3">--> <div class="input-group form_datetime" style="width: 300px;float:left;margin-left: 50px"> <span class="input-group-addon">结束时间:</span> <input class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" type="text" data-rule="required" name="collecttime" id="end" placeholder="请选择结束时间" > </div> <div class="input-group" style="width: 300px;float:left;margin-left: 50px"> <span class="input-group-addon">渠道筛选:</span> <select id="myselect" data-rule="" class="form-control selectpage" autocomplete="off"> {foreach name="qudao" item="vo"} <option value="{$vo.id}">{$vo.title}</option> {/foreach} </select> </div> <!--</div>--> <a href="javascript:;" id="btn" onclick="btn()" class="btn btn-success" title="提交" style="margin-left: 25px" >提交 </a> </div> <!--{:build_heading(null, false)}--> <!--<ul class="nav nav-tabs">--> <!--<li class="active"><a href="#one" data-toggle="tab">{:__('Dashboard')}</a></li>--> <!--<!–<li><a href="#two" data-toggle="tab">{:__('Custom')}</a></li>–>--> <!--</ul>--> </div> <div class="panel-body"> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade active in" id="one"> <div class="row"> <div class="col-sm-3 col-xs-6"> <div class="sm-st clearfix"> <span class="sm-st-icon st-red"><i class="fa fa-users"></i></span> <div class="sm-st-info"> <span>{$UserFirst}</span> 普通会员人数 </div> </div> </div> <div class="col-sm-3 col-xs-6"> <div class="sm-st clearfix"> <span class="sm-st-icon st-red"><i class="fa fa-users"></i></span> <div class="sm-st-info"> <span>{$UserSecond}</span> 高级会员人数 </div> </div> </div> <div class="col-sm-3 col-xs-6"> <div class="sm-st clearfix"> <span class="sm-st-icon st-red"><i class="fa fa-users"></i></span> <div class="sm-st-info"> <span>{$UserThird}</span> VIP人数 </div> </div> </div> <div class="col-sm-3 col-xs-6"> <div class="sm-st clearfix"> <span class="sm-st-icon st-red"><i class="fa fa-users"></i></span> <div class="sm-st-info"> <span>{$UserFourth}</span> SVIP人数 </div> </div> </div> <div class="col-sm-3 col-xs-6"> <div class="sm-st clearfix"> <span class="sm-st-icon st-red"><i class="fa fa-users"></i></span> <div class="sm-st-info"> <span>{$UserFifth}</span> 芳香生活家人数 </div> </div> </div> <div class="col-sm-3 col-xs-6"> <div class="sm-st clearfix"> <span class="sm-st-icon st-red"><i class="fa fa-users"></i></span> <div class="sm-st-info"> <span>{$UserSixth}</span> 城市合伙人人数 </div> </div> </div> <div class="col-sm-3 col-xs-6"> <div class="sm-st clearfix"> <span class="sm-st-icon st-red"><i class="fa fa-users"></i></span> <div class="sm-st-info"> <span>{$UserSeventh}</span> 区域合伙人人数 </div> </div> </div> <div class="col-sm-3 col-xs-6"> <div class="sm-st clearfix"> <span class="sm-st-icon st-red"><i class="fa fa-users"></i></span> <div class="sm-st-info"> <span>{$UserEighth}</span> 联合创始人人数 </div> </div> </div> </div> <div class="row"> <!--<div class="col-lg-8">--> <!--<div id="echart" class="btn-refresh" style="height:200px;width:100%;"></div>--> <!--</div>--> <div class="col-lg-12"> <div class="card sameheight-item stats"> <div class="card-block"> <div class="row row-sm stats-container"> <div class="col-xs-3 stat-col"> <div class="stat-icon"><i class="fa fa-shopping-cart"></i></div> <div class="stat"> <div class="value"> {$todayusersignup}</div> <div class="name">支付订单数</div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 100%"></div> </div> </div> <div class="col-xs-3 stat-col"> <div class="stat-icon"><i class="fa fa-user"></i></div> <div class="stat"> <div class="value"> {$todayuserlogin}</div> <div class="name"> {:__('Today user login')}</div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 100%"></div> </div> </div> <div class="col-xs-3 stat-col"> <div class="stat-icon"><i class="fa fa-line-chart"></i></div> <div class="stat"> <div class="value"> {$todayorder}</div> <div class="name"> 支付人数</div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 100%"></div> </div> </div> <div class="col-xs-3 stat-col"> <div class="stat-icon"><i class="fa fa-cny"></i></div> <div class="stat"> <div class="value"> {$unsettleorder}</div> <div class="name"> 今日支付金额</div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 100%"></div> </div> </div> <div class="col-xs-3 stat-col"> <div class="stat-icon"><i class="fa fa-list-alt"></i></div> <div class="stat"> <div class="value"> {$sevendnu}</div> <div class="name"> 人均订单数</div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 100%"></div> </div> </div> <div class="col-xs-3 stat-col"> <div class="stat-icon"><i class="fa fa-dollar"></i></div> <div class="stat"> <div class="value"> {$sevendau}</div> <div class="name"> 支付转化率</div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 100%"></div> </div> </div> <div class="col-xs-3 stat-col"> <div class="stat-icon"><i class="fa fa-user-plus"></i></div> <div class="stat"> <div class="value"> {$NewUserOrder}</div> <div class="name"> 新增新客数</div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 100%"></div> </div> </div> <div class="col-xs-3 stat-col"> <div class="stat-icon"><i class="fa fa-etsy"></i></div> <div class="stat"> <div class="value"> {$UserOrderPrice}</div> <div class="name"> 客单价</div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 100%"></div> </div> </div> </div> </div> </div> </div> </div> <div class="row" style="margin-top:15px;" id="statistics"> <div class="col-lg-12"> </div> <div class="col-xs-6 col-md-3"> <div class="panel bg-blue-gradient no-border"> <div class="panel-body"> <div class="panel-title"> <span class="label label-primary pull-right">{:__('Real time')}</span> <h5>授权统计</h5> </div> <div class="panel-content"> <h1 class="no-margins">{$CountMiniAppLoginHistory}</h1> <!--<div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> 1234--> <!--</div>--> <small>当前授权登录人数</small> </div> </div> </div> </div> <div class="col-xs-6 col-md-3"> <div class="panel bg-aqua-gradient no-border"> <div class="panel-body"> <div class="ibox-title"> <span class="label label-primary pull-right">{:__('Real time')}</span> <h5>测试统计</h5> </div> <div class="ibox-content"> <h1 class="no-margins">{$SleepHistory}</h1> <!--<div class="stat-percent font-bold text-gray"><i class="fa fa-modx"></i> 2592</div>--> <small>当前做过测试人数</small> </div> </div> </div> </div> <div class="col-xs-6 col-md-3"> <div class="panel bg-purple-gradient no-border"> <div class="panel-body"> <div class="ibox-title"> <span class="label label-primary pull-right">{:__('Real time')}</span> <h5>报告统计</h5> </div> <!--<div class="ibox-content">--> <!--<div class="row">--> <!--<div class="col-md-6">--> <!--<h1 class="no-margins">1234</h1>--> <!--<div class="font-bold"><i class="fa fa-commenting"></i>--> <!--<small>{:__('Comment count')}</small>--> <!--</div>--> <!--</div>--> <!--<div class="col-md-6">--> <!--<h1 class="no-margins">6754</h1>--> <!--<div class="font-bold"><i class="fa fa-heart"></i>--> <!--<small>{:__('Like count')}</small>--> <!--</div>--> <!--</div>--> <!--</div>--> <!--</div>--> <div class="panel-content"> <h1 class="no-margins">{$SleepTypeFirst}</h1> <!--<div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> 1234--> <!--</div>--> <small>当前获得过测试报告的人数</small> </div> </div> </div> </div> <div class="col-xs-6 col-md-3"> <div class="panel bg-green-gradient no-border"> <div class="panel-body"> <div class="ibox-title"> <span class="label label-primary pull-right">{:__('Real time')}</span> <h5>下单统计</h5> </div> <!--<div class="ibox-content">--> <!--<div class="row">--> <!--<div class="col-md-6">--> <!--<h1 class="no-margins">5302</h1>--> <!--<div class="font-bold"><i class="fa fa-commenting"></i>--> <!--<small>{:__('Comment count')}</small>--> <!--</div>--> <!--</div>--> <!--<div class="col-md-6">--> <!--<h1 class="no-margins">8205</h1>--> <!--<div class="font-bold"><i class="fa fa-user"></i>--> <!--<small>{:__('Like count')}</small>--> <!--</div>--> <!--</div>--> <!--</div>--> <!--</div>--> <div class="panel-content"> <h1 class="no-margins">{$UpOrderNum}</h1> <!--<div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> 1234--> <!--</div>--> <small>当前下过单的人数</small> </div> </div> </div> </div> </div> </div> <div class="tab-pane fade" id="two"> <div class="row"> <div class="col-xs-12"> {:__('Custom zone')} </div> </div> </div> </div> </div> </div> <!--@formatter:off--> <script> var Start = document.getElementById('start'); var End = document.getElementById('end'); var onload = document.getElementById('onload'); var myselect = document.getElementById('myselect'); QuyuId = 1; myselect.onchange = function () { var index = myselect.selectedIndex; QuyuId = myselect.options[index].value }; function btn() { if (Start.value.length === 0) { if (End.value.length !== 0) { Layer.msg("请选择开始时间"); return false; } } if (End.value.length === 0) { if (Start.value.length !== 0) { Layer.msg("请选择结束时间"); return false; } } Fast.api.ajax({ url: "dashboard/ajaxBtn", type: "POST", data: { Start: Start.value, End: End.value, Qudao: QuyuId }, }); location.replace(location); } onload.onclick = function (e) { location.replace(location); } </script> <!--@formatter:on-->