index_QrCode.jsp 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2. pageEncoding="UTF-8" %>
  3. <%
  4. String path = request.getContextPath();
  5. String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
  6. String baseUrl = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/";
  7. %>
  8. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  9. <html lang="en">
  10. <head>
  11. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  12. <meta name="viewport"
  13. content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  14. <link type="text/css" rel="stylesheet" href="<%=basePath+"res/extjs/resources/css/ext-all-access.css" %>"/>
  15. <link type="text/css" rel="sytlesheet" href="<%=basePath+"res/particles/css/style.css" %>">
  16. <link type="text/css" rel="stylesheet" href="index1.css">
  17. <script type="text/javascript" src="<%=basePath+"res/jquery/jquery-3.3.1.min.js" %>"></script>
  18. <script type="text/javascript" src="<%=basePath+"res/particles/particles.min.js" %>"></script>
  19. <script type="text/javascript" src="<%=basePath+"res/extjs/ext-all.js" %>"></script>
  20. <script type="text/javascript" src="<%=basePath+"js/md5.js" %>"></script>
  21. <script type="text/javascript" src="<%=basePath+"js/denglu.js" %>"></script>
  22. <script type="text/javascript" src="<%=basePath+"res/extjs/locale/ext-lang-zh_CN.js" %>"></script>
  23. <title>智慧消防管理平台</title>
  24. <style type="">
  25. #code img{
  26. margin: 0 auto;
  27. padding-top: 24px;
  28. }
  29. </style>
  30. </head>
  31. <body style="overflow:hidden;">
  32. <form id="my_login">
  33. <div id="particles-js">
  34. <div class="bdy-login">
  35. <div id="frm-login" autocomplete="off">
  36. <p>
  37. <img src="res/img/login_title.png" alt="">
  38. </p>
  39. <%-- <p>--%>
  40. <%-- <span>用户名</span>--%>
  41. <%-- <input type="text" placeholder="请输入用户名" id="username" name="username" autocomplete="off">--%>
  42. <%-- </p>--%>
  43. <%-- <p>--%>
  44. <%-- <span>密 码</span>--%>
  45. <%-- <input type="password" placeholder="请输入密码" id="password" name="password" autocomplete="off">--%>
  46. <%-- </p>--%>
  47. <%-- <p style="display:flex">--%>
  48. <%-- <span>验证码</span>--%>
  49. <%-- <input id="userCaptcha" name="userCaptcha" type="text" maxlength="4" class="inputs" placeholder="请输入验证码" autocomplete="off"/>--%>
  50. <%-- <img id="kaptchaImage" src="./login/getCheckNumber" width="130" height="37" style="border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 5px; " onclick="change();">--%>
  51. <%-- </p>--%>
  52. <%-- <p id="btn-submit" onclick="loginSubmit()">--%>
  53. <%-- 登 录--%>
  54. <%-- </p>--%>
  55. <div id="code" class="code" style="width: 100%;height: 230px;"></div>
  56. <%-- <iframe src="QrCode.html" style="border: 0px;width: 100%;height: 230px;"></iframe>--%>
  57. </div>
  58. </div>
  59. </div>
  60. </form>
  61. <script src="res/particles/js/app.js"></script>
  62. <script src="res/jquery/jquery-3.3.1.min.js"></script>
  63. <script src="qrcode.min.js"></script>
  64. <script>
  65. $(function () {
  66. // particlesJS.load('div-particles', 'https://iot.usky.cn/jdxf/Public/vendor/particles/assets/particles.json', function () {
  67. // console.log('callback - particles.js config loaded')
  68. // });
  69. $("#btn-submit").hover(function () {
  70. $(this).css({
  71. color: '#5cc7ff',
  72. border: '1px solid #5cc7ff',
  73. })
  74. });
  75. $("#btn-submit").mouseleave(function () {
  76. $(this).css({
  77. color: '#1EB2FF',
  78. border: '1px solid #009FFF',
  79. })
  80. });
  81. $("input").focus(function () {
  82. $(this).parent().css({
  83. border: '1px solid #009fff',
  84. })
  85. });
  86. $("input").blur(function () {
  87. $(this).parent().css({
  88. border: '1px solid #06538a',
  89. })
  90. })
  91. });
  92. $(function () {
  93. var w = $(document).width();
  94. var l = (w - 380) / 2;
  95. $("#btn-submit").click(function () {
  96. $("#frm-login").submit()
  97. });
  98. $(".bdy-login").css({
  99. "left": l
  100. }).animate({
  101. top: '300px',
  102. opacity: 1,
  103. filter: "alpha(opacity=" + 100 + ")"
  104. }, 1000);
  105. $(document).keydown(function (e) {
  106. if (e.which == 13) {
  107. $("#frm-login").submit()
  108. }
  109. })
  110. });
  111. var uuid;
  112. const URL = document.location.protocol+"//"+window.location.host;
  113. function createUniqueString() {
  114. const timestamp = +new Date() + ''
  115. const randomNum = parseInt((1 + Math.random()) * 65536) + ''
  116. return (+(randomNum + timestamp)).toString(32)
  117. }
  118. function newCode(str){
  119. var qrcode = new QRCode(document.getElementById("code"), {
  120. id: 'er_image',
  121. width : 200,
  122. height : 200
  123. });
  124. qrcode.makeCode(str);
  125. }
  126. var wsUri = "wss://qhome.usky.cn/wss/";
  127. var websocket = null;
  128. var initWebSocket = function() {
  129. try{
  130. websocket = new WebSocket(wsUri);
  131. websocket.onopen = function()
  132. {
  133. var json = {};
  134. json.actfrom = "loginpage";
  135. json.action = "query_ercode";
  136. websocket.send(JSON.stringify(json));
  137. setInterval(function(){
  138. if(websocket != null)
  139. websocket.send(JSON.stringify(json));
  140. },30000)
  141. };
  142. websocket.onmessage = function (evt)
  143. {
  144. console.log("Received:",evt.data);
  145. var jData = eval('(' + evt.data + ')');
  146. if (jData.action=="query_ercode"){
  147. document.getElementById("code").innerHTML = "";
  148. var evm_loing = jData.value;
  149. newCode(""+evm_loing);
  150. document.getElementById("code").title = '';
  151. }else if (jData.action=="loginphone"){
  152. var action = jData.action;
  153. var phonenumber = jData.phonenumber;
  154. // document.getElementById("action").value='';
  155. // document.getElementById("phonenumber").value='';
  156. // document.getElementById("action").value=action;
  157. // document.getElementById("phonenumber").value=phonenumber;
  158. setTimeout(()=>{
  159. location.href = URL + "/YtIoT/view/mainframe.jsp"
  160. },1000)
  161. // alert("ceshi");
  162. websocket = null;
  163. }
  164. };
  165. websocket.onclose = function()
  166. {
  167. // 关闭 websocket
  168. console.log('连接已关闭...');
  169. // alert("连接已关闭...");
  170. };
  171. }catch(exception){
  172. console.log("Exception:",exception);
  173. (function(){})()
  174. }
  175. }
  176. // $(document).ready(function(){
  177. // $("#login_ok").hide();
  178. initWebSocket();
  179. // });
  180. </script>
  181. <input type="hidden" id="basePath" name="basePath" value="<%=basePath %>"/>
  182. </body>
  183. </html>