<template>
|
<div class v-loading="vLoading" :style="`width: ${currentWidth}px;height:${currentHeight}px`">
|
<div class="web-site">
|
<a href="http://www.aiotlink.com" target="_blank">www.aiotlink.com</a>
|
</div>
|
<licence />
|
<div class="right-bg" style>
|
<particle-network />
|
</div>
|
<div class="left-bg">
|
<div class="login-logo">
|
<img src="../../assets/img/login-logo.png" alt width="105px" height="105px" />
|
</div>
|
<div class="login-com">
|
<span>北京贝思科技术有限公司</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="请输入用户名">
|
<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="请输入密码"
|
>
|
<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">登录</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<p class="gradient-text gradient-text-one">——— {{serverTitle || '智 能 计 算 节 点 — ReID'}} ———</p>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { tologin, getLoginUserData, getServerName } from './api.ts'
|
import ParticleNetwork from '@/components/ParticleNetwork'
|
import Licence from '@/components/licence'
|
|
export default {
|
name: 'login-pgae',
|
metaInfo: {
|
title: '登录页'
|
},
|
components: {
|
ParticleNetwork,
|
Licence
|
},
|
data: () => ({
|
serverTitle: "",
|
user: {
|
loginName: '',
|
password: '',
|
rememberMe: false
|
},
|
nullRule: {},
|
rules: {
|
loginName: [
|
{ required: true, message: '请输入用户名', trigger: 'change' }
|
],
|
password: [{ required: true, message: '请输入密码', trigger: 'change' }]
|
},
|
loading: '',
|
vLoading: false,
|
currentHeight: 1057,
|
currentWidth: 1920
|
}),
|
methods: {
|
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()
|
// return false
|
} else {
|
this.nullRule = {}
|
}
|
})
|
this.nullRule = {}
|
})
|
},
|
async testLogin() {
|
tologin({ username: this.user.loginName, password: this.user.password })
|
.then(json => {
|
// console.log(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 => {
|
// console.log(err, "登录报错");
|
this.loading.close()
|
this.$notify({
|
title: '提示',
|
type: 'error',
|
message: err
|
})
|
this.$refs.pwd.focus()
|
})
|
},
|
async getLoginUserData() {
|
let json = await getLoginUserData()
|
if (!json.error) {
|
// this.loading.close()
|
sessionStorage.setItem('userInfo', JSON.stringify(json))
|
this.$notify({
|
title: '提示',
|
type: 'success',
|
message: '登录成功！'
|
})
|
// await this.getMenuList()
|
// this.$router.push('/Layout/Video')
|
location.assign("/view/desktop")
|
return json
|
} else {
|
this.$notify({
|
title: '提示',
|
type: 'error',
|
message: '登录失败！'
|
})
|
// this.loading.close()
|
}
|
},
|
|
getScreenHeight() {
|
this.currentHeight = document.documentElement.clientHeight
|
this.currentWidth = document.documentElement.clientWidth
|
// console.log(this.currentHeight, "当前窗口大小");
|
window.onresize = () => {
|
this.currentHeight = document.documentElement.clientHeight
|
this.currentWidth = document.documentElement.clientWidth
|
// console.log(this.currentHeight, "当前窗口大小2", this.currentWidth);
|
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
|
: '智 能 计 算 节 点'
|
sessionStorage.setItem('title', res.data.serverName)
|
}
|
},
|
},
|
created() {
|
this.getServerName()
|
this.getScreenHeight()
|
},
|
watch: {},
|
beforeDestroy() {
|
window.onresize = null
|
}
|
}
|
</script>
|
<style lang="scss">
|
.right-bg {
|
position: fixed;
|
top: 0;
|
left: 0;
|
background-image: url("../../assets/img/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;
|
}
|
.left-bg {
|
position: absolute;
|
top: 30%;
|
right: 18%;
|
width: 390px;
|
height: 402px;
|
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;
|
// margin: 24px 10px 40px 10px;
|
}
|
.gradient-text {
|
line-height: 50px;
|
font-size: 20px;
|
font-family: -webkit-pictograph;
|
font-weight: bolder;
|
position: relative;
|
}
|
.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>
|
