285 lines
7.8 KiB
Vue
285 lines
7.8 KiB
Vue
|
<template>
|
|||
|
|
<div class="login-container">
|
|||
|
|
<div class="login-wraper">
|
|||
|
|
<div class="login-logo-wraper">
|
|||
|
|
<div class="login-logo"></div>
|
|||
|
|
<div class="login-logo-txts">
|
|||
|
|
<p class="login-logo-txt1">诺力智能搬运车系统</p>
|
|||
|
|
<p class="login-logo-txt2">NoBleLift intelligent truck system</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="login-content">
|
|||
|
|
<div v-show="tab === 0" class="login-content_wraper">
|
|||
|
|
<div class="dl">登录</div>
|
|||
|
|
<div class="login-items-wraper">
|
|||
|
|
<div class="login-item">
|
|||
|
|
<div class="login-label" @click="toFocus(1)">用户名</div>
|
|||
|
|
<input type="text" class="login-input" ref="input1" v-model="username" @focus="show" data-layout="normal">
|
|||
|
|
</div>
|
|||
|
|
<div class="login-item">
|
|||
|
|
<div class="login-label" @click="toFocus(2)">密码</div>
|
|||
|
|
<input type="password" class="login-input" ref="input2" v-model="password" @focus="show" data-layout="normal">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- <div class="login-setup-wraper">
|
|||
|
|
<div class="setup-info pointer" @click="toSetup">配置信息</div>
|
|||
|
|
<router-link to="/home">忘记密码</router-link>
|
|||
|
|
</div> -->
|
|||
|
|
<div class="login-setup-wraper login-setup-wraper__r">
|
|||
|
|
<div class="setup-info pointer" @click="toSetup">配置信息</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="login-buttons-wraper">
|
|||
|
|
<button class="button button--primary button-login" :disabled="disabled" @click="saveLogin">登录</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div v-show="tab === 1" class="login-content_wraper">
|
|||
|
|
<div class="dl">配置</div>
|
|||
|
|
<div class="login-items-wraper">
|
|||
|
|
<div class="login-item">
|
|||
|
|
<div class="login-label" @click="toFocus(3)">域名地址</div>
|
|||
|
|
<input type="text" class="login-input" ref="input3" v-model.trim="baseUrl" @focus="show" data-layout="normal">
|
|||
|
|
</div>
|
|||
|
|
<div class="login-item">
|
|||
|
|
<div class="login-label" @click="toFocus(4)">刷新时间（秒）</div>
|
|||
|
|
<input type="number" class="login-input" ref="input4" v-model="setTime" @focus="show" data-layout="numeric">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="login-setup-wraper login-setup-wraper__r">
|
|||
|
|
<div class="setup-info pointer" @click="toLogin">立即登录</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="login-buttons-wraper">
|
|||
|
|
<button class="button button--primary button-login" @click="saveSetup">配置</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="footer_wraper">
|
|||
|
|
<div class="footer_p1">Copyright © www.noblelift.cn, All Rights Reserved.</div>
|
|||
|
|
<div class="footer_p2">国内唯一（全球仅四家）能够同时提供物料搬运设备、智能立体仓库、智能输送分拣系统、AGV及其系统、供应链综合系统软件以及智能制造全系统整体解决方案的公司。</div>
|
|||
|
|
</div>
|
|||
|
|
<vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {authlogin} from '@config/getData2.js'
|
|||
|
|
import {encrypt} from '../../../main.js'
|
|||
|
|
export default {
|
|||
|
|
data () {
|
|||
|
|
return {
|
|||
|
|
tab: 0,
|
|||
|
|
username: '',
|
|||
|
|
password: '',
|
|||
|
|
baseUrl: this.$store.getters.baseUrl,
|
|||
|
|
setTime: this.$store.getters.setTime / 1000,
|
|||
|
|
disabled: false,
|
|||
|
|
visible: false,
|
|||
|
|
layout: 'normal',
|
|||
|
|
input: null,
|
|||
|
|
options: {
|
|||
|
|
useKbEvents: false,
|
|||
|
|
preventClickEvent: false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted () {
|
|||
|
|
// 点对点项目分辨率 1024 * 768
|
|||
|
|
// alert(document.body.clientWidth, 'a')
|
|||
|
|
// alert(document.body.clientHeight, 'b')
|
|||
|
|
// alert(window.screen.width, 'c')
|
|||
|
|
// alert(window.screen.height, 'd')
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
toFocus (i) {
|
|||
|
|
switch (i) {
|
|||
|
|
case 1:
|
|||
|
|
this.$refs.input1.focus()
|
|||
|
|
break
|
|||
|
|
case 2:
|
|||
|
|
this.$refs.input2.focus()
|
|||
|
|
break
|
|||
|
|
case 3:
|
|||
|
|
this.$refs.input3.focus()
|
|||
|
|
break
|
|||
|
|
case 4:
|
|||
|
|
this.$refs.input4.focus()
|
|||
|
|
break
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
toSetup () {
|
|||
|
|
this.tab = 1
|
|||
|
|
this.hide()
|
|||
|
|
},
|
|||
|
|
toLogin () {
|
|||
|
|
this.tab = 0
|
|||
|
|
this.hide()
|
|||
|
|
},
|
|||
|
|
saveSetup () {
|
|||
|
|
let obj = {
|
|||
|
|
baseUrl: this.baseUrl,
|
|||
|
|
setTime: this.setTime * 1000
|
|||
|
|
}
|
|||
|
|
this.$store.dispatch('setConfig', obj)
|
|||
|
|
this.toLogin()
|
|||
|
|
},
|
|||
|
|
saveLogin () {
|
|||
|
|
this.disabled = true
|
|||
|
|
if (!this.username) {
|
|||
|
|
this.toast('请输入用户名')
|
|||
|
|
this.disabled = false
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (!this.password) {
|
|||
|
|
this.toast('请输入密码')
|
|||
|
|
this.disabled = false
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this._authlogin()
|
|||
|
|
},
|
|||
|
|
async _authlogin () {
|
|||
|
|
try {
|
|||
|
|
let res = await authlogin(this.username, encrypt(this.password))
|
|||
|
|
let obj = {}
|
|||
|
|
obj = Object.assign({}, res)
|
|||
|
|
this.$store.dispatch('userInfo', JSON.stringify(obj))
|
|||
|
|
this.hide()
|
|||
|
|
this.$router.push('/index/home')
|
|||
|
|
} catch (err) {
|
|||
|
|
this.disabled = false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
show (e) {
|
|||
|
|
this.input = e.target
|
|||
|
|
this.layout = e.target.dataset.layout
|
|||
|
|
if (!this.visible) {
|
|||
|
|
this.visible = true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
hide () {
|
|||
|
|
this.visible = false
|
|||
|
|
},
|
|||
|
|
accept () {
|
|||
|
|
this.hide()
|
|||
|
|
},
|
|||
|
|
next () {
|
|||
|
|
let inputs = document.querySelectorAll('input')
|
|||
|
|
let found = false;
|
|||
|
|
[].forEach.call(inputs, (item, i) => {
|
|||
|
|
if (!found && item === this.input && i < inputs.length - 1) {
|
|||
|
|
found = true
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
inputs[i + 1].focus()
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
if (!found) {
|
|||
|
|
this.input.blur()
|
|||
|
|
this.hide()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="stylus" scoped>
|
|||
|
|
@import '~@style/mixin'
|
|||
|
|
.login-container
|
|||
|
|
position relative
|
|||
|
|
_wh(100%, 100%)
|
|||
|
|
background-color #64b4dc
|
|||
|
|
background-image linear-gradient(to right bottom,#4489e0, #55a1df, #64b4dc)
|
|||
|
|
_fj(center)
|
|||
|
|
.login-wraper
|
|||
|
|
_fj()
|
|||
|
|
_wh(60%, 65%)
|
|||
|
|
padding 20px
|
|||
|
|
background-color #fff
|
|||
|
|
border-radius 20px
|
|||
|
|
.login-logo-wraper
|
|||
|
|
width 50%
|
|||
|
|
padding 20px
|
|||
|
|
_fj(center,,column)
|
|||
|
|
.login-logo
|
|||
|
|
width 100px
|
|||
|
|
height 112px
|
|||
|
|
background center / 100% 100% url(../../../images/aio/car1.png) no-repeat
|
|||
|
|
.login-logo-txts
|
|||
|
|
// margin-top 20px
|
|||
|
|
text-align center
|
|||
|
|
.login-logo-txt1
|
|||
|
|
_font(24px, 34px, $red2,bold,center)
|
|||
|
|
.login-logo-txt2
|
|||
|
|
_font(20px, 34px, #464646,,center)
|
|||
|
|
.login-content
|
|||
|
|
width 50%
|
|||
|
|
padding 20px 10px
|
|||
|
|
.login-content_wraper
|
|||
|
|
width 100%
|
|||
|
|
padding 0 10%
|
|||
|
|
margin 0 auto
|
|||
|
|
_fj(center,,column)
|
|||
|
|
.dl
|
|||
|
|
width 100%
|
|||
|
|
_font(20px, 50px, #333, bold, center)
|
|||
|
|
margin-bottom 30px
|
|||
|
|
.login-items-wraper
|
|||
|
|
width 100%
|
|||
|
|
.login-item
|
|||
|
|
_fj()
|
|||
|
|
_wh(100%, 40px)
|
|||
|
|
background-color #fff
|
|||
|
|
padding 5px 10px
|
|||
|
|
border 1px solid $gray2
|
|||
|
|
border-radius 8px
|
|||
|
|
+.login-item
|
|||
|
|
margin-top 20px
|
|||
|
|
.login-label
|
|||
|
|
width 115px
|
|||
|
|
_font(16px, 30px, $gray1,,)
|
|||
|
|
.login-input
|
|||
|
|
width calc(100% - 115px)
|
|||
|
|
_font(16px, 30px, $gray1,,)
|
|||
|
|
.login-setup-wraper
|
|||
|
|
width 100%
|
|||
|
|
margin-top 10px
|
|||
|
|
_fj()
|
|||
|
|
a
|
|||
|
|
_font(16px, 30px, $red1,,)
|
|||
|
|
.login-setup-wraper__r
|
|||
|
|
justify-content flex-end
|
|||
|
|
.setup-info
|
|||
|
|
color $red1
|
|||
|
|
.setup-info
|
|||
|
|
_font(16px, 30px, $fc1,,)
|
|||
|
|
.login-buttons-wraper
|
|||
|
|
width 100%
|
|||
|
|
margin-top 10px
|
|||
|
|
.button-login
|
|||
|
|
width 100%
|
|||
|
|
border-radius 20px
|
|||
|
|
letter-spacing 5px
|
|||
|
|
.footer_wraper
|
|||
|
|
position absolute
|
|||
|
|
width 70%
|
|||
|
|
bottom 20px
|
|||
|
|
left 50%
|
|||
|
|
transform translateX(-50%)
|
|||
|
|
.footer_p1
|
|||
|
|
_font(14px, 24px, #fff,,center)
|
|||
|
|
.footer_p2
|
|||
|
|
_font(15px, 24px, #fff,,center)
|
|||
|
|
#keyboard
|
|||
|
|
position fixed
|
|||
|
|
left 0
|
|||
|
|
right 0
|
|||
|
|
bottom 0
|
|||
|
|
z-index 1000
|
|||
|
|
width 100%
|
|||
|
|
// max-width 1366px
|
|||
|
|
margin 0 auto
|
|||
|
|
padding 1em
|
|||
|
|
background-color #EEE
|
|||
|
|
box-shadow 0px -3px 10px rgba(black, 0.3)
|
|||
|
|
border-radius 10px
|
|||
|
|
</style>
|