<!DOCTYPE html>
|
<html lang="zh-cn">
|
|
<head>
|
<meta charset="utf-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<title>首页</title>
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
<link href="css/maincontent.css" rel="stylesheet">
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
|
<!--[if lt IE 9]>
|
<script src="js/html5shiv.js"></script>
|
<script src="js/respond.min.js"></script>
|
<![endif]-->
|
<style>
|
.top100{
|
margin: 5%;
|
margin-right: 30%;
|
margin-top: 2%;
|
}
|
|
#container{
|
min-width:400px;
|
height: 1800px;
|
}
|
|
#container p{
|
margin-left: 30px;
|
}
|
|
#container .paixu{
|
float: left;
|
}
|
|
#container .shuliang{
|
margin-left: 60px;
|
float: right;
|
}
|
|
#container .zhuxingtu{
|
margin-left: 30px;
|
margin-right: 10%;
|
margin-bottom: 0px;
|
}
|
</style>
|
</head>
|
|
<body>
|
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
|
</nav>
|
<div id="mainbody">
|
<div id="sidebar">
|
<dl>
|
<dd>
|
</dd>
|
</dl>
|
</div>
|
<div id="contentyouce">
|
<div class="container-fluid">
|
<div class="row">
|
<div class="col-md-4">
|
<div class="card" style="background-color:#6ad6e3">
|
<div class="header">
|
<h4 class="title">昨日浏览数据</h4>
|
</div>
|
<div class="content">
|
<div class="ct-chart ct-perfect-fourth" id="wcount">0</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-md-4">
|
<div class="card" style="background-color:#add370">
|
<div class="header">
|
<h4 class="title">昨日订单数据</h4>
|
</div>
|
<div class="content">
|
<div class="ct-chart ct-perfect-fourth" id="trcount">0</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-md-4">
|
<div class="card" style="background-color:#f88a6f">
|
<div class="header">
|
<h4 class="title">累计注册用户数量</h4>
|
</div>
|
<div class="content">
|
<div class="ct-chart ct-perfect-fourth" id="rcount">0</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="row">
|
<div class="col-md-12">
|
<div class="card1">
|
<div class="content">
|
|
<div class="footer">
|
<div class="legend">
|
<h4>昨日浏览商品TOP100</h4>
|
</div>
|
<hr>
|
</div>
|
|
<div class="top100">
|
<div id="container">
|
<div class="shop100">
|
<p class="title"></p>
|
<span class="paixu"></span>
|
<span class="shuliang"></span>
|
<div class="progress zhuxingtu">
|
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
|
<!--<span>90% Complete (warning)</span>-->
|
</div>
|
</div>
|
<br />
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<script src="js/jquery.min.js"></script>
|
<script src="js/bootstrap.min.js"></script>
|
<script src="js/nav.js"></script>
|
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
|
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
|
<script src="layer/layer.js"></script>
|
|
<script>
|
$(function() {
|
var index = layer.load(0,{
|
'shade': false
|
});
|
var shophtml = $(".top100 #container").html();
|
$(".top100 #container").empty();
|
$.post('api/v1/data/getdatacount', {}, function(data) {
|
if(data.code ==0 ){
|
$("#rcount").html(data.data.userCount);
|
$("#trcount").html(data.data.orderCount+data.data.shareOrderCount);
|
$("#wcount").html(data.data.historyCount);
|
var list = data.data.scanHisoryList;
|
var len =list.length;
|
var max;
|
for (var ii=0;ii < len ;ii++) {
|
var scanHisory = list[ii];
|
var title = scanHisory[0];
|
var count = scanHisory[1];
|
if(ii==0){
|
max= (count * 10) / 9 ;
|
}
|
$(".top100 #container").append(shophtml);
|
var persion =(count/max) * 100 +"%";
|
var $curtop = $(".top100 #container").find(".shop100").eq(ii);
|
$curtop.find(".title").text(title);
|
$curtop.find(".paixu").text(ii+1);
|
$curtop.find(".shuliang").text(count);
|
$curtop.find(".zhuxingtu div").width(persion);
|
}
|
}else{
|
layer.msg("加载错误!");
|
}
|
layer.close(index);
|
}, 'json');
|
|
});
|
</script>
|
</body>
|
|
</html>
|
