Compare commits
13 Commits
master
...
4b04c1863b
| Author | SHA1 | Date | |
|---|---|---|---|
| 4b04c1863b | |||
| 4d4d409cc7 | |||
| 129e407646 | |||
| e6568480b7 | |||
| d6fbe6b59b | |||
| d1b5bde0e9 | |||
| 25185be6fe | |||
| 590c54b777 | |||
| ac7f076721 | |||
| 91fe70c1b8 | |||
| 9521e9d5c8 | |||
| 54ac47c8b4 | |||
| b178010f8f |
@@ -1,326 +0,0 @@
|
||||
<!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>
|
||||
@@ -1,239 +0,0 @@
|
||||
<!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 class="layui-col-md-offset2"></div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card" style="width: 100%;height: 400px">
|
||||
<div class="layui-card-header">观众列表</div>
|
||||
<div class="layui-card-body">
|
||||
<table id="users" lay-filter="listTools"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md-offset2"></div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card" style="width: 100%;height: 400px">
|
||||
<div class="layui-card-header">礼物列表</div>
|
||||
<div class="layui-card-body">
|
||||
<table id="gifts" lay-filter="listTools"></table>
|
||||
</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
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
/*$.get("/realTimeData/data.do",{roomid:json.data[i].roomid},function (json) {
|
||||
|
||||
})*/
|
||||
|
||||
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()
|
||||
}
|
||||
let roomid=this.getAttribute('lay-id');
|
||||
$.post("/realTimeData/get/query.do", {"roomid": roomid}, function (json) {
|
||||
console.log(json)
|
||||
if (json.code !== 0) {
|
||||
$('#popular').text(0);
|
||||
$('#user').text(0);
|
||||
$('#price').text(0);
|
||||
layer.close(index);
|
||||
return;
|
||||
}
|
||||
/*table.render({
|
||||
elem: '#gifts'
|
||||
,height: 312
|
||||
,url: '/realTimeData/data.do?rid='+roomid+'&model=1' //数据接口
|
||||
,page: true //开启分页
|
||||
,cols: [[ //表头
|
||||
{field: 'uid', title: '观众id', width:110, sort: true, fixed: 'left'}
|
||||
,{field: 'msg', title: '内容', width:400, sort: true}
|
||||
,{field: 'size', title: '数量', width:100}
|
||||
,{field: 'money', title: '金瓜子', width: 100}
|
||||
,{field: 'time', title: '时间', width: 200, sort: true}
|
||||
]]
|
||||
});
|
||||
table.render({
|
||||
elem: '#users'
|
||||
,height: 312
|
||||
,url: '/realTimeData/data.do?rid='+roomid+"&model=2" //数据接口
|
||||
,page: true //开启分页
|
||||
,cols: [[ //表头
|
||||
{field: 'uid', title: '观众id', width:110, sort: true, fixed: 'left'}
|
||||
,{field: 'msg', title: '内容', width:400, sort: true}
|
||||
,{field: 'time', title: '时间', width: 200, sort: true}
|
||||
]]
|
||||
});*/
|
||||
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>
|
||||
@@ -1,404 +0,0 @@
|
||||
<!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; overflow: auto;">
|
||||
<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"></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"></i> ',
|
||||
width: 150,
|
||||
templet: '#upInfoCheckToOfflineListening'
|
||||
}
|
||||
, {
|
||||
field: 'enable',
|
||||
title: '统计 <i class="layui-icon" id="hdata"></i>',
|
||||
width: 100,
|
||||
templet: '#upInfoCheckToEnable'
|
||||
}
|
||||
, {
|
||||
field: 'saveLive',
|
||||
title: '录制 <i class="layui-icon" id="hsave"></i>',
|
||||
width: 120,
|
||||
templet: '#upInfoCheckToSaveLive'
|
||||
}
|
||||
, {
|
||||
field: 'live',
|
||||
title: '直播状态 <i class="layui-icon" id="hlive"></i>',
|
||||
width: 120,
|
||||
templet: '#upInfoCheckTolive'
|
||||
}
|
||||
, {
|
||||
field: 'saveDanmu',
|
||||
title: '保存弹幕 <i class="layui-icon" id="hdanmu"></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.live) {
|
||||
console.log('input[name="liveCheckbox' + json.data.live[i].roomid + '"]')
|
||||
$('input[name="liveCheckbox' + json.data.live[i].roomid + '"]').prop('checked', true);
|
||||
}
|
||||
for (let i in json.data.info) {
|
||||
if (json.data.info[i].listen === 1) {
|
||||
$('#' + json.data.info[i].roomid).css('color', '#8FE18F')
|
||||
console.log('绿了:' + json.data.info[i].roomid)
|
||||
}
|
||||
}
|
||||
|
||||
$.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/set/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>
|
||||
@@ -1,182 +0,0 @@
|
||||
<!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>
|
||||
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="ffmpeg">转码</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: 250}
|
||||
, {field: 'fileSize', title: '大小', width: 80}
|
||||
, {field: "right", width: 170, 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;
|
||||
case 'ffmpeg':
|
||||
$.post('/bili/video/set/ffmpeg.do',{fileName:encodeURI(obj.data.fileName)},function (json) {
|
||||
if (json.code === undefined || json.code !== 0) {
|
||||
layer.msg("您无权操作")
|
||||
return;
|
||||
}
|
||||
layer.msg(json.msg)
|
||||
})
|
||||
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%" controls>' +
|
||||
'</video><a href="javascript:;" class="layui-btn layui-btn-xs" id="reset">重播</a>' +
|
||||
'<a href="javascript:;" class="layui-btn layui-btn-xs" id="danmu">弹幕</a>' +
|
||||
'<a href="javascript:;" class="layui-btn layui-btn-xs" id="seekDown">-10s</a>' +
|
||||
'<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
|
||||
}
|
||||
let playType = 'mp4'
|
||||
if (url.indexOf('_ffmpeg') !== -1) {
|
||||
playType = 'mp4'
|
||||
}
|
||||
flvPlayer = flvjs.createPlayer({
|
||||
type: playType,
|
||||
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>
|
||||
24
Web/html/body/data.html
Normal file
24
Web/html/body/data.html
Normal file
@@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<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 id="header"></div>
|
||||
</body>
|
||||
<script src="/layui/layui.js"></script>
|
||||
<script src="/js/jquery-3.2.1.js"></script>
|
||||
<script src="/js/CommonConfig.js"></script>
|
||||
<script>
|
||||
headerModel=2;
|
||||
$('#header').load("/html/header.html");
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</html>
|
||||
@@ -1,6 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
@@ -9,221 +8,58 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="layui-layout layui-layout-admin">
|
||||
<div id="header"></div>
|
||||
<div class="layui-body" style="left: 0px;overflow:auto;">
|
||||
<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: 120%;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>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">录制器</label>
|
||||
<div class="layui-input-block">
|
||||
<input id="savemodel" type="checkbox" lay-filter="saveLiveModel" lay-skin="switch"
|
||||
lay-text="FFMPEG| Java ">
|
||||
<i class="layui-icon" id="htitle"></i>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">FFmpeg</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" id="ffmpeg" required lay-verify="required"
|
||||
placeholder="ffmpeg绝对路径,回车保存"
|
||||
autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
<body>
|
||||
<div id="view"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
<script id="demo" type="text/html">
|
||||
<h3>{{ d.title }}</h3>
|
||||
<ul>
|
||||
{{# layui.each(d.list, function(index, item){ }}
|
||||
<li>
|
||||
<span>{{ item.modname }}</span>
|
||||
<span>{{ item.alias }}：</span>
|
||||
<span>{{ item.site || '' }}</span>
|
||||
</li>
|
||||
{{# }); }}
|
||||
{{# if(d.list.length === 0){ }}
|
||||
无数据
|
||||
{{# } }}
|
||||
</ul>
|
||||
</script>
|
||||
|
||||
<script src="/layui/layui.js"></script>
|
||||
<script src="/js/jquery-3.2.1.js"></script>
|
||||
<script src="/js/qrcode.min.js"></script>
|
||||
<script src="/js/CommonConfig.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();
|
||||
}
|
||||
})
|
||||
$.post('/system/get/savelive.do',function (json){
|
||||
if (json.code === undefined || json.code !== 0) {
|
||||
return;
|
||||
}
|
||||
if (json.data.save_live_model) {
|
||||
$('#savemodel').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)
|
||||
}
|
||||
})
|
||||
})
|
||||
form.on('switch(saveLiveModel)',function (data){
|
||||
let flag = data.elem.checked ? 'ffmpeg' : 'java';
|
||||
$.post("/system/set/savelive.do", {model: 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);
|
||||
|
||||
})
|
||||
$.post('/system/get/ffmpeg.do', function (json) {
|
||||
if (json.code === undefined || json.code !== 0) {
|
||||
return;
|
||||
}
|
||||
$('#ffmpeg').val(json.data.ffmpeg_path);
|
||||
|
||||
})
|
||||
|
||||
$('#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();
|
||||
}
|
||||
|
||||
})
|
||||
})
|
||||
})
|
||||
$('#ffmpeg').bind('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
$.post('/system/set/ffmpeg.do', {ffmpeg: encodeURI($('#ffmpeg').val())}, function (json) {
|
||||
layer.msg(json.msg)
|
||||
})
|
||||
event.preventDefault();
|
||||
}
|
||||
})
|
||||
headerModel=3;
|
||||
$('#header').load("/html/header.html");
|
||||
$('#footer').load("/html/footer.html");
|
||||
$('#htitle').on('click', function () {
|
||||
layer.open({
|
||||
title:"录制模式",
|
||||
content:'FFmpeg录制能保留视频信息，如时间戳之类的，但对性能要求比较高。<br>Java录制使用javaApi录制，性能要求较低，但无法记录视频信息，如没有时间戳，且有可能因为超时而断开录制。<br>建议性能足够的情况下使用FFmpeg。<br>需要设置FFmpeg的路径'
|
||||
})
|
||||
});
|
||||
|
||||
layui.use(['form', 'laytpl'], function () {
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
var laytpl = layui.laytpl
|
||||
var data = { //数据
|
||||
"title":"Layui常用模块"
|
||||
,"list":[{"modname":"弹层","alias":"layer","site":"layer.layui99.com"},{"modname":"表单","alias":"form"}]
|
||||
}
|
||||
var getTpl = $("#demo").get(0).innerHTML
|
||||
,view = document.getElementById('view');
|
||||
laytpl(getTpl).render(data, function(html){
|
||||
view.innerHTML = html;
|
||||
console.log(html)
|
||||
});
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
<style>
|
||||
.layui-body {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
|
||||
</style>
|
||||
</html>
|
||||
182
Web/html/body/video.html
Normal file
182
Web/html/body/video.html
Normal file
@@ -0,0 +1,182 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<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 id="header"></div>
|
||||
<table class="layui-hide" id="roomList" lay-filter="roomTable"></table>
|
||||
</body>
|
||||
<script type="text/html" id="toolbarDemo">
|
||||
<div class="layui-btn-container">
|
||||
<button class="layui-btn layui-btn-sm" onclick="createRoom()">添加新房间</button>
|
||||
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/html" id="toolDemo">
|
||||
<div class="layui-clear-space">
|
||||
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
|
||||
<a class="layui-btn layui-btn-xs" lay-event="more">
|
||||
更多
|
||||
<i class="layui-icon layui-icon-down"></i>
|
||||
</a>
|
||||
</div>
|
||||
</script>
|
||||
<script src="/layui/layui.js"></script>
|
||||
<script src="/js/jquery-3.2.1.js"></script>
|
||||
<script src="/js/CommonConfig.js"></script>
|
||||
<script src="/js/httpUtils.js"></script>
|
||||
|
||||
<script>
|
||||
headerModel = 1;
|
||||
$('#header').load("/html/header.html");
|
||||
</script>
|
||||
<script>
|
||||
function showImage(url, imgElement) {
|
||||
getHttpImage(url)
|
||||
.then(imageUrl => {
|
||||
imgElement.src = imageUrl;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Error loading image:", error);
|
||||
// 可以在这里设置一个默认图片或者显示错误信息
|
||||
imgElement.src = 'default-image.jpg';
|
||||
});
|
||||
}
|
||||
function createRoom() {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title:"添加新房间",
|
||||
area: ['500px', '400px'],
|
||||
content: '/html/ui/createConfig.html'
|
||||
|
||||
});
|
||||
// createUi("/html/ui/createConfig.html")
|
||||
// .then(html => {
|
||||
// layer.open({
|
||||
// type: 1,
|
||||
// area: ['500px', '300px'],
|
||||
// content: '/html/ui/createConfig.html'
|
||||
// });
|
||||
// })
|
||||
}
|
||||
|
||||
</script>
|
||||
<script>
|
||||
layui.use(['table', 'dropdown'], function () {
|
||||
var table = layui.table;
|
||||
var dropdown = layui.dropdown;
|
||||
|
||||
// 创建渲染实例
|
||||
table.render({
|
||||
elem: '#roomList',
|
||||
url: '/live/config/all',
|
||||
toolbar: '#toolbarDemo',
|
||||
|
||||
totalRow: true, // 开启合计行
|
||||
page: true,
|
||||
response: {
|
||||
statusCode: 100 // 重新规定成功的状态码为 200，table 组件默认为 0
|
||||
},
|
||||
parseData: function (res) {
|
||||
return {
|
||||
"code": res.status, //解析接口状态
|
||||
"msg": res.message, //解析提示文本
|
||||
"data": res.data, //解析数据列表
|
||||
"count": res.count
|
||||
};
|
||||
},
|
||||
cols: [[
|
||||
{ type: 'checkbox', fixed: 'left' },
|
||||
{ field: 'anchorUid', title: 'UID', width: 80, sort: true, fixed: 'left' },
|
||||
{ field: 'anchorName', title: '用户名', width: 100, fixed: 'left' },
|
||||
{ field: 'anchorFace', title: '头像', width: 80, templet: '<div><image src="" onerror="showImage(\'{{= d.anchorFace }}\',this);" style="width: 30px;height: 30px;"></div>' },
|
||||
{ field: 'live_room_id', title: '房间号', width: 80 },
|
||||
{ field: 'recordPath', title: '保存路径', width: 120 },
|
||||
{ field: 'recordDanmu', title: '录制弹幕', width: 120, sort: true },
|
||||
{ field: 'recordLive', title: '录制视频', width: 120, sort: true },
|
||||
{ field: 'recordDanmuDate', title: '弹幕录制预定时间', width: 170, sort: true },
|
||||
{ field: 'recordLiveDate', title: '视频录制预定时间', width: 170, sort: true },
|
||||
{ field: 'recordUid', title: '录制账号', width: 120, sort: true },
|
||||
{ field: 'recordDanmu', title: '录制弹幕', width: 120, sort: true },
|
||||
{ field: 'sql_time', title: '添加时间', width: 100 },
|
||||
{ fixed: "right", title: "操作", width: 190, align: "center", toolbar: "#toolDemo" }
|
||||
]],
|
||||
done: function () {
|
||||
done();
|
||||
},
|
||||
error: function (res, msg) {
|
||||
console.log(res, msg)
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function done() {
|
||||
// 工具栏事件
|
||||
table.on('toolbar(roomTable)', function (obj) {
|
||||
var id = obj.config.id;
|
||||
var checkStatus = table.checkStatus(id);
|
||||
var othis = lay(this);
|
||||
switch (obj.event) {
|
||||
case 'getCheckData':
|
||||
var data = checkStatus.data;
|
||||
layer.alert(layui.util.escape(JSON.stringify(data)));
|
||||
break;
|
||||
};
|
||||
});
|
||||
|
||||
// 触发单元格工具事件
|
||||
table.on('tool(roomTable)', function (obj) { // 双击 toolDouble
|
||||
var data = obj.data; // 获得当前行数据
|
||||
// console.log(obj)
|
||||
if (obj.event === 'edit') {
|
||||
layer.open({
|
||||
title: '编辑 - id:' + data.id,
|
||||
type: 1,
|
||||
area: ['80%', '80%'],
|
||||
content: '<div style="padding: 16px;">自定义表单元素</div>'
|
||||
});
|
||||
} else if (obj.event === 'more') {
|
||||
// 更多 - 下拉菜单
|
||||
dropdown.render({
|
||||
elem: this, // 触发事件的 DOM 对象
|
||||
show: true, // 外部事件触发即显示
|
||||
data: [{
|
||||
title: '查看',
|
||||
id: 'detail'
|
||||
}, {
|
||||
title: '删除',
|
||||
id: 'del'
|
||||
}],
|
||||
click: function (menudata) {
|
||||
if (menudata.id === 'detail') {
|
||||
layer.msg('查看操作，当前行 ID:' + data.id);
|
||||
} else if (menudata.id === 'del') {
|
||||
layer.confirm('真的删除行 [id: ' + data.id + '] 么', function (index) {
|
||||
obj.del(); // 删除对应行（tr）的DOM结构
|
||||
layer.close(index);
|
||||
// 向服务端发送删除指令
|
||||
});
|
||||
}
|
||||
},
|
||||
align: 'right', // 右对齐弹出
|
||||
style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
</html>
|
||||
@@ -1,17 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-footer" style="left: 0px; text-align: center; height: 60px; line-height: 0;">
|
||||
<div style="line-height: 44px;">
|
||||
©2021 by Yutou
|
||||
</div>
|
||||
<div>
|
||||
<a href="#">OvO?</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,132 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta name="referrer" content="no-referrer"/>
|
||||
<meta charset="UTF-8">
|
||||
<title>DD监视器</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="layui-header">
|
||||
<ul class="layui-nav" lay-filter="" style="background-color: #1772B4;">
|
||||
<li class="layui-nav-item">DD监视器</li>
|
||||
<div id="admin" style="display: inline-block; font-size: 0px;">
|
||||
<li class="layui-nav-item"><a href="/html/body/bilibili/upInfo.html">UP管理</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="/html/body/bilibili/video.html">录像</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
</div>
|
||||
<li class="layui-nav-item">
|
||||
<a href="/html/body/bilibili/realTimeData.html">实时数据</a>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="/html/body/bilibili/overview.html">数据统计</a>
|
||||
</li>
|
||||
<li class="layui-nav-item" id='icon'>
|
||||
<a href="javascript:;" id="login"><img src="https://static.hdslb.com/images/akari.jpg" class="layui-nav-img"
|
||||
id="icon_img"><span
|
||||
id='login_text'>登录</span></a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="/html/body/user.html">设置</a></dd>
|
||||
<dd><a href="javascript:;" id="logout">退了</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<ul class="layui-nav">
|
||||
<li class="layui-nav-item index"><a href="/index.html">监控大厅</a></li>
|
||||
<li class="layui-nav-item video"><a href="/html/body/video.html">视频管理</a></li>
|
||||
<li class="layui-nav-item data" ><a href="/html/body/data.html">数据中心</a></li>
|
||||
<li class="layui-nav-item user"><a href="/html/body/user.html">用户中心</a></li>
|
||||
</ul>
|
||||
</body>
|
||||
<div id="loginDialog" style="display: none;width: 80%;height: 100%">
|
||||
<br>
|
||||
<label class="layui-form-label">账号</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" id="uname" required="" lay-verify="required" placeholder="请输入账号" autoComplete="off"
|
||||
class="layui-input">
|
||||
</div>
|
||||
<label class="layui-form-label" style="margin-top: 10px">密码</label>
|
||||
<div class="layui-input-block" style="margin-top: 10px">
|
||||
<input type="password" id="pass" required="" lay-verify="required" placeholder="请输入密码" autoComplete="off"
|
||||
class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<script src="/layui/layui.js"></script>
|
||||
|
||||
<script>
|
||||
let loginStatus = false;
|
||||
$.post('/user/get/test.do', function (json) {
|
||||
console.log(json)
|
||||
if (json.code === 0) {
|
||||
$('#login_text').text(json.data.user);
|
||||
loginStatus = true;
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
$('#login').click(function () {
|
||||
if (loginStatus) {
|
||||
return;
|
||||
}
|
||||
layer.open({
|
||||
title: "登陆",
|
||||
content: $('#loginDialog'),
|
||||
type: 1,
|
||||
btn: ['登陆', '注册'],
|
||||
success: function () {
|
||||
//new QRCode(document.getElementById("qrcode"), json.url);
|
||||
},
|
||||
yes: function (index) {
|
||||
let uname = $('#uname').val();
|
||||
let password = $('#pass').val()
|
||||
$.post('/user/login.do', {user: uname, password: password}, function (json) {
|
||||
layer.msg(json.msg, function () {
|
||||
console.log(json)
|
||||
if (json.code === 0) {
|
||||
layer.close(index)
|
||||
$('#loginDialog').css('display', 'none')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
btn2: function (index) {
|
||||
let uname = $('#uname').val();
|
||||
let password = $('#pass').val()
|
||||
$.post('/user/reg.do', {user: uname, password: password}, function (json) {
|
||||
layer.msg(json.msg, function () {
|
||||
console.log(json)
|
||||
if (json.code === 0) {
|
||||
layer.close(index)
|
||||
$('#loginDialog').css('display', 'none')
|
||||
window.location.reload();
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
});
|
||||
$('#logout').click(function (){
|
||||
$.post('/user/logout.do',function (json) {
|
||||
layer.msg(json.msg,function (){
|
||||
window.location.reload();
|
||||
})
|
||||
})
|
||||
})
|
||||
$(document).ready(function () {
|
||||
let mobile = layui.device().mobile;
|
||||
if (mobile) {
|
||||
$('.layui-body').css('left', '0')
|
||||
$('.layui-body').css('top', '150px')
|
||||
$('.layui-body').css('height', '200%')
|
||||
$('#icon').css('float', 'none')
|
||||
|
||||
|
||||
} else {
|
||||
$('.layui-body').css('padding-right', '100px')
|
||||
$('#icon').css('float', 'right')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
</html>
|
||||
$(".index").removeClass("layui-this")
|
||||
$(".video").removeClass("layui-this")
|
||||
$(".data").removeClass("layui-this")
|
||||
$(".user").removeClass("layui-this")
|
||||
switch(headerModel){
|
||||
case 0:$(".index").addClass('layui-this');break;
|
||||
case 1:$(".video").addClass('layui-this');break;
|
||||
case 2:$(".data").addClass('layui-this');break;
|
||||
case 3:$(".user").addClass('layui-this');break;
|
||||
}
|
||||
</script>
|
||||
106
Web/html/ui/createConfig.html
Normal file
106
Web/html/ui/createConfig.html
Normal file
@@ -0,0 +1,106 @@
|
||||
<link rel="stylesheet" href="/layui/css/layui.css">
|
||||
|
||||
<body>
|
||||
<input id="value" value="" type="hidden" />
|
||||
<form class="layui-form layui-form-pane" action="" style="padding-left: 10px;padding-right: 10px;">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">直播房间地址</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="url" autocomplete="off" placeholder="https://live.bilibili.com/xxxxx"
|
||||
lay-verify="required" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item" pane>
|
||||
<label class="layui-form-label">录制弹幕</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="recordLive" lay-skin="switch" lay-filter="switchTest" title="启用|禁用">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item" pane>
|
||||
<label class="layui-form-label">录制视频</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="recordDanmu" lay-skin="switch" lay-filter="switchTest" title="启用|禁用">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">弹幕预定录制时间</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="recordDanmuDate" value="* * *" placeholder="* * *" lay-verify="required" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-text-em" onclick="timeTips(this)"><i
|
||||
class="layui-icon layui-icon-help"></i> </div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">视频预定录制时间</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="recordLiveDate" value="* * *" placeholder="* * *" lay-verify="required" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-text-em" onclick="timeTips(this)"><i
|
||||
class="layui-icon layui-icon-help"></i> </div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">录制绑定用户</label>
|
||||
<div id="selects" class="layui-input-inline">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<button class="layui-btn" lay-submit lay-filter="submit-form">确认</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
<script id="selectUser" type="text/html">
|
||||
<select id="recordUid" name="recordUid" lay-verify="required" lay-search>
|
||||
<option value="">直接选择或搜索选择</option>
|
||||
{{# layui.each(d.data, function(index, item){ }}
|
||||
<option value="{{= item.uid}}">[{{=item.uid}}]{{= item.uname}}</option>
|
||||
{{# }); }}
|
||||
</select>
|
||||
</script>
|
||||
|
||||
<script src="/layui/layui.js"></script>
|
||||
<script src="/js/jquery-3.2.1.js"></script>
|
||||
<script src="/js/httpUtils.js"></script>
|
||||
<script>
|
||||
function timeTips(that) {
|
||||
layer.tips('填写[分钟][小时][星期],空格分割,例如预定每周6晚上8点之后才开始录制则填写:* 8 6', that);
|
||||
}
|
||||
layui.use(['form', 'laytpl'], function () {
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
var laytpl = layui.laytpl
|
||||
// 提交事件
|
||||
form.on('submit(submit-form)', function (data) {
|
||||
var field = data.field; // 获取表单字段值
|
||||
// 显示填写结果，仅作演示用
|
||||
|
||||
// 此处可执行 Ajax 等操作
|
||||
// …
|
||||
addRoomConfig(field)
|
||||
.then(json=>{
|
||||
console.log(json)
|
||||
})
|
||||
|
||||
return false; // 阻止默认 form 跳转
|
||||
});
|
||||
|
||||
function close(){
|
||||
var index = parent.layer.getFrameIndex(window.name); // 先得到当前 iframe 层的索引
|
||||
parent.layer.close(index);
|
||||
}
|
||||
getBiliAllUser()
|
||||
.then(data => {
|
||||
var view = $("#selects").get(0);
|
||||
laytpl($('#selectUser').get(0).innerHTML).render(data, function (html) {
|
||||
view.innerHTML=html
|
||||
form.render('select');
|
||||
});
|
||||
|
||||
})
|
||||
});
|
||||
</script>
|
||||
@@ -1,6 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
@@ -9,51 +8,26 @@
|
||||
</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" style="background-color: #FFFFFF">
|
||||
本站点采用限时注册模式，仅登陆用户可使用。当前注册状态: <span style="color: #FD482C" id="model">关闭</span>
|
||||
</blockquote>
|
||||
<div align="center">
|
||||
|
||||
<img src="https://s1.hdslb.com/bfs/static/jinkela/international-home/assets/bgm-nodata.png" style="float: contour">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
<button id="btn" type="button" class="layui-btn" onclick="onButton()">默认按钮</button>
|
||||
|
||||
<script src="/layui/layui.js"></script>
|
||||
<script src="/js/jquery-3.2.1.js"></script>
|
||||
<script src="/js/CommonConfig.js"></script>
|
||||
<script src="/js/httpUtils.js"></script>
|
||||
<script>
|
||||
layui.use(['layer', 'form', 'element'], function () {
|
||||
var layer = layui.layer
|
||||
, form = layui.form;
|
||||
|
||||
});
|
||||
headerModel=0;
|
||||
$('#header').load("/html/header.html");
|
||||
$('#footer').load("/html/footer.html");
|
||||
$.post("/system/public/reg.do",function (json) {
|
||||
if(json.data.userReg){
|
||||
$('#model').css('color','#499C54')
|
||||
$('#model').text('开启')
|
||||
}else{
|
||||
$('#model').css('color','#FD482C')
|
||||
$('#model').text('关闭')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
</body>
|
||||
<script>
|
||||
function onButton(){
|
||||
getLiveVideoList()
|
||||
.then(data=>{
|
||||
console.log(data)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.layui-body {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
|
||||
</style>
|
||||
</html>
|
||||
9
Web/js/CommonConfig.js
Normal file
9
Web/js/CommonConfig.js
Normal file
@@ -0,0 +1,9 @@
|
||||
var headerModel=0;
|
||||
|
||||
function createUi(html){
|
||||
return fetch(html)
|
||||
.then(response=>response.text())
|
||||
.then(htmlText=>{
|
||||
return htmlText;
|
||||
})
|
||||
}
|
||||
77
Web/js/httpUtils.js
Normal file
77
Web/js/httpUtils.js
Normal file
@@ -0,0 +1,77 @@
|
||||
function get(url){
|
||||
return fetch(url)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
return data;
|
||||
})
|
||||
.catch(error => {
|
||||
return error;
|
||||
});
|
||||
}
|
||||
function post(url,formData,isJSON) {
|
||||
return fetch(url, {
|
||||
method: "POST",
|
||||
body: formData
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Network response was not ok");
|
||||
}
|
||||
if(isJSON){
|
||||
return response.json();
|
||||
}
|
||||
return response.blob();
|
||||
})
|
||||
.then(blob => {
|
||||
if(isJSON){
|
||||
return blob;
|
||||
}
|
||||
const imageUrl = URL.createObjectURL(blob);
|
||||
console.log("Image URL:", imageUrl);
|
||||
return imageUrl;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("There was a problem with the fetch operation:", error);
|
||||
throw error; // 重新抛出错误以便外部捕获
|
||||
});
|
||||
}
|
||||
function getLiveVideoList() {
|
||||
return get("/live/video/list");
|
||||
}
|
||||
function getHttpImage(url) {
|
||||
const encode = encodeURI(url);
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("url", encode);
|
||||
return post("/file/img",formData,false)
|
||||
.then(blob=>{
|
||||
return blob;
|
||||
})
|
||||
}
|
||||
|
||||
function getBiliAllUser(){
|
||||
return get("/user/list")
|
||||
}
|
||||
function addRoomConfig(json){
|
||||
const formData = new FormData();
|
||||
|
||||
Object.keys(json).forEach(key => {
|
||||
const value = json[key];
|
||||
|
||||
if (Array.isArray(value)) {
|
||||
value.forEach((item, index) => {
|
||||
formData.append(`${key}[${index}]`, item);
|
||||
});
|
||||
} else if (value !== null && typeof value === 'object') {
|
||||
formData.append(key, value);
|
||||
} else {
|
||||
formData.append(key, value);
|
||||
}
|
||||
});
|
||||
return post("/live/config/set",formData)
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,2 +0,0 @@
|
||||
/** layui-v2.5.7 MIT License */
|
||||
html #layuicss-skincodecss{display:none;position:absolute;width:1989px}.layui-code-h3,.layui-code-view{position:relative;font-size:12px}.layui-code-view{display:block;margin:10px 0;padding:0;border:1px solid #e2e2e2;border-left-width:6px;background-color:#F2F2F2;color:#333;font-family:Courier New}.layui-code-h3{padding:0 10px;height:32px;line-height:32px;border-bottom:1px solid #e2e2e2}.layui-code-h3 a{position:absolute;right:10px;top:0;color:#999}.layui-code-view .layui-code-ol{position:relative;overflow:auto}.layui-code-view .layui-code-ol li{position:relative;margin-left:45px;line-height:20px;padding:0 5px;border-left:1px solid #e2e2e2;list-style-type:decimal-leading-zero;*list-style-type:decimal;background-color:#fff}.layui-code-view pre{margin:0}.layui-code-notepad{border:1px solid #0C0C0C;border-left-color:#3F3F3F;background-color:#0C0C0C;color:#C2BE9E}.layui-code-notepad .layui-code-h3{border-bottom:none}.layui-code-notepad .layui-code-ol li{background-color:#3F3F3F;border-left:none}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 701 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 299 KiB After Width: | Height: | Size: 322 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 777 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user