262 lines
6.8 KiB
Vue
262 lines
6.8 KiB
Vue
<template>
|
||
<ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100" :isFlat="false">
|
||
|
||
<div class="loginBigImg">
|
||
<div class="loginTitle">
|
||
<div>数字化项目监管平台</div>
|
||
<div class="titltText">SHUZIHUAXIANGMUJIANGUANPINGTAI</div>
|
||
</div>
|
||
<div class="loginFrom">
|
||
<div class="inutFrom">
|
||
<el-form ref="loginFormRef" class="form" :model="loginForm" :rules="loginRules" size="large">
|
||
<el-form-item prop="account" style="margin-bottom: 10%">
|
||
<el-input v-model="loginForm.account" placeholder="请输入账号">
|
||
<template #prefix>
|
||
<img src="@/assets/images/login/accountImg1.png" alt="" />
|
||
</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item prop="password">
|
||
<el-input
|
||
type="password"
|
||
v-model="loginForm.password"
|
||
placeholder="请输入密码"
|
||
show-password
|
||
autocomplete="new-password"
|
||
>
|
||
<template #prefix>
|
||
<img src="@/assets/images/login/passwordImg1.png" alt="" />
|
||
</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<!-- <div class="passwordBox">
|
||
<span><el-checkbox style="color: #fff" v-model="checked">记住密码</el-checkbox></span>
|
||
<span style="float: right; margin-top: 2.5%">忘记密码？</span>
|
||
</div> -->
|
||
</el-form>
|
||
<div style="height: 45%">
|
||
<el-button class="loginBtn" @click="login(loginFormRef)" :loading="loading">登录</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</ScaleBox>
|
||
|
||
</template>
|
||
|
||
<script setup lang="ts" name="logonPage">
|
||
import ScaleBox from "vue3-scale-box";
|
||
|
||
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
|
||
import { useRouter } from "vue-router";
|
||
import { Login } from "@/api/interface";
|
||
import { ElMessage, ElNotification } from "element-plus";
|
||
import { loginApi, jumpLoginApi } from "@/api/modules/login";
|
||
import { GlobalStore } from "@/stores";
|
||
import { TabsStore } from "@/stores/modules/tabs";
|
||
import { KeepAliveStore } from "@/stores/modules/keepAlive";
|
||
import { getTimeState } from "@/utils/util";
|
||
import { HOME_URL } from "@/enums/Home";
|
||
import { initDynamicRouter } from "@/routers/modules/dynamicRouter";
|
||
// import { CircleClose, UserFilled } from "@element-plus/icons-vue";
|
||
import type { ElForm } from "element-plus";
|
||
import { log } from "console";
|
||
|
||
const router = useRouter();
|
||
const tabsStore = TabsStore();
|
||
const keepAlive = KeepAliveStore();
|
||
const globalStore = GlobalStore();
|
||
|
||
// 定义 formRef（校验规则）
|
||
type FormInstance = InstanceType<typeof ElForm>;
|
||
const loginFormRef = ref<FormInstance>();
|
||
const loginRules = reactive({
|
||
account: [{ required: true, message: "请输入账号", trigger: "blur" }],
|
||
password: [{ required: true, message: "请输入密码", trigger: "blur" }]
|
||
});
|
||
|
||
const loading = ref(false);
|
||
const loginForm = reactive<Login.ReqLoginForm>({ account: "", password: "" });
|
||
const login = (formEl: FormInstance | undefined) => {
|
||
if (!formEl) return;
|
||
formEl.validate(async (valid, params) => {
|
||
if (!valid) return;
|
||
loading.value = true;
|
||
try {
|
||
const arr = ref(["/government", "/home", "/home", "/home"]);
|
||
// 1.执行登录接口
|
||
const { result } = await loginApi({ ...loginForm, password: loginForm.password });
|
||
console.log("执行登录接口 ：结果：=========", result);
|
||
globalStore.setSN(result.sn);
|
||
globalStore.setToken(result.token);
|
||
globalStore.setAccount(result.account);
|
||
globalStore.setAccountType(result.accountType);
|
||
globalStore.setProjectDateAuth(result.menuAuthority);
|
||
globalStore.setIsManager(result.isManager); //我已知晓
|
||
|
||
// 2.添加动态路由
|
||
// await initDynamicRouter();
|
||
// router.push(arr[result.accountType - 1]);
|
||
// 3.清空 tabs、keepAlive 保留的数据
|
||
tabsStore.closeMultipleTab();
|
||
keepAlive.setKeepAliveName();
|
||
|
||
router.push("/large");
|
||
// router.push(arr.value[result.accountType - 1]);
|
||
// 4.跳转到首页
|
||
|
||
// ElNotification({
|
||
// title: getTimeState(),
|
||
// message: "欢迎登录",
|
||
// type: "success",
|
||
// duration: 3000
|
||
// });
|
||
// return router.go(0);
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
});
|
||
};
|
||
|
||
// resetForm
|
||
const resetForm = (formEl: FormInstance | undefined) => {
|
||
if (!formEl) return;
|
||
formEl.resetFields();
|
||
};
|
||
|
||
onMounted(async () => {
|
||
|
||
|
||
// 监听enter事件（调用登录）
|
||
document.onkeydown = (e: any) => {
|
||
e = window.event || e;
|
||
if (e.code === "Enter" || e.code === "enter" || e.code === "NumpadEnter") {
|
||
if (loading.value) return;
|
||
login(loginFormRef.value);
|
||
}
|
||
};
|
||
});
|
||
// login页面销毁时，需要去掉enter监听
|
||
onBeforeUnmount(() => {
|
||
document.onkeydown = null;
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.loginBigImg {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: url("@/assets/images/login/loginImg.gif") no-repeat;
|
||
background-size: 100% 100%;
|
||
|
||
.loginTitle {
|
||
width: 20%;
|
||
top: 30%;
|
||
position: relative;
|
||
left: 70%;
|
||
font-size: calc(100vw * 40 / 1920);
|
||
color: #65c4f9;
|
||
font-family: "pmzd";
|
||
background-image: linear-gradient(to right, #65c4f9, #82fbea);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
|
||
.titltText {
|
||
margin-top: 2%;
|
||
font-size: calc(100vw * 17 / 1920);
|
||
font-family: "normal";
|
||
}
|
||
}
|
||
|
||
.loginFrom {
|
||
width: 22%;
|
||
height: 35%;
|
||
position: relative;
|
||
top: 33%;
|
||
left: 68%;
|
||
background: url("@/assets/images/login/loginFormImg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
|
||
.inutFrom {
|
||
width: 80%;
|
||
height: 68%;
|
||
position: absolute;
|
||
top: 18%;
|
||
left: 10%;
|
||
color: #fff;
|
||
|
||
.passwordBox {
|
||
font-family: SourceHanSansCN-Regular;
|
||
color: #fff;
|
||
font-size: calc(100vw * 14 / 1920);
|
||
margin-top: -4%;
|
||
}
|
||
}
|
||
|
||
.loginBtn {
|
||
width: 100%;
|
||
height: 45%;
|
||
color: #eeeeee;
|
||
font-family: SourceHanSansCN-Regular;
|
||
font-size: calc(100vw * 20 / 1920);
|
||
border: none !important;
|
||
border-radius: 0 !important;
|
||
background: linear-gradient(to right, #2758c0 0.5%, #65d7f9 99%);
|
||
margin-top: 2%;
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .el-input__wrapper {
|
||
background: #2758c0;
|
||
background: rgba(39, 88, 192, 0.4);
|
||
box-shadow: none;
|
||
border: 1px solid #2758c0;
|
||
border-radius: 0 !important;
|
||
}
|
||
|
||
::v-deep .el-input__inner {
|
||
color: #fff;
|
||
font-size: calc(100vw * 16 / 1920);
|
||
font-family: SourceHanSansCN-Regular;
|
||
}
|
||
|
||
::v-deep .el-input {
|
||
height: 110%;
|
||
}
|
||
|
||
::v-deep .el-input__prefix {
|
||
width: 10%;
|
||
border-right: 1px solid #2758c0;
|
||
margin-right: 5%;
|
||
}
|
||
|
||
::v-deep .el-input .el-input__icon {
|
||
color: #3676ff;
|
||
}
|
||
|
||
::v-deep .el-input .el-input__icon:hover {
|
||
color: #3676ff;
|
||
}
|
||
|
||
::v-deep .el-checkbox__inner {
|
||
border-color: #2758c0;
|
||
background: #2758c0;
|
||
background: rgba(39, 88, 192, 0.4);
|
||
}
|
||
|
||
::v-deep .el-input__inner:-webkit-autofill {
|
||
transition: background-color 50000s ease-in-out 0s;
|
||
-webkit-text-fill-color: #fff; //记住密码的颜色
|
||
caret-color: #fff; //改变输入框光标颜色,同时又不改变输入框里面的内容的颜色
|
||
}
|
||
|
||
//鼠标聚焦修改图标颜色
|
||
::v-deep .el-input__inner:focus {
|
||
.el-input__prefix-inner {
|
||
img {
|
||
}
|
||
}
|
||
}
|
||
</style>
|