<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">
|
——
|
<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> -->
|
<div class="login">
|
<div class="title">
|
<div class="en">{{ oem.title_firstLine }}</div>
|
<div class="ch">{{ oem.title_secondLine }}</div>
|
</div>
|
|
<div class="left_footer">
|
<img class="logo" src="/apps/loginData/LOGO.png" alt="" />
|
<div class="web">{{ oem.website }}</div>
|
</div>
|
|
<div class="login-form" :style="{ background: backgroundColor }">
|
<img class="logo" src="/apps/loginData/leftImg.png" alt="" />
|
|
<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.trim="user.loginName"
|
:placeholder="$t('placeholder.enterUsername')"
|
:class="{ empty: !user.loginName }"
|
>
|
<i slot="prefix" class="iconfont icon"></i>
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="password">
|
<el-input
|
show-password
|
@keyup.enter.native="systemLogin()"
|
v-model.trim="user.password"
|
autocomplete="off"
|
:placeholder="$t('placeholder.enterPassword')"
|
:class="{ empty: !user.password }"
|
>
|
<i slot="prefix" class="iconfont icon"></i>
|
</el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
ref="submit"
|
type="warning"
|
@click="systemLogin()"
|
:class="{ empty: !user.password || !user.loginName }"
|
>{{ $t("button.login") }}</el-button
|
>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { tologin, getLoginUserData, getServerName } from "./api.ts"
|
import { getVasystemInfo } from "@/api/system"
|
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: () => ({
|
oem: {},
|
serverTitle: "",
|
user: {
|
loginName: "",
|
password: "",
|
rememberMe: false
|
},
|
nullRule: {},
|
|
loading: "",
|
vLoading: false,
|
currentHeight: 1057,
|
currentWidth: 1920,
|
backgroundColor: "",
|
backgroundList: ["#2A2344", "#342344", "#000000", "#233044", "#0B252E", "#150051", "#110040"]
|
}),
|
created() {
|
this.getServerName()
|
this.getScreenHeight()
|
this.backgroundColor = this.backgroundList[Math.floor(Math.random() * this.backgroundList.length)]
|
},
|
mounted() {
|
// 自动登录接口
|
this.loginRobot()
|
|
// oem 信息
|
getVasystemInfo().then((rsp) => {
|
this.oem = rsp
|
})
|
},
|
watch: {},
|
beforeDestroy() {
|
window.onresize = null
|
},
|
methods: {
|
loginRobot() {
|
// 解析路由参数，并缓存
|
// let user = this.getQueryVariable("username")
|
// let passwd = this.getQueryVariable("password")
|
let user = "basic"
|
let passwd = "basic2019"
|
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">
|
html,
|
body,
|
.login {
|
height: 100%;
|
min-width: 1200px;
|
min-height: 680px;
|
position: relative;
|
background-image: url("/apps/loginData/background.png");
|
|
.title {
|
position: absolute;
|
top: 40%;
|
left: 15.6%;
|
color: #fff;
|
text-align: center;
|
|
.en {
|
font-size: 120px;
|
}
|
|
.ch {
|
font-size: 48px;
|
letter-spacing: 9px;
|
}
|
}
|
|
.left_footer {
|
position: absolute;
|
display: flex;
|
justify-content: start;
|
align-items: center;
|
left: 18.6%;
|
bottom: 40px;
|
|
.logo {
|
width: 136px;
|
margin-right: 30px;
|
}
|
|
.web {
|
font-size: 24px;
|
font-weight: 700;
|
color: rgba(255, 255, 255, 0.7);
|
}
|
}
|
|
.login-form {
|
position: absolute;
|
width: 40%;
|
height: 92.5%;
|
right: 3.75%;
|
top: 3.75%;
|
padding: 0 90px;
|
box-sizing: border-box;
|
|
background: #2a2344;
|
opacity: 0.95;
|
box-shadow: -4px 0px 10px rgba(0, 0, 0, 0.25);
|
border-radius: 56px;
|
overflow: hidden;
|
|
.logo {
|
width: 100%;
|
margin-top: 13%;
|
margin-bottom: 20px;
|
}
|
|
.el-form {
|
width: 100%;
|
}
|
|
.el-form-item {
|
background: rgba(0, 0, 0, 0);
|
}
|
|
.el-form-item:nth-child(2) {
|
margin-top: 10%;
|
margin-bottom: 13%;
|
}
|
|
.el-button {
|
width: 100%;
|
height: 60px;
|
background: #4e94ff;
|
border-radius: 30px;
|
border: none;
|
}
|
|
.el-input {
|
width: 100%;
|
background: rgba(0, 0, 0, 0);
|
}
|
|
input {
|
width: 100%;
|
height: 56px;
|
background: rgba(255, 255, 255, 0.1) !important;
|
border: 1px solid #4e94ff;
|
box-sizing: border-box;
|
border-radius: 28px;
|
color: #fff;
|
caret-color: #fff; //光标颜色
|
padding-left: 100px;
|
padding-right: 50px;
|
font-weight: 700;
|
}
|
|
input:-webkit-autofill,
|
textarea:-webkit-autofill,
|
select:-webkit-autofill {
|
-webkit-text-fill-color: #ededed !important;
|
-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
|
background-color: transparent;
|
background-image: none;
|
transition: background-color 50000s ease-in-out 0s; //背景色透明 生效时长 过渡效果 启用时延迟的时间
|
}
|
|
.el-form-item__error {
|
top: 110%;
|
left: 80px;
|
}
|
|
.icon {
|
font-size: 32px;
|
color: rgb(80, 151, 255);
|
}
|
|
.el-input__prefix {
|
padding: 0 20px;
|
height: 40px;
|
left: 5px;
|
top: 8px;
|
border-right: 1px solid #4e94ff;
|
}
|
|
.el-input__suffix {
|
right: 20px;
|
}
|
|
.el-icon-circle-close {
|
display: none;
|
}
|
}
|
|
.el-button.empty {
|
background-color: #999;
|
color: #fff;
|
}
|
|
.el-input.empty {
|
input {
|
border-color: #999;
|
color: #bbb;
|
}
|
|
.icon {
|
color: #fff;
|
}
|
|
.el-input__prefix {
|
border-color: #d4d6d9;
|
}
|
}
|
}
|
|
// .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>
|
