改为手动登录

src/api/login.js

@@ -7,9 +7,16 @@ let uuid = '';
 let userType = '';
 
 // 登录方法
+// export function login() {
+//     return request({
+//         url: '/auth/screenLogin',
+//         method: 'post',
+//         data: { account, password, code, uuid, userType }
+//     })
+// }
 export function login() {
     return request({
-        url: '/auth/screenLogin',
+        url: '/auth/login',
         method: 'post',
         data: { account, password, code, uuid, userType }
     })

src/router/index.js

@@ -5,6 +5,11 @@ Vue.use(Router)
 export const constantRoutes = [
   {
     path: '/',
+    component: (resolve) => require(['@/views/login'], resolve),
+    hidden: true
+  },
+  {
+    path: '/home',
     component: (resolve) => require(['@/views/home'], resolve),
     hidden: true
   },

src/utils/auth.js

@@ -2,10 +2,10 @@ import { login } from "@/api/login";
 import { loginYiLi } from "@/api/yiLi";
 import Cookies from 'js-cookie'
 
-const TokenKey = 'System-Platform-55-Token';
-const ExpiresInKey = 'System-Platform-55-Expires-In';
-const TokenKeyYiLi = 'System-Platform-55-Token-YiLi';
-const ExpiresInKeyYiLi = 'System-Platform-55-Expires-In-YiLi';
+const TokenKey = 'System-Platform-led-Token';
+const ExpiresInKey = 'System-Platform-led-Expires-In';
+const TokenKeyYiLi = 'System-Platform-led-Token-YiLi';
+const ExpiresInKeyYiLi = 'System-Platform-led-Expires-In-YiLi';
 
 export function getToken() {
   return Cookies.get(TokenKey)

src/utils/request.js

@@ -80,7 +80,27 @@ service.interceptors.response.use(res => {
       }
       return res.data
     }else if(code == 5002){
-      autoLogin();
+      // autoLogin();
+      if(getToken()){
+        removeToken();
+        MessageBox.confirm('登录状态已过期，请重新登录', '系统提示', {
+            confirmButtonText: '确定',
+            showCancelButton:false,
+            closeOnClickModal:false,
+            cancelButtonText: '取消',
+            type: 'warning'
+          }
+        ).then(() => {
+          router.replace({
+            path: '/'
+          })
+          return
+        }).catch(() => {});
+      }else{
+        router.replace({
+          path: '/'
+        })
+      }
     }else if(code != 200) {
       if(!messageData){
         messageData = Message({
@@ -112,7 +132,27 @@ service.interceptors.response.use(res => {
     }
     else if (message.includes("Request failed with status code")) {
       if(message.substr(message.length - 3) == 401){
-        autoLogin();
+        if(getToken()){
+          removeToken();
+          MessageBox.confirm('登录状态已过期，请重新登录', '系统提示', {
+              confirmButtonText: '确定',
+              showCancelButton:false,
+              closeOnClickModal:false,
+              cancelButtonText: '取消',
+              type: 'warning'
+            }
+          ).then(() => {
+            router.replace({
+              path: '/'
+            })
+            return
+          }).catch(() => {});
+        }else{
+          router.replace({
+            path: '/'
+          })
+        }
+        // autoLogin();
       }else{
         messageData = Message({
           message: message,

src/utils/requestYiLi.js

@@ -1,7 +1,7 @@
 import axios from 'axios'
 import { MessageBox, Message, Loading } from 'element-ui'
 import router from '@/router'
-import { autoLoginYiLi,getTokenYiLi } from '@/utils/auth'
+import { autoLoginYiLi,getTokenYiLi,removeTokenYiLi } from '@/utils/auth'
 import errorCode from '@/utils/errorCode'
 import { tansParams,judgmentNetworkReturnAddressYiLi } from "@/utils/index";
 
@@ -89,7 +89,26 @@ service.interceptors.response.use(res => {
       }
       return res.data
     }else if(code == 5002){
-      autoLoginYiLi();
+      // autoLoginYiLi();
+      if(getTokenYiLi()){
+        removeTokenYiLi();
+        MessageBox.confirm('登录状态已过期，请重新登录', '系统提示', {
+            confirmButtonText: '确定',
+            showCancelButton:false,
+            closeOnClickModal:false,
+            cancelButtonText: '取消',
+            type: 'warning'
+          }
+        ).then(() => {
+          router.replace({
+            path: '/'
+          })
+        }).catch(() => {});
+      }else{
+        router.replace({
+          path: '/'
+        })
+      }
     }else if(code != 200) {
       if(!messageData){
         messageData = Message({
@@ -122,8 +141,26 @@ service.interceptors.response.use(res => {
     else if (message.includes("Request failed with status code")) {
       console.log('message',message)
       if(message.substr(message.length - 3) == 401){
-        console.log('message',message)
-        autoLoginYiLi();
+        if(getTokenYiLi()){
+          removeTokenYiLi();
+          MessageBox.confirm('登录状态已过期，请重新登录', '系统提示', {
+              confirmButtonText: '确定',
+              showCancelButton:false,
+              closeOnClickModal:false,
+              cancelButtonText: '取消',
+              type: 'warning'
+            }
+          ).then(() => {
+            router.replace({
+              path: '/'
+            })
+          }).catch(() => {});
+        }else{
+          router.replace({
+            path: '/'
+          })
+        }
+        // autoLoginYiLi();
       }else{
         messageData = Message({
           message: message,

src/views/home.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="home" v-if="showPage">
+  <div class="home">
     <headComponent></headComponent>
     <div class="home-page">
       <div class="home-left-box">
@@ -62,7 +62,6 @@
     },
     data () {
       return {
-        showPage:false,
         roomList:[],
         alarmType:false,
         alarmData:null,
@@ -76,7 +75,10 @@
 
     },
     mounted(){
-      this.login();
+      this.laboratoryBigViewSelectTriggerInfo();
+      //开启预案定时查询
+      this.alarmTimerFunction();
+      // this.login();
     },
     methods:{
       login() {
@@ -129,7 +131,6 @@
             //文件浏览环境
             localStorage.setItem('fileBrowseEnvironment', window.location.href.split('://')[0] + '://' + Decrypt(obj.fileBrowseEnvironment))
           }
-          this.$set(this, 'showPage', true)
           this.laboratoryBigViewSelectTriggerInfo();
           //开启预案定时查询
           this.alarmTimerFunction();

src/views/login.vue

@@ -0,0 +1,483 @@
+<template>
+  <div class="login-page scrollbar-box">
+    <!--<img class="logo-img" src="@/assets/ZDimages/logo@1x.png">-->
+    <img class="logo-img" :src="rectangleLogo" >
+    <div class="title-img-box">
+      <div>
+        <img class="title-img" src="@/assets/image/login/title_icon.png">
+      </div>
+    </div>
+    <div class="form-box">
+      <p class="form-title-p">登录</p>
+      <el-form ref="loginForm" :model="loginForm" class="login-form">
+        <div class="username-input-box" :class="userTypeCode == 1||userTypeCode == 4?'username-input-box-code':''">
+          <img src="@/assets/image/login/icon_dl_zh.png" alt="">
+          <input type="text" v-model="loginForm.username" placeholder="请输入账号" maxlength="20" @keyup.enter="handleLogin()">
+        </div>
+        <div class="password-input-box" :class="userTypeCode == 2||userTypeCode == 4?'username-input-box-code':''">
+          <img src="@/assets/image/login/icon_dl_mm.png" alt="">
+          <input type="password" v-model="loginForm.password" placeholder="请输入密码" maxlength="20" @keyup.enter="handleLogin()">
+        </div>
+        <p class="text-p">{{text}}</p>
+        <div class="code-input-box">
+          <div class="code-input-left-box" :class="userTypeCode == 3||userTypeCode == 5?'username-input-box-code':''">
+            <img src="@/assets/image/login/icon_dl_yzm.png" alt="">
+            <input type="text" v-model="loginForm.code" placeholder="请输入验证码" maxlength="4" @keyup.enter="handleLogin()">
+          </div>
+          <div class="login-code">
+            <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+          </div>
+        </div>
+        <el-form-item>
+          <el-button
+            class="form-button-p"
+            :loading="loading"
+            size="medium"
+            height="50"
+            @click.native.prevent="handleLogin()"
+          >
+            <span v-if="!loading">登 录</span>
+            <span v-else>登 录 中...</span>
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <p class="introduction-p">技术支持：江苏忠江智能科技有限公司</p>
+  </div>
+</template>
+
+<script>
+  import md5 from 'js-md5';
+  import Cookies from "js-cookie";
+  import { loginYiLi } from "@/api/yiLi";
+  import { login,authInfo,getCodeImg,getConfigByType,configInfo} from "@/api/login";
+  import {Decrypt} from "@/utils/secret";
+  import { setToken,getToken,removeToken,setTokenYiLi } from '@/utils/auth'
+  export default {
+    name: "Login",
+    data() {
+      return {
+        codeUrl: "",
+        cookiePassword: "",
+        type:1,
+        loginForm: {
+          username: "",
+          password: "",
+          rememberMe: false,
+          code: "",
+          uuid: "",
+        },
+        loading: false,
+        // 验证码开关
+        captchaOnOff: true,
+        // 注册开关
+        register: false,
+        redirect: undefined,
+        text:"",
+        userTypeCode:"",
+        rectangleLogo:localStorage.getItem('rectangleLogo'),
+        //手机登录
+        loginType:1,
+        loginFormTwo:{
+          username:"",
+          password:"",
+        },
+        loginRulesTwo:{
+          username: [
+            { required: true, message: "请输入手机号码", trigger: "blur" },
+            { required: true, message: "请输入手机号码", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          password: [
+            { required: true, message: "请输入验证码", trigger: "blur" },
+            { required: true, message: "请输入验证码", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+        },
+        textTwo:"",
+        codeNum:"",
+        codeButtonType:true,
+      };
+    },
+    watch: {
+      $route: {
+        handler: function(route) {
+          this.redirect = route.query && route.query.redirect;
+        },
+        immediate: true
+      }
+    },
+    created() {
+      let self = this;
+      this.getCode();
+    },
+    mounted(){
+    },
+    methods: {
+      //获取开发配置
+      getExploitConfig() {
+        getConfigByType({ category: 2, configType: 5 }).then(response => {
+          let obj = JSON.parse(response.data.configValue)
+          //判定http或者https
+          let urlText = window.location.href.split('://')[0] + '://'
+          let outerNet = window.location.href.indexOf(obj.ipIdentify) == -1//true外网 false 内网
+          if (outerNet) {//外网
+            //MQTT地址
+            localStorage.setItem('mqttUrl', 'wss://' + Decrypt(obj.mqttExtranetUrl))
+            //MQTT账号
+            localStorage.setItem('mqttUser', Decrypt(obj.mqttExtranetUser))
+            //MQTT密码
+            localStorage.setItem('mqttPassword', Decrypt(obj.mqttExtranetPassword))
+            //文件浏览环境
+            localStorage.setItem('fileBrowseEnvironment', window.location.href.split('://')[0] + '://' + Decrypt(obj.fileBrowseEnvironmentExtranet))
+          } else {
+            //MQTT地址
+            localStorage.setItem('mqttUrl', 'ws://' + Decrypt(obj.mqttIntranetUrl))
+            //MQTT账号
+            localStorage.setItem('mqttUser', Decrypt(obj.mqttIntranetUser))
+            //MQTT密码
+            localStorage.setItem('mqttPassword', Decrypt(obj.mqttIntranetPassword))
+            //文件浏览环境
+            localStorage.setItem('fileBrowseEnvironment', window.location.href.split('://')[0] + '://' + Decrypt(obj.fileBrowseEnvironment))
+          }
+          this.$set(this, 'showPage', true)
+          this.laboratoryBigViewSelectTriggerInfo();
+          //开启预案定时查询
+          this.alarmTimerFunction();
+        })
+      },
+      getCode() {
+        getCodeImg().then(res => {
+          this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
+          if (this.captchaOnOff) {
+            this.codeUrl = "data:image/gif;base64," + res.data.image;
+            this.loginForm.uuid = res.data.uuid;
+          }
+        });
+      },
+      handleLogin() {
+        let self = this;
+        //账号登录
+        if(this.loginForm.username.length<1){
+          this.text = "*请输入账号";
+          this.userTypeCode = "1";
+          return
+        }else if(this.loginForm.password.length<1){
+          this.text = "*请输入密码";
+          this.userTypeCode = "2";
+          return
+        }else if(!this.loginForm.code||this.loginForm.code.length<1){
+          this.text = "*请输入验证码";
+          this.userTypeCode = "3";
+          return
+        }
+        this.text = "";
+        this.userTypeCode = "";
+        this.$refs.loginForm.validate(valid => {
+          if (valid) {
+            this.loading = true;
+            if (this.loginForm.rememberMe) {
+              Cookies.set("username", this.loginForm.username, { expires: 30 });
+              Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
+              Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
+            } else {
+              Cookies.remove("username");
+              Cookies.remove("password");
+              Cookies.remove('rememberMe');
+            }
+            this.login(this.loginForm);
+          }
+        });
+      },
+      login(userInfo){
+        localStorage.setItem('entranceJumpType','SCHOOL');
+        let self = this;
+        const account = userInfo.username.trim()
+        const password = md5(userInfo.password);
+        const code = userInfo.code
+        const uuid = userInfo.uuid
+        const userType = userInfo.userType
+        login(account, password, code, uuid, userType).then(res => {
+          if(res.code == 200){
+            if(res.data.userType != 3){
+              this.text = "* 非院级大屏账号,无权登录本系统.";
+              this.loading = false;
+              this.getCode();
+            }else{
+              setToken(res.data.token)
+              Promise.all([
+                this.getTokenYiLi(),
+                this.getExploitConfig(),
+                this.fullScreen(),
+              ]).then((result)=>{
+                setTimeout(function(){
+                  self.$router.push({path:'/home'});
+                },300);
+              }).catch((error) => {})
+            }
+          }else{
+            if(res.code == 5007){
+              this.userTypeCode = "4";
+            }else if(res.code == 500){
+              this.userTypeCode = "5";
+            }
+            this.text = res.message;
+            this.loading = false;
+            this.getCode();
+          }
+        });
+      },
+      //获取YiLi-token
+      getTokenYiLi() {
+        loginYiLi().then(res => {
+          setTokenYiLi(res.access_token)
+        })
+      },
+      //全屏
+      fullScreen() {
+        var element = document.documentElement;
+        if (element.requestFullscreen) {
+          element.requestFullscreen();
+        } else if (element.msRequestFullscreen) {
+          element.msRequestFullscreen();
+        } else if (element.mozRequestFullScreen) {
+          element.mozRequestFullScreen();
+        } else if (element.webkitRequestFullscreen) {
+          element.webkitRequestFullscreen();
+        }
+      },
+      //退出全屏
+      exitFullscreen() {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+        } else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen();
+        }
+      },
+    },
+  };
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+  .login-page{
+    height: 100%;
+    width:100%;
+    background-image: url("../assets/image/login/icon_dl_bbg.png");
+    background-repeat:no-repeat;
+    background-size: cover;
+    -webkit-background-size: cover;
+    -o-background-size: cover;
+    position: relative;
+    *{
+      margin:0;
+    }
+    .logo-img{
+      position: absolute;
+      top:41px;
+      left:71px;
+      width:350px;
+      height:77px;
+    }
+    .title-img-box{
+      position: absolute;
+      top:104px;
+      left:50%;
+      margin-left:-810px;
+      width:1620px;
+      height:325px;
+      div{
+        position: relative;
+        img{
+          width:1620px;
+          height:325px;
+        }
+        p{
+          position: absolute;
+          top:102px;
+          right:412px;
+          width:68px;
+          height:36px;
+          line-height:36px;
+          text-align: center;
+          background: #0045AF;
+          color:#fff;
+          font-size:18px;
+          border-radius:70px;
+        }
+      }
+    }
+    .form-box{
+      width:933px;
+      height:736px;
+      background-image: url("../assets/image/login/img_dlk_bg.png");
+      background-size: 100%;
+      background-repeat:no-repeat;
+      position: absolute;
+      top:410px;
+      left:50%;
+      margin-left:-466px;
+      .form-title-p{
+        line-height:73px;
+        font-size:33px;
+        text-align: center;
+        color:#fff;
+        font-weight:700;
+      }
+      .username-input-box-code:hover{
+        box-shadow: 0 0 4px 1px rgba(255,39,39,1)!important;
+      }
+      .username-input-box-code{
+        border: 1px solid #FF6A6A!important;
+      }
+      .username-input-box:hover{
+        box-shadow: 0 0 4px 1px rgba(0, 255, 252, 1);
+      }
+      .username-input-box{
+        width:659px;
+        height:85px;
+        border: 1px solid #00FFFC;
+        border-radius: 10px;
+        background: rgba(0, 13, 41, 0.2);
+        margin: 40px auto 32px;
+        display: flex;
+        overflow: hidden;
+        img{
+          height:28px;
+          width:28px;
+          margin:27px;
+        }
+        input:-webkit-autofill {
+          -webkit-box-shadow : 0 0 0 1000px rgba(1,25,67,1) inset !important;
+          -webkit-text-fill-color: #FFFFFF !important;
+        }
+        input{
+          flex:1;
+          border:none;
+          outline:none;
+          background-color: transparent !important;
+          color: #dedede;
+          font-size:22px;
+        }
+        ::placeholder{
+          color:#999999 ;
+          font-size:22px;
+        }
+      }
+      .password-input-box:hover{
+        box-shadow: 0 0 4px 1px rgba(0, 255, 252, 1);
+      }
+      .password-input-box{
+        width:659px;
+        height:85px;
+        border: 1px solid #00FFFC;
+        border-radius: 10px;
+        background: rgba(0, 13, 41, 0.2);
+        margin: 0 auto;
+        display: flex;
+        overflow: hidden;
+        img{
+          height:28px;
+          width:28px;
+          margin:27px;
+        }
+        input:-webkit-autofill {
+          -webkit-box-shadow : 0 0 0 1000px rgba(1,25,67,1) inset !important;
+          -webkit-text-fill-color: #FFFFFF !important;
+        }
+        input{
+          flex:1;
+          border:none;
+          outline:none;
+          background-color: transparent !important;
+          color: #dedede;
+          font-size:22px;
+        }
+        ::placeholder{
+          color:#999999 ;
+          font-size:22px;
+        }
+      }
+      .text-p{
+        width:659px;
+        height:85px;
+        line-height: 85px;
+        margin: 0 auto;
+        font-size: 22px;
+        font-family: Microsoft YaHei;
+        color: #DC1616;
+      }
+      .code-input-box{
+        width:659px;
+        height:85px;
+        display: flex;
+        margin: 0 auto;
+        .code-input-left-box:hover{
+          box-shadow: 0 0 4px 1px rgba(0, 255, 252, 1);
+        }
+        .code-input-left-box{
+          width:453px;
+          height:85px;
+          border: 1px solid #00FFFC;
+          border-radius: 10px;
+          background: rgba(0, 13, 41, 0.2);
+          display: flex;
+          overflow: hidden;
+          img{
+            height:28px;
+            width:28px;
+            margin:27px;
+          }
+          input:-webkit-autofill {
+            -webkit-box-shadow: 0 0 0 1000px white inset !important;
+          }
+          input{
+            flex:1;
+            border:none;
+            outline:none;
+            background-color: transparent !important;
+            color: #dedede;
+            font-size:22px;
+          }
+          ::placeholder{
+            color:#999999 ;
+            font-size:22px;
+          }
+        }
+        .login-code{
+          width:170px;
+          height:70px;
+          margin:8px 0 0 34px;
+          img {
+            width:170px;
+            height:70px;
+            cursor: pointer;
+            vertical-align: middle;
+          }
+        }
+      }
+      .form-button-p{
+        font-size:22px!important;
+        display: block!important;
+        width:659px!important;
+        height: 85px!important;
+        background: #0045AF!important;
+        color:#fff!important;
+        border:none!important;
+        border-radius: 10px!important;
+        margin:48px auto 0!important;
+      }
+    }
+    .introduction-p{
+      width:100%;
+      text-align: center;
+      color:#fff;
+      font-size:22px;
+      line-height:62px;
+      position: absolute;
+      left:0;
+      bottom:0;
+    }
+  }
+</style>