root/aio-ndxy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

登录功能

Browse Source
This commit is contained in:
caill
2025-02-19 12:29:44 +08:00
parent 50efbc29bc
commit 306e434234
11 changed files with 154 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>山东金宝一体机</title> <title>纽迪希亚ACS系统</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

1
src/components/header.vue
View File

@@ -42,6 +42,7 @@ export default {
document.msExitFullscreen() document.msExitFullscreen()
} }
} }
this.$store.dispatch('delUserInfo', '')
this.$router.push('/setup') this.$router.push('/setup')
}, },
toHome () { toHome () {

5
src/config/getData.js
View File

@@ -1,5 +1,10 @@
import {post} from '@config/http.js' import {post} from '@config/http.js'
// 登录
export const handLogin = (user, password) => post('mobile/auth/login', {
username: user,
password: password
})
// 查询设备 // 查询设备
export const queryDevices = () => post('api/pda/queryDevices', {}) export const queryDevices = () => post('api/pda/queryDevices', {})
// 工单查询 // 工单查询

7
src/config/mork.js
View File

@@ -15,3 +15,10 @@ export const queryWorks = () => {
let res = [{mfg_order_name: '001', work_code: 'aaaa'}, {mfg_order_name: '2'}, {mfg_order_name: '3'}, {mfg_order_name: '4'}] let res = [{mfg_order_name: '001', work_code: 'aaaa'}, {mfg_order_name: '2'}, {mfg_order_name: '3'}, {mfg_order_name: '4'}]
return res return res
} }
export const handLogin = (user, password) => {
let res = {
user: {user: {person_name: 'admin'}},
token: 'aaaaattttt'
}
return res
}

BIN
src/images/bg_logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 149 KiB

After

Width:  |  Height:  |  Size: 135 KiB

BIN
src/images/form_bg.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 270 KiB

BIN
src/images/login_tab_active.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
src/images/login_tabs_bg.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

20
src/pages/home.vue
View File

@@ -1,7 +1,10 @@
<template> <template>
<div class="contianer"> <div class="contianer">
<jxHeader type="1" title="工单明细"></jxHeader> <jxHeader type="1" title="工单明细"></jxHeader>
<div class="contianer content"> <div class="welcome_text_wraper">
<div class="welcome_text">{{userName}}, 欢迎进入纽迪希亚ACS系统！</div>
</div>
<div class="contianer content contianer-1">
<div class="zd-row jccenter contianer content_wraper"> <div class="zd-row jccenter contianer content_wraper">
<div class="nav" v-for="(e, i) in menu" :key="i" @click="toPage(e)"> <div class="nav" v-for="(e, i) in menu" :key="i" @click="toPage(e)">
<img class="nav_icon" :src="require('../images/menu/' + e.icon + '.png')" alt="e.title" :style="{'background-color': ['#ff814a', '#4982fd'][i]}"> <img class="nav_icon" :src="require('../images/menu/' + e.icon + '.png')" alt="e.title" :style="{'background-color': ['#ff814a', '#4982fd'][i]}">
@@ -21,6 +24,7 @@ export default {
}, },
data () { data () {
return { return {
userName: this.$store.getters.userInfo !== '' ? JSON.parse(this.$store.getters.userInfo).person_name : '',
menu: [ menu: [
{title: '工单管理', icon: 'RF1', path: 'index'}, {title: '工单管理', icon: 'RF1', path: 'index'},
{title: '退桶任务', icon: 'RF2', path: 'calltask'} {title: '退桶任务', icon: 'RF2', path: 'calltask'}
@@ -51,4 +55,18 @@ export default {
.nav_txt .nav_txt
_font(.4rem, .4rem, #fff,,center) _font(.4rem, .4rem, #fff,,center)
margin-top .6rem margin-top .6rem
.welcome_text_wraper
height .7rem
margin 1.07rem 0.4rem 0.4rem 0.4rem
.welcome_text
font-size .3rem
line-height .7rem
color #F6F9FE
font-family: 'YouSheBiaoTiHei'
background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(49,190,255,0.9) 0%, rgba(239,252,254,1) 40%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
.contianer-1
height calc(100% - 2.17rem)
padding-top 0
</style> </style>

106
src/pages/setup.vue
View File

@@ -2,31 +2,63 @@
<div class="zd-row jccenter contianer"> <div class="zd-row jccenter contianer">
<div class="header-wrap"><h1>ACS</h1></div> <div class="header-wrap"><h1>ACS</h1></div>
<div class="setup-wrap"> <div class="setup-wrap">
<div class="zd-row filter-item"> <div class="setup-wrap-i">
<div class="zd-col-6 filter-label">域名地址</div> <div class="zd-row jcflexstart login_tab">
<input type="text" class="zd-col-18 filter-value" v-model="baseUrl"> <div class="login_tab_item" :class="{'login_tab_active': drift === 0}" @click="_tabChange(0)">登录</div>
</div> <div class="login_tab_item" :class="{'login_tab_active': drift === 50}" @click="_tabChange(50)">配置</div>
<!-- <div class="zd-row filter-item"> </div>
<div class="zd-col-6 filter-label">刷新时间(秒)</div> <div class="login_cnt drift" :style="{'left': '-'+drift*2+'%'}">
<input type="number" class="zd-col-18 filter-value" v-model="setTime"> <div class="login_card">
</div> --> <div class="zd-row filter-item">
<div class="zd-row jccenter button-wrap"> <div class="zd-col-6 filter-label">用户名</div>
<button class="button btn-primary" @click="_config">配置</button> <input type="text" class="zd-col-18 filter-value" v-model="loginname">
</div>
<div class="zd-row filter-item">
<div class="zd-col-6 filter-label">密&nbsp;&nbsp;码</div>
<input type="password" class="zd-col-18 filter-value" v-model="password">
</div>
<div class="zd-row jccenter button-wrap">
<button class="button btn-primary" :disabled="disabled" @click="toLogin">登录</button>
</div>
</div>
<div class="login_card">
<div class="zd-row filter-item">
<div class="zd-col-6 filter-label">域名地址</div>
<input type="text" class="zd-col-18 filter-value" v-model="baseUrl">
</div>
<!-- <div class="zd-row filter-item">
<div class="zd-col-6 filter-label">刷新时间(秒)</div>
<input type="number" class="zd-col-18 filter-value" v-model="setTime">
</div> -->
<div class="zd-row jccenter button-wrap button-wrap-1">
<button class="button btn-primary" @click="_config">配置</button>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { encrypt } from '../main.js'
import {handLogin} from '@config/getData.js'
export default { export default {
name: 'setup', name: 'setup',
data () { data () {
return { return {
drift: 0,
loginname: '',
password: '',
baseUrl: this.$store.getters.baseUrl, baseUrl: this.$store.getters.baseUrl,
setTime: this.$store.getters.setTime / 1000 setTime: this.$store.getters.setTime / 1000,
disabled: false
} }
}, },
methods: { methods: {
_tabChange (num) {
this.drift = num
},
_viewport () { _viewport () {
this.viewportWidth = window.screen.width this.viewportWidth = window.screen.width
this.viewportHeight = window.screen.height this.viewportHeight = window.screen.height
@@ -51,19 +83,47 @@ export default {
setTime: this.setTime * 1000 setTime: this.setTime * 1000
} }
this.$store.dispatch('setConfig', obj) this.$store.dispatch('setConfig', obj)
this.$router.push('/home') this._tabChange(0)
let element = document.documentElement },
if (!(document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement)) { async toLogin () {
if (element.requestFullscreen) { this.disabled = true
element.requestFullscreen() if (this.loginname === '') {
} else if (element.webkitRequestFullScreen) { this.$message({
element.webkitRequestFullScreen() message: '用户名不能为空',
} else if (element.mozRequestFullScreen) { type: 'warning'
element.mozRequestFullScreen() })
} else if (element.msRequestFullscreen) { this.disabled = false
// IE11 return
element.msRequestFullscreen() }
if (this.password === '') {
this.$message({
message: '密码不能为空',
type: 'warning'
})
this.disabled = false
return
}
try {
let res = await handLogin(this.loginname, encrypt(this.password))
this.$store.dispatch('saveUserInfo', JSON.stringify(res.user.user))
this.$store.dispatch('saveToken', res.token)
this.disabled = false
this.$router.push('/home')
let element = document.documentElement
if (!(document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement)) {
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen()
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen()
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen()
}
} }
} catch (e) {
this.disabled = false
} }
} }
} }

43
src/style/layout.styl
View File

@@ -34,10 +34,40 @@
// login // login
.setup-wrap .setup-wrap
width 8.85rem width 9rem
background linear-gradient(45deg, rgba(28, 95, 161, 70%), rgba(20, 67, 120, 70%)) height 7.02rem
border 1px solid #6fc4e2 padding .86rem .85rem 1.12rem .98rem
padding .49rem .48rem background: url('~@/images/form_bg.png') center / 100% no-repeat
.setup-wrap-i
width 100%
height 100%
overflow: hidden
.login_tab
width 100%
height 1.07rem
background: url('~@/images/login_tabs_bg.png') center / 100% no-repeat
align-items: flex-start
.login_tab_item
width 2.7rem
height .73rem
font-size .4rem
line-height .73rem
text-align: center
color #99B1DD
font-family 'YouSheBiaoTiHei'
.login_tab_active
color #fff
background: url('~@/images/login_tab_active.png') center / 100% no-repeat
.login_cnt
position relative
width 200%
overflow hidden
.login_card
width 50%
float left
padding 0 .41rem
.drift
transition left .3s linear
.contianer .contianer
_wh(100%, 100%) _wh(100%, 100%)
.header-wrap .header-wrap
@@ -50,7 +80,10 @@
_font(.8rem, 1rem, #CF6A46,,center) _font(.8rem, 1rem, #CF6A46,,center)
font-family "YouSheBiaoTiHei" font-family "YouSheBiaoTiHei"
.button-wrap { .button-wrap {
margin-top: .2rem; margin-top: .52rem;
}
.button-wrap-1 {
margin-top: 1.64rem;
} }
.button { .button {
width: 3.36rem; width: 3.36rem;