326 lines
14 KiB
HTML
326 lines
14 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>数据统计</title>
|
||
|
|
<link rel="stylesheet" href="/layui/css/layui.css">
|
||
|
|
<link rel="stylesheet" href="/css/Chart.min.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="layui-layout layui-layout-admin">
|
||
|
|
<div id="header"></div>
|
||
|
|
<div class="layui-body" style="left: 0px;position: relative;z-index: 0">
|
||
|
|
<div style="width: 50%;margin-left: 25%; margin-top: 2%;">
|
||
|
|
<blockquote class="layui-elem-quote">
|
||
|
|
人气与观众访问数为每小时采集一次，礼物等信息为实时统计
|
||
|
|
<div id="temp"></div>
|
||
|
|
</blockquote>
|
||
|
|
</div>
|
||
|
|
<div style="width: 80%;margin-left: 10%; margin-top: 2%;">
|
||
|
|
<div class="layui-tab layui-tab-card" lay-filter="upInfo" lay-allowClose="false">
|
||
|
|
<ul class="layui-tab-title">
|
||
|
|
</ul>
|
||
|
|
<div class="layui-tab-content">
|
||
|
|
|
||
|
|
<div style="padding: 20px; background-color: #F2F2F2;">
|
||
|
|
<div class="layui-row layui-col-space15">
|
||
|
|
<div class="layui-col-md4"> <!-- 注意：这一层元素并不是必须的 -->
|
||
|
|
<input type="text" class="layui-input" id="timer">
|
||
|
|
</div>
|
||
|
|
<div class="layui-col-md4">
|
||
|
|
<button type="button" class="layui-btn" id="query">查询</button>
|
||
|
|
<button type="button" class="layui-btn layui-btn-warm" id="download">下载</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="layui-row layui-col-space15">
|
||
|
|
<div class="layui-col-md4">
|
||
|
|
<div class="layui-card" style="width: 100%;">
|
||
|
|
<div class="layui-card-header">礼物总数</div>
|
||
|
|
<div class="layui-card-body" id="giftMax">
|
||
|
|
0
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="layui-col-md4">
|
||
|
|
<div class="layui-card" style="width: 100%;">
|
||
|
|
<div class="layui-card-header">送礼人数</div>
|
||
|
|
<div class="layui-card-body" id="giftUser">
|
||
|
|
0
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-col-md4">
|
||
|
|
<div class="layui-card" style="width: 100%;">
|
||
|
|
<div class="layui-card-header">收益总数(金瓜子)</div>
|
||
|
|
<div class="layui-card-body" id="priceMax">
|
||
|
|
0
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-col-md1"></div>
|
||
|
|
<div class="layui-col-md5">
|
||
|
|
<div class="layui-card" style="width: 100%;">
|
||
|
|
<div class="layui-card-header">时均收益礼物</div>
|
||
|
|
<div class="layui-card-body" id="priceOfH">
|
||
|
|
0
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-col-md5">
|
||
|
|
<div class="layui-card" style="width: 100%;">
|
||
|
|
<div class="layui-card-header">人均送礼物数</div>
|
||
|
|
<div class="layui-card-body" id="priceUser">
|
||
|
|
0
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-col-md-offset2"></div>
|
||
|
|
<div class="layui-col-md6">
|
||
|
|
<div class="layui-card" style="width: 100%;height: 400px">
|
||
|
|
<div class="layui-card-header">人气值</div>
|
||
|
|
<div class="layui-card-body" id="popular">
|
||
|
|
<canvas style="color: #FD482C" id="popularChart" width="600" height="300"></canvas>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-col-md6">
|
||
|
|
<div class="layui-card" style="width: 100%;height: 400px">
|
||
|
|
<div class="layui-card-header">访问数</div>
|
||
|
|
<div class="layui-card-body" id="user">
|
||
|
|
<canvas id="userChart" width="600" height="300"></canvas>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="layui-col-md-offset2"></div>
|
||
|
|
<div class="layui-col-md6">
|
||
|
|
<div class="layui-card" style="width: 100%;height: 400px">
|
||
|
|
<div class="layui-card-header">收益(金瓜子)</div>
|
||
|
|
<div class="layui-card-body">
|
||
|
|
<canvas id="toDayPrice" width="600" height="300"></canvas>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-col-md6">
|
||
|
|
<div class="layui-card" style="width: 100%;height: 400px">
|
||
|
|
<div class="layui-card-header">礼物 (含免费)</div>
|
||
|
|
<div class="layui-card-body">
|
||
|
|
<canvas id="toDayGift" width="600" height="300"></canvas>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div style="height: 150px"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="footer" style="z-index: 99;position: relative"></div>
|
||
|
|
</div>
|
||
|
|
<script src="/layui/layui.js"></script>
|
||
|
|
<script src="/js/jquery-3.2.1.js"></script>
|
||
|
|
<script src="/js/Chart.min.js"></script>
|
||
|
|
<script src="/js/Chart.bundle.min.js"></script>
|
||
|
|
<script>
|
||
|
|
$('#header').load("/html/header.html");
|
||
|
|
$('#footer').load("/html/footer.html");
|
||
|
|
layui.use(['layer', 'form', 'element', 'table','laydate'], function () {
|
||
|
|
let layer = layui.layer
|
||
|
|
, form = layui.form
|
||
|
|
, table = layui.table
|
||
|
|
, element = layui.element;
|
||
|
|
let laydate = layui.laydate;
|
||
|
|
let giftChart,priceChart,userChart,popularChart;
|
||
|
|
|
||
|
|
laydate.render({
|
||
|
|
elem: '#timer' //指定元素
|
||
|
|
,type:'datetime'
|
||
|
|
,range:true
|
||
|
|
,value:new Date().toLocaleDateString().replaceAll("/",'-')+' 00:00:00 - '+new Date().toLocaleDateString().replaceAll("/",'-')+" 23:59:59"
|
||
|
|
,isInitValue: true //是否允许填充初始值，默认为 true
|
||
|
|
});
|
||
|
|
$('#query').click(function () {
|
||
|
|
showData(roomId);
|
||
|
|
})
|
||
|
|
$('#download').click(function () {
|
||
|
|
let index=layer.load();
|
||
|
|
$.post("/overview/get/down.do",{
|
||
|
|
"roomid": roomId,
|
||
|
|
"startTime":new Date($('#timer').val().split(" - ")[0]),
|
||
|
|
"endTime":new Date($('#timer').val().split(" - ")[1]),
|
||
|
|
},function (json) {
|
||
|
|
if(json.code!==undefined){
|
||
|
|
if(json.code===0){
|
||
|
|
let url='/overview/get/download.do?fname='+json.data;
|
||
|
|
download(url,index)
|
||
|
|
}else{
|
||
|
|
layer.msg(json.msg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
})
|
||
|
|
})
|
||
|
|
$.post("/upinfo/get/list.do", function (json) {
|
||
|
|
let id=0;
|
||
|
|
if (json.code === 0) {
|
||
|
|
for (let i in json.data) {
|
||
|
|
if(id===0){
|
||
|
|
id=json.data[i].roomid;
|
||
|
|
}
|
||
|
|
element.tabAdd('upInfo', {
|
||
|
|
title: json.data[i].name
|
||
|
|
, id: json.data[i].roomid
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
element.tabChange('upInfo', id);
|
||
|
|
form.render()
|
||
|
|
})
|
||
|
|
let roomId;
|
||
|
|
element.on('tab(upInfo)', function (data) {
|
||
|
|
|
||
|
|
roomId=this.getAttribute('lay-id');
|
||
|
|
|
||
|
|
setTimeout(function () {
|
||
|
|
showData(roomId);
|
||
|
|
},100)
|
||
|
|
|
||
|
|
})
|
||
|
|
function download(url,index){
|
||
|
|
$.post(url,function (data) {
|
||
|
|
if (data === undefined || data.length == 0) {
|
||
|
|
setTimeout(function () {
|
||
|
|
download(url,index)
|
||
|
|
}, 1000)
|
||
|
|
} else {
|
||
|
|
window.open(url)
|
||
|
|
layer.close(index)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
function showData(roomId){
|
||
|
|
if(giftChart!=null){
|
||
|
|
giftChart.destroy();
|
||
|
|
}
|
||
|
|
if(priceChart!=null){
|
||
|
|
priceChart.destroy()
|
||
|
|
}
|
||
|
|
if(popularChart!=null){
|
||
|
|
popularChart.destroy()
|
||
|
|
}
|
||
|
|
if(userChart!=null){
|
||
|
|
userChart.destroy()
|
||
|
|
}
|
||
|
|
let index = layer.load();
|
||
|
|
$.post("/realTimeData/get/query.do", {
|
||
|
|
"roomid": roomId,
|
||
|
|
"startTime":new Date($('#timer').val().split(" - ")[0]),
|
||
|
|
"endTime":new Date($('#timer').val().split(" - ")[1]),
|
||
|
|
}, function (json) {
|
||
|
|
console.log(json)
|
||
|
|
if (json.code !== 0) {
|
||
|
|
// $('#popular').text(0);
|
||
|
|
// $('#user').text(0);
|
||
|
|
$('#price').text(0);
|
||
|
|
layer.close(index)
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let gifts = json.data.gift;
|
||
|
|
let prices = json.data.price;
|
||
|
|
let priceSize = 0;
|
||
|
|
let picTime = [];
|
||
|
|
let pic = []
|
||
|
|
let gift = []
|
||
|
|
let giftSize = []
|
||
|
|
for (let i in prices) {
|
||
|
|
priceSize += prices[i].price;
|
||
|
|
pic[i] = prices[i].price;
|
||
|
|
picTime[i] = prices[i].time
|
||
|
|
}
|
||
|
|
for (let i in gifts) {
|
||
|
|
gift[i] = gifts[i].giftName;
|
||
|
|
giftSize[i] = gifts[i].size;
|
||
|
|
}
|
||
|
|
//$('#popular').text(json.data.popular);
|
||
|
|
//$('#user').text(json.data.vipLength + json.data.userLength);
|
||
|
|
//$('#price').text(priceSize);
|
||
|
|
priceChart= dataInit('toDayPrice', '金瓜子', 'line', picTime, pic)
|
||
|
|
giftChart=dataInit('toDayGift', '礼物', 'bar', gift, giftSize)
|
||
|
|
})
|
||
|
|
$.post("/overview/get/query.do",{
|
||
|
|
"roomid": roomId,
|
||
|
|
"startTime":new Date($('#timer').val().split(" - ")[0]),
|
||
|
|
"endTime":new Date($('#timer').val().split(" - ")[1]),
|
||
|
|
},function (json) {
|
||
|
|
console.log(json)
|
||
|
|
if(json.code!==0){
|
||
|
|
layer.close(index);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let popular=[]
|
||
|
|
let user=[];
|
||
|
|
let time=[]
|
||
|
|
let map=json.data.map;
|
||
|
|
for(let i in map){
|
||
|
|
time[i]=map[i].time;
|
||
|
|
popular[i]=map[i].popular;
|
||
|
|
user[i]=map[i].user;
|
||
|
|
}
|
||
|
|
$('#giftMax').text(json.data.giftCount)
|
||
|
|
$('#giftUser').text(json.data.giftUserCount)
|
||
|
|
$('#priceMax').text(json.data.price+" *叔叔抽成后:"+(json.data.price/2)+"(￥"+((json.data.price/2))/1000+")")
|
||
|
|
$('#priceOfH').text(json.data.hprice)
|
||
|
|
$('#priceUser').text((json.data.giftCount/json.data.giftUserCount))
|
||
|
|
|
||
|
|
popularChart= dataInit('popularChart', '人气值', 'line', time, popular)
|
||
|
|
userChart= dataInit('userChart', '访问数', 'line', time, user)
|
||
|
|
layer.close(index);
|
||
|
|
})
|
||
|
|
}
|
||
|
|
function dataInit(elemId, label, type, title, data) {
|
||
|
|
var ctx = document.getElementById(elemId).getContext('2d');
|
||
|
|
var myChart = new Chart(ctx, {
|
||
|
|
type: type,
|
||
|
|
data: {
|
||
|
|
labels: title,
|
||
|
|
datasets: [{
|
||
|
|
label: label,
|
||
|
|
data: data,
|
||
|
|
backgroundColor: [
|
||
|
|
|
||
|
|
'rgba(255, 159, 64, 0.2)'
|
||
|
|
],
|
||
|
|
borderColor: [
|
||
|
|
|
||
|
|
'rgba(255, 159, 64, 1)'
|
||
|
|
],
|
||
|
|
borderWidth: 1
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
scales: {
|
||
|
|
yAxes: [{
|
||
|
|
ticks: {
|
||
|
|
beginAtZero: true
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
tooltips: {
|
||
|
|
intersect: false,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return myChart;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|