<template>
|
<div class="login_container">
|
<div class="sliderCon">
|
<div class="logo">
|
<img src="../assets/images/yuanchang_logo2.png" class="logoImg">
|
蓄电池后台监控管理平台
|
</div>
|
<img src="../assets/images/login-img.png" class="picImg">
|
</div>
|
<div class="login_box">
|
<div class="title">用户登录</div>
|
<!-- 登录表单区 -->
|
<el-form label-width="0px" class="login_from" :model="loginForm" ref="loginFormRef">
|
<!-- 用户名 -->
|
<el-form-item prop="username">
|
<el-input class="input" v-model="loginForm.username" prefix-icon="el-icon-user"
|
@keyup.enter.native.stop="onSubmit"></el-input>
|
</el-form-item>
|
<!-- 密码 -->
|
<el-form-item prop="password">
|
<el-input class="input" v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"
|
@keyup.enter.native.stop="onSubmit"></el-input>
|
</el-form-item>
|
<el-form-item class="btns">
|
<el-button :loading="loading" type="primary" @click="onSubmit" class="loginBtn">登录</el-button>
|
</el-form-item>
|
<el-form-item v-if="!register">
|
<a href="javascript:;" @click="license.show = true"
|
class="regBtn">平台注册</a>
|
</el-form-item>
|
<el-form-item v-else>
|
<a href="javascript:;" class="regBtn">已激活</a>
|
</el-form-item>
|
</el-form>
|
</div>
|
<!-- license弹框输入面板 -->
|
<el-dialog
|
title="平台注册提示" width="600px"
|
:visible.sync="license.show"
|
:close-on-click-modal="false" top="0"
|
class="dialog-center" :modal-append-to-body="false">
|
<add-license v-if="license.show" :visible.sync="license.show"></add-license>
|
</el-dialog>
|
<!-- 人脸登陆 -->
|
<el-dialog
|
title="人脸登陆" width="480px"
|
:visible.sync="face.show"
|
:close-on-click-modal="false" top="0"
|
class="dialog-center" :modal-append-to-body="false">
|
<face-login v-if="face.show" :visible.sync="face.show" @success="checkServeLicense"></face-login>
|
</el-dialog>
|
<!-- 功能描述 -->
|
<el-dialog
|
title="配置清单" width="960px"
|
:visible.sync="config.show"
|
:close-on-click-modal="false" top="0"
|
class="dialog-center" :modal-append-to-body="false">
|
<config-info></config-info>
|
</el-dialog>
|
<!-- uKey的验证 -->
|
<el-dialog
|
title="uKey绑定" width="750px"
|
:visible.sync="uKey.show"
|
:close-on-click-modal="false" top="0"
|
class="dialog-center" :modal-append-to-body="false">
|
<ukey-bind v-if="uKey.show" :visible.sync="uKey.show"></ukey-bind>
|
</el-dialog>
|
<div class="tools-container">
|
<div class="tools-item" :class="uKeyState" v-if="$CFG.uKey.value" @click="uKey.show=true">
|
<span class="iconfont el-icon-CombinedShape"></span>
|
</div>
|
<div class="tools-item" v-if="$CFG.face.value" @click="face.show=true">
|
<span class="iconfont el-icon-renlianshibie"></span>
|
</div>
|
<div class="tools-item" @click="config.show=true">
|
<span class="iconfont el-icon-peizhi"></span>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import AddLicense from "@/pages/AddLicense";
|
import FaceLogin from '@/components/face/FaceLogin';
|
import {
|
login,
|
initDBPool,
|
checkLoginSession, uKeyLogin
|
} from "@/assets/js/api";
|
import ConfigInfo from "@/pages/configInfo";
|
import UkeyBind from "@/components/UKeyBind";
|
|
export default {
|
components: {
|
UkeyBind,
|
ConfigInfo,
|
AddLicense,
|
FaceLogin
|
},
|
data() {
|
return {
|
register: false,
|
loading: false,
|
labelPosition: "right" /* 登录表单 */,
|
formLabelAlign: {
|
name: "",
|
region: "",
|
type: ""
|
},
|
/* 登录表单el-form 的 数据绑定 */
|
loginForm: {
|
username: "",
|
password: ""
|
},
|
license: {
|
show: false
|
},
|
face: {
|
show: false
|
},
|
config: {
|
show: false
|
},
|
uKey: {
|
show: false,
|
}
|
};
|
},
|
methods: {
|
/* 初始化连接池 检测后台session*/
|
async woData() {
|
const [pool, sessions] = await Promise.all([initDBPool, checkLoginSession])
|
/* console.log('pool',pool);
|
console.log('sessions',sessions); */
|
},
|
onSubmit() {
|
if (!this.register && process.env.NODE_ENV != "dev") {
|
this.$layer.msg("平台未注册，请先注册平台！");
|
return;
|
}
|
if (this.loading) {
|
return;
|
}
|
|
if (this.$CFG.uKey.value) {
|
this.uKeyLogin();
|
}else {
|
this.normalLogin();
|
}
|
},
|
normalLogin() {
|
// 校验用户
|
if (this.loginForm.username && this.loginForm.password) {
|
// 开启等待框
|
this.loading = true;
|
login(this.loginForm.username, this.loginForm.password).then(res => {
|
// 对结果进行处理
|
this.handleLogin(res);
|
}).catch(error => {
|
// 关闭等待
|
this.loading = false;
|
console.log(error);
|
this.$message.error("网络异常");
|
});
|
} else {
|
this.$message.error("用户名或密码不能为空");
|
}
|
},
|
uKeyLogin() {
|
//
|
if(!this.$store.state.ukey.connect) {
|
this.$message.error("请先安装uKey客户端服务");
|
return;
|
}
|
if(!this.$store.state.ukey.isIn) {
|
this.$message.warning("请先插入uKey");
|
return;
|
}
|
|
// 校验用户
|
if (this.loginForm.username && this.loginForm.password) {
|
// 开启等待框
|
this.loading = true;
|
uKeyLogin(this.loginForm.username, this.loginForm.password, this.$store.state.ukey.id).then(res=>{
|
// 对结果进行处理
|
this.handleLogin(res);
|
}).catch(error => {
|
// 关闭等待
|
this.loading = false;
|
console.log(error);
|
this.$message.error("网络异常");
|
});
|
}else {
|
this.$message.error("用户名或密码不能为空");
|
}
|
},
|
handleLogin(res) {
|
// 关闭等待
|
this.loading = false;
|
let rs = JSON.parse(res.data.result);
|
if (rs.code == 1) {
|
this.$message.success("登录成功");
|
sessionStorage.setItem('username', this.loginForm.username);
|
sessionStorage.setItem('userId', rs.data);
|
this.$router.push("/home");
|
// 设置用户的权限
|
this.$store.dispatch('user/getPermits');
|
} else {
|
this.$message.error(rs.msg);
|
}
|
},
|
checkServeLicense() {
|
// 校验服务器是否注册
|
this.$apis.license.checkServeLicense().then(res => {
|
let rs = JSON.parse(res.data.result);
|
if (rs.code == 1) {
|
this.register = true;
|
} else {
|
this.$layer.msg("平台未注册！请先注册。");
|
this.license.show = true;
|
this.register = false;
|
}
|
}).catch(error => {
|
console.log(error);
|
});
|
},
|
},
|
computed: {
|
uKeyState() {
|
let state = -1;
|
let uKey = this.$store.state.ukey;
|
let cls = "state-error";
|
// 设置uKey的状态
|
if (uKey.connect) {
|
if (uKey.isIn) {
|
state = 1;
|
} else {
|
state = 0;
|
}
|
} else {
|
state = -1;
|
}
|
// 根据状态确定uKey图表的颜色
|
switch (state) {
|
case 0:
|
cls = "state-default";
|
break;
|
case 1:
|
cls = "";
|
break;
|
default:
|
cls = "state-error";
|
break;
|
}
|
return cls;
|
},
|
},
|
mounted() {
|
// 初始化user的信息
|
this.$store.commit('user/init');
|
// 初始化登录状态
|
sessionStorage.setItem('username', "");
|
this.checkServeLicense();
|
}
|
};
|
</script>
|
|
<style>
|
.login_from .el-input__inner {
|
height: 48px;
|
line-height: 48px;
|
}
|
|
.el-science-blue .login_from .el-input.is-disabled .el-input__inner, .el-science-blue .login_from .el-input__inner {
|
background-color: transparent;
|
border-color: #e4e4e4;
|
color: #868686;
|
}
|
|
.el-science-blue .login_from .el-input__prefix, .el-input__suffix, .el-science-blue .login_from .el-select .el-input .el-select__caret {
|
color: #007fe1;
|
}
|
</style>
|
|
<style lang="less" scoped>
|
/* 登录大盒子背景 */
|
.login_container {
|
width: 100%;
|
height: 100%;
|
background: url(../assets/images/login-bg.jpg) 0 0 no-repeat;
|
background-size: 100% 100%;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
}
|
|
.tools-container {
|
position: absolute;
|
bottom: 0;
|
right: 0;
|
background-color: #FFFFFF;
|
}
|
|
.tools-container .tools-item {
|
padding: 8px;
|
cursor: pointer;
|
}
|
|
.tools-container .tools-item:hover {
|
|
background-color: #e4e4e4;
|
}
|
|
.tools-container .iconfont {
|
font-size: 22px;
|
color: #0080ff;
|
}
|
|
.tools-container .state-default .iconfont {
|
color: #808080;
|
}
|
|
.tools-container .state-error .iconfont {
|
color: #ff0000;
|
}
|
|
.sliderCon {
|
margin-top: -6vh;
|
|
.logo {
|
display: flex;
|
align-items: center;
|
font-size: 48px;
|
color: #007fe1;
|
font-weight: bold;
|
|
.logoImg {
|
height: 40px;
|
margin-right: 14px;
|
}
|
}
|
|
.picImg {
|
width: 580px;
|
margin-top: 12vh;
|
}
|
}
|
|
/* 登录框 */
|
.login_box {
|
width: 430px;
|
height: 400px;
|
background-color: #fff;
|
border-radius: 3px;
|
padding: 40px 60px;
|
box-sizing: border-box;
|
position: relative;
|
z-index: 2;
|
|
.title {
|
font-size: 20px;
|
color: #007fe1;
|
font-weight: bold;
|
margin-bottom: 30px;
|
}
|
|
/* v图片的盒子 */
|
|
.avatar {
|
height: 130px;
|
width: 130px;
|
border: 1px solid #eee;
|
border-radius: 50%;
|
/* 边框圆角 */
|
padding: 10px;
|
box-shadow: 0 0 10px #ddd;
|
position: absolute;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
background-color: #fff;
|
/* v图片 */
|
|
img {
|
width: 130px;
|
height: 130px;
|
border-radius: 50%;
|
background-color: #eeeeee;
|
}
|
}
|
}
|
|
.login_box::after {
|
content: "";
|
display: block;
|
width: 446px;
|
height: 416px;
|
position: absolute;
|
top: -8px;
|
left: -8px;
|
background: rgba(255, 255, 255, 0.4);
|
z-index: -1;
|
}
|
|
/* 登录按钮 */
|
.btns {
|
text-align: center;
|
}
|
|
.loginBtn {
|
width: 100%;
|
display: block;
|
text-align: center;
|
height: 48px;
|
margin-top: 10px;
|
}
|
|
.regBtn {
|
color: #007fe1;
|
margin-right: 10px;
|
}
|
|
@media screen and (max-width: 1680px) {
|
.sliderCon .logo {
|
font-size: 40px;
|
}
|
|
.sliderCon .picImg {
|
width: 480px;
|
}
|
|
.login_box {
|
width: 400px;
|
height: 360px;
|
}
|
|
.login_box::after {
|
width: 416px;
|
height: 376px;
|
}
|
}
|
</style>
|
