229 lines
10 KiB
HTML
229 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
<title>用户中心</title>
|
||
<link rel="stylesheet" href="/layui/css/layui.css">
|
||
</head>
|
||
|
||
<body>
|
||
<div class="layui-layout layui-layout-admin">
|
||
<div id="header"></div>
|
||
<div class="layui-body" style="left: 0px;">
|
||
<div style="width: 40%;height: 25%;margin-left: 25%; margin-top: 2%;">
|
||
<blockquote class="layui-elem-quote" style="background-color: #FFFFFF; height: 50%;">
|
||
<div align="center">
|
||
哔哩哔哩账号，用于后台监控数据及录屏~
|
||
<p></p>
|
||
<a href="javascript:;" id="login"><img src="https://static.hdslb.com/images/akari.jpg"
|
||
class="layui-nav-img" id="bili_icon_img"
|
||
style="height: 80%;width: 10%">
|
||
<p></p>
|
||
<span id='bili_login_text'>管理员哔哩哔哩登陆</span></a>
|
||
</div>
|
||
</blockquote>
|
||
<div class="layui-card" style="margin-top: 5%;height: 120%">
|
||
<div class="layui-card-header">用户设置</div>
|
||
<div class="layui-card-body">
|
||
<form class="layui-form" action="" style="margin-top: 2%;width: 80%">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">修改名称</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="user" required lay-verify="required" placeholder="新名称"
|
||
autocomplete="off" class="layui-input">
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">修改密码</label>
|
||
<div class="layui-input-block">
|
||
<input type="password" name="password" required lay-verify="required" placeholder="新密码"
|
||
autocomplete="off" class="layui-input">
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<div class="layui-input-block">
|
||
<button class="layui-btn" type="button" lay-submit lay-filter="formDemo">立即提交</button>
|
||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div id="config" class="layui-card" style="margin-top: 5%;height: 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>
|
||
|
||
<script src="/layui/layui.js"></script>
|
||
<script src="/js/jquery-3.2.1.js"></script>
|
||
<script src="/js/qrcode.min.js"></script>
|
||
<script>
|
||
layui.use(['layer', 'form', 'element'], function () {
|
||
let layer = layui.layer
|
||
, form = layui.form;
|
||
form.on('submit(formDemo)', function (data) {
|
||
console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
|
||
$.post('/user/set/update.do', data.field, function (json) {
|
||
if (json.code !== undefined) {
|
||
layer.msg(json.msg)
|
||
if (josn.code === 0) {
|
||
window.location.reload()
|
||
}
|
||
} else {
|
||
layer.msg("可能未登录")
|
||
}
|
||
})
|
||
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
|
||
});
|
||
$.post('/system/get/config.do', function (json) {
|
||
if (json.code !== undefined) {
|
||
$('#config').css('display', 'block')
|
||
if (json.data.userReg === '1') {
|
||
$('#userReg').prop('checked', true);
|
||
}
|
||
if (json.data.biliLive === '1') {
|
||
$('#saveBiliLive').prop('checked', true);
|
||
}
|
||
form.render();
|
||
}
|
||
})
|
||
$.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();
|
||
}
|
||
})
|
||
$('#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的路径'
|
||
})
|
||
});
|
||
</script>
|
||
</body>
|
||
<style>
|
||
.layui-body {
|
||
position: relative;
|
||
z-index: 0;
|
||
background-color: #F2F2F2;
|
||
}
|
||
</style>
|
||
</html> |