178 lines
5.4 KiB
HTML
178 lines
5.4 KiB
HTML
<!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>DD监视器</title>
|
||
<link rel="stylesheet" href="/layui/css/layui.css">
|
||
</head>
|
||
|
||
<body>
|
||
<div id="header"></div>
|
||
<div class="layui-row layui-col-space15">
|
||
<div id="card"></div>
|
||
</div><br>
|
||
<div id="page"></div>
|
||
</body>
|
||
|
||
|
||
<script id="liveCard" type="text/html">
|
||
{{# layui.each(d.data, function(index, item){ }}
|
||
<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
|
||
<div class="layui-bg-gray" style="padding: 16px;">
|
||
<div class="layui-row layui-col-space16">
|
||
<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">
|
||
<img src="#" onerror="showTmpImage('{{= item.cover}}',this)" onclick="toLive('{{= item.roomId}}')" style="width: 100%; height: 100%;"/><br>
|
||
<!-- <img src="#" onerror="showImage('{{= item.cover}}',this)" onclick="toLive('{{= item.roomId}}')" style="width: 100%; height: 100%;"/><br> -->
|
||
{{= item.title}}<br>
|
||
直播录制状态:
|
||
{{# if(item.downloadVideo){ }}
|
||
<span style="color: #16b777" onclick="clickVideo('{{= item.roomId}}',true)">录制中</span>
|
||
{{# } else{ }}
|
||
<span style="color: #FD482C" onclick="clickVideo('{{= item.roomId}}',false)">监听中</span>
|
||
{{# }; }}<br>
|
||
弹幕录制状态:
|
||
{{# if(item.danmu){ }}
|
||
<span style="color: #16b777" onclick="clickDanmu('{{= item.roomId}}',true)">录制中</span>
|
||
{{# } else{ }}
|
||
<span style="color: #FD482C" onclick="clickDanmu('{{= item.roomId}}',false)">监听中</span>
|
||
{{# }; }}<br>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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 = 0;
|
||
$('#header').load("/html/header.html");
|
||
function toLive(roomId){
|
||
console.log(roomId)
|
||
window.open("https://live.bilibili.com/"+roomId,'_blank')
|
||
}
|
||
function clickVideo(roomId, status) {
|
||
const title = "是否" + (status ? "停止" : "启动") + "录制视频?"
|
||
layer.confirm(title, { icon: 3 }, function () {
|
||
if (status) {
|
||
stopLiveVideo(roomId)
|
||
.then(data => {
|
||
layer.msg(data.message, { icon: (data.status == 100 ? 1 : 0) }, function () {
|
||
location.reload();
|
||
});
|
||
})
|
||
} else {
|
||
startLiveVideo(roomId)
|
||
.then(data => {
|
||
layer.msg(data.message, { icon: (data.status == 100 ? 1 : 0) }, function () {
|
||
location.reload();
|
||
});
|
||
})
|
||
}
|
||
|
||
}, function () {
|
||
|
||
});
|
||
}
|
||
function clickDanmu(roomId, status) {
|
||
const title = "是否" + (status ? "停止" : "启动") + "录制弹幕?"
|
||
layer.confirm(title, { icon: 3 }, function () {
|
||
if (status) {
|
||
stopLiveDanmu(roomId)
|
||
.then(data => {
|
||
layer.msg(data.message, { icon: (data.status == 100 ? 1 : 0) }, function () {
|
||
location.reload();
|
||
});
|
||
|
||
})
|
||
} else {
|
||
startLiveDanmu(roomId)
|
||
.then(data => {
|
||
layer.msg(data.message, { icon: (data.status == 100 ? 1 : 0) }, function () {
|
||
location.reload();
|
||
});
|
||
})
|
||
}
|
||
}, function () {
|
||
layer.msg('点击取消的回调');
|
||
});
|
||
}
|
||
</script>
|
||
<script>
|
||
layui.use(['laytpl', 'laypage'], function () {
|
||
var laytpl = layui.laytpl;
|
||
var laypage = layui.laypage;
|
||
var pageIndex = 1;
|
||
var pageMax = 16;
|
||
var listCount=10;
|
||
var listMax=pageMax;
|
||
var initPage=true;
|
||
function initCard() {
|
||
var loadIndex = layer.msg('加载中', {
|
||
icon: 16,
|
||
shade: 0.4
|
||
});
|
||
getAllLive(pageIndex, pageMax)
|
||
.then(data => {
|
||
listCount=data.count;
|
||
if(initPage){
|
||
initPage=false;
|
||
initPageView();
|
||
}
|
||
var view = $("#card").get(0);
|
||
laytpl($('#liveCard').get(0).innerHTML).render(data, function (html) {
|
||
view.innerHTML = html;
|
||
layer.close(loadIndex)
|
||
});
|
||
|
||
})
|
||
}
|
||
function init() {
|
||
initCard()
|
||
}
|
||
function initPageView(){
|
||
laypage.render({
|
||
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()
|
||
}
|
||
}
|
||
});
|
||
}
|
||
init()
|
||
})
|
||
function onButton() {
|
||
|
||
}
|
||
</script>
|
||
<style>
|
||
|
||
</style>
|
||
|
||
</html> |