<template>
|
<div class="auth-page">
|
<div class="container">
|
<h1 class="text-xs-center">抚河流域山洪灾害预警系统</h1>
|
<div class="loginbody">
|
<el-form :model="user" ref="formName" status-icon :rules="rules">
|
<!-- 用户账号 -->
|
<el-form-item prop="username">
|
<el-input
|
v-model="user.username"
|
prefix-icon="el-icon-user"
|
placeholder="用户账号"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
<!-- 用户密码 -->
|
<el-form-item prop="password">
|
<el-input
|
type="password"
|
v-model="user.password"
|
prefix-icon="el-icon-lock"
|
placeholder="用户密码"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
<!-- 登录按钮 -->
|
<el-form-item>
|
<el-button type="primary" @click.enter="onLogin(user)">登 录</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import nprogress from 'nprogress'
|
import md5 from 'js-md5'
|
import axios from 'axios'
|
|
export default {
|
name: 'AppRegister',
|
data () {
|
return {
|
user: {
|
username: '',
|
password: ''
|
},
|
rules: {
|
username: [
|
{ required: true, message: '请输入用户账号', trigger: 'blur' },
|
{ min: 3, max: 10, message: '用户账号长度在3~10个字符之间', trigger: 'blur' }
|
],
|
password: [
|
{ required: true, message: '请输入用户密码', trigger: 'blur' },
|
{ min: 3, max: 10, message: '用户密码长度在3~10个字符之间', trigger: 'blur' }
|
]
|
},
|
errors: null,
|
newAxios: null
|
}
|
},
|
created () {
|
var that = this
|
|
this.newAxios = axios.create({
|
baseURL: 'http://10.36.98.39:85',
|
timeout: 600000,
|
headers: {
|
Authorization: 'Basic c2FiZXI6c2FiZXJfc2VjcmV0',
|
'Tenant-Id': '000000'
|
}
|
})
|
|
document.onkeydown = e => {
|
const _key = window.event.keyCode
|
if (_key === 13) {
|
that.onLogin(that.user)
|
}
|
}
|
},
|
methods: {
|
onLogin ({ username, password }) {
|
this.$refs.formName.validate((valid) => {
|
if (valid) {
|
nprogress.start()
|
|
this.newAxios({
|
method: 'POST',
|
url: '/blade-auth/oauth/token',
|
params: {
|
username: username,
|
password: md5(password),
|
tenantId: '000000'
|
}
|
}).then(res => {
|
if (res.data.access_token) {
|
this.$store.commit('setUser', res.data)
|
|
this.$router.push({ path: '/default/riskEarlyWarning/flashFloodRisk' })
|
} else {
|
this.$message({
|
type: 'warning',
|
message: '用户名或密码不正确，请重新输入'
|
})
|
}
|
nprogress.done()
|
})
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.auth-page {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: #0099cc;
|
|
.container {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
margin: auto;
|
width: 480px;
|
height: 320px;
|
background: #fff;
|
border-radius: 10px;
|
|
h1 {
|
margin: 0;
|
height: 80px;
|
line-height: 80px;
|
text-align: center;
|
}
|
|
.loginbody {
|
position: absolute;
|
top: 120px;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
width: 72%;
|
margin: auto;
|
|
.el-form-item {
|
text-align: center;
|
}
|
}
|
}
|
}
|
</style>
|
