<template>
|
<div class="login-warp">
|
<div class="top-img-bg">
|
<p class="title">低空无人机监测网移动应用</p>
|
</div>
|
<div class="user-password-box">
|
<div class="username">
|
<div>账号:</div>
|
<el-input v-model="formState.username" placeholder="请输入登录账号"></el-input>
|
</div>
|
<div class="password">
|
<div>密码:</div>
|
<el-input type="password" v-model="formState.password" placeholder="请输入密码"></el-input>
|
</div>
|
<div>
|
<el-button class="loginto" type="primary" :disabled="loginBtnDisabled" @click="onSubmit">登录</el-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import { ref, onMounted, reactive, computed, UnwrapRef } from 'vue';
|
// import { getWorkSpaceInfo, } from '@/api/drone/index';
|
// import { getSysName, loginByUsername } from '@/api/user';
|
import { LoginBody } from '@/api/manage'
|
import { ERouterName, EUserType } from '@/types'
|
import { getRoot } from '../../root'
|
import { useMyStore } from '@/store'
|
|
const root = getRoot()
|
|
const store = useMyStore()
|
|
const formState: UnwrapRef<LoginBody> = reactive({
|
//租户ID
|
tenantId: '000000',
|
//部门ID
|
deptId: '',
|
//角色ID
|
roleId: '',
|
//用户名
|
username: '',
|
//密码
|
password: '',
|
//账号类型
|
type: 'account',
|
//验证码的值
|
code: '',
|
//验证码的索引
|
key: '',
|
//预加载白色背景
|
image:
|
'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
|
flag: EUserType.Web,
|
})
|
|
onMounted(() => {
|
// 暂时没用到
|
// getSysName(1).then(res => {
|
// console.log(res, '低调点')
|
// })
|
})
|
|
const loginBtnDisabled = computed(() => {
|
return !formState.username || !formState.password
|
})
|
|
const onSubmit = async () => {
|
store
|
.dispatch('LoginByUsername', formState)
|
.then((res) => {
|
root.$router.push(ERouterName.DRONEPILOTLIST)
|
})
|
.catch(() => {
|
})
|
}
|
|
</script>
|
<style lang="scss" scoped>
|
.login-warp
|
{
|
width: 100%;
|
height: 100vh;
|
.top-img-bg {
|
width: 100%;
|
height: calc(100vh - 30%);
|
background: url('@/assets/images/dj-bg.jpeg');
|
background-size: 100% 100%;
|
.title {
|
text-align: center;
|
font-size: 20px;
|
color: #00afe9;
|
padding-top: 10%;
|
}
|
}
|
.user-password-box {
|
height: calc(100vh - 70%);
|
padding: 4% 6% 1% 10%;
|
|
.username {
|
margin-bottom: 2%;
|
}
|
|
::v-deep(.el-input__wrapper) {
|
box-shadow: none;
|
border-radius: initial;
|
border-bottom: 1px solid #eee;
|
padding: 0;
|
}
|
.loginto {
|
width: 100%;
|
margin: 6% 0;
|
}
|
}
|
}
|
</style>
|
