<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; margin-right: 10px; } .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; } </style> <div class="panel panel-default panel-intro"> <div class="panel-heading"> {: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">详细1报表</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-calendar-check-o"></i></span> <div class="sm-st-info"> <span>{$baoxiunum}</span> {:__('Baoxiunum')} </div> </div> </div> <div class="col-sm-3 col-xs-6"> <div class="sm-st clearfix"> <span class="sm-st-icon st-violet"><i class="fa fa-battery-full"></i></span> <div class="sm-st-info"> <span>{$baoxiu}</span> {:__('Baoxiu')} </div> </div> </div> <div class="col-sm-3 col-xs-6"> <div class="sm-st clearfix"> <span class="sm-st-icon st-blue"><i class="fa fa-battery-quarter"></i></span> <div class="sm-st-info"> <span>{$wbaoxiu}</span> {:__('WBaoxiu')} </div> </div> </div> <!--<div class="col-sm-3 col-xs-6">--> <!--<div class="sm-st clearfix">--> <!--<span class="sm-st-icon st-green"><i class="fa fa-cny"></i></span>--> <!--<div class="sm-st-info">--> <!--<span>{$totalorderamount}</span>--> <!--{:__('Total order amount')}--> <!--</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-6 stat-col"> <div class="stat-icon"><i class="fa fa-bar-chart"></i></div> <div class="stat"> <div class="value"> {$jiankong}</div> <div class="name"> {:__('Jiankong')}</div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 30%"></div> </div> </div> <div class="col-xs-6 stat-col"> <div class="stat-icon"><i class="fa fa-bar-chart"></i></div> <div class="stat"> <div class="value"> {$tongxin}</div> <div class="name"> {:__('Tongxin')}</div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 25%"></div> </div> </div> <div class="col-xs-6 stat-col"> <div class="stat-icon"><i class="fa fa-bar-chart"></i></div> <div class="stat"> <div class="value"> {$peidian}</div> <div class="name"> {:__('Peidian')}</div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 25%"></div> </div> </div> <div class="col-xs-6 stat-col"> <div class="stat-icon"><i class="fa fa-bar-chart"></i></div> <div class="stat"> <div class="value"> {$jizhong}</div> <div class="name"> {:__('Jizhong')}</div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 25%"></div> </div> </div> <div class="col-xs-6 stat-col"> <div class="stat-icon"><i class="fa fa-bar-chart"></i></div> <div class="stat"> <div class="value"> {$shoufei}</div> <div class="name"> {:__('Shoufei')}</div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 25%"></div> </div> </div> <!--<div class="col-xs-6 stat-col">--> <!--<div class="stat-icon"><i class="fa fa-dollar"></i></div>--> <!--<div class="stat">--> <!--<div class="value"> {$sevendau}</div>--> <!--<div class="name"> {:__('Seven dau')}</div>--> <!--</div>--> <!--<div class="progress">--> <!--<div class="progress-bar progress-bar-success" style="width: 25%"></div>--> <!--</div>--> <!--</div>--> </div> </div> </div> </div> </div> <div class="row" style="margin-top:15px;"> <!--<div class="col-lg-12">--> <!--</div>--> {foreach name="row" item="vo"} <div class="col-xs-6 col-md-4"> <div class="panel bg-blue"> <div class="panel-body" style="width:250px; height: 250px;"> <div class="panel-title"> <span class="label label-success">{:__('Real time')}</span> <h5 id="H5Name" onmouseover="func()" onmouseout="func1()"> {$vo.zhandian_name}</h5> </div> <div class="panel-content"> <h1>{$vo.baoxiu_num}</h1> <!--<div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i>--> <!--1234--> <!--</div>--> <!--<small>{:__('Category count tips')}</small>--> <h4>报修完成率:</h4> <h5>{$vo.Round}%</h5> <h4>报修未完成率:</h4> <h5>{$vo.WRound}%</h5> <br> </div> <h4>故障设备名称:</h4> <h5>{$vo.BaoXiuStr}</h5> </div> </div> </div> {/foreach} </div> </div> <!--<?php foreach ($row as $info) { ?>--> <!--<div class="col-xs-6 stat-col">--> <!--<div class="stat-icon"><i class="fa fa-bar-chart"></i></div>--> <!--<div class="stat">--> <!--<div class="value"><?= $info["zhandian_name"]?></div>--> <!--<div class="name"> <?= $info["baoxiu_num"]?></div>--> <!--</div>--> <!--<div class="progress">--> <!--<div class="progress-bar progress-bar-success" style="width: 25%"></div>--> <!--</div>--> <!--</div>--> <!--<?php } ?>--> </div> </div> </div> </div> </div> <!--<script>--> <!--var Orderdata = {--> <!--column: {--> <!--:--> <!--json_encode(array_keys($paylist))--> <!--},--> <!--paydata: {:--> <!--json_encode(array_values($paylist))--> <!--}--> <!--,--> <!--createdata: {:--> <!--json_encode(array_values($createlist))--> <!--}--> <!--,--> <!--}--> <!--;--> <!--</script>--> <!--<script>--> <!--var c;--> <!--var H5Name = document.getElementById("H5Name").innerHTML;--> <!--var func = function () {--> <!--c = setTimeout(function () {--> <!--console.log('鼠标悬浮');--> <!--console.log(H5Name);--> <!--alert();--> <!--}, 2000);--> <!--};--> <!--var func1 = function () {--> <!--clearTimeout(c);--> <!--console.log('鼠标离开');--> <!--}--> <!--</script>-->