142 lines
3.8 KiB
Vue
142 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, onUnmounted, computed } from 'vue';
|
|
import useI18n from '@/hooks/useI18n';
|
|
import useMaskStore from '@/store/modules/mask';
|
|
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useThrottleFn } from '@vueuse/core';
|
|
import { getConfigKey } from '@/api/system/config';
|
|
const maskStore = useMaskStore();
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const { t } = useI18n();
|
|
|
|
/**显示遮罩 */
|
|
const isVisible = computed(() => !['none', 'lock'].includes(maskStore.type));
|
|
|
|
// 用户无操作一段时间后进行锁屏
|
|
function idleTimeout(time: number, callback: Function) {
|
|
if (time === 0) return;
|
|
let timeoutId: any;
|
|
let idleTime = 0;
|
|
function resetIdleTime() {
|
|
idleTime = 0;
|
|
}
|
|
// 监听用户活动事件
|
|
document.addEventListener('mousemove', useThrottleFn(resetIdleTime, 1000));
|
|
document.addEventListener('keydown', useThrottleFn(resetIdleTime, 1000));
|
|
document.addEventListener('click', useThrottleFn(resetIdleTime, 1000));
|
|
// 定时检查用户是否长时间无操作
|
|
timeoutId = setInterval(() => {
|
|
idleTime += 1000;
|
|
if (idleTime >= time) {
|
|
clearTimeout(timeoutId);
|
|
callback();
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
/**组件实例挂载之后调用 */
|
|
onMounted(() => {
|
|
// 本地锁定类型设置;
|
|
maskStore.handleMaskType(maskStore.type);
|
|
getConfigKey('sys.lockTime')
|
|
.then(res => {
|
|
if (res.code === RESULT_CODE_SUCCESS && res.data) {
|
|
maskStore.lockTimeout = +res.data;
|
|
}
|
|
maskStore.handleMaskType(maskStore.type);
|
|
// 是锁屏的调整到页面
|
|
if (maskStore.type === 'lock') {
|
|
maskStore.handleMaskType('lock');
|
|
router.push({ name: 'LockScreen', query: { redirect: route.path } });
|
|
}
|
|
})
|
|
.finally(() => {
|
|
// 无操作x秒后跳转锁屏
|
|
idleTimeout(maskStore.lockTimeout * 1000, () => {
|
|
if (route.name === 'LockScreen') return;
|
|
maskStore.handleMaskType('lock');
|
|
router.push({ name: 'LockScreen', query: { redirect: route.path } });
|
|
});
|
|
});
|
|
});
|
|
|
|
/**组件实例被卸载之后调用 */
|
|
onUnmounted(() => {});
|
|
</script>
|
|
<template>
|
|
<a-modal
|
|
v-model:visible="isVisible"
|
|
get-container="#app"
|
|
:footer="null"
|
|
:zIndex="1008"
|
|
:closable="false"
|
|
:keyboard="false"
|
|
:centered="true"
|
|
:maskClosable="false"
|
|
:maskStyle="{
|
|
backdropFilter: 'blur(10px)',
|
|
WebkitBackdropFilter: 'blur(10px)',
|
|
}"
|
|
wrapClassName="lock-screen"
|
|
:wrap-style="{
|
|
background: 'rgba(0, 0, 0, 0.85)',
|
|
}"
|
|
>
|
|
<!-- 锁屏-OMC重启升级 -->
|
|
<div class="lock-screen_reload" v-if="maskStore.type === 'reload'">
|
|
<LoadingOutlined style="font-size: 56px" />
|
|
<div class="text">
|
|
{{ t('components.LockScreen.backReload') }}
|
|
</div>
|
|
<div class="desc">
|
|
{{ t('components.LockScreen.backReload2') }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 锁屏-OMC系统重置 -->
|
|
<div class="lock-screen_reload" v-if="maskStore.type === 'reset'">
|
|
<LoadingOutlined style="font-size: 56px" />
|
|
<div class="text">
|
|
{{ t('components.LockScreen.systemReset') }}
|
|
</div>
|
|
<div class="desc">
|
|
{{ t('components.LockScreen.systemReset2') }}
|
|
</div>
|
|
</div>
|
|
</a-modal>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.lock-screen_reload {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: transparent;
|
|
|
|
color: #fff;
|
|
|
|
& .text {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
letter-spacing: 4px;
|
|
margin-top: 24px;
|
|
}
|
|
& .desc {
|
|
margin-top: 8px;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style lang="less">
|
|
.lock-screen {
|
|
.ant-modal-content {
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
</style>
|