289 lines
7.4 KiB
Vue
289 lines
7.4 KiB
Vue
<template>
|
|
<div class="login">
|
|
<div class="login_main">
|
|
<div class="title"><img src="../../assets/images/logo.png" alt="" /></div>
|
|
|
|
<div class="form">
|
|
<el-form
|
|
ref="formRef"
|
|
:model="data.form"
|
|
:rules="data.rules"
|
|
@submit.prevent="fnLogin"
|
|
>
|
|
<el-form-item prop="username">
|
|
<el-input
|
|
v-model="data.form.username"
|
|
placeholder="请输入用户名"
|
|
tabindex="1"
|
|
>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="password">
|
|
<el-input
|
|
v-model="data.form.password"
|
|
type="password"
|
|
placeholder="请输入密码"
|
|
tabindex="2"
|
|
>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<verification v-model:verification-pass="verificationPass" />
|
|
</el-form-item>
|
|
<el-form-item class="button">
|
|
<el-button native-type="submit">登录</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="qrcode">
|
|
<div v-if="data.lgAppSrc">
|
|
<el-popover placement="bottom" :width="125" trigger="hover">
|
|
<template #reference>
|
|
<span style="cursor: pointer; color: #666666; font-size: 14px"
|
|
>新泰安全App</span
|
|
></template
|
|
>
|
|
<div class="qrcode_main">
|
|
<div class="qrcode_list">
|
|
<img :src="data.lgAppSrc" alt="" width="125" height="125" />
|
|
<div>扫码下载</div>
|
|
</div>
|
|
</div>
|
|
</el-popover>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="qrCode">-->
|
|
<!-- <div v-if="data.qyAppSrc">-->
|
|
<!-- <el-popover placement="bottom" :width="100" trigger="click">-->
|
|
<!-- <template #reference> 新泰安全APP</template>-->
|
|
<!-- <img :src="data.qyAppSrc" alt="" width="125" height="125" />-->
|
|
<!-- </el-popover>-->
|
|
<!-- </div>-->
|
|
<!-- <div v-if="data.qyAppSrc">|</div>-->
|
|
<!-- <div v-if="data.zdgcAppSrc">-->
|
|
<!-- <el-popover placement="bottom" :width="100" trigger="click">-->
|
|
<!-- <template #reference> 重点工程APP</template>-->
|
|
<!-- <img :src="data.zdgcAppSrc" alt="" width="125" height="125" />-->
|
|
<!-- </el-popover>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
</div>
|
|
<div class="foot" style="color: #222222">
|
|
北京得瑞紫蜂科技有限公司 版权所有 Copy right 2013-2020-v7
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref } from "vue";
|
|
import { useRouter } from "vue-router";
|
|
import { ElMessage } from "element-plus";
|
|
import Verification from "@/components/verification/index";
|
|
import { useUserStore } from "@/pinia/user";
|
|
import { getAllAppVersion, Login } from "@/request/api";
|
|
import { debounce } from "throttle-debounce";
|
|
import useFormValidate from "@/assets/js/useFormValidate.js";
|
|
import { useQRCode } from "@vueuse/integrations/useQRCode";
|
|
|
|
const router = useRouter();
|
|
const formRef = ref(null);
|
|
const verificationPass = ref(false);
|
|
const userStore = useUserStore();
|
|
// const src = useQRCode(() => "http://47.92.102.56:7811/file/app/qy.apk", {
|
|
// width: 125,
|
|
// height: 125,
|
|
// margin: 1,
|
|
// correctLevel: "H",
|
|
// });
|
|
// const src1 = useQRCode(() => "http://47.92.102.56:7811/file/app/zdgc.apk", {
|
|
// width: 125,
|
|
// height: 125,
|
|
// margin: 1,
|
|
// correctLevel: "H",
|
|
// });
|
|
const data = reactive({
|
|
form: {
|
|
username: "",
|
|
password: "",
|
|
},
|
|
// zdgcAppSrc: "",
|
|
hlwAppSrc: "",
|
|
lgAppSrc: "",
|
|
rules: {
|
|
username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
|
|
password: [{ required: true, message: "请输入密码", trigger: "blur" }],
|
|
},
|
|
});
|
|
const getAppVersion = async () => {
|
|
const resData = await getAllAppVersion();
|
|
data.lgAppSrc = useQRCode(() => resData.data[0]?.FILEURL, {
|
|
width: 125,
|
|
height: 125,
|
|
margin: 1,
|
|
correctLevel: "H",
|
|
});
|
|
// const bgwSrc = resData.data[0]?.FILEURL.replace(
|
|
// "183.251.104.38:10110",
|
|
// "10.199.64.27:7811"
|
|
// );
|
|
// data.hlwAppSrc = useQRCode(() => bgwSrc, {
|
|
// width: 125,
|
|
// height: 125,
|
|
// margin: 1,
|
|
// correctLevel: "H",
|
|
// });
|
|
// data.zdgcAppSrc = useQRCode(() => resData.data[1]?.FILEURL, {
|
|
// width: 125,
|
|
// height: 125,
|
|
// margin: 1,
|
|
// correctLevel: "H",
|
|
// });
|
|
};
|
|
await getAppVersion();
|
|
const fnLogin = debounce(
|
|
1000,
|
|
() => {
|
|
if (import.meta.env.DEV) {
|
|
fnSubmitLogin();
|
|
return;
|
|
}
|
|
if (verificationPass.value) {
|
|
fnSubmitLogin();
|
|
} else {
|
|
ElMessage.warning("请进行登录验证");
|
|
}
|
|
},
|
|
{ atBegin: true }
|
|
);
|
|
const fnSubmitLogin = async () => {
|
|
await useFormValidate(formRef, "请输入用户名密码");
|
|
// eslint-disable-next-line no-undef
|
|
const jsencrypt = new JSEncrypt();
|
|
jsencrypt.setPublicKey(
|
|
"MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDUoHAavCikaZxjlDM6Km8cX+ye78F4oF39AcEfnE1p2Yn9pJ9WFxYZ4Vkh6F8SKMi7k4nYsKceqB1RwG996SvHQ5C3pM3nbXCP4K15ad6QhN4a7lzlbLhiJcyIKszvvK8ncUDw8mVQ0j/2mwxv05yH6LN9OKU6Hzm1ninpWeE+awIDAQAB"
|
|
);
|
|
const KEYDATA = jsencrypt.encrypt(
|
|
"zcloudchina" + data.form.username + ",zy," + data.form.password
|
|
);
|
|
const resData = await Login({
|
|
KEYDATA,
|
|
SOURCE: 1,
|
|
});
|
|
await userStore.setUserInfo({
|
|
...userStore.getUserInfo,
|
|
...resData,
|
|
});
|
|
// 定位系统宕机的话 跳转到首页 否则 地图页
|
|
// await router.replace(resData.webSiteStatus ? "/BI" : "/index");
|
|
await router.replace("/index");
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.login {
|
|
width: 100%;
|
|
max-width: 1920px;
|
|
margin: 0 auto;
|
|
height: 100vh;
|
|
position: relative;
|
|
background: #1e4294 url("../../assets/images/loginbg.png") no-repeat top
|
|
center;
|
|
display: flex;
|
|
background-size: 100% 100%;
|
|
|
|
.login_main {
|
|
width: 470px;
|
|
background: #ffffff;
|
|
border-radius: 2px;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
padding: 2px;
|
|
padding-bottom: 40px;
|
|
.title {
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
img {
|
|
width: 462px;
|
|
height: 121px;
|
|
}
|
|
}
|
|
|
|
.form {
|
|
width: 100%;
|
|
padding: 0 30px;
|
|
.el-form-item {
|
|
width: 100%;
|
|
margin: 30px auto;
|
|
|
|
.el-input {
|
|
height: 40px;
|
|
}
|
|
}
|
|
|
|
.button {
|
|
.el-button {
|
|
background: #3071ff;
|
|
border: 1px solid #008aff;
|
|
height: 40px;
|
|
width: 100%;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.qrcode {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding: 0 30px;
|
|
}
|
|
|
|
.foot {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
:deep {
|
|
.el-input__wrapper {
|
|
padding: 16px 10px;
|
|
border: none;
|
|
}
|
|
.el-input-group__prepend {
|
|
padding-top: 5px !important;
|
|
}
|
|
.el-form-item__error {
|
|
padding-top: 12px;
|
|
}
|
|
.el-popover.el-popper {
|
|
background: #ffffff !important;
|
|
}
|
|
.el-input {
|
|
--el-input-bg-color: #f9f9f9;
|
|
--el-input-text-color: #000;
|
|
--el-fill-color-light: #222;
|
|
--el-input-border-color: #dde0eb;
|
|
}
|
|
}
|
|
.qrcode_main {
|
|
display: flex;
|
|
text-align: center;
|
|
.qrcode_list {
|
|
width: 125px;
|
|
margin-right: 20px;
|
|
text-align: center;
|
|
|
|
img {
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|