<template>
|
<div class="loginBox">
|
<div class="loginEarth">
|
<iframe id="ifream"
|
style="border: none"
|
width="100%"
|
height="100%"
|
v-bind:src="reportUrl"></iframe>
|
</div>
|
<div class="zz">
|
<div class="title_img">
|
<!-- <div class="titleLogo"></div> -->
|
<h3></h3>
|
</div>
|
<div class="loginMenu">
|
<div class="login_title">
|
<span>用户登录</span>
|
</div>
|
<el-form ref="ruleFormRef"
|
:model="ruleForm"
|
status-icon
|
:rules="rules"
|
class="loginForm">
|
<el-form-item prop="user">
|
<el-input placeholder="输入登录账号"
|
class="nobr"
|
autocomplete="off"
|
:prefix-icon="User"
|
v-model="ruleForm.user" />
|
</el-form-item>
|
<el-form-item prop="passWorld">
|
<el-input v-model="ruleForm.passWorld"
|
placeholder="请输入登录密码"
|
type="password"
|
show-password
|
autocomplete="off"
|
:prefix-icon="Lock" />
|
</el-form-item>
|
<el-form-item prop="verify">
|
<div style="display: flex; justify-content: space-between; width: 100%">
|
<el-input placeholder="请输入验证码（忽略大小写）"
|
v-model="ruleForm.verify"
|
style="width: 68%" />
|
<valid-code style="width: 27%"></valid-code>
|
</div>
|
</el-form-item>
|
<el-form-item>
|
<img src="../assets/img/login/zhengshu.png"
|
alt="" /><span style="color: white">证书安装与添加信任站点</span>
|
</el-form-item>
|
<el-form-item>
|
<img src="../assets/img/login/document.png"
|
alt="" /><span style="color: white">使用帮助文档</span>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary"
|
@click="submitForm(ruleFormRef)"
|
class="nobr loginbtn btnbox">登录</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
onUnmounted,
|
} from "vue";
|
import type { FormInstance, FormRules } from "element-plus";
|
import emitter from "@/utils/bus";
|
import validCode from "@/components/validCode.vue";
|
import { useStore } from "vuex";
|
import JSEncrypt from "jsencrypt";
|
import configTool from "@/assets/js/tool/configTool";
|
import { removeToken, setToken } from "@/utils/auth";
|
//Router
|
import router from "@/router";
|
import { useRoute } from "vue-router";
|
|
//图标
|
const store = useStore();
|
const reportUrl = ref(null);
|
var encrypt = new JSEncrypt();
|
const ruleFormRef = ref<FormInstance>();
|
|
const ruleForm = reactive({
|
user: "",
|
passWorld: "",
|
verify: "",
|
});
|
const validateVerify = (rule: any, value: any, callback: any) => {
|
if (value === "") {
|
callback(new Error("请输入验证码"));
|
} else if (value.toLowerCase() != store.state.loginCode.toLowerCase()) {
|
callback(new Error("验证码错误，请重新输入"));
|
} else {
|
callback();
|
}
|
};
|
|
const validateUser = (rule: any, value: any, callback: any) => {
|
if (value === "") {
|
callback(new Error("请输入登录用户"));
|
} else if (value.toLowerCase() != "admin") {
|
callback(new Error("密码输入错误，请重新输入"));
|
} else {
|
callback();
|
}
|
};
|
const validatePass = (rule: any, value: any, callback: any) => {
|
if (!value) {
|
callback(new Error("请输入登录密码"));
|
} else if (value.toLowerCase() != "123456") {
|
callback(new Error("用户名输入错误，请重新输入"));
|
} else {
|
callback();
|
}
|
};
|
const rules = reactive<FormRules<typeof ruleForm>>({
|
user: [{ validator: validateUser, trigger: "blur" }],
|
passWorld: [{ validator: validatePass, trigger: "blur" }],
|
verify: [{ validator: validateVerify, trigger: "blur" }],
|
});
|
const submitForm = (formEl: FormInstance | undefined) => {
|
if (!formEl) return;
|
|
formEl.validate((valid) => {
|
if (valid) {
|
var obj = {
|
time: configTool.getEndDateTime(),
|
user: ruleForm.user,
|
token: "testToken",
|
};
|
setToken(JSON.stringify(obj));
|
router.push("/");
|
} else {
|
emitter.emit("handleDraw", true);
|
return false;
|
}
|
});
|
};
|
onMounted(() => {
|
removeToken();
|
reportUrl.value = config.ifreamLogin;
|
});
|
onUnmounted(() => {});
|
</script>
|
<style lang="less" scoped>
|
.loginBox {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
background: url("../assets/img/login/背景.png") no-repeat;
|
background-size: 100% 100%;
|
.zz {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
z-index: 1;
|
}
|
.loginEarth {
|
width: 100%;
|
height: 100%;
|
top: 3%;
|
left: 1%;
|
position: absolute;
|
z-index: 0;
|
}
|
.loginMenu {
|
position: absolute;
|
right: 16%;
|
top: 50%;
|
transform: translateY(-50%);
|
padding: 40px;
|
background: rgba(7, 8, 14, 0.8);
|
border: 1px solid #d6e4ff;
|
border-radius: 8px;
|
.login_title {
|
font-size: 25px;
|
font-family: Microsoft YaHei;
|
font-weight: bold;
|
color: #689cff;
|
}
|
|
.loginForm {
|
margin-top: 20px;
|
|
width: 385px;
|
}
|
/deep/.el-form-item {
|
height: 41px;
|
}
|
/deep/ .el-input .el-input__inner {
|
background: transparent !important;
|
}
|
|
/deep/ .el-input .el-input-group__prepend {
|
border: 0;
|
padding: 0 !important;
|
}
|
.loginbtn {
|
width: 384px;
|
height: 50px;
|
}
|
}
|
.title_img {
|
position: absolute;
|
left: 12%;
|
top: 8%;
|
|
display: flex;
|
align-items: center;
|
.titleLogo {
|
width: 80px;
|
height: 80px;
|
background: url("../assets/img/login/logo.png") no-repeat;
|
background-size: 100% 100%;
|
}
|
h3 {
|
color: #fff;
|
font-size: 40px;
|
white-space: nowrap;
|
margin-left: 10px;
|
}
|
}
|
}
|
</style>
|
