<!DOCTYPE html>
|
<html xmlns:th="http://www.thymeleaf.org">
|
<head>
|
<meta charset="utf-8">
|
<!-- 启用360浏览器的极速模式(webkit) -->
|
<meta name="renderer" content="webkit">
|
<meta name="viewport"
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
<title>管理系统【V2.2.0】</title>
|
<link th:href="@{/images/}"
|
rel="SHORTCUT ICON">
|
<meta name="keywords"
|
content=""/>
|
<meta name="description"
|
content=""/>
|
<style type="text/css">
|
.row > div:nth-child(1) {
|
background: url(../../images/login-title.jpg) no-repeat;
|
background-size: 100% 100%;
|
height: 450px;
|
}
|
|
.row > div:nth-child(2) {
|
background: #fff;
|
height: 450px;
|
}
|
|
.download-bar {
|
margin-top: 15px;
|
color: #4968bd;
|
}
|
|
.download-bar a {
|
color: #4968bd;
|
margin: 0 5px;
|
}
|
|
.download-bar a:hover {
|
text-decoration: underline;
|
color: #4968bd;
|
}
|
</style>
|
<script>
|
|
|
var isoldIE = false;
|
if (navigator.userAgent.indexOf("MSIE") > 0) {
|
if (navigator.userAgent.indexOf("MSIE 6.0") > 0
|
|| navigator.userAgent.indexOf("MSIE 7.0") > 0
|
|| avigator.userAgent.indexOf("MSIE 8.0") > 0) {
|
isoldIE = true;
|
}
|
}
|
if (window.top !== window.self) {
|
window.top.location = window.location
|
}
|
;
|
</script>
|
<script type="text/javascript"
|
th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script>
|
<script type="text/javascript" th:src="@{/js/systools/MBase.js}"></script>
|
|
<link th:href="@{/css/styleOne/login.min.css}" rel="stylesheet">
|
<style type="text/css">
|
.form-control {
|
background-color: #FFF;
|
background-image: none;
|
border: 1px solid #d7d8d9;
|
color: #373d41;
|
display: block;
|
padding: 20px 12px;
|
width: 100%;
|
font-size: 14px
|
-webkit-box-shadow: none !important;
|
box-shadow: none !important;
|
border-radius: 0px !important;
|
}
|
|
.layui-layer-content {
|
color: #000;
|
}
|
|
.title {
|
color: #333;
|
padding: 30px 10px;
|
}
|
|
.signinpanel form {
|
background: transparent;
|
border: 0;
|
box-shadow: 0 0 0 transparent;
|
}
|
|
.signinpanel .dataForm > div > input {
|
background: #ececec;
|
}
|
|
.signinpanel .dataForm > div {
|
position: relative;
|
}
|
|
.signinpanel .dataForm > div > img {
|
position: absolute;
|
top: 13px;
|
left: 5px;
|
}
|
|
.signinpanel .dataForm > div > input {
|
padding-left: 25px
|
}
|
|
@media screen and (max-width: 768px) {
|
.signinpanel form {
|
margin-top: 0px;
|
}
|
|
.row > div:nth-child(1) {
|
height: 200px;
|
}
|
}
|
|
.qrloginBox {
|
float: right;
|
}
|
|
.qrloginSpan {
|
background: #edf4ff;
|
border: 1px solid #155bd4;
|
position: relative;
|
padding: 4px 8px;
|
border-radius: 2px;
|
font-size: 14px;
|
color: #155bd4;
|
cursor: pointer;
|
}
|
|
.qrImg {
|
width: 50px;
|
cursor: pointer;
|
}
|
|
#qrCodeIcon {
|
margin: 20px auto;
|
text-align: center;
|
overflow: hidden;
|
width: 220px;
|
height: 220px;
|
border: 1px solid #dcd0d0;
|
}
|
|
#qrCodeIcon img {
|
margin: 10px;
|
}
|
#scanResult{
|
text-align: center;
|
color: #333333;
|
}
|
#scanResult{
|
text-align: center;
|
}
|
#scanResult img{
|
width: 50px;
|
margin: 50px auto;
|
}
|
#wxQrcode{
|
text-align: center;
|
color: #333333;
|
width: 220px;
|
height: 220px;
|
overflow: hidden;
|
position: relative;
|
margin: 20px auto;
|
}
|
.wxQrcodeInfo{
|
position: absolute;
|
top: 0px;
|
background: rgb(255 255 255 / 94%);
|
width: 220px;
|
height: 220px;
|
display: flex;
|
z-index: 999999;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
}
|
.wxQrcodeImg{
|
position: absolute;
|
width: 200px;
|
top: 10px;
|
z-index: 11;
|
left: 10px;
|
}
|
</style>
|
</head>
|
|
<body class="signin" onkeypress="dologin(event)">
|
|
<div class="signinpanel">
|
<div class="row" style="box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);">
|
<div class="col-sm-6"></div>
|
<div class="col-sm-6 " style="padding: 0px;">
|
<div id="accountWarp">
|
<div onclick="changeLoginType()" class="qrloginBox"><span class="qrloginSpan">扫码登录</span><img
|
class="qrImg"
|
src="../../images/qrcode.png"></div>
|
<form method="post" class="dataForm">
|
<h3 class="no-margins text-center title" style="color: #666666;font-size: 24px;font-weight: bold">
|
密码登录</h3>
|
<div>
|
<input autocomplete="off" id="account" type="text" placeholder="请输入用户名"
|
class="form-control uname"/>
|
<img alt="" src="../../images/user.png">
|
</div>
|
<br>
|
<div>
|
<input autocomplete="off" id="password"
|
type="password" class="form-control pword m-b" nullmsg="密码不能为空"
|
placeholder="请输入密码"/>
|
<img alt="" src="../../images/locked.png">
|
</div>
|
<br> <br>
|
|
<button type="button" onclick="login()"
|
style="background-color: #4f6cff;border: none;font-size: 18px;"
|
class="btn btn-success btn-block">登录
|
</button>
|
|
</form>
|
</div>
|
<div id="qrCodeWarp">
|
<div onclick="changeLoginType()" class="qrloginBox"><span class="qrloginSpan">密码登录</span><img
|
class="qrImg"
|
src="../../images/pc.png"></div>
|
<div style="border-radius: 3px;
|
padding: 30px;">
|
<h3 class="no-margins text-center title" style="color: #666666;font-size: 24px;font-weight: bold">
|
扫码登录</h3>
|
<div id="qrCodeIcon">
|
|
</div>
|
<div id="wxQrcode">
|
|
<img class="wxQrcodeImg" src=" ../../images/qrcodeBack.png">
|
<div class="wxQrcodeInfo">
|
<p>二维码已失效</p>
|
<button onclick="flushQrcode()" class="btn btn-primary">刷新二维码</button>
|
</div>
|
|
|
</div>
|
<div id="scanResult" style="display: none">
|
|
<img src="../../images/dui.png">
|
<p>扫描成功！</p>
|
<p>请在手机上根据提示确认登录</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
<div class="signup-footer" style="color: #4968bd;">
|
<!-- <div class="" style="font-size: 16px;">讯聪管理系统V2.3.0</div>-->
|
<div class="">
|
|
<p class="download-bar" style="font-size: 12px;"><strong>浏览器：</strong>Win7以上<a
|
href="https://pubstorage-bucket.oss-cn-shenzhen.aliyuncs.com/tools/win7/ChromeSetup_32.exe"
|
target="_blank">谷歌32位</a><a
|
href=" https://pubstorage-bucket.oss-cn-shenzhen.aliyuncs.com/tools/win7/ChromeSetup_64.exe"
|
target="_blank">谷歌64位</a><span><a
|
href="https://pubstorage-bucket.oss-cn-shenzhen.aliyuncs.com/tools/xp/49.0.2623.112_chrome_installer.exe "
|
target="_blank">谷歌浏览器（推荐）</a><span>|</span><strong>打印控件：</strong><a
|
href="https://pubstorage-bucket.oss-cn-shenzhen.aliyuncs.com/tools/CLodop_Setup_for_Win32NT_https_3.056Extend.exe"
|
target="_blank">下载控件</a><span>|</span><!--<strong>APP：</strong><a
|
href="http://testfile.hive.jyymatrix.cc/mobile/download.html"
|
target="_blank">下载APP客户端</a>-->
|
</p>
|
</div>
|
</div>
|
</div>
|
</body>
|
<script type="text/javascript" th:src="@{/js/systools/MJsBase.js}"></script>
|
<script type="text/javascript" th:src="@{/js/plugin/jsencrypt.min.js}"></script>
|
<script type="text/javascript" th:src="@{/js/plugin/qrcode.js}"></script>
|
<script th:inline="javascript">
|
var crypt = new JSEncrypt();
|
let loginType = 1;
|
$("#qrCodeWarp").hide();
|
$("#wxQrcode").hide();
|
function changeLoginType() {
|
if (loginType == 1) {
|
$("#accountWarp").hide();
|
$("#qrCodeWarp").show();
|
loginType = 2;
|
} else {
|
|
$("#accountWarp").show();
|
$("#qrCodeWarp").hide();
|
loginType = 1;
|
}
|
}
|
|
//soket用户标识
|
let webClientId = "webClientId_" + MTools.randomStr();
|
let loginQrCodeKey="";
|
|
|
markQrcode();
|
function markQrcode(){
|
|
var qrcode = new QRCode(document.getElementById("qrCodeIcon"), {
|
width: 200,
|
height: 200
|
});
|
loginQrCodeKey="loginQrCodeKey_" + MTools.randomStr();
|
let qrInfo={webClientId:webClientId,loginQrCodeKey:loginQrCodeKey}
|
qrcode.makeCode(JSON.stringify(qrInfo));
|
$('#qrCodeIcon canvas').show();
|
|
}
|
|
|
openSocket();
|
/*<![CDATA[*/
|
|
var publicKey =/*[[${session.publicKey}]]*/
|
|
/*]]>*/
|
|
crypt.setKey(publicKey);
|
|
|
function flushQrcode(){
|
|
$("#scanResult").hide();
|
$("#wxQrcode").hide();
|
webClientId = "XCMY_SCAN_QRCODE" + MTools.randomStr();
|
|
$("#qrCodeIcon").html("");
|
$("#qrCodeIcon").show();
|
markQrcode();
|
|
|
|
|
}
|
|
|
function login() {
|
|
if ($("#account").val() == "") {
|
layer.tips('请输入账号！', '#account');
|
return false;
|
} else if ($("#password").val() == "") {
|
layer.tips('请输入密码！', '#password');
|
return false;
|
}
|
var encAcc = crypt.encrypt($("#account").val());
|
var encPwd = crypt.encrypt($("#password").val());
|
$.AjaxProxy({
|
p: {
|
suAccount: encAcc,
|
suPassword: encPwd,
|
loginType: 1
|
}
|
}).invoke("/common/dologin", function (loj) {
|
MTools.redirect("/" + loj.getValue("page"));
|
});
|
}
|
|
|
|
|
function dologin(e) {
|
if (e.keyCode == 13) {
|
e.preventDefault();
|
window.event.returnValue = false;
|
login();
|
return false;
|
}
|
}
|
|
|
|
var socket;
|
function openSocket() {
|
if(typeof(WebSocket) == "undefined") {
|
console.log("您的浏览器不支持WebSocket");
|
}else{
|
console.log("您的浏览器支持WebSocket");
|
//实现化WebSocket对象，指定要连接的服务器地址与端口 建立连接
|
let wsPath= getRootPath();
|
var socketUrl= wsPath.replace("http","ws")+ "/webSocketServer?userId="+webClientId;
|
|
if(socket!=null){
|
socket.close();
|
socket=null;
|
}
|
socket = new WebSocket(socketUrl);
|
//打开事件
|
socket.onopen = function() {
|
console.log("websocket已打开");
|
sendMessage();
|
};
|
//获得消息事件
|
socket.onmessage = function(msg) {
|
|
var serverMsg = JSON.parse(msg.data);
|
|
if(serverMsg.msgType==1){
|
|
$("#scanResult").show();
|
$("#qrCodeIcon").hide();
|
|
}else if(serverMsg.msgType==2){
|
|
if(serverMsg.loginOperation==1){
|
$.AjaxProxy({
|
p: {
|
loginQrCodeKey: loginQrCodeKey,
|
loginType: 2
|
}
|
}).invoke("/common/dologin", function (loj) {
|
MTools.redirect("/" + loj.getValue("page"));
|
});
|
}else if(serverMsg.loginOperation==2){
|
layer.msg("取消登录", {
|
icon : 2
|
});
|
$("#scanResult").hide();
|
$("#wxQrcode").show();
|
}
|
}
|
};
|
//关闭事件
|
socket.onclose = function() {
|
console.log("websocket已关闭");
|
};
|
//发生了错误事件
|
socket.onerror = function() {
|
console.log("websocket发生了错误");
|
}
|
}
|
}
|
|
function sendMessage() {
|
if(typeof(WebSocket) == "undefined") {
|
console.log("您的浏览器不支持WebSocket");
|
}else {
|
var msg = '{ }';
|
socket.send(msg);
|
}
|
}
|
function colseSocket() {
|
if(typeof(WebSocket) == "undefined") {
|
console.log("您的浏览器不支持WebSocket");
|
}else {
|
socket.close();
|
}
|
}
|
|
|
|
</script>
|
</html>
|
