This commit is contained in:
yutou
2021-04-01 14:44:02 +08:00
parent 79a5c4ad89
commit ef87b719fd
218 changed files with 24011 additions and 15 deletions

View File

@@ -0,0 +1,326 @@
<!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>

View File

@@ -0,0 +1,192 @@
<!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;">
<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">
<div class="layui-card" style="width: 100%;">
<div class="layui-card-header">当前人气值</div>
<div class="layui-card-body" id="popular">
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="user">
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="price">
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">
<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>
<div id="footer"></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'], function () {
let layer = layui.layer
, form = layui.form
, table = layui.table
, element = layui.element;
let giftChart,priceChart;
$.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()
})
element.on('tab(upInfo)', function (data) {
let index = layer.load();
if(giftChart!=null){
giftChart.destroy();
}
if(priceChart!=null){
priceChart.destroy()
}
$.post("/realTimeData/get/query.do", {"roomid": this.getAttribute('lay-id')}, 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;
}
let text=(json.data.vipLength + json.data.userLength)+"。 普通用户:"+json.data.userLength+"、 舰长:"+json.data.vipLength
$('#popular').text(json.data.popular);
$('#user').text(text);
$('#price').text(priceSize+" *叔叔抽成后:"+(priceSize/2)+"(¥"+((priceSize/2))/1000+")");
priceChart= dataInit('toDayPrice', '金瓜子', 'line', picTime, pic)
giftChart=dataInit('toDayGift', '礼物', 'bar', gift, giftSize)
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>

View File

@@ -0,0 +1,401 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>UP主管理</title>
<link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div id="header"></div>
<div class="layui-body" style="left: 0px;">
<div style="width: 50%;margin-left: 25%; margin-top: 2%;">
<blockquote class="layui-elem-quote">
在这里添加需要监控的UP主添加请填入直播地址或房间号
<div id="temp"></div>
</blockquote>
</div>
<div style="width: 80%;margin-left: 10%; margin-top: 2%;">
<form class="layui-form" action="" lay-filter="myForm">
<div class="layui-tab layui-tab-card" lay-filter="type" lay-allowclose="true">
<ul class="layui-tab-title">
</ul>
<div class="layui-tab-content">
</div>
</div>
</form>
</div>
</div>
<div id="footer"></div>
</div>
<script src="/layui/layui.js"></script>
<script src="/js/jquery-3.2.1.js"></script>
<script type="text/html" id="topTools">
<a class="layui-btn layui-btn-xs" lay-event="addAddress">新增</a>
<scan id="online">当前正在直播:0</scan>
</script>
<script type="text/html" id="listTools">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="upInfoCheckToOfflineListening">
{{# if(d.offlinelistening==1){}}
<div><input name="offlineListeningCheckbox" lay-filter="offlineListeningCheckbox" type="checkbox" lay-skin="switch"
lay-text="开启|关闭" value="{{d.roomid}}" checked></div>
{{# } else { }}
<div><input name="offlineListeningCheckbox" lay-filter="offlineListeningCheckbox" type="checkbox" lay-skin="switch"
lay-text="开启|关闭" value="{{d.roomid}}"></div>
{{# }}}
</script>
<script type="text/html" id="upInfoCheckToEnable">
{{# if(d.enable==1){}}
<div><input name="enableCheckbox{{d.roomid}}" lay-filter="enableCheckbox" type="checkbox" lay-skin="switch"
lay-text="启用|关闭"
value="{{d.roomid}}" checked></div>
{{# } else { }}
<div><input name="enableCheckbox{{d.roomid}}" lay-filter="enableCheckbox" type="checkbox" lay-skin="switch"
lay-text="启用|关闭"
value="{{d.roomid}}"></div>
{{# }}}
</script>
<script type="text/html" id="upInfoCheckToSaveLive">
{{# if(d.savelive==1){}}
<div><input name="saveLiveCheckbox{{d.roomid}}" lay-filter="saveLiveCheckbox" type="checkbox"
lay-skin="switch"
lay-text="启用|关闭"
value="{{d.roomid}}" checked></div>
{{# } else { }}
<div><input name="saveLiveCheckbox{{d.roomid}}" lay-filter="saveLiveCheckbox" type="checkbox"
lay-skin="switch"
lay-text="启用|关闭"
value="{{d.roomid}}"></div>
{{# }}}
</script>
<script type="text/html" id="upInfoCheckTolive">
<div><input id="live" name="liveCheckbox{{d.roomid}}" lay-filter="liveCheckbox" type="checkbox" lay-skin="switch"
lay-text="直播|自闭"
value="{{d.roomid}}"></div>
</script>
<script type="text/html" id="upInfoCheckToSaveDanmu">
{{# if(d.savedanmu==1){}}
<div><input name="saveDanmuCheckbox" lay-filter="saveDanmuCheckbox" type="checkbox" lay-skin="switch"
lay-text="开启|关闭" value="{{d.roomid}}" checked></div>
{{# } else { }}
<div><input name="saveDanmuCheckbox" lay-filter="saveDanmuCheckbox" type="checkbox" lay-skin="switch"
lay-text="开启|关闭" value="{{d.roomid}}"></div>
{{# }}}
</script>
<script>
let form = layui.form;
$('#header').load("/html/header.html");
$('#footer').load("/html/footer.html");
layui.use(['layer', 'form', 'element', 'table'], function () {
let layer = layui.layer
, form = layui.form
, table = layui.table
, element = layui.element;
element.tabAdd('type', {
title: "BiliBili"
, content: '<table id="bili_up" lay-filter="listTools"></table>'
, id: 1
})
element.on('tab(type)', function (data) {
table.render({
elem: "#bili_up"
, url: '/upinfo/get/list.do'
, toolbar: '#topTools'
, page: true
, cols: [[
{field: "id", title: "id", width: 80, sort: true, fixed: 'left'}
, {
field: 'name',
title: '标题 <i class="layui-icon" id="htitle">&#xe60b;</i>',
width: 150,
templet: '<div><span id="{{d.roomid}}">{{d.name}}</span></div>'
}
, {field: 'roomid', title: 'roomid', width: 100}
, {
field: 'url',
title: '直播地址',
width: 250,
templet: '<div><a href="{{d.url}}" target="_blank">{{d.url}}</a></div>'
}
, {
field: 'offlinelistening',
title: '24小时监控 <i class="layui-icon" id="h24">&#xe60b;</i> ',
width: 150,
templet: '#upInfoCheckToOfflineListening'
}
, {
field: 'enable',
title: '统计 <i class="layui-icon" id="hdata">&#xe60b;</i>',
width: 100,
templet: '#upInfoCheckToEnable'
}
, {
field: 'saveLive',
title: '录制 <i class="layui-icon" id="hsave">&#xe60b;</i>',
width: 120,
templet: '#upInfoCheckToSaveLive'
}
, {
field: 'live',
title: '直播状态 <i class="layui-icon" id="hlive">&#xe60b;</i>',
width: 120,
templet: '#upInfoCheckTolive'
}
, {
field: 'saveDanmu',
title: '保存弹幕 <i class="layui-icon" id="hdanmu">&#xe60b;</i>',
width: 120,
templet: '#upInfoCheckToSaveDanmu'
}
, {field: "right", width: 200, toolbar: '#listTools'}
]]
, done: function (res, curr, count) {
let index=layer.load()
$('#htitle').on('click', function () {
var that = this;
layer.tips('当名字变成绿色则代表后台正在统计中,为黑色则代表未统计,如果需要统计请打开统计开关后刷新查看结果', that, {
tpis: 4
});
});
$('#h24').on('click', function () {
var that = this;
layer.tips('只有开启24小时监控才会自动统计数据或录制', that, {
tpis: 4
});
});
$('#hdata').on('click', function () {
var that = this;
layer.tips('启动统计数据仅在主播正在直播时可用如需统计未直播时段请开启24小时监控', that, {
tpis: 4
});
});
$('#hsave').on('click', function () {
var that = this;
layer.tips('在主播直播时录制视频在统计为开启时才可用录像文件在UP管理-录像中查看', that, {
tpis: 4
});
});
$('#hlive').on('click', function () {
var that = this;
layer.tips('主播当前直播状态,显示直播时并不代表在统计和录制视频,该状态仅代表主播是否正在直播', that, {
tpis: 4
});
});
$('#hdanmu').on('click', function () {
var that = this;
layer.tips('在统计为启用时保存弹幕信息该功能可能占用大量储存空间请注意保存文件为sqlite', that, {
tpis: 4
});
});
$.post('/upinfo/get/liveInfo.do', function (json) {
if (json.code === 0) {
$('#online').text("当前正在直播:" + json.data.online)
for (let i in json.data.info) {
console.log('input[name="liveCheckbox' + json.data.info[i].roomid + '"]')
$('input[name="liveCheckbox' + json.data.info[i].roomid + '"]').prop('checked', true);
}
for (let i in json.data.live) {
$('#' + json.data.live[i].roomid).css('color', '#8FE18F')
}
$.post('/user/get/test.do',function (json) {
console.log(json.data.power)
if(json.data.power.indexOf(-1)===-1&&json.data.power.indexOf(4)===-1){
$('input[type="checkbox"]').prop('disabled',true)
}
layer.close(index);
form.render();
})
}else{
layer.msg("close")
layer.close();
}
})
}
});
})
/* $('#h24').on('click', function(){
var that = this;
layer.tips('只有开启24小时监控才会自动统计数据或录制', that);
});*/
table.on('toolbar(listTools)', function (obj) {
if (obj.event === 'addAddress') {
layer.prompt({
formType: 2,
value: '',
title: '请输入房间号或直播地址(直播地址请勿包含参数 如http://live.bilibili.com/110?abcd)',
area: ['350px', '30px'] //自定义文本域宽高
}, function (value, index, elem) {
$.post("/user/up/set/add.do", {"url": value}, function (json) {
layer.msg(json.msg)
layer.close(index)
})
});
}
})
table.on('tool(listTools)', function (obj) {
let event = obj.event;
switch (event) {
case "edit":
layer.prompt({
formType: 2,
value: '',
title: '请输入房间号或直播地址(直播地址请勿包含参数 如http://live.bilibili.com/110?abcd)',
area: ['350px', '30px'] //自定义文本域宽高
}, function (value, index, elem) {
let dialogIndex=layer.load();
queryUpInfo(obj.data.roomid, function (udata) {
udata.url = value;
udata.offlinelistening = udata.offlinelistening ? 1 : 0;
udata.live = udata.live ? 1 : 0;
udata.saveDanmu = udata.saveDanmu ? 1 : 0;
console.log(udata)
$.post("/upinfo/update.do", udata, function (json) {
layer.close(dialogIndex);
layer.msg(json.msg,function () {
window.location.reload();
})
layer.close(index)
})
})
});
break;
case "del":
layer.open({
title: '提示!'
, content: '确定是否删除' + obj.data.name + '直播间?删除后已保存数据并不会一并删除!'
, btn: ['确定', '取消']
, yes: function (index, layero) {
$.post('/upinfo/set/delete.do', {'roomid': obj.data.roomid}, function (json) {
layer.msg(json.msg)
})
layer.close(index); //如果设定了yes回调需进行手工关闭
}
});
break;
}
})
form.on('switch(offlineListeningCheckbox)', function (data) {
let roomid = data.value;
let flag = data.elem.checked ? 1 : 0;
queryUpInfo(roomid, function (udata) {
udata.offlinelistening = flag;
udata.live = udata.live ? 1 : 0;
udata.saveDanmu = udata.saveDanmu ? 1 : 0;
$.post('/upinfo/set/update.do', udata, function (json) {
layer.msg(json.msg)
})
})
});
form.on('switch(liveCheckbox)', function (data) {
let roomid = data.value;
let flag = data.elem.checked ? 1 : 0;
queryUpInfo(roomid, function (udata) {
udata.live = flag;
udata.offlinelistening = udata.offlinelistening ? 1 : 0;
udata.saveDanmu = udata.saveDanmu ? 1 : 0;
$.post('/upinfo/set/update.do', udata, function (json) {
layer.msg(json.msg)
})
})
});
form.on('switch(enableCheckbox)', function (data) {
let roomid = data.value;
let flag = data.elem.checked ? 1 : 0;
queryUpInfo(roomid, function (udata) {
udata.enable = flag;
udata.offlinelistening = udata.offlinelistening ? 1 : 0;
udata.saveDanmu = udata.saveDanmu ? 1 : 0;
console.log(udata)
$.post('/upinfo/set/update.do', udata, function (json) {
layer.msg(json.msg)
})
})
});
form.on('switch(saveLiveCheckbox)', function (data) {
let roomid = data.value;
let flag = data.elem.checked ? 1 : 0;
queryUpInfo(roomid, function (udata) {
udata.savelive = flag;
udata.offlinelistening = udata.offlinelistening ? 1 : 0;
udata.saveDanmu = udata.saveDanmu ? 1 : 0;
$.post('/upinfo/set/update.do', udata, function (json) {
layer.msg(json.msg)
})
})
});
form.on('switch(saveDanmuCheckbox)', function (data) {
if (data.elem.checked) {
layer.open({
title: '警告!'
, content: '保存弹幕可能会占用大量硬盘空间,也可能会降低数据库查询时间,请谨慎使用(建议手动控制时段开关)'
, btn: ['确定', '取消']
, yes: function (index, layero) {
let roomid = data.value;
let flag = data.elem.checked ? 1 : 0;
queryUpInfo(roomid, function (udata) {
udata.savedanmu = flag;
$.post('/upinfo/set/update.do', udata, function (json) {
layer.msg(json.msg)
})
})
layer.close(index); //如果设定了yes回调需进行手工关闭
}
, btn2: function (index, layero) {
console.log('off')
$('input[name="saveDanmuCheckbox"]').prop('checked', false)
form.render();
layer.close(index)
}
, cancel: function (index, layero) {
console.log('off')
$('input[name="saveDanmuCheckbox"]').prop('checked', false)
form.render();
layer.close(index)
}
});
} else {
let roomid = data.value;
let flag = data.elem.checked ? 1 : 0;
queryUpInfo(roomid, function (udata) {
udata.savedanmu = flag;
$.post('/upinfo/set/update.do', udata, function (json) {
layer.msg(json.msg)
})
})
}
})
element.tabChange('type', '1');
})
let that;
function queryUpInfo(roomid, fun) {
$.post('/upinfo/get/query.do', {"roomid": roomid}, function (data) {
fun(data)
})
}
</script>
</body>
</html>

View File

@@ -0,0 +1,170 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>录播管理</title>
<link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div id="header"></div>
<div class="layui-body" style="left: 0px;">
<div style="width: 50%;margin-left: 25%; margin-top: 2%;">
<div class="layui-card">
<div class="layui-card-header">录像管理</div>
<div class="layui-card-body">
<table id="bili_video" lay-filter="listTools"></table>
</div>
</div>
</div>
</div>
<div id="footer"></div>
</div>
<script type="text/html" id="listTools">
<a class="layui-btn layui-btn-xs" lay-event="play">播放</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="download">下载</a>
</script>
<script src="/layui/layui.js"></script>
<script src="/js/jquery-3.2.1.js"></script>
<script src="/js/flv.min.js"></script>
<script>
layui.use(['layer', 'form', 'element', 'table'], function () {
let layer = layui.layer
, form = layui.form
, table = layui.table
, element = layui.element;
table.render({
elem: '#bili_video'
, height: 700
, url: '/bili/video/get/list.do' //数据接口
, page: true //开启分页
, cols: [[ //表头
{field: 'name', title: 'UP主/房间号', width: 150, sort: true, fixed: 'left'}
, {field: 'date', title: '日期', width: 120, sort: true}
, {field: 'time', title: '时间', width: 80, sort: true}
, {field: 'fileName', title: '文件名', width: 300}
, {field: 'fileSize', title: '大小', width: 80}
, {field: "right", width: 120, toolbar: '#listTools'}
]]
});
table.on('tool(listTools)', function (obj) {
console.log(obj.data)
switch (obj.event) {
case 'download':
window.open("/bili/video/download/get.do?fileName=" + encodeURI(obj.data.fileName))
break;
case 'play':
play("/download/" + obj.data.date + "/" + encodeURI(obj.data.fileName), obj.data.fileName);
break;
}
})
function play(url, fileName) {
if (flvjs.isSupported()) {
let id = 'video_' + fileName
let volume = 1;
let isPlay = true;
let flvPlayer;
layer.open({
title: fileName
, type: 1
, shade: 0
, maxWidth: 680
, zIndex: layer.zIndex
, area: ['640px', '480px']
, maxmin: false
, resize: false
, content: '<div><video id="' + id + '" style="height: 100%;width: 100%">' +
'</video><a href="javascript:;" class="layui-btn layui-btn-xs" id="pause">暂停/播放</a>' +
'</video><a href="javascript:;" class="layui-btn layui-btn-xs" id="reset">重播</a>' +
'</video><a href="javascript:;" class="layui-btn layui-btn-xs" id="danmu">弹幕</a>' +
'</video><a href="javascript:;" class="layui-btn layui-btn-xs" id="volume">静音</a>' +
'</video><a href="javascript:;" class="layui-btn layui-btn-xs" id="seekDown">-10s</a>' +
'</video><a href="javascript:;" class="layui-btn layui-btn-xs" id="seekUp">+10s</a>' +
'</div>'
, success: function (layero, index) {
layer.setTop(layero);
let videoElement = document.getElementById(id);
videoElement.onended=function (){
layer.close(index)
};
let playerConfig = {
enableWorker: false,
deferLoadAfterSourceOpen: true,
stashInitialSize: 512 * 1024,
enableStashBuffer: true
}
flvPlayer = flvjs.createPlayer({
type: 'flv',
url: url
},playerConfig)
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
$('#pause').click(function () {
if (isPlay) {
flvPlayer.pause();
} else {
flvPlayer.play();
}
isPlay=!isPlay;
})
$('#reset').click(function () {
flvPlayer.unload();
flvPlayer.load();
flvPlayer.play();
})
$('#danmu').click(function () {
layer.msg("鸽了")
})
$('#seekDown').click(function () {
flvPlayer.currentTime = flvPlayer.currentTime - 10
})
$('#seekUp').click(function () {
flvPlayer.currentTime = flvPlayer.currentTime + 10
})
$('#volume').click(function () {
if (volume === 0) {
volume = 1;
} else {
volume = 0;
}
console.log(flvPlayer)
flvPlayer.volume = volume;
})
}
, cancel: function (index) {
flvPlayer.unload();
flvPlayer.detachMediaElement();
flvPlayer.destroy();
flvPlayer = null;
layer.close(index)
}
});
}
}
});
$('#header').load("/html/header.html");
$('#footer').load("/html/footer.html");
</script>
</body>
<style>
.layui-body {
position: relative;
z-index: 0;
background-color: #F2F2F2;
}
</style>
</html>

172
Web/html/body/user.html Normal file
View File

@@ -0,0 +1,172 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>用户中心</title>
<link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div id="header"></div>
<div class="layui-body" style="left: 0px;">
<div style="width: 40%;height: 25%;margin-left: 25%; margin-top: 2%;">
<blockquote class="layui-elem-quote" style="background-color: #FFFFFF; height: 50%;">
<div align="center">
哔哩哔哩账号,用于后台监控数据及录屏~
<p></p>
<a href="javascript:;" id="login"><img src="https://static.hdslb.com/images/akari.jpg"
class="layui-nav-img" id="bili_icon_img"
style="height: 80%;width: 10%">
<p></p>
<span id='bili_login_text'>管理员哔哩哔哩登陆</span></a>
</div>
</blockquote>
<div class="layui-card" style="margin-top: 5%;height: 120%">
<div class="layui-card-header">用户设置</div>
<div class="layui-card-body">
<form class="layui-form" action="" style="margin-top: 2%;width: 80%">
<div class="layui-form-item">
<label class="layui-form-label">修改名称</label>
<div class="layui-input-block">
<input type="text" name="user" required lay-verify="required" placeholder="新名称"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">修改密码</label>
<div class="layui-input-block">
<input type="password" name="password" required lay-verify="required" placeholder="新密码"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" type="button" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
<div id="config" class="layui-card" style="margin-top: 5%;height: 100%;display: none">
<div class="layui-card-header">系统设置</div>
<div class="layui-card-body">
<form class="layui-form" action="" style="margin-top: 2%;width: 80%">
<div class="layui-form-item">
<label class="layui-form-label">开放注册</label>
<div class="layui-input-block">
<input id="userReg" type="checkbox" lay-filter="userReg" lay-skin="switch" lay-text="开启|关闭">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">保存阿B数据</label>
<div class="layui-input-block">
<input id="saveBiliLive" type="checkbox" lay-filter="saveBiliLive" lay-skin="switch" lay-text="开启|关闭">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div id="footer"></div>
</div>
<script src="/layui/layui.js"></script>
<script src="/js/jquery-3.2.1.js"></script>
<script src="/js/qrcode.min.js"></script>
<script>
layui.use(['layer', 'form', 'element'], function () {
let layer = layui.layer
, form = layui.form;
form.on('submit(formDemo)', function (data) {
console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value}
$.post('/user/set/update.do', data.field, function (json) {
if (json.code !== undefined) {
layer.msg(json.msg)
if (josn.code === 0) {
window.location.reload()
}
} else {
layer.msg("可能未登录")
}
})
return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
});
$.post('/system/get/config.do', function (json) {
if (json.code !== undefined) {
$('#config').css('display', 'block')
if (json.data.userReg === '1') {
$('#userReg').prop('checked', true);
}
if (json.data.biliLive === '1') {
$('#saveBiliLive').prop('checked', true);
}
form.render();
}
})
form.on('switch(userReg)', function (data) {
let flag = data.elem.checked ? '1' : '0';
$.post("/system/set/config.do", {key: "userReg", value: flag}, function (json) {
if (json.code !== undefined) {
layer.msg(json.msg)
}
})
})
form.on('switch(saveBiliLive)', function (data) {
let flag = data.elem.checked ? '1' : '0';
$.post("/system/set/config.do", {key: "biliLive", value: flag}, function (json) {
if (json.code !== undefined) {
layer.msg(json.msg)
}
})
})
});
$.post('/bili/login/get/test.do', function (json) {
if (json.code === undefined || json.code !== 0) {
return;
}
$('#bili_login_text').text(json.data.uname);
$('#bili_icon_img').attr("src", json.data.icon);
})
$('#login').click(function () {
$.post('/bili/login/set/login.do', function (json) {
if (json.code === undefined || json.code !== 0) {
layer.msg("您无权修改")
return;
}
console.log(json)
layer.open({
title: "BiliBili客户端扫描登陆",
content: "<div id=\"qrcode\"></div>",
success: function () {
new QRCode(document.getElementById("qrcode"), json.url);
},
yes: function (index) {
layer.close(index)
window.location.reload();
}
})
})
})
$('#header').load("/html/header.html");
$('#footer').load("/html/footer.html");
</script>
</body>
<style>
.layui-body {
position: relative;
z-index: 0;
background-color: #F2F2F2;
}
</style>
</html>