<!DOCTYPE html>
|
<html lang="zh-CN">
|
|
<head>
|
<title>赣州洪水风险预警系统</title>
|
<meta charset="utf-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<!--图标-->
|
<link rel="stylesheet" type="text/css" href="login-fonts/css/font-awesome.min.css">
|
<!--布局框架-->
|
<link rel="stylesheet" type="text/css" href="login-css/util.css">
|
<!--主要样式-->
|
<link rel="stylesheet" type="text/css" href="login-css/main.css">
|
|
<script src="login-js/md5.js"></script>
|
<script src="login-js/jquery-3.3.1.min.js"></script>
|
<script src="login-js/layer/layer.js"></script>
|
</head>
|
|
<body>
|
|
<div class="login">
|
<div class="container-login100">
|
<div class="wrap-login100">
|
<div class="login100-pic js-tilt" data-tilt>
|
<img src="login-img/img-01.png" alt="IMG">
|
</div>
|
|
<form class="login100-form validate-form">
|
|
<span class="login100-form-title">
|
赣州洪水风险预警系统
|
</span>
|
|
<div class="wrap-input100 validate-input">
|
<input class="input100" id="LoginUser" type="text" name="text" placeholder="账号"
|
autocomplete="off">
|
<span class="focus-input100"></span>
|
<span class="symbol-input100">
|
<i class="fa fa-user" aria-hidden="true"></i>
|
</span>
|
|
</div>
|
<div class="user-msg" id="LoginUserMsg">
|
请输入用户账号
|
</div>
|
|
<div class="wrap-input100 validate-input">
|
<input class="input100" id="LoginPasd" type="password" name="pass" placeholder="密码"
|
autocomplete="off">
|
<span class="focus-input100"></span>
|
<span class="symbol-input100">
|
<i class="fa fa-lock" aria-hidden="true"></i>
|
</span>
|
</div>
|
<div class="user-msg" id="LoginPasdMsg">
|
请输入用户密码
|
</div>
|
|
<div class="wrap-input100 validate-input">
|
<input class="input-code" id="LoginCode" type="text" name="pass" placeholder="验证码"
|
autocomplete="off">
|
<canvas class="img-code" id="canvas"></canvas>
|
<span class="symbol-input100">
|
<i class="fa fa-shield" aria-hidden="true"></i>
|
</span>
|
</div>
|
|
<div class="user-msg" id="LoginCodeMsg">
|
请输入验证码
|
</div>
|
|
<div class="container-login100-form-btn">
|
<button type="button" class="login100-form-btn" id="LoginBtn">
|
登陆
|
</button>
|
</div>
|
|
</form>
|
</div>
|
</div>
|
|
<div class="login-bottom">
|
<p>
|
版权所有：赣江上游水文水资源监测中心 技术支持：江西汇图信息科技有限公司
|
</p>
|
</div>
|
</div>
|
|
<script>
|
|
$(function () {
|
var show_num = [];
|
draw(show_num);
|
|
$(document).keyup(function (event) {
|
if (event.keyCode == 13) {
|
$("#LoginBtn").trigger("click");
|
}
|
});
|
|
$("#canvas").on('click', function () {
|
draw(show_num);
|
})
|
|
$('#LoginUser').bind('input propertychange', function (e) {
|
if ($(e.target).val().trim().length > 0) {
|
$("#LoginUserMsg").css("visibility", "hidden");
|
} else {
|
$("#LoginUserMsg").css("visibility", "visible");
|
}
|
})
|
|
$('#LoginPasd').bind('input propertychange', function (e) {
|
if ($(e.target).val().trim().length > 0) {
|
$("#LoginPasdMsg").css("visibility", "hidden");
|
} else {
|
$("#LoginPasdMsg").css("visibility", "visible");
|
}
|
})
|
|
$('#LoginCode').bind('input propertychange', function (e) {
|
if ($(e.target).val().trim().length > 0) {
|
$("#LoginCodeMsg").css("visibility", "hidden");
|
} else {
|
$("#LoginCodeMsg").css("visibility", "visible");
|
}
|
})
|
|
$("#LoginBtn").click(function () {
|
|
var num = show_num.join("");
|
|
var user = $("#LoginUser").val();
|
var pasd = $("#LoginPasd").val();
|
var code = $("#LoginCode").val();
|
|
if (user == "" || pasd == "" || code == "") {
|
if (user == "") $("#LoginUserMsg").css("visibility", "visible");
|
if (pasd == "") $("#LoginPasdMsg").css("visibility", "visible");
|
if (code == "") $("#LoginCodeMsg").css("visibility", "visible");
|
} else if (num.length == code.length && num.toLocaleLowerCase() == code.toLocaleLowerCase()) {
|
$.ajax({
|
url: "http://127.0.0.1:82/blade-auth/oauth/token",
|
type: 'post',
|
headers: {
|
'Authorization': 'Basic c2FiZXI6c2FiZXJfc2VjcmV0',
|
"Tenant-Id": "000000"
|
},
|
data: {
|
tenantId: 000000,
|
username: user,
|
password: hex_md5(pasd),
|
grant_type: 'password',
|
scope: 'all',
|
},
|
dataType: 'JSON',
|
success: function (res) {
|
|
sessionStorage.setItem('shuiwen-token', res.access_token);
|
|
window.location.href = "index.html";
|
|
},
|
error: function (res) {
|
if (res) {
|
layer.msg(res.responseJSON.error_description, { icon: 5, time: 2000 })
|
}
|
},
|
|
})
|
} else {
|
layer.msg('验证码错误！请重新输入！', { icon: 5, time: 2000 })
|
$("#LoginCode").val('')
|
draw(show_num);
|
}
|
|
})
|
})
|
|
//生成并渲染出验证码图形
|
function draw(show_num) {
|
var canvas_width = $('#canvas').width();
|
var canvas_height = $('#canvas').height();
|
var canvas = document.getElementById("canvas");//获取到canvas的对象
|
var context = canvas.getContext("2d");//获取到canvas画图的环境
|
canvas.width = canvas_width;
|
canvas.height = canvas_height;
|
var sCode = "a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
|
var aCode = sCode.split(","); //把字符串分割成字符串数组。
|
var aLength = aCode.length;//获取到数组的长度
|
for (var i = 0; i < 4; i++) { //这里的for循环可以控制验证码位数（如果想显示6位数，4改成6即可）
|
var j = Math.floor(Math.random() * aLength);//获取到随机的索引值,random() 方法可返回介于 0（包含） ~ 1（不包含） 之间的一个随机数。
|
// var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
|
var deg = Math.random() - 0.5; //产生一个随机弧度
|
var txt = aCode[j];//得到随机的一个内容
|
show_num[i] = txt.toLowerCase();
|
var x = 10 + i * 20;//文字在canvas上的x坐标
|
var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
|
context.font = "bold 23px 微软雅黑";
|
context.translate(x, y);
|
context.rotate(deg);
|
context.fillStyle = randomColor();
|
context.fillText(txt, 0, 0);
|
context.rotate(-deg);
|
context.translate(-x, -y);
|
}
|
for (var i = 0; i <= 5; i++) { //验证码上显示线条
|
context.strokeStyle = randomColor();
|
context.beginPath();
|
context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
|
context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
|
context.stroke();
|
}
|
for (var i = 0; i <= 30; i++) { //验证码上显示小点
|
context.strokeStyle = randomColor();
|
context.beginPath();
|
var x = Math.random() * canvas_width;
|
var y = Math.random() * canvas_height;
|
context.moveTo(x, y);
|
context.lineTo(x + 1, y + 1);
|
context.stroke();
|
}
|
}
|
//得到随机的颜色值
|
function randomColor() {
|
var r = Math.floor(Math.random() * 256);
|
var g = Math.floor(Math.random() * 256);
|
var b = Math.floor(Math.random() * 256);
|
return "rgb(" + r + "," + g + "," + b + ")";
|
}
|
|
</script>
|
</body>
|
|
</html>
|
