<template>
|
<div class v-loading="vLoading" :style="`width: ${currentWidth}px;height:${currentHeight}px`">
|
<div class="web-site">
|
<a href="http://www.smartai.com" target="_blank">www.smartai.com</a>
|
</div>
|
|
<!-- 授权信息 -->
|
<lang-select class="lang-select"/>
|
<licence />
|
<div class="right-bg" style>
|
<particle-network />
|
</div>
|
<div class="left-bg">
|
<div class="login-logo">
|
<img src="/images/login-logo.png" alt width="105px" height="105px" />
|
</div>
|
<div class="login-com">
|
<span>{{ $t('login.company') }}</span>
|
</div>
|
<div class="login-form">
|
<el-form
|
:model="user"
|
status-icon
|
:rules="nullRule"
|
:validate-on-rule-change="false"
|
ref="ruleForm"
|
class="demo-ruleForm"
|
>
|
<el-form-item prop="loginName">
|
<el-input v-model="user.loginName" style="width:280px" :placeholder="$t('placeholder.enterUsername')">
|
<i slot="prefix" class="iconfont iconyonghu1"></i>
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="password">
|
<el-input
|
show-password
|
@keyup.enter.native="systemLogin()"
|
v-model="user.password"
|
autocomplete="off"
|
style="width:280px"
|
:placeholder="$t('placeholder.enterPassword')"
|
>
|
<i slot="prefix" class="iconfont iconmima"></i>
|
</el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button ref="submit" type="warning" @click="systemLogin()" style="width:280px">{{ $t('button.login') }}</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<!-- <p class="gradient-text gradient-text-one">——— {{serverTitle || 'SmartAI — ReID'}} ———</p> -->
|
<p class="gradient-text gradient-text-one">
|
——
|
<b>SmartAI</b> {{ $t('login.aios') }} ——
|
</p>
|
<p
|
class="gradient-text gradient-text-one"
|
style="letter-spacing: 1.8px;font-size:15px;"
|
>V1.0.0</p>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { tologin, getLoginUserData, getServerName } from './api.ts';
|
import ParticleNetwork from './ParticleNetwork'
|
import Licence from '@/components/licence'
|
import LangSelect from '@/components/langSelect'
|
import { getMenuListData } from "@/api/utils";
|
|
export default {
|
name: 'login-pgae',
|
metaInfo: {
|
title: '登录页'
|
},
|
components: {
|
ParticleNetwork,
|
Licence,
|
LangSelect
|
},
|
computed: {
|
rules() {
|
return {
|
loginName: [{ required: true, message: this.$t('placeholder.enterUsername'), trigger: 'change' } ],
|
password: [{ required: true, message: this.$t('placeholder.enterPassword'), trigger: 'change' }]
|
}
|
},
|
},
|
data: () => ({
|
serverTitle: "",
|
user: {
|
loginName: '',
|
password: '',
|
rememberMe: false
|
},
|
nullRule: {},
|
|
loading: '',
|
vLoading: false,
|
currentHeight: 1057,
|
currentWidth: 1920
|
}),
|
created() {
|
this.getServerName()
|
this.getScreenHeight()
|
},
|
mounted() {
|
// 自动登录接口
|
this.loginRobot();
|
},
|
watch: {},
|
beforeDestroy() {
|
window.onresize = null
|
},
|
methods: {
|
loginRobot() {
|
// 解析路由参数，并缓存
|
let user = this.getQueryVariable("username");
|
let passwd = this.getQueryVariable("password");
|
if (user.length && passwd.length) {
|
sessionStorage.setItem("autoLogin", JSON.stringify({ username: user, passwd: passwd }));
|
|
this.user.loginName = user;
|
this.user.password = passwd;
|
this.systemLogin();
|
return;
|
}
|
|
// 登陆超时后的重新登陆
|
let sessionInfo = sessionStorage.getItem('autoLogin');
|
if (sessionInfo) {
|
let authority = JSON.parse(sessionInfo);
|
this.user.loginName = authority.username;
|
this.user.password = authority.passwd;
|
this.systemLogin();
|
}
|
},
|
systemLogin() {
|
this.nullRule = this.rules
|
this.$nextTick(() => {
|
this.$refs['ruleForm'].validate(valid => {
|
if (valid) {
|
this.loading = this.$loading({
|
lock: true,
|
text: 'Loading',
|
spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.7)'
|
})
|
this.testLogin()
|
} else {
|
this.nullRule = {}
|
}
|
})
|
this.nullRule = {}
|
})
|
},
|
async testLogin() {
|
// location.assign("/view/desktop/")
|
tologin({ username: this.user.loginName, password: this.user.password })
|
.then(json => {
|
const loginedInfo = {
|
access_token: json.token_type + ' ' + json.access_token,
|
refresh_token: json.refresh_token
|
}
|
sessionStorage.setItem('expires_in', json.expires_in)
|
sessionStorage.setItem('loginedInfo', JSON.stringify(loginedInfo))
|
this.loading.close()
|
this.getLoginUserData()
|
})
|
.catch(err => {
|
this.loading.close()
|
this.$notify({
|
title: '提示',
|
type: 'error',
|
message: err.msg
|
})
|
this.$refs.pwd.focus()
|
})
|
},
|
async getLoginUserData() {
|
let res = await getLoginUserData()
|
if (res.success) {
|
sessionStorage.setItem('userInfo', JSON.stringify(res.data))
|
this.$notify.success("登录成功！")
|
// 获取权限
|
await this.getMenuList()
|
location.assign("/view/desktop/")
|
return res.data
|
} else {
|
this.$notify.error("登录失败！")
|
}
|
},
|
|
getScreenHeight() {
|
this.currentHeight = document.documentElement.clientHeight
|
this.currentWidth = document.documentElement.clientWidth
|
window.onresize = () => {
|
this.currentHeight = document.documentElement.clientHeight
|
this.currentWidth = document.documentElement.clientWidth
|
this.$forceUpdate()
|
}
|
},
|
async getServerName() {
|
let res = await getServerName()
|
if (res && res.success) {
|
this.serverTitle = res.data.serverName
|
window.document.title = res.data.serverName
|
? res.data.serverName
|
: 'SmartAI'
|
sessionStorage.setItem('title', res.data.serverName)
|
}
|
},
|
async getMenuList() {
|
let results = await getMenuListData({});
|
if (results && results.success) {
|
/* 存储权限 */
|
let buttonAuthoritys = results.data;
|
if (results && results.length && this.$route.query.is_login) {
|
this.$router.replace(results[0].url);
|
}
|
sessionStorage.setItem("buttonAuthoritys", "," + buttonAuthoritys + ",");
|
sessionStorage.setItem("menuInfo", JSON.stringify(results));
|
} else {
|
this.$toast({
|
type: "error",
|
message: "菜单获取失败"
|
});
|
}
|
},
|
getQueryVariable(variable) {
|
var query = window.location.search.substring(1);
|
var vars = query.split("&");
|
for (var i = 0; i < vars.length; i++) {
|
var pair = vars[i].split("=");
|
if (pair[0] == variable) { return pair[1]; }
|
}
|
return (false);
|
}
|
},
|
}
|
</script>
|
<style lang="scss">
|
.right-bg {
|
position: fixed;
|
top: 0;
|
left: 0;
|
background-image: url("/images/login-net.png");
|
|
width: 100%;
|
height: 100%;
|
min-width: 1000px;
|
z-index: -10;
|
zoom: 1;
|
background-color: #fff;
|
background-repeat: no-repeat;
|
background-size: cover;
|
-webkit-background-size: cover;
|
-o-background-size: cover;
|
background-position: center 0;
|
}
|
.web-site {
|
position: absolute;
|
top: 55px;
|
left: 41px;
|
font-family: PingFangSC-Medium;
|
font-size: 20px;
|
color: #6170e1;
|
letter-spacing: 6.15px;
|
}
|
.lang-select {
|
float: right;
|
color: white !important;
|
font-size: 14px;
|
margin: 13px;
|
cursor: pointer;
|
}
|
.left-bg {
|
position: absolute;
|
top: 29%;
|
right: 18%;
|
width: 390px;
|
height: 426px;
|
background: rgba(146, 208, 255, 0.23);
|
border-radius: 4px;
|
text-align: center;
|
.login-logo {
|
margin-top: -53px;
|
}
|
|
.login-com {
|
font-family: PingFangSC-Medium;
|
font-size: 22px;
|
color: #ffffff;
|
letter-spacing: 0.44px;
|
margin: 15px;
|
}
|
.login-form {
|
margin: 40px 10px;
|
}
|
.gradient-text {
|
line-height: 36px;
|
font-size: 17px;
|
font-family: -webkit-pictograph;
|
font-weight: bolder;
|
position: relative;
|
b {
|
font-size: 20px;
|
}
|
}
|
.gradient-text-one {
|
background-image: linear-gradient(to right, #51feff 5%, #ff8725 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
|
.el-input__prefix {
|
left: 8px;
|
}
|
|
.el-form-item__error {
|
left: 54px;
|
}
|
}
|
</style>
|
