JavaWeb/biliob
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

完善web一些功能

Browse Source
This commit is contained in:
zlzw
2024-11-27 17:39:02 +08:00
parent 48a15c8769
commit e8cceef419
12 changed files with 647 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
Web/html/body/live.html
View File

@@ -15,7 +15,9 @@
<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>
<button class="layui-btn layui-btn-sm" lay-event="editArray">批量编辑</button>
<button class="layui-btn layui-btn-sm" lay-event="deleteArray">批量删除</button>
<button class="layui-btn layui-btn-sm layui-bg-red" lay-event="deleteAll">全部删除</button>
</div>
</script>
<script type="text/html" id="toolDemo">
@@ -46,6 +48,15 @@
});
}
function editArrayRoom(array) {
layer.open({
type: 2,
title: "批量编辑",
area: ['600px', '500px'],
content: '/html/ui/createConfig.html?array=' + array
});
}
</script>
<script>
layui.use(['table', 'dropdown'], function () {
@@ -105,10 +116,56 @@
var id = obj.config.id;
var checkStatus = table.checkStatus(id);
var othis = lay(this);
var data = checkStatus.data;
var array = data.map(function (item) {
return item.live_room_id
})
var arrayName = data.map(function (item) {
return item.anchorName
})
switch (obj.event) {
case 'getCheckData':
var data = checkStatus.data;
layer.alert(layui.util.escape(JSON.stringify(data)));
case 'deleteArray':
if (array.length === 0) {
layer.msg('没有数据', { icon: 2 })
return
}
layer.confirm('确定删除 ' + arrayName + "?", { icon: 3 }, function () {
var loadIndex = showLoadingDialog();
deleteArrayRoomConfig(array)
.then(json => {
layer.close(loadIndex)
layer.msg(json.data, { icon: 1 });
table.reloadData('roomList', {}, false)
})
}, function () {
});
break;
case 'editArray':
if (array.length === 0) {
layer.msg('没有数据', { icon: 2 })
return
}
editArrayRoom(array)
break;
case 'deleteAll':
layer.confirm('确定删除所有配置?', { icon: 3 }, function () {
var loadIndex = showLoadingDialog();
deleteAllRoomConfig()
.then(json => {
layer.close(loadIndex)
if (json.status === -1) {
layer.msg(json.message, { icon: 2 });
} else {
layer.msg(json.data, { icon: 1 });
}
table.reloadData('roomList', {}, false)
})
}, function () {
});
break;
};
});

57
Web/html/body/user.html
View File

@@ -24,7 +24,11 @@
<script type="text/html" id="toolDemo">
<div class="layui-clear-space">
<a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
<a class="layui-btn layui-btn-xs" lay-event="input">导入关注</a>
<!-- <a class="layui-btn layui-btn-xs" lay-event="input">导入关注</a> -->
<a class="layui-btn layui-btn-xs" lay-event="more">
导入
<i class="layui-icon layui-icon-down"></i>
</a>
</div>
</script>
<script>
@@ -143,8 +147,28 @@
var checkStatus = table.checkStatus(id);
var othis = lay(this);
switch (obj.event) {
case 'input':
onClickInput(data.uid)
case 'more':
dropdown.render({
elem: this, // 触发事件的 DOM 对象
show: true, // 外部事件触发即显示
data: [{
title: '关注列表',
id: 'follow'
}, {
title: '正在开播',
id: 'live'
}],
click: function (menudata) {
if (menudata.id === 'follow') {
onClickInput(data.uid)
} else if (menudata.id === 'live') {
onClickFollow(data.uid)
}
},
align: 'right', // 右对齐弹出
style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
})
break;
};
});
@@ -172,10 +196,33 @@
window.location.href = url.toString();
}
});
}
function onClickFollow(uid) {
layer.open({
type: 2, // page 层类型
area: ['650px', '400px'],
title: '选择主播',
shade: 0.6, // 遮罩透明度
shadeClose: false, // 点击遮罩区域，关闭弹层
maxmin: true, // 允许全屏最小化
anim: 1, // 0-6 的动画形式，-1 不开启
// btn: ['确定', '取消'],
content: '/html/ui/userFollowLive.html?uid=' + uid,
yes: function (index, layero) {
var iframeWin = window[layero.find('iframe')[0]['name']];
var anchorRoomId = iframeWin.$('#anchorRoomId')[0].value;
if (!hasString(anchorRoomId)) {
layer.msg("请选择")
return
}
let url = new URL(window.location.href);
url.searchParams.set('roomId', anchorRoomId);
window.location.href = url.toString();
}
});
}
});
</script>

