<template>
|
<div class="login-container">
|
<div class="title-one">
|
<span>拜城县众泰煤焦化有限公司</span>
|
</div>
|
<div class="title-two">
|
<span>智能化安全管理技术平台</span>
|
</div>
|
<div class="login-main">
|
<div class="login-main-pic"></div>
|
<div class="login-main-form">
|
<login-form
|
@on-success-valid="handleLogin"
|
/>
|
</div>
|
</div>
|
<div class="bottom-container">
|
<span style="text-align: center">Copyright©2022 新疆阿克苏拜城众泰煤焦化有限公司 版权所有</span>
|
</div>
|
<!-- <el-row>-->
|
<!-- <el-col :xs="24" :sm="24" :lg="12">-->
|
<!-- <div class="left-container">-->
|
<!-- <div v-if="action==='login'" class="login-component">-->
|
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<!-- <el-col :xs="24" :sm="24" :lg="12">-->
|
<!-- <div class="bottom-container">-->
|
<!-- <span>Copyright©2017 中国科学院苏州纳米技术与纳米仿生研究所 苏ICP备10220403号-6</span>-->
|
<!-- </div>-->
|
<!-- </el-col>-->
|
</div>
|
</template>
|
|
<script>
|
import { loginByUsername } from '@/api/login'
|
import { getToken, setToken, removeToken } from '@/utils/auth'
|
import Cookies from 'js-cookie'
|
import { initRouter } from '@/utils/router'
|
|
import { parseError } from '@/utils/messageDialog'
|
import { createUser } from '@/api/user'
|
import LoginForm from './components/login-form'
|
export default {
|
name: 'Login',
|
components: { LoginForm },
|
data() {
|
return {
|
action: 'login',
|
screenWidth: '',
|
screenHeight: '',
|
logincontainer: 'login-container',
|
isSafe: process.env.isSafe,
|
titleName: '特殊作业综合监管平台',
|
safeLoginTitle: '特殊作业综合监管平台'
|
}
|
},
|
watch: {
|
$route: {
|
handler: function(route) {
|
this.redirect = route.query && route.query.redirect
|
},
|
immediate: true
|
}
|
},
|
created() {
|
// window.addEventListener('hashchange', this.afterQRScan)
|
this.screenWidth = window.innerWidth
|
this.screenHeight = window.innerHeight
|
this.setSize()
|
window.onresize = () => {
|
this.screenWidth = window.innerWidth
|
this.screenHeight = window.innerHeight
|
this.setSize()
|
}
|
},
|
destroyed() {
|
// window.removeEventListener('hashchange', this.afterQRScan)
|
},
|
methods: {
|
setSize: function() {
|
if (this.screenWidth <= 1200) {
|
this.logincontainer = 'login-container-1'
|
} else {
|
this.logincontainer = 'login-container'
|
}
|
},
|
handleLogin(loginForm) {
|
const _this = this
|
_this.loading = true
|
loginByUsername(loginForm)
|
.then((response) => {
|
const res = response.data
|
if (res.code == 200) {
|
localStorage.setItem('loginForm',JSON.stringify(loginForm))
|
// this.$store.dispatch('user/getClassifyOne',1)
|
_this.loading = false
|
const data = res.result
|
if (data.type != 1 && data.type != 2) {
|
if (!data.roles || data.roles.length == 0) {
|
// 验证返回的roles是否是一个非空数组
|
_this.$store.commit('SET_ROLES', [])
|
// parseError({
|
// error: '该用户没有权限登录，请联系所配置管理员分配角色',
|
// vm: _this
|
// })
|
// // reject('用户未分配角色，没有权限登录')
|
// return
|
}
|
}
|
|
_this.$store.commit('SET_ROLES', data.roles)
|
Cookies.set('roles', JSON.stringify(data.roles))
|
setToken(data.token)
|
Cookies.set('loginForm',data)
|
Cookies.set('userName', data.username)
|
Cookies.set('name', data.username)
|
Cookies.set('userId', data.id)
|
Cookies.set('company', data.company)
|
let address = '';
|
if (data.city != null && data.city != 'null'){
|
address = data.city
|
}
|
if (data.area != null && data.area != 'null'){
|
address += data.area
|
}
|
if (data.town != null && data.town != 'null'){
|
address += data.town
|
}
|
Cookies.set('address', address)
|
Cookies.set('token_expired_at', data.tokenexpired)
|
_this.$store.commit('SET_NAME', data.realname)
|
_this.$store.commit('SET_USER_TYPE', data.type)
|
// 加载菜单
|
initRouter(_this)
|
_this.$router.replace('/')
|
} else {
|
_this.$message({
|
showClose: true,
|
message: res.message,
|
type: 'error'
|
})
|
_this.loading = false
|
}
|
})
|
.catch((error) => {
|
let msg = '';
|
if (error && error.stack.indexOf('Network Error') > -1) {
|
msg = '请求超时'
|
}
|
_this.loading = false
|
_this.$message({
|
showClose: true,
|
message: msg === '' ? error:msg,
|
type: 'error'
|
})
|
})
|
},
|
handleChangeToLogin() {
|
this.action = 'login'
|
}
|
}
|
}
|
</script>
|
|
<style rel="stylesheet/scss" lang="scss">
|
.login-container {
|
min-height: 100%;
|
width: 100%;
|
background: url("../../assets/bg_login.png") center no-repeat;
|
//background-size: auto 100%;
|
// background-color: #2d3a4b;
|
overflow: hidden;
|
background-size:cover;
|
.title-one{
|
width: 360px;
|
height: 42px;
|
font-size: 30px;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #FFFFFF;
|
line-height: 42px;
|
text-shadow: 0px 8px 10px rgba(16, 57, 193, 0.3);
|
margin: 0 auto;
|
margin-top: 120px;
|
}
|
.title-two{
|
width: 473px;
|
height: 61px;
|
font-size: 43px;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #FFFFFF;
|
line-height: 61px;
|
text-shadow: 0px 8px 10px rgba(16, 57, 193, 0.3);
|
margin: 0 auto;
|
margin-top: 5px;
|
}
|
.login-main{
|
display: flex;
|
background: linear-gradient(270deg, #FFFFFF 0%, #FFFFFF 100%);
|
box-shadow: 0px 20px 40px 0px rgba(34, 0, 255, 0.7);
|
width:1036px;
|
min-height: 474px;
|
margin:0 auto;
|
margin-top: 60px;
|
.login-main-pic{
|
display: inline-block;
|
height: 474px;
|
width: 572px;
|
background: url("../../assets/img_bg_login.png") center no-repeat;
|
}
|
.login-main-form{
|
display: inline-block;
|
height:100%;
|
width:464px;
|
}
|
}
|
.bottom-container{
|
width:600px;
|
height: 42px;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
line-height: 42px;
|
text-shadow: 0px 8px 10px rgba(16, 57, 193, 0.3);
|
margin: 0 auto;
|
margin-top: 150px;
|
}
|
}
|
|
.login-container-1 {
|
min-height: 100%;
|
width: 100%;
|
background: url("../../assets/login-bg-1.jpg") center no-repeat;
|
//background-size: auto 100%;
|
background-size: cover;
|
background-position: center;
|
position: relative;
|
background-color: #fff;
|
// background-color: #2d3a4b;
|
overflow: hidden;
|
.login-logo {
|
position: relative;
|
color: #fff;
|
margin-top: 5%;
|
}
|
.login-font {
|
position: relative;
|
margin-top: -15%;
|
text-align: center;
|
}
|
|
.login-font span {
|
display: inline-block;
|
width: 700px;
|
height: 72px;
|
font-size: 30px;
|
font-family: PingFangSC-Semibold;
|
font-weight: 600;
|
color: white;
|
line-height: 60px;
|
vertical-align: middle;
|
//padding: 20px 0; /* 撑开高度 */
|
}
|
.login-logo span {
|
display: inline-block;
|
width: 500px;
|
height: 72px;
|
font-size: 45px;
|
font-family: PingFangSC-Semibold;
|
font-weight: 600;
|
color: rgba(51, 51, 51, 1);
|
line-height: 60px;
|
vertical-align: middle;
|
margin-top: 50px;
|
//padding: 20px 0; /* 撑开高度 */
|
}
|
//使用图片来替换
|
//before属性中的content文本是用来占位的,必须有
|
//可以设置字体大小来确定大小
|
//使用visibility: hidden;来隐藏文字
|
.el-icon-logo {
|
/*background: url("../../assets/logo.png") center no-repeat;*/
|
background-size: cover;
|
height: 10px;
|
width: 128px;
|
color: #fff;
|
vertical-align: middle;
|
}
|
.el-icon-logo:before {
|
content: "替";
|
font-size: 25px;
|
visibility: hidden;
|
}
|
.left-container {
|
margin: 0 auto;
|
.login-component {
|
background-color: white;
|
position: relative;
|
width: 500px;
|
max-width: 100%;
|
padding: 15px 35px 0 30px;
|
margin: 0 auto;
|
}
|
.register-component {
|
position: relative;
|
width: 600px;
|
max-width: 100%;
|
padding: 40px 35px 0 35px;
|
margin: 0 auto;
|
overflow: hidden;
|
background-color: #fff;
|
}
|
}
|
.bottom-container{
|
position: absolute;
|
bottom: 0;
|
left: 20%;
|
}
|
}
|
|
</style>
|
