565 lines
20 KiB
HTML
565 lines
20 KiB
HTML
<!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> |