<template>
|
<div class="container">
|
<vue-particles
|
:particleOpacity="0.7"
|
:particlesNumber="80"
|
shapeType="circle"
|
:particleSize="4"
|
:linesWidth="1"
|
:lineLinked="true"
|
:lineOpacity="0.4"
|
:linesDistance="80"
|
:moveSpeed="2"
|
:hoverEffect="true"
|
hoverMode="grab"
|
:clickEffect="false"
|
clickMode="bubble"
|
></vue-particles>
|
<div class="MapMenu">
|
<iframe id="ifream" style="border: none" width="100%" height="100%" v-bind:src="reportUrl"></iframe>
|
</div>
|
<div class="title_img">
|
<h1>作战实验条件建设</h1>
|
<!-- <img src="../assets/img/lg_03.png" alt /> -->
|
</div>
|
<div class="login">
|
<div class="login_title">
|
<span>用户登录</span>
|
</div>
|
<el-form :model="loginForm" :rules="rules" ref="loginForm" class="loginForm">
|
<el-form-item prop="username">
|
<el-input
|
v-model="loginForm.username"
|
placeholder="输入登录账号"
|
class="nobr"
|
size="meddle"
|
autocomplete="off"
|
>
|
<i slot="prefix" class="el-icon-user"></i>
|
</el-input>
|
</el-form-item>
|
|
<el-form-item prop="password">
|
<el-input
|
show-password
|
v-model="loginForm.password"
|
placeholder="请输入登录密码"
|
class="nobr"
|
autocomplete="off"
|
>
|
<i slot="prefix" class="el-icon-lock"></i>
|
</el-input>
|
</el-form-item>
|
|
<el-form-item required>
|
<el-col :span="18">
|
<el-form-item prop="validCode">
|
<el-input
|
@keyup.enter.native="submitForm('loginForm')"
|
v-model="loginForm.validCode"
|
placeholder="请输入验证码（忽略大小写）"
|
class="nobr"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="6" align="right">
|
<validCode v-model="validCode" ref="refresh" @sendData="getCode"></validCode>
|
</el-col>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
type="primary"
|
class="nobr loginbtn"
|
style
|
:loading="loading"
|
@click="submitForm('loginForm')"
|
>登录</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import validCode from "./verificationCode.vue";
|
import Cookies from "js-cookie";
|
|
export default {
|
name: "login",
|
components: { validCode },
|
data() {
|
let validUserName = (rule, value, callback) => {
|
if (!value) {
|
return callback(new Error("用户名不能为空"));
|
} else {
|
callback();
|
}
|
};
|
|
let validPassword = (rule, value, callback) => {
|
if (!value) {
|
return callback(new Error("密码不能为空"));
|
} else {
|
callback();
|
}
|
};
|
|
const checkValidCode = (rule, value, callback) => {
|
if (!value) {
|
callback(new Error("请输入验证码"));
|
} else if (value.toUpperCase() !== this.validCode.toUpperCase()) {
|
callback(new Error("验证码不正确"));
|
} else {
|
callback();
|
}
|
};
|
return {
|
validCode: "",
|
loading: false,
|
loginForm: {
|
username: "",
|
password: ""
|
},
|
rules: {
|
username: [{ validator: validUserName, trigger: "blur" }],
|
password: [{ validator: validPassword, trigger: "blur" }],
|
validCode: [{ validator: checkValidCode, trigger: "blur" }],
|
reportUrl: ""
|
}
|
};
|
},
|
created() {
|
this.startURL();
|
},
|
methods: {
|
getCode(data) {
|
this.validCode = data; //在data中定义一个 validCode:'',用来记录验证码。
|
},
|
startURL() {
|
var url = window.location.href;
|
var testurl = "";
|
if (url.indexOf("sso") != -1) {
|
testurl = "/sso";
|
}
|
this.reportUrl =
|
window.location.origin + testurl + "/static/mapscreen/index.html";
|
},
|
getCookie() {
|
const username = Cookies.get("username");
|
const password = Cookies.get("password");
|
|
this.loginForm = {
|
username: username === undefined ? this.loginForm.username : username,
|
password:
|
password === undefined ? this.loginForm.password : decrypt(password)
|
};
|
},
|
// 账号密码登录
|
submitForm(formName) {
|
this.$refs[formName].validate(valid => {
|
if (valid) {
|
// this.$router.push("/index");
|
const loading = this.$loading({
|
lock: true,
|
text: "Loading",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)"
|
});
|
this.$store
|
.dispatch("Login", this.loginForm)
|
.then(() => {
|
loading.close();
|
this.$router.push("/index");
|
// }
|
})
|
.catch(error => {
|
//网络超时异常处理
|
loading.close();
|
if (
|
error.code === "ECONNABORTED" ||
|
error.message === "Network Error" ||
|
error.message.includes("timeout")
|
) {
|
this.$message.error("请求超时，请稍后重试");
|
}
|
return Promise.resolve(error.response);
|
// reject(error);
|
});
|
this.validCode = ""; //清空验证码输入框的内容
|
this.refreshVcode(); //刷新验证码
|
} else {
|
this.validCode = ""; //清空验证码输入框的内容
|
this.refreshVcode(); //刷新验证码
|
|
return false;
|
}
|
});
|
},
|
refreshVcode() {
|
this.$refs.refresh.createdCode();
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.container {
|
width: 100%;
|
height: 100%;
|
position: fixed;
|
top: 0px;
|
left: 0px;
|
right: 0px;
|
bottom: 0px;
|
|
background: url("../assets/img/login.jpg") no-repeat center;
|
background-size: 100% 100%;
|
.MapMenu {
|
width: 100%;
|
height: 100%;
|
top: 5%;
|
left: 1%;
|
position: absolute;
|
}
|
}
|
.title_img {
|
position: absolute;
|
left: 75%;
|
top: 20%;
|
width: 16em;
|
color: white;
|
font-size: 30px;
|
// background-color: #bfa;
|
transform: translate(-50%, -40%);
|
}
|
.title_img img {
|
width: 100%;
|
}
|
.main_img {
|
position: absolute;
|
left: 17%;
|
top: 12%;
|
/* transform: translateX(-50%); */
|
}
|
.main_img img {
|
width: 100%;
|
}
|
.login {
|
width: 372px;
|
height: 400px;
|
position: absolute;
|
left: 75%;
|
top: 45%;
|
transform: translate(-50%, -40%);
|
background: rgba(255, 255, 255, 0.9);
|
border-radius: 8px;
|
}
|
|
.login_title {
|
margin-top: 47px;
|
margin-left: 48px;
|
font-size: 25px;
|
font-family: Microsoft YaHei;
|
font-weight: bold;
|
color: #3b4d6e;
|
/* background-color: #bfa; */
|
}
|
.loginForm {
|
margin-top: 61px;
|
margin-left: 48px;
|
/* background-color: #bfa; */
|
width: 280px;
|
}
|
.el-form-item {
|
/* margin-bottom: 12px; */
|
height: 41px;
|
}
|
.el-input /deep/ .el-input__inner {
|
/* background: rgba(80, 152, 255, 0.24); */
|
border-color: rgba(0, 0, 0, 0.1);
|
color: #000;
|
}
|
|
.el-input /deep/ .el-input-group__prepend {
|
border: 0;
|
padding: 0 !important;
|
}
|
.loginbtn {
|
width: 280px;
|
height: 50px;
|
background: #3b4d6e;
|
border-radius: 5px;
|
}
|
</style>
|
