FE-V2-PC/src/views/ssoLogin.vue

<template>
  <div class="sso-login-page scrollbar-box">
    <!--<img class="logo-img" :src="rectangleLogo">-->
    <!--<div class="title-img-box">-->
    <!--<div>-->
    <!--<img class="title-img" src="@/assets/ZDimages/login/title_icon.png">-->
    <!--</div>-->
    <!--</div>-->
    <!--<p class="introduction-p">技术支持：江苏忠江智能科技有限公司</p>-->
  </div>
</template>

<script>
  import { decrypt } from '@/utils/jsencrypt'
  import { Decrypt } from '@/utils/secret.js'
  import store from '@/store'
  import Cookies from 'js-cookie'
  import { setToken } from '@/utils/auth'
  import { getLogoInfo, getUrlConfig } from '@/api/system/publicConfig'
  import { ssoGetLoginUser, getInfo } from '@/api/login'

  export default {
    name: 'Login',
    data() {
      return {
        codeUrl: '',
        cookiePassword: '',
        type: 1,
        loginForm: {
          // username: "admin",
          // password: "admin123",
          username: '',
          password: '',
          rememberMe: false,
          code: '',
          uuid: ''
          // userType:""
        },
        loginRules: {
          // username: [
          //   { required: true, trigger: "blur", message: "请输入您的账号" }
          // ],
          // password: [
          //   { required: true, trigger: "blur", message: "请输入您的密码" }
          // ],
          // code: [{ required: true, trigger: "change", message: "请输入验证码" }]
        },
        loading: false,
        // 验证码开关
        captchaOnOff: true,
        // 注册开关
        register: false,
        redirect: undefined,
        text: '',
        userTypeCode: '',
        rectangleLogo: localStorage.getItem('rectangleLogo')
      }
    },
    watch: {
      $route: {
        handler: function(route) {
          this.redirect = route.query && route.query.redirect
        },
        immediate: true
      }
    },
    created() {
      let url = window.location.href
      if (url.indexOf('token') != -1) {
        setToken(url.split('=')[1])
        this.getInfo();
      } else {
        console.log('没找到====>')
        this.ssoGetLoginUser()
      }
      localStorage.setItem('windowHref', window.location.href)
    },
    mounted() {

    },
    methods: {
      getInfo(type) {
        getInfo().then(response => {
          console.log('response', response)
          localStorage.setItem('userType',response.data.type)
          localStorage.setItem('userId',response.data.user_id)
          localStorage.setItem('tenantId',response.data.tenantId)
          localStorage.setItem('identity',response.data.screen_token);
          localStorage.setItem('identityType',response.data.screen_type);
          //等待配置与字段获取到后跳转
          Promise.all([
            this.getLogoInfo(),
            this.getUrlConfig()
          ]).then((result)=>{
            this.fullScreen();
            this.$router.push({ path: this.redirect || "/home" }).catch(()=>{});
          }).catch((error) => {})
        })
      },
      //获取身份标识
      ssoGetLoginUser() {
        ssoGetLoginUser(response => {
          // window.open('https://icas.jnu.edu.cn/cas/login?service=http://localhost:8081/sso/getLoginUser','_self')
        })
      },
      getLogoInfo(){
        getLogoInfo().then(response => {
          console.log('公共配置', response.data)
          store.dispatch('settings/setSmartAlarmType', response.data.smartLock)
          localStorage.setItem('setSmartAlarmType', response.data.smartLock)
          this.rectangleLogo = response.data.rectangleLogo
          localStorage.setItem('circularLogo', response.data.circularLogo)
          localStorage.setItem('rectangleLogo', response.data.rectangleLogo)
          localStorage.setItem('videoCover', response.data.videoCover)
        })
      },
      getUrlConfig() {
        getUrlConfig().then(response => {
          console.log('开发配置', response.data)
          //判定http或者https
          let urlText = window.location.href.split('://')[0] + '://'
          let outerNet = window.location.href.indexOf(response.data.ipIdentify) == -1//true外网 false 内网
          if (outerNet) {//外网
            //文件预览地址
            localStorage.setItem('filePreviewUrl', urlText + response.data.fileExtranetUrl)
            //摄像头代理访问地址
            localStorage.setItem('cameraExtranetAgent', urlText + response.data.cameraExtranetAgent)
            //摄像头地址ip段
            localStorage.setItem('ipIdentify', response.data.ipIdentify)
            //摄像头访问地址
            localStorage.setItem('cameraUrl', 'wss://' + response.data.cameraExtranetUrl)
            //MQTT地址
            localStorage.setItem('mqttUrl', 'wss://' + Decrypt(response.data.mqttExtranetUrl))
            //MQTT账号
            localStorage.setItem('mqttUser', Decrypt(response.data.mqttExtranetUser))
            //MQTT密码
            localStorage.setItem('mqttPassword', Decrypt(response.data.mqttExtranetPassword))
            //可视化大屏访问地址
            localStorage.setItem('screenUrl', urlText + response.data.screenExtranetUrl)
          } else {
            //文件预览地址
            localStorage.setItem('filePreviewUrl', urlText + response.data.fileIntranetUrl)
            //摄像头代理访问地址
            localStorage.setItem('cameraExtranetAgent', urlText + response.data.cameraIntranetAgent)
            //摄像头地址ip段
            localStorage.setItem('ipIdentify', response.data.ipIdentify)
            //摄像头访问地址
            localStorage.setItem('cameraUrl', 'wss://' + response.data.cameraIntranetUrl)
            //MQTT地址
            localStorage.setItem('mqttUrl', 'ws://' + Decrypt(response.data.mqttIntranetUrl))
            //MQTT账号
            localStorage.setItem('mqttUser', Decrypt(response.data.mqttIntranetUser))
            //MQTT密码
            localStorage.setItem('mqttPassword', Decrypt(response.data.mqttIntranetPassword))
            //可视化大屏访问地址
            localStorage.setItem('screenUrl', urlText + response.data.screenIntranetUrl)
          }
        })
      },
      //全屏
      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">
  .sso-login-page {
    height: 100%;
    width: 100%;
    background-image: url("../assets/ZDimages/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: 29px;
      left: 52px;
      width: 250px;
      height: 55px;
    }
    .title-img-box {
      position: absolute;
      top: 74px;
      left: 50%;
      margin-left: -580px;
      width: 1180px;
      height: 230px;
      div {
        position: relative;
        img {
          width: 1180px;
          height: 230px;
        }
        p {
          position: absolute;
          top: 72px;
          right: 300px;
          width: 50px;
          height: 26px;
          line-height: 26px;
          text-align: center;
          background: #0045AF;
          color: #fff;
          font-size: 14px;
          border-radius: 70px;
        }
      }
    }
    .form-box {
      width: 680px;
      height: 520px;
      background-image: url("../assets/ZDimages/login/img_dlk_bg.png");
      position: absolute;
      top: 290px;
      left: 50%;
      margin-left: -340px;
      .form-title-p {
        line-height: 52px;
        font-size: 24px;
        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: 480px;
        height: 60px;
        border: 1px solid #00FFFC;
        border-radius: 10px;
        background: rgba(0, 13, 41, 0.2);
        margin: 40px auto 32px;
        display: flex;
        overflow: hidden;
        img {
          height: 20px;
          width: 20px;
          margin: 20px;
        }
        input:-webkit-autofill {
          //input 背景色     #0C2034根据自己需要替换
          -webkit-box-shadow: 0 0 0px 1000px rgba(1, 25, 67, 1) inset !important;
          //input字体颜色 颜色根据自己要求替换
          -webkit-text-fill-color: #FFFFFF !important;
        }
        input {
          flex: 1;
          border: none;
          outline: none;
          background-color: transparent !important;
          color: #dedede;
          font-size: 16px;
        }
        ::placeholder {
          color: #999999;
          font-size: 16px;
        }
      }
      .password-input-box:hover {
        box-shadow: 0 0 4px 1px rgba(0, 255, 252, 1);
      }
      .password-input-box {
        width: 480px;
        height: 60px;
        border: 1px solid #00FFFC;
        border-radius: 10px;
        background: rgba(0, 13, 41, 0.2);
        margin: 0 auto;
        display: flex;
        overflow: hidden;
        img {
          height: 20px;
          width: 20px;
          margin: 20px;
        }
        input:-webkit-autofill {
          //input 背景色     #0C2034根据自己需要替换
          -webkit-box-shadow: 0 0 0px 1000px rgba(1, 25, 67, 1) inset !important;
          //input字体颜色 颜色根据自己要求替换
          -webkit-text-fill-color: #FFFFFF !important;
        }
        input {
          flex: 1;
          border: none;
          outline: none;
          background-color: transparent !important;
          color: #dedede;
          font-size: 16px;
        }
        ::placeholder {
          color: #999999;
          font-size: 16px;
        }
      }
      .text-p {
        width: 480px;
        height: 59px;
        line-height: 59px;
        margin: 0 auto;
        font-size: 14px;
        font-family: Microsoft YaHei;
        color: #DC1616;
      }
      .code-input-box {
        width: 480px;
        height: 60px;
        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: 330px;
          height: 60px;
          border: 1px solid #00FFFC;
          border-radius: 10px;
          background: rgba(0, 13, 41, 0.2);
          display: flex;
          overflow: hidden;
          img {
            height: 20px;
            width: 20px;
            margin: 20px;
          }
          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: 16px;
          }
          ::placeholder {
            color: #999999;
            font-size: 16px;
          }
        }
        .login-code {
          width: 124px;
          height: 50px;
          margin: 6px 0 0 25px;
          img {
            width: 124px;
            height: 50px;
            cursor: pointer;
            vertical-align: middle;
          }
        }
      }
      .form-button-p {
        font-size: 16px;
        display: block;
        width: 480px;
        height: 60px;
        background: #0045AF;
        color: #fff;
        border: none;
        border-radius: 10px;
        margin: 34px auto 0;
      }
    }
    .introduction-p {
      width: 100%;
      text-align: center;
      color: #fff;
      font-size: 16px;
      line-height: 44px;
      position: absolute;
      left: 0;
      bottom: 0;
    }
  }

  .login {
    /*display: flex;*/
    /*justify-content: right;*/
    /*padding-right:220px;*/
    /*align-items: center;*/
    height: 100%;
    width: 100%;
    background-image: url("../assets/ZDimages/img_dl_bg.png");
    background-size: 100%;
    position: relative;
    .login-max-box {
      position: absolute;
      height: 800px;
      width: 1600px;
      background: #FFFFFF;
      border-radius: 30px;
      top: 50%;
      left: 50%;
      margin-top: -400px;
      margin-left: -800px;
      display: flex;
      .left-box {
        width: 591px;
        height: 500px;
        background-image: url("../assets/ZDimages/img_dl_sy.png");
        background-size: 100%;
        margin: 172px 0 178px 140px;
      }
      .right-box {
        flex: 1;
        .title {
          margin: 91px 0 40px 0;
          text-align: center;
          padding: 0;
          font-size: 50px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #0045AF;
          /*
          position: absolute;
          margin:0;
          top: -100px;
          right:-120px;
          font-size:60px;
          width:770px;
          text-align: center;
          font-weight:700;
          */
          -webkit-touch-callout: none; /* iOS Safari */
          -webkit-user-select: none; /* Chrome/Safari/Opera */
          -khtml-user-select: none; /* Konqueror */
          -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently not supported by any browser */
        }
        .login-form {
          border-radius: 6px;
          background: #ffffff;
          width: 500px;
          margin: 0 auto;
          padding: 25px 25px 5px 25px;
          .el-input {
            height: 38px;
            input {
              height: 38px;
            }
          }
          .input-icon {
            height: 39px;
            width: 14px;
            margin-left: 2px;
          }
          .username-input-box {
            width: 448px;
            height: 48px;
            background: #f8f8f8;
            border: 1px solid #E0E0E0;
            border-radius: 10px;
            display: flex;
            margin-bottom: 30px;
            img {
              width: 20px;
              height: 20px;
              margin: 14px 16px 0 16px;
            }
            input {
              height: 46px;
              flex: 1;
              background: #f8f8f8;
              outline: none;
              border: none;
              margin-right: 20px;
              color: #333;
            }
            input::placeholder {
              color: #ccc;
            }
          }
          .password-input-box {
            width: 448px;
            height: 48px;
            background: #f8f8f8;
            border: 1px solid #E0E0E0;
            border-radius: 10px;
            display: flex;
            img {
              width: 20px;
              height: 20px;
              margin: 14px 16px 0 16px;
            }
            input {
              height: 46px;
              flex: 1;
              background: #f8f8f8;
              outline: none;
              border: none;
              margin-right: 20px;
              color: #333;
            }
            input::placeholder {
              color: #ccc;
            }
          }
          .code-input-box {
            width: 450px;
            height: 50px;
            display: flex;
            margin-bottom: 60px;
            .code-input-left-box {
              width: 274px;
              height: 48px;
              background: #f8f8f8;
              border: 1px solid #E0E0E0;
              border-radius: 10px;
              img {
                width: 20px;
                height: 20px;
                margin: 14px 16px 0 16px;
              }
              input {
                height: 46px;
                flex: 1;
                background: #f8f8f8;
                outline: none;
                border: none;
                margin-right: 20px;
                color: #333;
              }
              input::placeholder {
                color: #ccc;
              }
              display: flex;
            }
            .login-code {
              margin-left: 24px;
              width: 150px;
              height: 48px;
              img {
                width: 150px;
                height: 48px;
                cursor: pointer;
                vertical-align: middle;
              }
            }
          }
        }
        .login-tip {
          font-size: 13px;
          text-align: center;
          color: #bfbfbf;
        }
        .el-login-footer {
          height: 40px;
          line-height: 40px;
          position: fixed;
          bottom: 0;
          width: 100%;
          text-align: center;
          color: #fff;
          font-family: Arial;
          font-size: 12px;
          letter-spacing: 1px;
        }
        .login-code-img {
          height: 38px;
        }
        .type-max-box {
          display: flex;
          margin-bottom: 58px;
          width: 450px;
          /*border-bottom:1px solid #e0e0e0;*/
          p {
            font-size: 18px;
            text-align: center;
            line-height: 56px;
            margin: 0;
            color: #666666;
            cursor: pointer;
          }
          p:nth-child(1) {
            width: 90px;
            margin-right: 30px;
          }
          p:nth-child(2) {
            width: 126px;
          }
          .typeColorA {
            color: #0045af;
            border-bottom: 2px solid #0045af;
          }
        }
        .text-p {
          margin: 0;
          width: 172px;
          height: 50px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          color: #DC1616;
          line-height: 50px;
        }
      }
      .logo-img {
        position: absolute;
        left: 20px;
        top: 20px;
        width: 267px;
        height: 66px;
      }
    }
    .position-p {
      position: absolute;
      right: 0;
      bottom: 20px;
      width: 638px;
      height: 15px;
      font-size: 14px;
      color: #AAE1FF;
      line-height: 15px;
      padding: 0;
      margin: 0;
    }
  }
</style>