26
Web/html/body/video.html
View File

@@ -42,15 +42,18 @@
<input type="checkbox" id="danmuCheckBox" title="弹幕" lay-skin="tag" lay-filter="danmuCheckBox" on checked>
</div>
<div class="layui-col-xs5" style="text-align: center;">
<div class="layui-col-xs4" style="text-align: center;">
&nbsp; <div id="slider" lay-options="{value: 100,input:true}"></div>
<span>弹幕透明度</span>
</div>
<div class="layui-col-xs2" style="text-align: right; align-self: center;">
弹幕装载数:<span id="danmuSize">你猜</span>
</div>
</div>
<div class="layui-row">
<div class="layui-col-xs2">&nbsp;</div>
<div class="layui-col-xs7">
<canvas id="giftChart" height="200"></canvas>
<div class="layui-col-xs7" style="width: auto; height: 50%;">
<canvas id="giftChart" style="width: 100%; height: 100%;"></canvas>
</div>
</div>
<div style="margin-bottom: 10vh;"></div>
@@ -232,6 +235,7 @@
initChart(roomId, options.id)
});
var chartView = null;
function initChart(roomId, videoId) {
getVideoGiftInfo(roomId, videoId)
.then(data => {
@@ -241,20 +245,22 @@
var lables = [];
var values = [];
data.data.guardInfo.forEach(item => {
lables.push(item.gift_name+"\n"+item.total_price/100+"¥")
lables.push(item.gift_name + "\n" + item.total_price / 100 + "¥")
values.push(item.total_num)
});
data.data.giftInfo.forEach(item => {
lables.push(item.gift_name+"\n"+item.total_price/100+"¥")
lables.push(item.gift_name + "\n" + item.total_price / 100 + "¥")
values.push(item.total_gift_num)
});
new Chart($('#giftChart').get(0), {
if(chartView!==null){
chartView.destroy()
}
chartView = new Chart($('#giftChart').get(0), {
type: 'pie',
data: {
labels: lables,
datasets: [{
label: '礼物(总额:'+data.data.price/100+"¥)",
label: '礼物(总额:' + data.data.price / 100 + "¥)",
data: values,
borderWidth: 1
}
@@ -313,7 +319,8 @@
}
function playVideo(url) {
var video = document.getElementById('videoElement');
var videoSrc = url;
var videoSrc = window.location.origin + url;
console.log('url = ' + videoSrc)
var hls = new Hls();
hls.loadSource(videoSrc);
hls.attachMedia(video);
@@ -328,6 +335,7 @@
getDanmu(getParam('roomId'), videoId)
.then(data => {
barrageRenderer.setBarrages(data.data.danmu);
$('#danmuSize').get(0).innerHTML = data.data.danmu.length
initSC(data.data.superChat)
})

60
Web/html/ui/createConfig.html
View File

@@ -89,15 +89,16 @@
<script src="/js/httpUtils.js"></script>
<script src="/js/CommonConfig.js"></script>
<script>
function timeTips(isLive,that) {
if(isLive){
function timeTips(isLive, that) {
if (isLive) {
layer.tips('是从开始到结束时间范围内,主播开播会启动录制,超过结束范围不会中断正在录制的任务', that);
}else{
} else {
layer.tips('仅在当前时间范围内录制,如遇到正在直播,则延迟到下播时停止录制', that);
}
}
var roomId = getParam("roomId");
var editArray = getParam("array")
layui.use(['form', 'laytpl', 'laydate'], function () {
var form = layui.form;
@@ -123,15 +124,35 @@
}
field.weeks = weeks;
console.log(field)
addRoomConfig(field)
.then(json => {
layer.msg(json.message, function () {
if (json.status == 100) {
close()
}
})
if (editArray === null) {
var loadIndex=showLoadingDialog();
addRoomConfig(field)
.then(json => {
layer.close(loadIndex)
layer.msg(json.message, function () {
if (json.status == 100) {
close()
}
})
})
} else {
var array = []
editArray.split(',').forEach(element => {
array.push(element)
});
var loadIndex=showLoadingDialog();
setArrayRoomConfig(array, field)
.then(json => {
layer.close(loadIndex)
layer.msg(json.message, function () {
if (json.status == 100) {
close()
}
})
})
}
})
return false; // 阻止默认 form 跳转
});
@@ -155,6 +176,9 @@
$('#btn_reset').get(0).disabled = true;
editRoom()
}
if (editArray !== null) {
editArrayRoom()
}
}
function getUserInfo() {
getBiliAllUser()
@@ -183,12 +207,20 @@
for (let i = 0; i < json.weeks.length; i++) {
result[`week_${json.weeks[i]}`] = true;
}
form.val('form-filter',result);
form.val('form-filter', result);
$('#url').get(0).disabled = true;
}
})
}
function editArrayRoom() {
$('#btn_reset').get(0).disabled = true;
$('#url').get(0).disabled = true;
var result = {
'url': editArray
};
form.val('form-filter', result);
}
init();
});
</script>

132
Web/html/ui/userFollowLive.html Normal file
View File

@@ -0,0 +1,132 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/layui/css/layui.css">
</head>
<table class="layui-hide" id="followList" lay-filter="followTable"></table>
<body>
</body>
<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 type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="select">配置选择项</button>
</div>
</script>
<script type="text/html" id="toolDemo">
<div class="layui-clear-space">
<a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
</div>
</script>
<script>
var userId = getParam("uid");
layui.use(function () {
var laytpl = layui.laytpl;
var table = layui.table;
table.render({
elem: '#followList',
url: '/live/config/followLive?userId=' + userId,
toolbar: '#toolbarDemo',
height: '350px',
totalRow: false, // 开启合计行
page: false,
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: 'uname', title: '用户名', width: 150, fixed: 'left' },
{ field: 'uid', title: 'UID', width: 150, sort: true, templet: '<div><a href="https://space.bilibili.com/{{= d.uid}}" target="_blank">{{= d.uid}}</a>' },
{ field: 'room_id', title: '房间号', width: 150, sort: true, templet: '<div><a href="https://live.bilibili.com/{{= d.room_id}}" target="_blank">{{= d.room_id}}</a>' },
{ field: 'face', title: '头像', width: 80, templet: '<div><image src="" onerror="showImage(\'{{= d.face }}\',this);" style="width: 30px;height: 30px;"></div>' },
{ field: 'title', title: '标题', width: 150, },
{ fixed: "right", title: "操作", width: 50, align: "center", toolbar: "#toolDemo" }
]],
done: function () {
onDone()
},
error: function (res, msg) {
console.log(res, msg)
}
});
function onDone() {
table.on('toolbar(followTable)', function (obj) {
if (obj.event === 'select') {
var data = table.checkStatus(obj.config.id).data;
console.log(data)
var array = []
data.forEach(item => {
array.push({
"roomId": item.room_id,
"uname": item.uname
})
});
var loadIndex = layer.msg('配置中', {
icon: 16,
shade: 0.6
});
addFollowRoomList(JSON.stringify(array))
.then(json => {
layer.close(loadIndex)
layer.msg("已成功配置" + json.count + "个房间")
})
}
})
table.on('tool(followTable)', function (obj) {
if (obj.event === 'add') {
var loadIndex = layer.msg('配置中', {
icon: 16,
shade: 0.6
});
var array = []
array.push({
"roomId": obj.data.room_id,
"uname": obj.data.uname
})
addFollowRoomList(JSON.stringify(array))
.then(data => {
layer.close(loadIndex)
layer.msg("已成功配置" + data.count + "个房间")
})
}
})
}
function openTips(message, mid) {
layer.alert(message, {
title: "提示",
btn: ['打开配置页', '前往UP主页', '取消'],
btnAlign: 'c', // 按钮居中显示
btn1: function () {
window.open("/html/body/live.html?type=createRoom", '_blank')
},
btn2: function () {
window.open("https://space.bilibili.com/" + mid, '_blank')
},
btn3: function () {
}
});
}
})
</script>