2021-04-01 14:44:02 +08:00
|
|
|
<!DOCTYPE html>
|
2024-10-29 18:29:43 +08:00
|
|
|
<html lang="zh-CN">
|
2024-10-31 18:23:39 +08:00
|
|
|
|
2021-04-01 14:44:02 +08:00
|
|
|
<head>
|
2024-10-31 18:23:39 +08:00
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
|
|
|
<title>DD监视器</title>
|
|
|
|
|
<link rel="stylesheet" href="/layui/css/layui.css">
|
2021-04-01 14:44:02 +08:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
2024-10-31 18:23:39 +08:00
|
|
|
<div id="header"></div>
|
|
|
|
|
<div class="layui-row layui-col-space15">
|
2024-11-21 18:29:19 +08:00
|
|
|
<div id="follow">
|
|
|
|
|
</div>
|
2024-10-31 18:23:39 +08:00
|
|
|
<div id="card"></div>
|
2024-11-01 00:15:12 +08:00
|
|
|
</div><br>
|
|
|
|
|
<div id="page"></div>
|
2024-10-31 18:23:39 +08:00
|
|
|
</body>
|
|
|
|
|
|
2024-11-21 18:29:19 +08:00
|
|
|
<script id="followStatus" type="text/html">
|
|
|
|
|
{{# layui.each(d.data, function(index, item){ }}
|
|
|
|
|
{{# if(item.status !== -1) { }}
|
|
|
|
|
{{# var color = item.status === -100 ? "#16b777" : "#ffb800"; }}
|
|
|
|
|
{{# var icon = item.status === -100 ? "layui-icon-ok-circle" : "layui-icon-flag"; }}
|
|
|
|
|
{{# var isOver = item.status === -100; }}
|
2024-10-31 18:23:39 +08:00
|
|
|
|
2024-11-21 18:29:19 +08:00
|
|
|
<blockquote class="layui-elem-quote" style="border-left: 5px solid {{= color}}; margin-left: 5dvw; margin-top: 5dvh; margin-right: 5dvw;">
|
|
|
|
|
<i class="layui-icon {{= icon }}" style="font-size: 20px; color: {{= color}};"></i>
|
|
|
|
|
<span style="font-size: 16px;" id="{{= item.data}}">
|
|
|
|
|
{{= item.message}}
|
|
|
|
|
</span>
|
|
|
|
|
{{# if(isOver) { }}
|
|
|
|
|
<span style="float: right;">
|
|
|
|
|
<button type="button" class="layui-btn layui-btn-sm" onclick="confirmFollow({{= item.data}})">确认</button>
|
|
|
|
|
</span>
|
|
|
|
|
{{# } else { }}
|
|
|
|
|
<span style="float: right;">
|
|
|
|
|
<button type="button" class="layui-btn layui-btn-sm layui-bg-orange" onclick="confirmFollow({{= item.data}})">取消</button>
|
|
|
|
|
</span>
|
|
|
|
|
{{# } }}
|
|
|
|
|
</blockquote>
|
|
|
|
|
{{# } }}
|
|
|
|
|
{{# }); }}
|
|
|
|
|
</script>
|
2024-10-31 18:23:39 +08:00
|
|
|
<script id="liveCard" type="text/html">
|
|
|
|
|
{{# layui.each(d.data, function(index, item){ }}
|
2024-11-01 00:15:12 +08:00
|
|
|
<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
|
2024-10-31 18:23:39 +08:00
|
|
|
<div class="layui-bg-gray" style="padding: 16px;">
|
2024-11-01 18:21:57 +08:00
|
|
|
<div class="layui-row layui-col-space16">
|
2024-10-31 18:23:39 +08:00
|
|
|
<div class="layui-card">
|
|
|
|
|
<div class="layui-card-header" ><img src="#" onerror="showImage('{{= item.anchorFace}}',this)" style="width: 40px; height: 40px;"/> {{= item.anchorName}}
|
|
|
|
|
<span style="float: right;">直播状态：
|
|
|
|
|
{{# if(item.live){ }}
|
|
|
|
|
<span class="layui-badge-dot layui-bg-green"></span>
|
|
|
|
|
{{# } else{ }}
|
|
|
|
|
<span class="layui-badge-dot"></span>
|
|
|
|
|
{{# }; }}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="layui-card-body">
|
2024-11-27 17:39:02 +08:00
|
|
|
<div style="overflow: hidden;position: relative; width: 100%; height: 100%; padding-bottom: 52%;">
|
|
|
|
|
<img src="#" onerror="showTmpImage('{{= item.cover}}',this)" onclick="toLive('{{= item.roomId}}')" style="max-width: 100%; max-height: 100%; object-fit: cover; display: block; margin: auto; position: absolute; "/><br>
|
|
|
|
|
</div>
|
|
|
|
|
|
2024-11-01 00:15:12 +08:00
|
|
|
<!-- <img src="#" onerror="showImage('{{= item.cover}}',this)" onclick="toLive('{{= item.roomId}}')" style="width: 100%; height: 100%;"/><br> -->
|
2024-10-31 18:23:39 +08:00
|
|
|
{{= item.title}}<br>
|
2024-11-21 18:29:19 +08:00
|
|
|
<p>开播时长:{{= item.liveTime}}</p>
|
2024-10-31 18:23:39 +08:00
|
|
|
直播录制状态:
|
|
|
|
|
{{# if(item.downloadVideo){ }}
|
|
|
|
|
<span style="color: #16b777" onclick="clickVideo('{{= item.roomId}}',true)">录制中</span>
|
|
|
|
|
{{# } else{ }}
|
2024-11-21 18:29:19 +08:00
|
|
|
<span style="color: #FD482C" onclick="clickVideo('{{= item.roomId}}',false)">待机中</span>
|
2024-10-31 18:23:39 +08:00
|
|
|
{{# }; }}<br>
|
|
|
|
|
弹幕录制状态:
|
|
|
|
|
{{# if(item.danmu){ }}
|
|
|
|
|
<span style="color: #16b777" onclick="clickDanmu('{{= item.roomId}}',true)">录制中</span>
|
|
|
|
|
{{# } else{ }}
|
2024-11-21 18:29:19 +08:00
|
|
|
<span style="color: #FD482C" onclick="clickDanmu('{{= item.roomId}}',false)">待机中</span>
|
2024-10-31 18:23:39 +08:00
|
|
|
{{# }; }}<br>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
{{# }); }}
|
|
|
|
|
</script>
|
|
|
|
|
|
2021-04-01 14:44:02 +08:00
|
|
|
|
|
|
|
|
<script src="/layui/layui.js"></script>
|
|
|
|
|
<script src="/js/jquery-3.2.1.js"></script>
|
2024-10-29 18:29:43 +08:00
|
|
|
<script src="/js/CommonConfig.js"></script>
|
|
|
|
|
<script src="/js/httpUtils.js"></script>
|
2021-04-01 14:44:02 +08:00
|
|
|
<script>
|
2024-10-31 18:23:39 +08:00
|
|
|
headerModel = 0;
|
|
|
|
|
$('#header').load("/html/header.html");
|
2024-11-21 18:29:19 +08:00
|
|
|
function toLive(roomId) {
|
2024-11-01 00:15:12 +08:00
|
|
|
console.log(roomId)
|
2024-11-21 18:29:19 +08:00
|
|
|
window.open("https://live.bilibili.com/" + roomId, '_blank')
|
2024-11-01 00:15:12 +08:00
|
|
|
}
|
2024-10-31 18:23:39 +08:00
|
|
|
function clickVideo(roomId, status) {
|
|
|
|
|
const title = "是否" + (status ? "停止" : "启动") + "录制视频?"
|
|
|
|
|
layer.confirm(title, { icon: 3 }, function () {
|
|
|
|
|
if (status) {
|
|
|
|
|
stopLiveVideo(roomId)
|
|
|
|
|
.then(data => {
|
2024-11-01 00:15:12 +08:00
|
|
|
layer.msg(data.message, { icon: (data.status == 100 ? 1 : 0) }, function () {
|
2024-10-31 18:23:39 +08:00
|
|
|
location.reload();
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
startLiveVideo(roomId)
|
|
|
|
|
.then(data => {
|
2024-11-01 00:15:12 +08:00
|
|
|
layer.msg(data.message, { icon: (data.status == 100 ? 1 : 0) }, function () {
|
2024-10-31 18:23:39 +08:00
|
|
|
location.reload();
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}, function () {
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
function clickDanmu(roomId, status) {
|
|
|
|
|
const title = "是否" + (status ? "停止" : "启动") + "录制弹幕?"
|
|
|
|
|
layer.confirm(title, { icon: 3 }, function () {
|
|
|
|
|
if (status) {
|
|
|
|
|
stopLiveDanmu(roomId)
|
|
|
|
|
.then(data => {
|
2024-11-01 00:15:12 +08:00
|
|
|
layer.msg(data.message, { icon: (data.status == 100 ? 1 : 0) }, function () {
|
2024-10-31 18:23:39 +08:00
|
|
|
location.reload();
|
|
|
|
|
});
|
2024-11-01 00:15:12 +08:00
|
|
|
|
2024-10-31 18:23:39 +08:00
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
startLiveDanmu(roomId)
|
|
|
|
|
.then(data => {
|
2024-11-01 00:15:12 +08:00
|
|
|
layer.msg(data.message, { icon: (data.status == 100 ? 1 : 0) }, function () {
|
2024-10-31 18:23:39 +08:00
|
|
|
location.reload();
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}, function () {
|
|
|
|
|
layer.msg('点击取消的回调');
|
|
|
|
|
});
|
|
|
|
|
}
|
2024-11-21 18:29:19 +08:00
|
|
|
function confirmFollow(userId) {
|
|
|
|
|
confirmFollowStatus(userId)
|
|
|
|
|
.then(data => {
|
|
|
|
|
layer.msg(data.message)
|
|
|
|
|
})
|
|
|
|
|
}
|
2021-04-01 14:44:02 +08:00
|
|
|
</script>
|
2024-10-29 18:29:43 +08:00
|
|
|
<script>
|
2024-11-01 00:15:12 +08:00
|
|
|
layui.use(['laytpl', 'laypage'], function () {
|
2024-10-31 18:23:39 +08:00
|
|
|
var laytpl = layui.laytpl;
|
2024-11-01 00:15:12 +08:00
|
|
|
var laypage = layui.laypage;
|
2024-11-03 15:32:20 +08:00
|
|
|
var pageIndex = 1;
|
|
|
|
|
var pageMax = 16;
|
2024-11-21 18:29:19 +08:00
|
|
|
var listCount = 10;
|
|
|
|
|
var listMax = pageMax;
|
|
|
|
|
var initPage = true;
|
2024-10-31 18:23:39 +08:00
|
|
|
function initCard() {
|
2024-11-25 18:03:17 +08:00
|
|
|
var loadIndex = showLoadingDialog();
|
2024-11-01 00:15:12 +08:00
|
|
|
getAllLive(pageIndex, pageMax)
|
2024-10-31 18:23:39 +08:00
|
|
|
.then(data => {
|
2024-11-21 18:29:19 +08:00
|
|
|
listCount = data.count;
|
|
|
|
|
if (initPage) {
|
|
|
|
|
initPage = false;
|
2024-11-01 00:15:12 +08:00
|
|
|
initPageView();
|
|
|
|
|
}
|
2024-10-31 18:23:39 +08:00
|
|
|
var view = $("#card").get(0);
|
|
|
|
|
laytpl($('#liveCard').get(0).innerHTML).render(data, function (html) {
|
2024-11-01 00:15:12 +08:00
|
|
|
view.innerHTML = html;
|
|
|
|
|
layer.close(loadIndex)
|
2024-10-31 18:23:39 +08:00
|
|
|
});
|
2024-11-21 18:29:19 +08:00
|
|
|
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
function initFollowStatus(init) {
|
|
|
|
|
checkFollowStatus('')
|
|
|
|
|
.then(data => {
|
|
|
|
|
var tmp = -1;
|
|
|
|
|
data.data.forEach(element => {
|
|
|
|
|
tmp = element.status;
|
|
|
|
|
});
|
|
|
|
|
if (tmp === -1) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
if (init) {
|
|
|
|
|
var view = $("#follow").get(0);
|
|
|
|
|
laytpl($('#followStatus').get(0).innerHTML).render(data, function (html) {
|
|
|
|
|
view.innerHTML = html;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
setTimeout(() => {
|
2024-11-22 16:02:11 +08:00
|
|
|
// data.data.forEach(item =>{
|
|
|
|
|
// if(document.getElementById(item.data)!==null){
|
|
|
|
|
// document.getElementById(item.data).innerHTML=item.message;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// })
|
2024-11-21 18:29:19 +08:00
|
|
|
initFollowStatus(true)
|
|
|
|
|
}, 1000);
|
|
|
|
|
|
|
|
|
|
|
2024-10-29 18:29:43 +08:00
|
|
|
})
|
2024-10-31 18:23:39 +08:00
|
|
|
}
|
|
|
|
|
function init() {
|
2024-11-21 18:29:19 +08:00
|
|
|
initCard();
|
|
|
|
|
initFollowStatus(true);
|
2024-10-31 18:23:39 +08:00
|
|
|
}
|
2024-11-21 18:29:19 +08:00
|
|
|
function initPageView() {
|
2024-11-01 00:15:12 +08:00
|
|
|
laypage.render({
|
2024-11-21 18:29:19 +08:00
|
|
|
elem: 'page',
|
|
|
|
|
limit: 16,
|
|
|
|
|
curr: pageIndex,
|
|
|
|
|
limits: [4, 8, 16, 24, 32, 40],
|
|
|
|
|
layout: ['prev', 'page', 'next', 'limit'],
|
|
|
|
|
count: listCount, // 数据总数
|
|
|
|
|
jump: function (obj, first) {
|
|
|
|
|
listMax = obj.limit
|
|
|
|
|
if (!first) {
|
|
|
|
|
pageIndex = obj.curr;
|
|
|
|
|
pageMax = obj.limit;
|
|
|
|
|
initCard()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
2024-11-01 00:15:12 +08:00
|
|
|
}
|
2024-10-31 18:23:39 +08:00
|
|
|
init()
|
|
|
|
|
})
|
|
|
|
|
function onButton() {
|
|
|
|
|
|
|
|
|
|
}
|
2024-10-29 18:29:43 +08:00
|
|
|
</script>
|
2021-04-01 14:44:02 +08:00
|
|
|
<style>
|
2024-10-29 18:29:43 +08:00
|
|
|
|
2021-04-01 14:44:02 +08:00
|
|
|
</style>
|
2024-10-31 18:23:39 +08:00
|
|
|
|
2021-04-01 14:44:02 +08:00
|
|
|
</html>
|
