登录页修重新设计样式

src/login/css/login.css

@@ -1,4 +1,4 @@
-     
+
 @font-face {
     font-family: "YouSheBiaoTiHei";
     src: url("../css/YouSheBiaoTiHei.ttf");
@@ -19,25 +19,31 @@ body {
 #mainContainer {
     width: 100%;
     height: 100%;
-    background-image: url(./img/bg.png);
+    background-image: url(./img/bg_new.png);
     background-repeat: no-repeat;
-    background-size: 100% 100%;    
+    background-size: 100% 100%;
 }
 
 /*logo和标题*/
 .logoContainer {
-    position: absolute;
-    right:10%;
-    top: 23%;
-    height: 8%;
+    /* position: absolute;
+    left:35%; */
+    /* top: 23%;
+    height: 8%; */
+    display: flex;
+    justify-content: center;
 }
 .logoContainer img{
-    vertical-align: middle;
+    /* vertical-align: middle;
     border-style: none;
-    margin-right: 10px;
+    margin-right: 10px; */
+    width: 26px;
+    height: 43px;
+    vertical-align: middle;
+    margin-right: 12px;
 }
 .logoContainer p {
-    font-family: YouSheBiaoTiHei;
+    /* font-family: YouSheBiaoTiHei;
     font-size: 62px;
     font-weight: normal;
     font-stretch: normal;
@@ -47,14 +53,20 @@ body {
     white-space: nowrap;
     top: 0px;
     right: 0px;
-    margin:0px;
+    margin:0px; */
+    font-size: 36px;
+    font-family: FZZhengHeiS-EB-GB;
+    font-weight: 400;
+    color: #FEFEFE;
+    line-height: 80px;
+    text-shadow: 0px 2px 4px rgba(1, 50, 101, 0.4);
 }
 
 /*登录框*/
 /* .shadow table {
     margin-left: calc(50% - 150px);
     position: absolute;
-    top: 50px;  
+    top: 50px;
 } */
 .loginitem{
     position: absolute;
@@ -85,7 +97,7 @@ body {
 /* .passwordContainer .backgroundInput{
     top:
 }  */
-.username,
+/* .username,
 .password {
     width: calc(100% - 50px) !important;
     position: absolute;
@@ -102,7 +114,7 @@ body {
     background: rgba(22,92,173,0.1);
     outline: none !important;
     color: white;
-}
+} */
 
 .passwordContainer img,.usernameContainer img{
     position: absolute;
@@ -143,7 +155,7 @@ body {
     margin-left: 220px;
     margin-top: 8px;
     font-size: 20px;
-    color: #31d5ff;    
+    color: #31d5ff;
 }
 
 .error {
@@ -203,10 +215,10 @@ body {
     margin-right: 30px;
 }
 .shadow {
-    width: 36%;
-    height: 38%;
+    width: 460px;
+    height: 474px;
     position: absolute;
-    right: 13%;
+    left: 38%;
     background: url(./img/kuang.png);
     top: 36%;
 }
@@ -230,3 +242,103 @@ body {
     font-size: 18px;
     font-weight: bold;
 }
+.loginDiv{
+    width: 460px;
+    height: 474px;
+    background: #CFF9FF;
+    border-radius: 6px;
+    /* display: flex;
+    justify-content: center; */
+}
+.loginDiv:nth-child(1){
+    font-size: 24px;
+    font-family: FZZhengHeiS-EB-GB;
+    font-weight: 400;
+    color: #073E92;
+}
+.leftLine{
+    width: 150px;
+    height: 1px;
+    background: linear-gradient(-90deg, #073E92 0%, rgba(7, 62, 146, 0) 100%);
+    opacity: 0.6;
+}
+.rightLine{
+    width: 150px;
+    height: 1px;
+    background: linear-gradient(90deg, #073E92 0%, rgba(7, 62, 146, 0) 100%);
+    opacity: 0.6;
+}
+.loginTitle{
+    display: flex;
+    justify-content: center;
+    padding-top: 65px;
+    align-items: center;
+}
+.loginNamePassword{
+    padding: 40px;
+}
+
+    input  {
+        box-shadow: inset 0 0 0 1000px #CFF9FF !important;
+    }
+
+.loginNamePassword .inputbox{
+        position:relative;
+    }
+    .loginNamePassword .inputbox input{
+        width: 85%;
+        padding:10px 0 10px 40px;
+        font-size:16px;
+        color:black;
+        letter-spacing: 1px;
+        margin-bottom: 30px;
+        border:0;
+        border-bottom: 1px solid #47CEDF;
+        outline:none;
+        /* background: transparent ; */
+        background-color: transparent ;
+ }
+ .loginNamePassword .inputbox label{
+    position:absolute;
+    top:0px;
+    left:0px;
+    padding:10px 0;
+    font-size: 16px;
+    color:#fff;
+    pointer-events:none;
+    transition:.5s;
+ }
+.loginNamePassword .inputbox input:focus ~ label,
+.loginNamePassword .inputbox input:valid ~ label
+ {
+    top:-18px;
+    left:0;
+    color:#03a9f4;
+    font-size:14px;
+  }
+  .loginNamePassword .inputbox input:valid,
+  .loginNamePassword .inputbox input:focus
+  {
+
+        padding:10px;
+
+  }
+    /* input:-internal-autofill-selected {
+        appearance: menulist-button;
+        background-image: none !important;
+        background-color: transparent !important;
+        color: #CFF9FF !important;
+    } */
+.loginButton{
+    display: flex;
+    justify-content: center;
+}
+.login{
+    width: 380px;
+    height: 40px;
+    background: linear-gradient(0deg, #E37821, #F2B04A);
+    border-radius: 4px;
+    border: none;
+    color: white;
+    cursor: pointer;
+}

src/login/index.html

@@ -4,8 +4,8 @@
 <head>
     <meta charset="UTF-8">
     <title> 中民燃气管网运维信息化综合管理系统</title>
-    <link rel=”icon” href=”favicon.ico” mce_href=”/dir/favicon.ico” type=”image/x-icon”> <link type="text/css"
-        rel="stylesheet" href="../vendor/bootstrap-4.0.0/css/bootstrap.min.css">
+    <!-- <link rel=”icon” href=”favicon.ico” mce_href=”/dir/favicon.ico” type=”image/x-icon”> <link type="text/css"
+        rel="stylesheet" href="../vendor/bootstrap-4.0.0/css/bootstrap.min.css"> -->
     <link type="text/css" rel="stylesheet" href="./css/login.css">
 </head>
 
@@ -14,10 +14,32 @@
         <canvas id='myCanvas'></canvas>
         <div class="logoContainer">
             <p>
-                <img style="width: 40px;" src='./css/img/tubiao.png'>中民燃气管网运维信息化综合管理系统
+                <img src='./css/img/tubiao.png'>中民燃气管网运维信息化综合管理系统
             </p>
         </div>
-        <div class="shadow ">
+        <div style="display: flex;justify-content: center;">
+            <div class="loginDiv">
+                <div class="loginTitle">
+                    <div class="leftLine"></div>
+                    <div>系统登录</div>
+                    <div class="rightLine"></div>
+                </div>
+                <div class="loginNamePassword">
+                    <div class="inputbox">
+                        <input type="text" class="username" name="" required="">
+                            <label>账户</label>
+                    </div>
+                    <div class="inputbox">
+                        <input type="password" class="password" name=" " required="">
+                            <label>密码</label>
+                    </div>
+                </div>
+                <div class="loginButton">
+                    <button type="button" class="login">登陆</button>
+                </div>
+            </div>
+        </div>
+        <!-- <div class="shadow ">
             <div class='shadowSpan'>系统登陆</div>
             <div class='loginitem'>
                 <div class='usernameContainer form-inline'>
@@ -41,7 +63,7 @@
                 <div class='loginContainer login'>
                 </div>
             </div>
-        </div>
+        </div> -->
         <div class="error">
             <span class="spanbackground">
                 <span class="errorInfoUsername">

src/login/js/login.js

@@ -16,7 +16,7 @@ window.onload = function () {
         passwordInput.val(getCookies("psw"));
         btnLogin[0].focus();
     } else
-        userInput[0].focus();
+        //userInput[0].focus();
     $(document).keydown(enterKeyDown.bind(this));
     btnLogin.on('click', loginCallBack.bind(this));
     userInput.on('focus', function () {

src/widgets/TerminalState/Widget.ts

@@ -424,6 +424,8 @@ class TerminalState extends BaseWidget {
         var countNetError = 0;
         var countNoGps = 0;
         var countOffWork = 0;
+        var dataSendError = 0;//数据传输错误
+        var nowDate = this.dateFormat("YYYY-mm-dd HH:MM:SS");//当前时间
         for (var i = 0, length = rows.length; i < length; i++) {
             var username = rows[i].realname||"";
             var subUserName = username;
@@ -456,11 +458,14 @@ class TerminalState extends BaseWidget {
               *3. 上班（正常，gps异常，网络异常，gps和网络异常）
               */
             var userState = "";
+            var dataSendStateTime = null;//数据传输状态时间
             if (loginTime !== null && loginTime !== "" && equipmentInfo != null && equipmentInfo.length != 0) {
                 var equipmentInfo = rows[i].equip_info;
                 var workState = equipmentInfo[0].workState;
                 var gpsState = equipmentInfo[0].gpsState;
                 var netState = equipmentInfo[0].networkState;
+                dataSendStateTime = equipmentInfo[0].checkTime;
+                var TimeDifference = this.TimeDifference(dataSendStateTime,nowDate)//数据上传时间与当前时间的差
                 switch (workState) {
                     case 3://下班
                         userState = "offWork";
@@ -475,13 +480,17 @@ class TerminalState extends BaseWidget {
                         else if (gpsState == 0 && netState == 1) {
                             userState = "noGps";
                             countNoGps++;
-                            countNoGps++;
+                            //countNoGps++;
                         } else if (gpsState == 2 && netState == 1) {
                             userState = "gpsError";
                             countGpsError++;
                         } else if (gpsState == 1 && netState == 1) {
                             userState = "onWork";
                             countonWork++;
+                        }else if(nowDate > dataSendStateTime && TimeDifference > 10 && netState == 1){
+                            //userstate = "上班-数据传输异常";
+                            userState = 'dataSendError';
+                            dataSendError++;
                         }
                 }
 
@@ -536,7 +545,7 @@ class TerminalState extends BaseWidget {
         this.domObj.find("div.state span.countnogps").text("(" + countNoGps + ")");
         this.domObj.find("div.state span.countneterror").text("(" + countNetError + ")");
         this.domObj.find("div.state span.countoffwork").text("(" + countOffWork + ")");
-
+        this.domObj.find("div.state span.dataSendError").text("(" + dataSendError + ")");
         //每个图标绑定点击事件
         this.domObj.find(".mainBox .workState div.state").bind("click", function (event) {
             var queryDate = this.domObj.find(' input.date').val();