<template>
|
<div class="login">
|
<div class="login_content" >
|
<div class="login_logo">
|
<img src="../../assets/logos.png" width="100%" height="100%">
|
</div>
|
<div class="login_title">
|
<span>面向现代制造的混凝土管片智慧工厂</span>
|
</div>
|
<el-form ref="form" :rules="rules" :model="ruleForm" label-width="auto" class="login_form">
|
<el-form-item prop="username">
|
<el-input
|
v-model="ruleForm.username"
|
size="medium"
|
clearable
|
placeholder="请输入用户名"
|
prefix-icon="el-icon-user-solid">
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="password">
|
<el-input
|
v-model="ruleForm.password"
|
size="medium"
|
clearable
|
placeholder="请输入密码"
|
@keydown.enter.native="userLogin()"
|
show-password
|
prefix-icon="el-icon-s-goods">
|
</el-input>
|
</el-form-item>
|
<el-form-item class="form_check">
|
<el-checkbox label="记住密码" v-model="remember"></el-checkbox>
|
</el-form-item>
|
<div>
|
<el-button class="form_button" type="primary" size="medium" @click="userLogin">登录</el-button>
|
</div>
|
<div class="login_version" @click="asyncVersion = true">
|
<span>版本说明</span>
|
<img src="../../assets/version.png" style="margin-left: 5px">
|
</div>
|
</el-form>
|
</div>
|
<span class="login_copyright">版权所有©中铁十四局集团房桥有限公司</span>
|
<transition name="el-fade-in-linear">
|
<div class="login_version_dialog" v-if="asyncVersion">
|
<i @click="asyncVersion = false" class="el-icon-close dialog_back"></i>
|
<div class="dialog_title">
|
版本说明(V1.0 ~ V1.1)
|
</div>
|
<div class="dialog_content_item">
|
<div class="item_title">生产计划管理</div>
|
<ul class="item_ul">
|
<li>
|
钢筋需求计划:可将每年对钢筋笼的需求计划，按照配筋
|
类型及整个隧道布置顺序进行设置，并可与用实际生产
|
数量进行对比展示，通过图表可了解当前生产进度
|
</li>
|
<li>
|
管片生产计划:可按照项目、年份、尺寸将当年各个月份
|
的管片 (环) 需求及计划录入到系统中，方便生产人员比
|
对及分析
|
</li>
|
</ul>
|
</div>
|
<div class="dialog_content_item">
|
<div class="item_title">钢筋笼管理</div>
|
<ul class="item_ul">
|
<li>
|
钢筋笼库存:可查看当前已质检合格，尚未消耗入模的各种型号钢筋笼库存情况
|
</li>
|
<li>
|
成环统计:可根据项目、尺寸，统计已成环的钢筋笼数量及尚未成环的钢筋笼型号和数量
|
</li>
|
</ul>
|
</div>
|
<div class="dialog_content_item">
|
<div class="item_title">报表中心</div>
|
<ul class="item_ul">
|
<li>
|
模具使用报表:对模具使用的次数、时长等信息进行记录
|
</li>
|
</ul>
|
</div>
|
<div class="dialog_content_item">
|
<div class="item_title">物资库存管理</div>
|
<ul class="item_ul">
|
<li>
|
钢筋库存管理:使用系统中设置的钢筋理论耗量，可计算出钢筋库存的消耗值，可与实际库存消耗进行对比，对成本进行评估
|
</li>
|
</ul>
|
</div>
|
</div>
|
</transition>
|
</div>
|
</template>
|
|
<script>
|
import { throttle, changeSize, setCookie, getCookie } from '../../plugins/public'; // 导入节流、动态切换组件尺寸、cookie方法
|
import { addRouterInfo } from '../../router/routerConfig'; // 导入处理路由方法
|
export default {
|
data() {
|
return {
|
size: changeSize(),
|
remember: false,
|
ruleForm: {
|
username: '',
|
password: ''
|
},
|
rules: {
|
username: [{
|
required: true,
|
message: '请输入用户名',
|
trigger: 'blur'
|
}],
|
password: [{
|
required: true,
|
message: '请输入密码',
|
trigger: 'blur'
|
}]
|
},
|
asyncVersion: false
|
}
|
},
|
mounted() {
|
const that = this;
|
let data = getCookie('userInfo');
|
this.remember = data.remember || false;
|
this.$set(this.ruleForm, 'username', data.userName);
|
this.$set(this.ruleForm, 'password', data.passWord);
|
// 根据窗口大小动态修改组件尺寸
|
window.onresize = () => {
|
that.size = changeSize();
|
}
|
},
|
methods: {
|
// 用户登录
|
userLogin: throttle(function () {
|
if(this.remember) {
|
let params = {
|
userName: this.ruleForm.username,
|
passWord: this.ruleForm.password,
|
remember: this.remember
|
}
|
setCookie('userInfo', params, 30);
|
} else {
|
let params = {
|
userName: "",
|
passWord: "",
|
remember: false
|
}
|
setCookie('userInfo', params, 30);
|
}
|
this.$refs.form.validate(valid => {
|
if(valid) {
|
this.$api.System.userLogin(this.ruleForm).then(res => {
|
if(res.statusMsg === "ok") {
|
this.$message.success('登录成功');
|
let routerList = this.changeRouter(res.data.menus);
|
sessionStorage.setItem("token", res.data.token);
|
sessionStorage.setItem('realName', res.data.realName);
|
sessionStorage.setItem("routerList", JSON.stringify(routerList));
|
addRouterInfo(routerList);
|
this.$router.push(routerList[0].children[0].path);
|
} else {
|
this.$message.warning(res.statusMsg);
|
}
|
})
|
}
|
})
|
}, 3000),
|
// 处理路由菜单信息
|
changeRouter(list) {
|
let data = list.map(item => {
|
return item = {
|
path: item.path,
|
name: item.name,
|
children: this.changeRouter(item.childrens),
|
meta: {
|
title: item.title,
|
menuId: item.menuId
|
},
|
component: item.component
|
}
|
})
|
return data;
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.login {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
background: url('../../assets/login_bg.png') no-repeat;
|
background-size: 100% 100%;
|
|
.login_content {
|
position: absolute;
|
top: 45%;
|
left: 50%;
|
transform: translate(-50%, -40%);
|
padding: 2rem 0 0 0;
|
width: 35rem;
|
// height: 30rem;
|
text-align: center;
|
border-radius: 15px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
background-color: rgb(255, 255, 255);
|
|
.login_logo {
|
position: absolute;
|
top: -3.5rem;
|
left: calc(35rem /2);
|
transform: translateX(-50%);
|
padding: 1rem 2.3rem;
|
width: 11.5rem;
|
height: 8rem;
|
background: #fff;
|
border-radius: 50%;
|
}
|
|
.login_title {
|
margin: 3rem 0;
|
color: #0873FF;
|
font-size: 1.7rem;
|
font-weight: 600;
|
}
|
|
.login_form {
|
margin: 1.5rem auto;
|
width: 80%;
|
|
.form_check {
|
text-align: right;
|
}
|
|
.form_button {
|
margin: 1.5rem 0;
|
padding: 15px 20px;
|
width: 100%;
|
background: #0873FF;
|
}
|
}
|
|
.login_version {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
color: #8DBBFF;
|
font-size: 1.2rem;
|
cursor: pointer;
|
|
&:hover {
|
opacity: .8;
|
}
|
}
|
}
|
|
.login_copyright {
|
position: absolute;
|
bottom: 1%;
|
left: 50%;
|
transform: translateX(-50%);
|
color: #fff;
|
font-size: 1rem;
|
}
|
|
.login_version_dialog {
|
position: absolute;
|
top: 15%;
|
right: 2%;
|
padding: 20px;
|
width: 30rem;
|
min-height: 30rem;
|
background: url('../../assets/dialog_bg.png') no-repeat;
|
background-size: 100% 100%;
|
|
.dialog_back {
|
position: absolute;
|
top: 20px;
|
right: 20px;
|
color: #BEC6D4;
|
font-size: 1.5rem;
|
cursor: pointer;
|
|
&:hover {
|
color: #8DBBFF;
|
}
|
}
|
|
.dialog_title {
|
color: #39B5FE;
|
font-size: 1.3rem;
|
font-weight: 600;
|
}
|
|
.dialog_content_item {
|
|
.item_title {
|
position: relative;
|
padding: 10px 15px;
|
color: #39B5FE;
|
font-size: 1.2rem;
|
border-bottom: 1px solid #143164;
|
|
&::before {
|
content: '';
|
position: absolute;
|
top: 50%;
|
left: 0;
|
transform: translateY(-50%);
|
width: 4px;
|
height: 45%;
|
background: #39B5FE;
|
}
|
}
|
|
.item_ul {
|
padding-left: 20px;
|
color: #E2E3E9;
|
|
& > li {
|
margin: 10px 0;
|
}
|
}
|
}
|
}
|
}
|
|
/deep/ .el-icon-user-solid {
|
color: #0873FF;
|
}
|
|
/deep/ .el-icon-s-goods {
|
color: #0873FF;
|
}
|
|
/deep/.el-checkbox__label {
|
color: #999;
|
}
|
</style>
|
