Skip to content

F
FleetTruckView
Commit 6f8fc853 authored by 高晓帆's avatar 高晓帆
Browse files
Options

fix

parent 306c4076
Hide whitespace changes
Inline Side-by-side
Showing with 335 additions and 1 deletion
.history/src/views/Login_20231208180338.vue 0 → 100644
View file @ 6f8fc853
<template>
<div class="login">
<p v-show="isShow" class="tips">
{{ tip }}
</p>
<div class="loadingContainer" v-show="isShowLoading">
<Spin fix>
<Icon type="ios-loading" size="30" class="spin-icon-load" style="color: #dec02b"></Icon>
<span class="loading-tip">正在登录，请稍后...</span>
</Spin>
</div>
<img class="logo" src="/image/logo.png" alt="" />
<Form>
<FormItem prop="number">
<Input type="text" v-model.trim="formItem.number" placeholder="请输入用户名">
<Icon type="ios-person-outline" slot="prepend"></Icon>
</Input>
</FormItem>
<FormItem prop="name">
<Input type="password" v-model.trim="formItem.password" placeholder="请输入密码">
<Icon type="ios-lock-outline" slot="prepend"></Icon>
</Input>
</FormItem>
<FormItem>
<Button long type="primary" @click="handleSubmit">登录</Button>
</FormItem>
</Form>
</div>
</template>
<script setup>
import { reactive, ref, watch, getCurrentInstance } from 'vue';
import { storeToRefs } from 'pinia'
import { Message } from 'view-ui-plus';
import { useStateStore } from '@/store/StateStore.js'
import router from '@/router'
import writeLog from '@/js/writeLog.js'
const isShow = ref(false)
const tip = ref('')
const isShowLoading = ref(false)
const truckMonitorStatus = ref(false)
const rootBus = ref(null)
const stateStore = useStateStore()
const stateStoreToRefs = storeToRefs(stateStore)
const { getLoginAck, truckMonitorMsg, isShowNetworkTip } = stateStoreToRefs
const instance = getCurrentInstance()
const { appContext } = instance
const { $indexRoot , $axios} = appContext.config.globalProperties
const formItem = reactive({
number: '',
password: ''
})
function handleSubmit() {
if (isShowLoading.value) return
if (truckMonitorStatus.value) return Message.error('车端未启动，无法登录！')
if (!formItem.number || !formItem.password) return Message.error('请将用户名和密码填写完整！')
window.state = "login";
let loginForm = JSON.stringify({
type: "/login/req",
msg: {
number: formItem.number,
password: formItem.password
}
})
if ($indexRoot.sock) {
$indexRoot.sock.send(loginForm)
} else {
$indexRoot.init().then(socket => {
socket.send(loginForm)
})
}
}
watch(getLoginAck, (value) => {
if (value && window.state === 'login') {
let {code, number} = value
if (code === 0 && number === formItem.number) {
writeLog('INFO',"登陆成功")
router.push({
name: 'main'
})
window.state = null
stateStore.setLoginForm(formItem)
// setInterval(() => {
// writeLog('WARNING',`网络异常,请检测网络！连接超时3s`)
// },2000);
} else {
Message.error(value.msg)
stateStore.setData('loginAck', null)
}
}
})
watch([truckMonitorMsg, isShowNetworkTip], ([data, isNetworkTip]) => {
if (data) {
let { visible, msg } = data
truckMonitorStatus.value = visible
isShow.value = visible
tip.value = msg
isShowLoading.value = false
}
if (isNetworkTip) {
isShow.value = isNetworkTip.value
}
}, {deep: true, immediate: true})
</script>
<style lang="less" scoped>
.login {
width: 100%;
height: 100%;
background: url("/image/background.png") no-repeat;
background-size: cover;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
.logo {
margin-bottom: 20px;
width: 25vw;
height: auto;
}
.tips {
color: #ff6363;
animation: roll 5s infinite;
position: absolute;
top: 2vh;
}
@keyframes roll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-200px);
}
}
.loadingContainer {
display: block;
position: absolute;
width: 200px;
top: 15vh;
background: rgba(0, 0, 0, 0);
}
.loadingContainer .ivu-spin-fix {
background: rgba(0, 0, 0, 0) !important;
}
.loading-tip {
white-space: nowrap;
color: #fff;
}
}
</style>
\ No newline at end of file
.history/src/views/Login_20231227193322.vue 0 → 100644
View file @ 6f8fc853
<template>
<div class="login">
<p v-show="isShow" class="tips">
{{ tip }}
</p>
<div class="loadingContainer" v-show="isShowLoading">
<Spin fix>
<Icon type="ios-loading" size="30" class="spin-icon-load" style="color: #dec02b"></Icon>
<span class="loading-tip">正在登录，请稍后...</span>
</Spin>
</div>
<img class="logo" src="/image/logo.png" alt="" />
<Form>
<FormItem prop="number">
<Input type="text" v-model.trim="formItem.number" placeholder="请输入用户名">
<Icon type="ios-person-outline" slot="prepend"></Icon>
</Input>
</FormItem>
<FormItem prop="name">
<Input type="password" v-model.trim="formItem.password" placeholder="请输入密码">
<Icon type="ios-lock-outline" slot="prepend"></Icon>
</Input>
</FormItem>
<FormItem>
<Button long type="primary" @click="handleSubmit">登录</Button>
</FormItem>
</Form>
</div>
</template>
<script setup>
import { reactive, ref, watch, getCurrentInstance } from 'vue';
import { storeToRefs } from 'pinia'
import { Message } from 'view-ui-plus';
import { useStateStore } from '@/store/StateStore.js'
import router from '@/router'
import writeLog from '@/js/writeLog.js'
const isShow = ref(false)
const tip = ref('')
const isShowLoading = ref(false)
const truckMonitorStatus = ref(false)
const rootBus = ref(null)
const stateStore = useStateStore()
const stateStoreToRefs = storeToRefs(stateStore)
const { getLoginAck, truckMonitorMsg, isShowNetworkTip } = stateStoreToRefs
const instance = getCurrentInstance()
const { appContext } = instance
const { $indexRoot , $axios} = appContext.config.globalProperties
const formItem = reactive({
number: '',
password: ''
})
function handleSubmit() {
if (isShowLoading.value) return
if (truckMonitorStatus.value) return Message.error('车端未启动，无法登录！')
if (!formItem.number || !formItem.password) return Message.error('请将用户名和密码填写完整！')
window.state = "login";
let loginForm = JSON.stringify({
type: "/login/req",
msg: {
number: formItem.number,
password: formItem.password
}
})
if ($indexRoot.sock) {
$indexRoot.sock.send(loginForm)
} else {
$indexRoot.init().then(socket => {
socket.send(loginForm)
})
}
}
watch(getLoginAck, (value) => {
if (value && window.state === 'login') {
let {code, number} = value
if (code === 0 && number === formItem.number) {
router.push({
name: 'main'
})
window.state = null
stateStore.setLoginForm(formItem)
writeLog('INFO',"登陆成功")
// setInterval(() => {
// writeLog('WARNING',`网络异常,请检测网络！连接超时3s`)
// },2000);
} else {
Message.error(value.msg)
stateStore.setData('loginAck', null)
}
}
})
watch([truckMonitorMsg, isShowNetworkTip], ([data, isNetworkTip]) => {
if (data) {
let { visible, msg } = data
truckMonitorStatus.value = visible
isShow.value = visible
tip.value = msg
isShowLoading.value = false
}
if (isNetworkTip) {
isShow.value = isNetworkTip.value
}
}, {deep: true, immediate: true})
</script>
<style lang="less" scoped>
.login {
width: 100%;
height: 100%;
background: url("/image/background.png") no-repeat;
background-size: cover;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
.logo {
margin-bottom: 20px;
width: 25vw;
height: auto;
}
.tips {
color: #ff6363;
animation: roll 5s infinite;
position: absolute;
top: 2vh;
}
@keyframes roll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-200px);
}
}
.loadingContainer {
display: block;
position: absolute;
width: 200px;
top: 15vh;
background: rgba(0, 0, 0, 0);
}
.loadingContainer .ivu-spin-fix {
background: rgba(0, 0, 0, 0) !important;
}
.loading-tip {
white-space: nowrap;
color: #fff;
}
}
</style>
\ No newline at end of file
src/views/Login.vue
View file @ 6f8fc853
......@@ -82,12 +82,12 @@
if (value && window.state === 'login') {
let {code, number} = value
if (code === 0 && number === formItem.number) {
writeLog('INFO',"登陆成功")
router.push({
name: 'main'
})
window.state = null
stateStore.setLoginForm(formItem)
writeLog('INFO',"登陆成功")
// setInterval(() => {
// writeLog('WARNING',`网络异常,请检测网络！连接超时3s`)
// },2000);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment