YOU
8 months ago
3 changed files with 485 additions and 19 deletions
|
After Width: 1920 | Height: 1080 | Size: 899 KiB |
@ -0,0 +1,472 @@ |
|||||
|
<template> |
||||
|
<div class="login" v-loading="autoLoading" element-loading-text="自动登陆中..."> |
||||
|
<div id="login-bg-container" ref="loginBgContainerRef"></div> |
||||
|
<div class="screen-adapter"> |
||||
|
<screen-adapter> |
||||
|
<div class="container"> |
||||
|
<div id="login-animate"></div> |
||||
|
<div class="form theme-bg"> |
||||
|
<div class="title" v-html="title"></div> |
||||
|
<el-form @keyup.enter="dataFormSubmitHandle" :model="dataForm" :rules="dataRule" ref="dataFormRef"> |
||||
|
<el-form-item prop="username"> |
||||
|
<el-input placeholder="请输入用户账号" v-model="dataForm.username"> |
||||
|
<template #prefix> |
||||
|
<!-- <svg-icon name="userName" class="name-svg"></svg-icon>--> |
||||
|
<el-icon color="#20a3f5" size="18"> |
||||
|
<User /> |
||||
|
</el-icon> |
||||
|
</template> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="password"> |
||||
|
<el-input :type="type" placeholder="请输入密码" v-model="dataForm.password"> |
||||
|
<template #prefix> |
||||
|
<!-- <svg-icon name="password" class="pass-svg"></svg-icon>--> |
||||
|
<el-icon color="#20a3f5" size="18"> |
||||
|
<Lock /> |
||||
|
</el-icon> |
||||
|
</template> |
||||
|
<template #suffix> |
||||
|
<div style="cursor: pointer"> |
||||
|
<el-icon @click="flag = !flag"> |
||||
|
<View v-if="flag" /> |
||||
|
<Lock v-else /> |
||||
|
</el-icon> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-button type="primary" size="small" @click="dataFormSubmitHandle" :loading="loading" class="submit-btn"> |
||||
|
<!-- <svg-icon v-if="loading" name="loading" className="loading-svg"></svg-icon>--> |
||||
|
登录 |
||||
|
</el-button> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<!-- 备案号 --> |
||||
|
<div class="website-records" v-if="!!support" v-html="support"></div> |
||||
|
<!-- <div class="record">--> |
||||
|
<!-- <a>技术支持：苏州琅润达检测科技有限公司</a>--> |
||||
|
<!-- <!– <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=32059002004367">苏公网安备--> |
||||
|
<!-- 32059002004367号</a> –>--> |
||||
|
<!-- </div>--> |
||||
|
<!-- <div class="record">|</div>--> |
||||
|
<!-- <div class="record">--> |
||||
|
<!-- <a href="https://beian.miit.gov.cn">联系电话：400 869 6981</a>--> |
||||
|
<!-- </div>--> |
||||
|
</div> |
||||
|
</screen-adapter> |
||||
|
</div> |
||||
|
<!-- <div class="left-title">浙江省工业碳效<br />评价与改革创新中心</div>--> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import ScreenAdapter from '@/components/screen-adapter.vue'; |
||||
|
import { defineComponent, onMounted, nextTick, reactive, toRefs, onActivated, onBeforeUnmount, computed, watch } from 'vue'; |
||||
|
import { CacheToken, CacheCompanyId, CacheTenantCode, CacheTenantType, CacheUserId } from '@/constants/cacheKey'; |
||||
|
import { setCache } from '@/utils/cache'; |
||||
|
import debounce from 'lodash/debounce'; |
||||
|
import { supportLangs } from '@/i18n'; |
||||
|
import { getUuid } from '@/utils/utils'; |
||||
|
import baseService from '@/service/baseService'; |
||||
|
import { prefechScada } from './prefechScada.js'; |
||||
|
import utilService from '@/service/utilService'; |
||||
|
import toolHooks from '@/hooks/tool'; |
||||
|
import { useFetch } from '@/hooks/fetch'; |
||||
|
import { useStore } from 'vuex'; |
||||
|
import { ElForm, ElMessage } from 'element-plus'; |
||||
|
import { useRouter } from 'vue-router'; |
||||
|
import { useI18n } from 'vue-i18n'; |
||||
|
|
||||
|
export default defineComponent({ |
||||
|
name: 'login', |
||||
|
components: { |
||||
|
ScreenAdapter, |
||||
|
//SvgIcon |
||||
|
}, |
||||
|
setup() { |
||||
|
const store = useStore(); |
||||
|
const router = useRouter(); |
||||
|
const { t } = useI18n(); |
||||
|
const state = reactive({ |
||||
|
dataForm: { |
||||
|
username: '', |
||||
|
password: '', |
||||
|
uuid: '', |
||||
|
captcha: 'any', |
||||
|
}, |
||||
|
loading: false, |
||||
|
autoLoading: false, |
||||
|
loginBgContainerRef: null, |
||||
|
support: '', |
||||
|
dataFormRef: null, |
||||
|
title: store.state.title || '物管理平台', |
||||
|
}); |
||||
|
|
||||
|
const getHref = () => { |
||||
|
let url = window.location.href; |
||||
|
if (url.includes('loading')) { |
||||
|
//const channel = new BroadcastChannel('myChannel'); |
||||
|
window.opener && window.opener.postMessage('*', import.meta.env.VITE_APP_NEW_OPEN_WINDOW); |
||||
|
|
||||
|
window.addEventListener('message', autoLogin); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
getHref(); |
||||
|
|
||||
|
const autoLogin = (ret) => { |
||||
|
try { |
||||
|
// console.log('messagemessage', e) |
||||
|
state.autoLoading = true; |
||||
|
login(ret.data); |
||||
|
} catch (e) { |
||||
|
console.warn(e); |
||||
|
state.autoLoading = false; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const setDefaultTitle = () => { |
||||
|
state.title = '物管理平台'; |
||||
|
}; |
||||
|
|
||||
|
useFetch('/title', { |
||||
|
noErrorMsg: true, |
||||
|
err_cb: setDefaultTitle, |
||||
|
cb: (res) => { |
||||
|
if (res && typeof res === 'string' && res.length) { |
||||
|
state.title = res; |
||||
|
} else { |
||||
|
setDefaultTitle(); |
||||
|
} |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
watch( |
||||
|
() => state.title, |
||||
|
() => { |
||||
|
nextTick(() => { |
||||
|
const title = document.querySelector('.title'); |
||||
|
if (title) { |
||||
|
const text = title.innerText; |
||||
|
store.state.title = text; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
); |
||||
|
|
||||
|
useFetch('/support', { |
||||
|
noErrorMsg: true, |
||||
|
cb: (res) => { |
||||
|
if (res && typeof res === 'string' && res.length) { |
||||
|
state.support = res; |
||||
|
} |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
const mainObserver = new ResizeObserver((entries) => { |
||||
|
const [first] = entries; |
||||
|
if (first) { |
||||
|
init(); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
const { generateSvg2Dom, setSvgLayout } = toolHooks(); |
||||
|
const init = () => { |
||||
|
const target = document.getElementById('login-bg-container'); |
||||
|
if (target) { |
||||
|
const width = state.loginBgContainerRef.clientWidth; |
||||
|
const height = state.loginBgContainerRef.clientHeight; |
||||
|
const cb = () => { |
||||
|
setSvgLayout(target, { width, height, layoutIndex: 1 }); |
||||
|
}; |
||||
|
if (!target.innerHTML) { |
||||
|
generateSvg2Dom('cdn/login-bg.svg', target, cb); |
||||
|
} else { |
||||
|
cb(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
{ |
||||
|
const target = document.getElementById('login-animate'); |
||||
|
if (target && !target.innerHTML) { |
||||
|
generateSvg2Dom('cdn/login-animate.svg', target); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const login = (data) => { |
||||
|
state.loading = true; |
||||
|
baseService |
||||
|
.post('/login/noCaptcha', { |
||||
|
...state.dataForm, |
||||
|
...data, |
||||
|
}) |
||||
|
.then(async (res) => { |
||||
|
if (res.code !== 0) { |
||||
|
state.loading = false; |
||||
|
//this.getCaptcha(); |
||||
|
return ElMessage.error(res.msg || '登录失败！'); |
||||
|
|
||||
|
//return this.$notify({ title: "警告", message: res.msg || "操作失败", type: "warning" }); |
||||
|
} |
||||
|
|
||||
|
setCache(CacheToken, res.data); |
||||
|
setCache(CacheTenantCode, res.data?.tenantCode || ''); |
||||
|
|
||||
|
state.loading = false; |
||||
|
ElMessage.success(t('ui.login.loginOk')); |
||||
|
router.replace('/home'); |
||||
|
|
||||
|
setTimeout(() => { |
||||
|
prefechScada(); |
||||
|
}, 1000); |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
state.loading = false; |
||||
|
}) |
||||
|
.finally(() => { |
||||
|
state.autoLoading = false; |
||||
|
state.loading = false; |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const dataFormSubmitHandle = debounce( |
||||
|
function () { |
||||
|
state.dataFormRef.validate((valid: boolean) => { |
||||
|
if (!valid) { |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
login(state.dataForm); |
||||
|
}); |
||||
|
// const { username, password } = state.dataForm; |
||||
|
// if (!username) { |
||||
|
// ElMessage.warning("请输入账号"); |
||||
|
// return; |
||||
|
// } |
||||
|
// if (!password) { |
||||
|
// ElMessage.warning("请输入密码"); |
||||
|
// return; |
||||
|
// } |
||||
|
}, |
||||
|
1000, |
||||
|
{ leading: true, trailing: false }, |
||||
|
); |
||||
|
|
||||
|
onMounted(() => { |
||||
|
nextTick(() => { |
||||
|
mainObserver.observe(state.loginBgContainerRef); |
||||
|
}); |
||||
|
}); |
||||
|
onBeforeUnmount(() => { |
||||
|
mainObserver.unobserve(state.loginBgContainerRef); |
||||
|
}); |
||||
|
return { |
||||
|
dataFormSubmitHandle, |
||||
|
...toRefs(state), |
||||
|
}; |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
flag: false, |
||||
|
i18nMessages: supportLangs, |
||||
|
|
||||
|
svgContent: '', |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
type() { |
||||
|
return this.flag ? 'text' : 'password'; |
||||
|
}, |
||||
|
dataRule() { |
||||
|
return { |
||||
|
username: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }], |
||||
|
password: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }], |
||||
|
//captcha: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }] |
||||
|
}; |
||||
|
}, |
||||
|
}, |
||||
|
created() { |
||||
|
this.$store.dispatch({ type: 'logout' }); |
||||
|
this.getCaptcha(); |
||||
|
|
||||
|
setCache(CacheCompanyId, ''); |
||||
|
setCache(CacheTenantCode, ''); |
||||
|
setCache(CacheTenantType, ''); |
||||
|
setCache(CacheUserId, ''); |
||||
|
|
||||
|
//router内部重新获取home组件时,路由守卫中的to对象还是上一个租户的&&router对象不能重置?所以重新刷新一下 todo |
||||
|
if (this.$route.query?.reload) { |
||||
|
this.$router.replace('/login'); |
||||
|
setTimeout(() => { |
||||
|
history.go(0); |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取验证码 |
||||
|
getCaptcha() { |
||||
|
this.dataForm.uuid = getUuid(); |
||||
|
}, |
||||
|
}, |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="less"> |
||||
|
.login { |
||||
|
position: fixed; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
background: #2d85be; |
||||
|
|
||||
|
#login-bg-container { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.left-title { |
||||
|
position: absolute; |
||||
|
top: 24px; |
||||
|
left: 24px; |
||||
|
color: #fff; |
||||
|
font-size: 2vw; |
||||
|
font-style: italic; |
||||
|
font-family: SimSun; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.screen-adapter { |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
|
||||
|
.container { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
|
||||
|
#login-animate { |
||||
|
width: 100%; |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
transform: translate(-8%, -50%) scale(0.78); |
||||
|
} |
||||
|
|
||||
|
.form { |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
transform: translateY(-50%); |
||||
|
right: 160px; |
||||
|
width: 585px; |
||||
|
height: 700px; |
||||
|
border-radius: 12px; |
||||
|
box-shadow: -2px 1px 30px 1px rgb(0 119 253 / 10%); |
||||
|
background: url('@/assets/images/login_frame.png') no-repeat center; |
||||
|
background-size: cover; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
padding-top: 200px; |
||||
|
z-index: 2; |
||||
|
|
||||
|
> .title { |
||||
|
text-align: center; |
||||
|
font-size: 28px; |
||||
|
font-weight: bold; |
||||
|
color: #222; |
||||
|
margin-bottom: 40px; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-form { |
||||
|
padding: 0 100px; |
||||
|
width: 100%; |
||||
|
|
||||
|
.el-form-item { |
||||
|
&:first-child { |
||||
|
margin-bottom: 40px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.el-input { |
||||
|
height: 56px; |
||||
|
font-size: 18px; |
||||
|
|
||||
|
.el-input__prefix-inner { |
||||
|
z-index: 2; |
||||
|
} |
||||
|
|
||||
|
.el-input__inner { |
||||
|
color: #222; |
||||
|
padding-left: 16px; |
||||
|
} |
||||
|
|
||||
|
.el-input__wrapper { |
||||
|
background: transparent !important; |
||||
|
box-shadow: 0 0 0 1px #dcdfe6 inset; |
||||
|
} |
||||
|
|
||||
|
input:-webkit-autofill, |
||||
|
input:-webkit-autofill:hover, |
||||
|
input:-webkit-autofill:focus, |
||||
|
input:-webkit-autofill:active { |
||||
|
-webkit-transition-delay: 111111s; |
||||
|
-webkit-transition: color 11111s ease-out, background-color 111111s ease-out; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.submit-btn { |
||||
|
margin-top: 30px; |
||||
|
width: 100%; |
||||
|
height: 56px; |
||||
|
font-size: 18px; |
||||
|
background-color: #20a3f5 !important; |
||||
|
box-shadow: 0 15px 10px -15px #333333; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.website-records { |
||||
|
height: 24px; |
||||
|
line-height: 20px; |
||||
|
text-align: center; |
||||
|
position: fixed; |
||||
|
bottom: 10px; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
z-index: 100; |
||||
|
font-size: 12px; |
||||
|
color: #fff; |
||||
|
|
||||
|
.record { |
||||
|
display: inline-block; |
||||
|
vertical-align: middle; |
||||
|
color: #fff; |
||||
|
letter-spacing: 1px; |
||||
|
|
||||
|
&:nth-child(1) { |
||||
|
// background-image: url("@/assets/images/records/website-icon.png"); |
||||
|
background-position: left -2px; |
||||
|
background-repeat: no-repeat; |
||||
|
padding-left: 24px; |
||||
|
} |
||||
|
|
||||
|
&:nth-child(2) { |
||||
|
margin: -1px 6px 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue