Merge branch 'developer' into hive2.0

Helius

2022-05-27 4351e71d782741143a98f86f6648acd16689165f

 zq-erp/src/main/resources/templates/views/common/login.html

@@ -24,6 +24,7 @@
            background: #fff;
            height: 450px;
        }

        .download-bar {
            margin-top: 15px;
            color: #4968bd;
@@ -36,10 +37,12 @@

        .download-bar a:hover {
            text-decoration: underline;
            color: #fff;
            color: #4968bd;
        }
    </style>
    <script>


        var isoldIE = false;
        if (navigator.userAgent.indexOf("MSIE") > 0) {
            if (navigator.userAgent.indexOf("MSIE 6.0") > 0
@@ -67,7 +70,8 @@
            display: block;
            padding: 20px 12px;
            width: 100%;
            font-size: 14px -webkit-box-shadow: none !important;
            font-size: 14px
            -webkit-box-shadow: none !important;
            box-shadow: none !important;
            border-radius: 0px !important;
        }
@@ -114,6 +118,78 @@
                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>

@@ -122,33 +198,69 @@
<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">
            <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>
        <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>
                    <button type="button" onclick="login()"
                            style="background-color: #4f6cff;border: none;font-size: 18px;"
                            class="btn btn-success btn-block">登录
                    </button>

            </form>
                </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;">HIVE管理系统V2.2.0</div>
        <div class="" style="font-size: 16px;">讯聪管理系统V2.3.0</div>
        <div class="">

            <p class="download-bar" style="font-size: 12px;"><strong>浏览器：</strong>Win7以上<a
@@ -159,7 +271,9 @@
                    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>
                    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>
@@ -167,9 +281,46 @@
</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}]]*/
@@ -178,7 +329,25 @@

        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;
@@ -191,12 +360,16 @@
        $.AjaxProxy({
            p: {
                suAccount: encAcc,
                suPassword: encPwd
                suPassword: encPwd,
                loginType: 1
            }
        }).invoke("/common/dologin", function (loj) {
            MTools.redirect("/" + loj.getValue("page"));
        });
    }




    function dologin(e) {
        if (e.keyCode == 13) {
@@ -206,5 +379,87 @@
            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>