CTLELE/html/settings.html

565 lines
20 KiB
HTML
Raw Permalink Normal View History

2023-08-10 10:39:56 +08:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设置页面</title>
<link rel="stylesheet" href="../plugins/layui/css/layui.css">
<style>
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.login {
width: 100%;
height: 100%;
position: absolute;
background: url(../image/login.png) no-repeat;
background-size: 100% 100%;
}
.log {
position: absolute;
width: 160px;
height: 80px;
left: 39px;
margin-top: 40px;
}
.conter {
position: absolute;
width: 500px;
height: 400px;
background-color: #fff;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
border-radius: 6px;
}
.conter1 {
position: absolute;
right: 50px;
bottom: 50px;
color: #fff;
background-color: aqua;
border-radius: 20px;
padding: 10px 30px;
}
.conter2 {
display: inline-block;
margin-left: 15px;
}
.menu_content {
display: flex;
width: 60%;
height: 20%;
text-align: center;
margin: 23% auto;
align-items: center;
}
.menu_btn {
width: 25%;
height: 100%;
padding: 5%;
justify-content: center;
}
.menu_btn>div:nth-child(1) {
height: 45%;
width: 73%;
margin: 0 auto;
}
.loginfor {
position: relative;
}
.reg_from div {
display: inline-block;
width: 66px;
}
.reg_from li {
margin: 20px 60px;
list-style: none;
}
.reg_from img {
width: 18px;
height: 18px;
margin-left: 15px;
}
.btn {
display: inline-block;
height: 27px;
color: #fff;
}
.hide_view {
display: none;
padding: 20px;
}
.icon {
width: 140px;
height: 130px;
margin-top: 200px;
}
.inline {
display: inline-block;
vertical-align: top;
}
.exit_bth {
position: absolute;
right: 120px;
bottom: 60px;
}
.layui-layer-molv .layui-layer-title {
color: black !important;
background-color: white !important;
}
.layui-layer-molv .layui-layer-btn a {
background: #1e9fff !important;
;
border-color: #1e9fff !important;
color: white !important;
}
.layui-form-select dl dd.layui-this {
background-color: #1e9fff !important;
;
}
</style>
</head>
<body>
<div class="login">
<div class="log" style="display: none;">
<img src="../image/log1.png" style="width:100%;">
</div>
<div class="menu_content">
<div class="menu_btn" id="ipconfigclick">
<div>
<img src="../image/port.png" style="width: 100%;height: 100%;" />
</div>
<div class="btn" style="margin-top: 10px;">ip和端口配置</div>
</div>
<div class="menu_btn" id="jumpconfig">
<div>
<img src="../image/jump.png" style="width:100%;height:100%" />
</div>
<div class="btn" style="margin-top:10px;">跳转页面配置</div>
</div>
<div class="menu_btn" id="userconfig">
<div>
<img src="../image/user.png" style="width: 100%;height: 100%;" />
</div>
<div class="btn" style="margin-top: 10px;"> 用户名密码配置</div>
</div>
<div class="menu_btn" id="Idconfig">
<div>
<img src="../image/num.png" style="width:100%;height: 100%;" />
</div>
<div class="btn" style="margin-top: 10px;">编号配置</div>
</div>
</div>
<div class="layui-btn layui-btn-danger exit_bth">
<p onclick="tuichu()">退出</p>
</div>
<div id="ipconfig_view" class="hide_view">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">IP</label>
<div class="layui-input-block">
<input id="ipadd" type="text" name="title" required lay-verify="required" placeholder="请输入Ip地址" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">端口</label>
<div class="layui-input-block">
<input id="port" type="number" name="title" 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="text" id="appversion" disabled class="layui-input">
</div>
</div>
</form>
</div>
<div class="hide_view" id="jump_view">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">请选择用户</label>
<div class="layui-input-block">
<select id="userselect" lay-verify="required">
<option value="">请选择用户</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">跳转的页面</label>
<div class="layui-input-block">
<select id="jumpurl" lay-verify="required">
<option value="">请选择跳转的页面</option>
</select>
</div>
</div>
</form>
</div>
<div class="hide_view" id="user_view">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">选择用户</label>
<div class="layui-input-block">
<select id="userselectpsd" onchange="psdchange()" name="user" lay-verify="required">
<option value="">请选择用户</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input id="username" type="text" 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 id="oldpsd" type="text" 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 id="newPsd" type="password" 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 id="confirmPassword" type="password" required lay-verify="required" placeholder="请再次输入新密码" autocomplete="off" class="layui-input">
</div>
</div>
</form>
</div>
<div class="hide_view" id="Idconfig_view" style="display: none;padding: 10%;">
<div style="width: 30%;">
<div class="layui-btn layui-btn-normal" onclick="openWinn('updateFrame0')">黑山变屏位图</div>
</div>
<div style="width: 30%;">
<div class="layui-btn layui-btn-normal" onclick="openWinn('updateFrame1')">唐庄变屏位图</div>
</div>
<div style="width: 30%;">
<div class="layui-btn layui-btn-normal" onclick="openWinn('updateFrame2')">唐庄变屏位图</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/mui.min.js"></script>
<script type="text/javascript" src="../script/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../script/command.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/crc.js"></script>
<script type="text/javascript" src="../script/cache.js"></script>
<script type="text/javascript" src="../plugins/layui/layui.js"></script>
<script>
var SocketServerClient = null;
var db = null;
var socketManager = null;
// 初始值
apiready = function() {
db = api.require('db');
socketManager = api.require('socketManager');
ceatesql();
ver();
};
var layer, from;
layui.use(['layer', 'form'], function() {
layer = layui.layer;
form = layui.form;
// ip和端口号弹窗
$("#ipconfigclick").bind("click", function() {
layer.open({
skin: 'layui-layer-molv',
type: 1,
area: ['50%', '50%'],
title: 'ip和端口号设置',
shadeClose: false,
content: $('#ipconfig_view'),
btn: ['确定', '取消'],
yes: function(index, layero) {
//收集表单信息
var port = $('#port').val();
var ipadd = $('#ipadd').val();
//验证表单信息
if (port == '' || port == null) {
alert('请输入端口号');
return false;
}
if (ipadd == '' || ipadd == null) {
alert('请输入Ip地址');
return false;
}
preservation();
layer.close(index);
},
});
});
// 跳转页面配置
$('#jumpconfig').bind("click", function() {
layer.open({
skin: 'layui-layer-molv',
type: 1,
area: ['50%', '50%'],
title: '跳转配置',
shadeClose: false,
content: $('#jump_view'),
btn: ['确定', '取消'],
yes: function(index, layero) {
var userselect = $('#userselect').val();
var jumpurl = $('#jumpurl').val();
if (userselect == null || userselect == '') {
alert("请选择用户");
return false;
}
if (jumpurl == '' || jumpurl == null) {
alert("请选择用户要跳转的页面");
return false;
}
userinfochange();
layer.close(index);
},
});
})
//用户名和密码配置
$('#userconfig').bind("click", function() {
layer.open({
skin: 'layui-layer-molv',
type: 1,
area: ['50%', '50%'],
title: '跳转配置',
shadeClose: false,
content: $('#user_view'),
btn: ['确定', '取消'],
yes: function(index, layero) {
var userselectpsd = $('#userselectpsd').val();
var username = $('#username').val();
var oldpsd = $('#oldpsd').val();
var psdchangeold = $('#psdchangeold').val();
var newPsd = $('#newPsd').val();
var confirmPassword = $('#confirmPassword').val();
if (userselectpsd == null || userselectpsd == '') {
alert("请选择用户");
return false;
}
if (username == '' || username == null) {
alert("请输入用户名");
return false;
}
if (oldpsd == '' || oldpsd == null) {
alert("请输入原始密码");
return false;
}
if (newPsd == null || newPsd == '') {
alert("请输入新密码");
return false;
}
if (confirmPassword == null || confirmPassword == '') {
alert("请输入确认密码");
return false;
}
if (newPsd != confirmPassword) {
alert("两次密码输入不一致,请检查");
return false;
}
if (oldpsd != psdchangeold) {
alert("原始密码不对,请检查");
return false;
}
userinfopreservation();
layer.close(index);
},
});
})
$('#Idconfig').bind("click", function() {
$('#Idconfig_view').css('display', 'flex');
layer.open({
type: 1,
area: ['50%', '50%'],
title: false,
shadeClose: true,
content: $('#Idconfig_view'),
});
})
})
//编号配置
function openWinn(name) {
openHtml(name, name + ".html");
}
//设置版本号、初始化查询数据库、查询当前用户
function ver() {
var version = api.version;
$('#appversion').val(version);
//查询ip数据库
select(db, 'SELECT * FROM Ipconfig;', function(ret, err) {
var iparray = ret.data;
if (iparray != '' && iparray != null) {
$('#ipadd').val(iparray[0].ipadd)
$('#port').val(iparray[0].port)
}
})
//查询用户数据库
select(db, 'SELECT * FROM User;', function(ret, err) {
var Userarray = ret.data;
Userarray.forEach(function(element) {
$('#userselect').append('<option value ="' + element.Id + '">' + element.Name + '</option>');
$('#userselectpsd').append('<option value ="' + element.Id + '">' + element.Name + '</option>');
})
layui.form.render("select");
})
//查询设备对应表
select(db, 'SELECT * FROM Shebie;', function(ret, err) {
var Userarray = ret.data;
Userarray.forEach(function(element) {
$('#jumpurl').append('<option value ="' + element.jumpurl + '">' + element.alias + '</option>');
})
layui.form.render("select");
})
}
//老密码
function oldpsd() {
var userId = $('#userselect').val();
select(db, 'SELECT * FROM User WHERE Id = ' + userId + ';', function(ret, err) {
$('#oldPassword').value(ret.data[0].psd);
})
}
function psdchange() {
var userId = $('#userselectpsd').val();
select(db, 'SELECT * FROM User WHERE Id = ' + userId + ';', function(ret, err) {
$('#psdchangeold').val(ret.data[0].psd);
})
}
//创建数据库
function ceatesql() {
execute(db, 'CREATE TABLE Ipconfig(id int,ipadd varchar(255),port varchar(255))', function(ret, err) {})
}
//ip保存
function preservation() {
//收集表单信息
var port = $('#port').val();
var ipadd = $('#ipadd').val();
//操控ip数据表
select(db, "SELECT * FROM Ipconfig", function(ret, err) {
var array = ret.data;
if (array == '' || array == null) {
//插入数据库
execute(db, "INSERT INTO Ipconfig(id,ipadd,port) VALUES ('1','" + ipadd + "','" + port + "')", function(ret, err) {
if (ret.status) {
alert("保存成功")
} else {
alert("保存失败" + JSON.stringify(err))
}
})
} else {
//更改数据库
execute(db, "UPDATE Ipconfig SET ipadd='" + ipadd + "',port='" + port + "' WHERE id=1;", function(ret, err) {
if (ret.status) {
alert("保存成功")
} else {
alert("保存失败" + JSON.stringify(err))
}
})
}
})
}
//用户跳转保存
function userinfochange() {
var userselect = $('#userselect').val();
var jumpurl = $('#jumpurl').val();
//操控用户数据表
select(db, "SELECT * FROM User WHERE Id = " + userselect, function(ret, err) {
if (ret == '' || ret == null) {
alert("用户表查询出错")
} else {
execute(db, "UPDATE User SET jumpadd='" + jumpurl + "' WHERE Id = " + userselect + ";", function(ret, err) {
if (ret.status) {
alert("保存成功")
} else {
alert("保存失败" + JSON.stringify(err))
}
})
}
})
}
//用户更改账户名密码保存
function userinfopreservation() {
var userselectpsd = $('#userselectpsd').val();
var username = $('#username').val();
var oldpsd = $('#oldpsd').val();
var psdchangeold = $('#psdchangeold').val();
var newPsd = $('#newPsd').val();
var confirmPassword = $('#confirmPassword').val();
//操控用户数据表
select(db, "SELECT * FROM User WHERE Id = " + userselectpsd, function(ret, err) {
if (ret == '' || ret == null) {
alert("用户表查询出错")
} else {
execute(db, "UPDATE User SET psd='" + newPsd + "',Name ='" + username + "' WHERE Id = " + userselectpsd + ";", function(ret, err) {
if (ret.status) {
alert("保存成功")
} else {
alert("保存失败" + JSON.stringify(err))
}
})
}
})
}
//退出
function tuichu() {
api.closeWin();
}
function openHtml(name, url, params) {
api.openWin({
name: name,
url: url,
pageParam: params
});
}
</script>
</html>