feat: 重构锁屏功能
This commit is contained in:
TsMask
138
src/components/GlobalMask/index.vue
Normal file
138
src/components/GlobalMask/index.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<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;
|
||||
|
||||
function resetTimer() {
|
||||
clearTimeout(timeoutId);
|
||||
timeoutId = setTimeout(callback, time);
|
||||
}
|
||||
|
||||
// 监听浏览器标签是否活动
|
||||
window.addEventListener('blur', useThrottleFn(resetTimer, 300));
|
||||
window.addEventListener('focus', useThrottleFn(resetTimer, 300));
|
||||
document.addEventListener('visibilitychange', useThrottleFn(resetTimer, 300));
|
||||
|
||||
// 初始化定时器
|
||||
resetTimer();
|
||||
}
|
||||
|
||||
/**组件实例挂载之后调用 */
|
||||
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>
|
||||
@@ -1,230 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, toRaw, onMounted, onUnmounted } from 'vue';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import { message } from 'ant-design-vue/lib';
|
||||
import useUserStore from '@/store/modules/user';
|
||||
import useLockedStore from '@/store/modules/locked';
|
||||
import { getConfigKey } from '@/api/system/config';
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { computed } from 'vue';
|
||||
const lockedStore = useLockedStore();
|
||||
const userStore = useUserStore();
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
|
||||
const password = ref('');
|
||||
/**设置定时器ID */
|
||||
let timeoutDuration = 10 * 60 * 1000; // 设置超时时间为10分钟，单位为毫秒
|
||||
let timeoutId: any = null;
|
||||
|
||||
// 超时锁屏
|
||||
function resetTimeout() {
|
||||
if (timeoutId) {
|
||||
clearTimeout(timeoutId);
|
||||
}
|
||||
timeoutId = setTimeout(() => {
|
||||
lockedStore.fnLock('lock');
|
||||
}, timeoutDuration);
|
||||
}
|
||||
|
||||
/**解锁 */
|
||||
function handleUnlock() {
|
||||
let lockFrom: any = {};
|
||||
lockFrom.username = userStore.userName;
|
||||
lockFrom.password = password.value;
|
||||
userStore.fnLogin(toRaw(lockFrom)).then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
message.success(t('components.LockScreen.validSucc'), 3);
|
||||
password.value = '';
|
||||
lockedStore.fnLock('none');
|
||||
} else {
|
||||
message.error(t('components.LockScreen.validError'), 3);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**返回登录界面 */
|
||||
function backLogin() {
|
||||
lockedStore.fnLock('none');
|
||||
userStore.fnLogOut().finally(() => router.push({ name: 'Login' }));
|
||||
}
|
||||
|
||||
const isLocked = computed(() => lockedStore.type !== 'none');
|
||||
|
||||
onMounted(() => {
|
||||
// 本地锁定类型设置;
|
||||
lockedStore.fnLock(lockedStore.type);
|
||||
// getConfigKey('sys.lockTime')
|
||||
// .then(res => {
|
||||
// if (res.code === RESULT_CODE_SUCCESS && res.data) {
|
||||
// lockedStore.lockTimeout = res.data;
|
||||
// timeoutDuration = res.data * 1000;
|
||||
// }
|
||||
// // 本地锁定类型设置
|
||||
// lockedStore.fnLock(lockedStore.type);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// if (timeoutDuration !== 0) {
|
||||
// resetTimeout();
|
||||
// // 监听用户的操作，重置超时时间
|
||||
// window.addEventListener('mousemove', resetTimeout);
|
||||
// window.addEventListener('keydown', resetTimeout);
|
||||
// }
|
||||
// });
|
||||
});
|
||||
|
||||
/**组件实例被卸载之后调用 */
|
||||
onUnmounted(() => {
|
||||
// if (timeoutId) {
|
||||
// clearTimeout(timeoutId);
|
||||
// }
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="isLocked"
|
||||
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)',
|
||||
}"
|
||||
>
|
||||
<!-- 锁屏-登录 -->
|
||||
<div class="lock-screen_login" v-if="lockedStore.type === 'lock'">
|
||||
<div class="lock-screen_login-user">
|
||||
<a-avatar
|
||||
shape="circle"
|
||||
:size="100"
|
||||
:src="userStore.getAvatar"
|
||||
:alt="userStore.userName"
|
||||
></a-avatar>
|
||||
<span class="nick">
|
||||
{{ userStore.nickName }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="lock-screen_login-from">
|
||||
<a-input-group compact>
|
||||
<a-input
|
||||
type="password"
|
||||
v-model:value="password"
|
||||
:placeholder="t('components.LockScreen.inputPlacePwd')"
|
||||
:maxlength="32"
|
||||
style="width: calc(100% - 50px)"
|
||||
@keyup.enter="handleUnlock"
|
||||
/>
|
||||
<a-button type="primary" @click="handleUnlock">
|
||||
<LoginOutlined />
|
||||
</a-button>
|
||||
</a-input-group>
|
||||
<a-button type="text" class="logout" @click="backLogin">
|
||||
{{ t('components.LockScreen.backLogin') }}
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 锁屏-OMC重启升级 -->
|
||||
<div class="lock-screen_reload" v-if="lockedStore.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="lockedStore.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_login {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
|
||||
&-user {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.nick {
|
||||
font-size: 28px;
|
||||
max-width: 164px;
|
||||
white-space: nowrap;
|
||||
text-align: start;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&-from {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
width: 256px;
|
||||
margin-top: 30px;
|
||||
|
||||
.logout {
|
||||
margin-top: 8px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
|
||||
&:hover {
|
||||
color: var(--ant-primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
@@ -10,8 +10,11 @@ export const CACHE_LOCAL_PRIMARY_COLOR = 'cache:local:primaryColor';
|
||||
/**本地缓存-多语言 */
|
||||
export const CACHE_LOCAL_I18N = 'cache:local:i18n';
|
||||
|
||||
/**本地缓存-锁屏设置 */
|
||||
export const CACHE_LOCAL_LOCK = 'cache:local:Lock';
|
||||
/**本地缓存-遮罩设置 */
|
||||
export const CACHE_LOCAL_MASK = 'cache:local:mask';
|
||||
|
||||
/**本地缓存-锁屏密码 */
|
||||
export const CACHE_LOCAL_LOCK_PASSWD = 'cache:local:lock:passwd';
|
||||
|
||||
/**数据缓存表-表格排序 */
|
||||
export const CACHE_DB_TABLE_DND = 'tbl_dnd';
|
||||
|
||||
@@ -130,7 +130,7 @@ export default {
|
||||
onlyAllow:'Only supports upload file formats',
|
||||
},
|
||||
LockScreen: {
|
||||
inputPlacePwd:'Please enter login password',
|
||||
inputPlacePwd:'Please enter the lock screen password',
|
||||
validSucc:'Validation Passed',
|
||||
validError:'Validation Failure',
|
||||
backLogin:'Logout to Relogin',
|
||||
@@ -186,7 +186,9 @@ export default {
|
||||
},
|
||||
rightContent: {
|
||||
lock: "Lock Screen",
|
||||
lockTip: "Confirmed to perform a lock screen?",
|
||||
lockTip: "Confirmation of the lock screen?",
|
||||
lockPasswd: "Unlock Password",
|
||||
lockPasswdTip: "No password can be set",
|
||||
helpDoc: "System User Documentation",
|
||||
fullscreen: "Full Screen",
|
||||
logout: "Logout",
|
||||
|
||||
@@ -130,7 +130,7 @@ export default {
|
||||
onlyAllow:'只支持上传文件格式',
|
||||
},
|
||||
LockScreen: {
|
||||
inputPlacePwd:'请输入登录密码',
|
||||
inputPlacePwd:'请输入锁屏密码',
|
||||
validSucc:'校验通过',
|
||||
validError:'校验失败',
|
||||
backLogin:'退出并重新登录',
|
||||
@@ -187,6 +187,8 @@ export default {
|
||||
rightContent: {
|
||||
lock: "锁屏",
|
||||
lockTip: "确认要进行锁屏吗？",
|
||||
lockPasswd: "解锁密码",
|
||||
lockPasswdTip: "可不设置密码",
|
||||
helpDoc: "系统使用文档",
|
||||
fullscreen: "全屏显示",
|
||||
logout: "退出登录",
|
||||
|
||||
@@ -8,6 +8,7 @@ import {
|
||||
} from 'antdv-pro-layout';
|
||||
import RightContent from './components/RightContent.vue';
|
||||
import Tabs from './components/Tabs.vue';
|
||||
import GlobalMask from '@/components/GlobalMask/index.vue';
|
||||
import { scriptUrl } from '@/assets/js/icon_font_8d5l8fzk5b87iudi';
|
||||
import { computed, reactive, watch, onMounted, onUnmounted } from 'vue';
|
||||
import useLayoutStore from '@/store/modules/layout';
|
||||
@@ -21,6 +22,7 @@ const { proConfig, waterMarkContent } = useLayoutStore();
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import { getServerTime } from '@/api';
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
|
||||
import { parseDateToStr } from '@/utils/date-utils';
|
||||
import { parseUrlPath } from '@/plugins/file-static-url';
|
||||
const { t, currentLocale } = useI18n();
|
||||
@@ -224,10 +226,10 @@ onUnmounted(() => {
|
||||
v-model:selectedKeys="layoutState.selectedKeys"
|
||||
v-model:openKeys="layoutState.openKeys"
|
||||
:menu-data="menuData"
|
||||
:breadcrumb="{ routes: breadcrumb } as any"
|
||||
:breadcrumb="{ routes: breadcrumb }"
|
||||
v-bind="proConfig"
|
||||
:iconfont-url="scriptUrl"
|
||||
:locale="(fnLocale as any)"
|
||||
:locale="fnLocale"
|
||||
>
|
||||
<!--插槽-菜单头-->
|
||||
<template #menuHeaderRender>
|
||||
@@ -298,9 +300,6 @@ onUnmounted(() => {
|
||||
</transition>
|
||||
</RouterView>
|
||||
|
||||
<!-- 锁屏遮罩 -->
|
||||
<LockScreen />
|
||||
|
||||
<!--插槽-内容底部-->
|
||||
<template #footerRender="{ width }">
|
||||
<footer class="footer">
|
||||
@@ -327,6 +326,9 @@ onUnmounted(() => {
|
||||
</footer>
|
||||
</template>
|
||||
</ProLayout>
|
||||
|
||||
<!-- 全局遮罩 -->
|
||||
<GlobalMask />
|
||||
</WaterMark>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,19 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
|
||||
import Modal from 'ant-design-vue/lib/modal/Modal';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useFullscreen } from '@vueuse/core';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import useAppStore from '@/store/modules/app';
|
||||
import useUserStore from '@/store/modules/user';
|
||||
import useAlarmStore from '@/store/modules/alarm';
|
||||
import useLockedStore from '@/store/modules/locked';
|
||||
import useMaskStore from '@/store/modules/mask';
|
||||
import { hasPermissions } from '@/plugins/auth-user';
|
||||
import { ref } from 'vue';
|
||||
const { isFullscreen, toggle } = useFullscreen();
|
||||
const { t, changeLocale, optionsLocale } = useI18n();
|
||||
const lockedStore = useLockedStore();
|
||||
const maskStore = useMaskStore();
|
||||
const userStore = useUserStore();
|
||||
const appStore = useAppStore();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
/**头像展开项点击 */
|
||||
@@ -31,15 +32,24 @@ function fnClick({ key }: MenuInfo) {
|
||||
}
|
||||
}
|
||||
|
||||
/**锁屏确认 */
|
||||
const lockConfirm = ref<boolean>(false);
|
||||
/**锁屏密码 */
|
||||
const lockPasswd = ref<string>('');
|
||||
|
||||
/**锁屏按钮提示 */
|
||||
function fnClickLock() {
|
||||
Modal.confirm({
|
||||
title: t('common.tipTitle'),
|
||||
content: t('loayouts.rightContent.lockTip'),
|
||||
onOk() {
|
||||
lockedStore.fnLock('lock');
|
||||
},
|
||||
});
|
||||
lockConfirm.value = true;
|
||||
lockPasswd.value = '';
|
||||
maskStore.lockPasswd = '';
|
||||
}
|
||||
|
||||
/**锁屏确认跳转锁屏页面 */
|
||||
function fnClickLockToPage() {
|
||||
lockConfirm.value = false;
|
||||
maskStore.lockPasswd = lockPasswd.value;
|
||||
maskStore.handleMaskType('lock');
|
||||
router.push({ name: 'LockScreen', query: { redirect: route.path } });
|
||||
}
|
||||
|
||||
/**告警数按钮提示跳转 */
|
||||
@@ -78,13 +88,38 @@ function fnChangeLocale(e: any) {
|
||||
</template>
|
||||
</a-button>
|
||||
|
||||
<a-tooltip placement="bottom" v-if="false">
|
||||
<!-- 锁屏操作 -->
|
||||
<a-tooltip placement="bottom">
|
||||
<template #title>{{ t('loayouts.rightContent.lock') }}</template>
|
||||
<a-button type="text" style="color: inherit" @click="fnClickLock">
|
||||
<a-button type="text" style="color: inherit" @click="fnClickLock()">
|
||||
<template #icon>
|
||||
<LockOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
<a-modal
|
||||
:width="400"
|
||||
:mask-closable="false"
|
||||
v-model:visible="lockConfirm"
|
||||
:title="t('loayouts.rightContent.lockTip')"
|
||||
@ok="fnClickLockToPage()"
|
||||
>
|
||||
<a-space>
|
||||
{{ t('loayouts.rightContent.lockPasswd') }}：
|
||||
<a-input-password
|
||||
v-model:value="lockPasswd"
|
||||
:placeholder="t('common.inputPlease')"
|
||||
>
|
||||
<template #prefix>
|
||||
<a-tooltip
|
||||
:title="t('loayouts.rightContent.lockPasswdTip')"
|
||||
placement="topLeft"
|
||||
>
|
||||
<UnlockOutlined />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-space>
|
||||
</a-modal>
|
||||
</a-tooltip>
|
||||
|
||||
<a-tooltip placement="bottom">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import Cookies from 'js-cookie';
|
||||
import { TOKEN_COOKIE } from '@/constants/token-constants';
|
||||
import { localRemove, localSet } from '@/utils/cache-local-utils';
|
||||
import { CACHE_LOCAL_LOCK } from '@/constants/cache-keys-constants';
|
||||
import { CACHE_LOCAL_LOCK_PASSWD, CACHE_LOCAL_MASK } from '@/constants/cache-keys-constants';
|
||||
|
||||
/**获取cookis中Token字符串 */
|
||||
export function getToken(): string {
|
||||
@@ -11,11 +11,12 @@ export function getToken(): string {
|
||||
/**设置cookis中Token字符串 */
|
||||
export function setToken(token: string): void {
|
||||
Cookies.set(TOKEN_COOKIE, token);
|
||||
localSet(CACHE_LOCAL_LOCK, 'none');
|
||||
localSet(CACHE_LOCAL_MASK, 'none');
|
||||
}
|
||||
|
||||
/**移除cookis中Token字符串,localStorage中锁屏字符串 */
|
||||
export function removeToken(): void {
|
||||
Cookies.remove(TOKEN_COOKIE);
|
||||
localRemove(CACHE_LOCAL_LOCK);
|
||||
localRemove(CACHE_LOCAL_MASK);
|
||||
localRemove(CACHE_LOCAL_LOCK_PASSWD);
|
||||
}
|
||||
|
||||
@@ -1,59 +0,0 @@
|
||||
import { getSysConf } from '@/api';
|
||||
import { CACHE_LOCAL_LOCK } from '@/constants/cache-keys-constants';
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
import { localGet, localSet } from '@/utils/cache-local-utils';
|
||||
import { defineStore } from 'pinia';
|
||||
|
||||
/**锁屏信息类型 */
|
||||
type Locked = {
|
||||
/**锁屏类型 */
|
||||
type: 'none' | 'lock' | 'reload' | 'reset';
|
||||
/**lock 超时锁屏时间，秒*/
|
||||
lockTimeout: number;
|
||||
};
|
||||
|
||||
const useLockedStore = defineStore('locked', {
|
||||
state: (): Locked => ({
|
||||
type: (localGet(CACHE_LOCAL_LOCK) || 'none') as Locked['type'],
|
||||
lockTimeout: 0,
|
||||
}),
|
||||
getters: {},
|
||||
actions: {
|
||||
// 重启等待-轮询
|
||||
async relaodWait() {
|
||||
try {
|
||||
const res = await getSysConf();
|
||||
if (res.code === RESULT_CODE_SUCCESS && res.data) {
|
||||
// 延迟5秒
|
||||
setTimeout(() => {
|
||||
this.fnLock('none');
|
||||
window.location.reload();
|
||||
}, 2_000);
|
||||
} else {
|
||||
// 延迟5秒
|
||||
setTimeout(() => {
|
||||
this.relaodWait();
|
||||
}, 5_000);
|
||||
}
|
||||
} catch (error) {
|
||||
// 延迟5秒
|
||||
setTimeout(() => {
|
||||
this.relaodWait();
|
||||
}, 5_000);
|
||||
}
|
||||
},
|
||||
// 设置锁定
|
||||
async fnLock(type: Locked['type']) {
|
||||
this.type = type;
|
||||
localSet(CACHE_LOCAL_LOCK, type);
|
||||
if (type === 'reload') {
|
||||
// 延迟5秒
|
||||
setTimeout(() => {
|
||||
this.relaodWait();
|
||||
}, 5_000);
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default useLockedStore;
|
||||
70
src/store/modules/mask.ts
Normal file
70
src/store/modules/mask.ts
Normal file
@@ -0,0 +1,70 @@
|
||||
import { getSysConf } from '@/api';
|
||||
import {
|
||||
CACHE_LOCAL_LOCK_PASSWD,
|
||||
CACHE_LOCAL_MASK,
|
||||
} from '@/constants/cache-keys-constants';
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
import { localGet, localRemove, localSet } from '@/utils/cache-local-utils';
|
||||
import { defineStore } from 'pinia';
|
||||
|
||||
/**全局遮罩信息类型 */
|
||||
type MaskStateType = {
|
||||
/**锁屏类型 */
|
||||
type: 'none' | 'lock' | 'reload' | 'reset';
|
||||
/**lock 锁屏密码*/
|
||||
lockPasswd: string;
|
||||
/**lock 超时锁屏时间，秒*/
|
||||
lockTimeout: number;
|
||||
};
|
||||
|
||||
const useMaskStore = defineStore('mask', {
|
||||
state: (): MaskStateType => ({
|
||||
type: (localGet(CACHE_LOCAL_MASK) || 'none') as MaskStateType['type'],
|
||||
lockPasswd: localGet(CACHE_LOCAL_LOCK_PASSWD) || '',
|
||||
lockTimeout: 0,
|
||||
}),
|
||||
getters: {},
|
||||
actions: {
|
||||
// 检查服务等待-轮询
|
||||
async checkServiceWait() {
|
||||
try {
|
||||
const res = await getSysConf();
|
||||
if (res.code === RESULT_CODE_SUCCESS && res.data) {
|
||||
// 延迟5秒
|
||||
setTimeout(() => {
|
||||
this.handleMaskType('none');
|
||||
window.location.reload();
|
||||
}, 2_000);
|
||||
} else {
|
||||
// 延迟5秒
|
||||
setTimeout(() => {
|
||||
this.checkServiceWait();
|
||||
}, 5_000);
|
||||
}
|
||||
} catch (error) {
|
||||
// 延迟5秒
|
||||
setTimeout(() => {
|
||||
this.checkServiceWait();
|
||||
}, 5_000);
|
||||
}
|
||||
},
|
||||
// 设置遮罩类型
|
||||
async handleMaskType(type: MaskStateType['type']) {
|
||||
this.type = type;
|
||||
localSet(CACHE_LOCAL_MASK, type);
|
||||
if (type === 'reload') {
|
||||
// 延迟5秒
|
||||
setTimeout(() => {
|
||||
this.checkServiceWait();
|
||||
}, 5_000);
|
||||
}
|
||||
if (type === 'lock') {
|
||||
localSet(CACHE_LOCAL_LOCK_PASSWD, this.lockPasswd);
|
||||
} else {
|
||||
localRemove(CACHE_LOCAL_LOCK_PASSWD);
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default useMaskStore;
|
||||
@@ -26,8 +26,8 @@ import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
import { NE_TYPE_LIST } from '@/constants/ne-constants';
|
||||
import useNeInfoStore from '@/store/modules/neinfo';
|
||||
import useLockedStore from '@/store/modules/locked';
|
||||
const lockedStore = useLockedStore();
|
||||
import useMaskStore from '@/store/modules/mask';
|
||||
const maskStore = useMaskStore();
|
||||
const { t } = useI18n();
|
||||
|
||||
/**表格所需option */
|
||||
@@ -550,7 +550,7 @@ function fnRecordRestart(row: Record<string, any>) {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
// OMC自升级
|
||||
if (row.neType.toLowerCase() === 'omc') {
|
||||
lockedStore.fnLock('reload');
|
||||
maskStore.handleMaskType('reload');
|
||||
return;
|
||||
}
|
||||
message.success({
|
||||
|
||||
@@ -23,8 +23,8 @@ import useI18n from '@/hooks/useI18n';
|
||||
import useNeInfoStore from '@/store/modules/neinfo';
|
||||
import { FileType } from 'ant-design-vue/lib/upload/interface';
|
||||
import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
|
||||
import useLockedStore from '@/store/modules/locked';
|
||||
const lockedStore = useLockedStore();
|
||||
import useMaskStore from '@/store/modules/mask';
|
||||
const maskStore = useMaskStore();
|
||||
const { t } = useI18n();
|
||||
|
||||
/**查询参数 */
|
||||
@@ -299,7 +299,7 @@ function fnFileModalOk() {
|
||||
if (type === 'run' && from.neType.toLowerCase() === 'omc') {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
fnFileModalCancel();
|
||||
lockedStore.fnLock('reload');
|
||||
maskStore.handleMaskType('reload');
|
||||
} else {
|
||||
message.error({
|
||||
content: `${fileModalState.title} ${res.msg}`,
|
||||
|
||||
@@ -4,12 +4,12 @@ import useI18n from '@/hooks/useI18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { updateNeConfigReload } from '@/api/configManage/configParam';
|
||||
import { serviceNeAction } from '@/api/ne/neInfo';
|
||||
import useLockedStore from '@/store/modules/locked';
|
||||
import useMaskStore from '@/store/modules/mask';
|
||||
|
||||
export default function useNeOptions() {
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
const lockedStore = useLockedStore();
|
||||
const maskStore = useMaskStore();
|
||||
|
||||
/**
|
||||
* 网元启动
|
||||
@@ -60,7 +60,7 @@ export default function useNeOptions() {
|
||||
// OMC自升级
|
||||
if (row.neType.toUpperCase() === 'OMC') {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
lockedStore.fnLock('reload');
|
||||
maskStore.handleMaskType('reload');
|
||||
} else {
|
||||
message.error({
|
||||
content: `${res.msg}`,
|
||||
|
||||
@@ -16,8 +16,8 @@ import { listNeVersion, operateNeVersion } from '@/api/ne/neVersion';
|
||||
import { parseDateToStr } from '@/utils/date-utils';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import useDictStore from '@/store/modules/dict';
|
||||
import useLockedStore from '@/store/modules/locked';
|
||||
const lockedStore = useLockedStore();
|
||||
import useMaskStore from '@/store/modules/mask';
|
||||
const maskStore = useMaskStore();
|
||||
const { t } = useI18n();
|
||||
const { getDict } = useDictStore();
|
||||
|
||||
@@ -338,7 +338,7 @@ function fnRecordVersion(
|
||||
// OMC自升级
|
||||
if (row.neType.toUpperCase() === 'OMC') {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
lockedStore.fnLock('reload');
|
||||
maskStore.handleMaskType('reload');
|
||||
} else {
|
||||
message.error(t('views.ne.neVersion.upgradeFail'), 3);
|
||||
}
|
||||
|
||||
@@ -3,9 +3,9 @@ import { message } from 'ant-design-vue/lib';
|
||||
import { reactive } from 'vue';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
import useLockedStore from '@/store/modules/locked';
|
||||
import { bootloaderReset } from '@/api/system/quick-start/bootloader';
|
||||
const lockedStore = useLockedStore();
|
||||
import useMaskStore from '@/store/modules/mask';
|
||||
const maskStore = useMaskStore();
|
||||
const { t } = useI18n();
|
||||
|
||||
type StateType = {
|
||||
@@ -36,13 +36,13 @@ function fnModalVisible() {
|
||||
/**对话框提交确认 */
|
||||
function fnModalOk() {
|
||||
// 发送请求
|
||||
lockedStore.fnLock('reset');
|
||||
maskStore.handleMaskType('reset');
|
||||
bootloaderReset().then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
fnModalCancel();
|
||||
lockedStore.fnLock('reload');
|
||||
maskStore.handleMaskType('reload');
|
||||
} else {
|
||||
lockedStore.fnLock('none');
|
||||
maskStore.handleMaskType('none');
|
||||
message.error(res.msg, 3);
|
||||
clearInterval(state.timer);
|
||||
state.timer = null;
|
||||
|
||||
@@ -1,28 +1,17 @@
|
||||
<script lang="ts" setup>
|
||||
import useAppStore from '@/store/modules/app';
|
||||
import useUserStore from '@/store/modules/user';
|
||||
import useMaskStore from '@/store/modules/mask';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import { onMounted, ref, computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { VuePDF, usePDF } from '@tato30/vue-pdf';
|
||||
import '@tato30/vue-pdf/style.css';
|
||||
import saveAs from 'file-saver';
|
||||
import { parseUrlPath } from '@/plugins/file-static-url';
|
||||
const { t, currentLocale } = useI18n();
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { message } from 'ant-design-vue/lib';
|
||||
const { t } = useI18n();
|
||||
const userStore = useUserStore();
|
||||
const appStore = useAppStore();
|
||||
const maskStore = useMaskStore();
|
||||
const route = useRoute();
|
||||
|
||||
// 文档地址
|
||||
const docUrl = computed(() => {
|
||||
let url = parseUrlPath(appStore.helpDoc);
|
||||
if (url.indexOf('{language}') === -1) {
|
||||
return url;
|
||||
}
|
||||
// 语言参数替换
|
||||
const local = (route.query.language as string) ?? currentLocale.value;
|
||||
const lang = local.split('_')[0];
|
||||
return url.replace('{language}', lang);
|
||||
});
|
||||
const { pdf, pages } = usePDF(docUrl.value);
|
||||
const router = useRouter();
|
||||
|
||||
/**
|
||||
* 国际化翻译转换
|
||||
@@ -35,186 +24,176 @@ function fnLocale() {
|
||||
appStore.setTitle(title);
|
||||
}
|
||||
|
||||
// annotation层
|
||||
function fnAnnotation(obj: any) {
|
||||
const page = obj.data?.referencedPage;
|
||||
if (page && typeof page === 'number') {
|
||||
viewPage.value = page;
|
||||
}
|
||||
}
|
||||
const password = ref('');
|
||||
|
||||
/**视图页数 */
|
||||
const viewPage = ref<number>(1);
|
||||
function fnToPage(value: number) {
|
||||
if (viewPage.value === value) return;
|
||||
viewPage.value = value;
|
||||
}
|
||||
|
||||
/**视图缩放 */
|
||||
const viewScale = ref<number>(1);
|
||||
function fnScaleView(value: number) {
|
||||
viewScale.value += value;
|
||||
if (viewScale.value <= 0.25) {
|
||||
viewScale.value = 0.25;
|
||||
return;
|
||||
}
|
||||
if (viewScale.value > 2) {
|
||||
viewScale.value = 2;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
/**文件下载 */
|
||||
function fnDownload() {
|
||||
const url = docUrl.value;
|
||||
fetch(url)
|
||||
.then(response => response.blob())
|
||||
.then(blob => {
|
||||
saveAs(blob, t('views.tool.help.fileName'));
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
}
|
||||
|
||||
/**系统使用手册跳转 */
|
||||
function fnClickHelpDoc() {
|
||||
// 浏览器支持 PDF 预览
|
||||
if (navigator.pdfViewerEnabled) {
|
||||
window.open(docUrl.value, '_blank');
|
||||
/**解锁 */
|
||||
function handleUnlock() {
|
||||
if (maskStore.lockPasswd === password.value) {
|
||||
message.success(t('components.LockScreen.validSucc'), 3);
|
||||
password.value = '';
|
||||
maskStore.handleMaskType('none');
|
||||
const redirectPath = route.query?.redirect || '/index';
|
||||
router.push({ path: redirectPath as string });
|
||||
} else {
|
||||
// 浏览器不支持 PDF 预览
|
||||
alert(t('views.tool.help.pdfViewerErr'));
|
||||
message.error(t('components.LockScreen.validError'), 3);
|
||||
}
|
||||
}
|
||||
|
||||
/**返回登录界面 */
|
||||
function handleBackLogin() {
|
||||
maskStore.handleMaskType('none');
|
||||
const redirectPath = route.query?.redirect || '/index';
|
||||
userStore
|
||||
.fnLogOut()
|
||||
.finally(() =>
|
||||
router.push({ name: 'Login', query: { redirect: redirectPath } })
|
||||
);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fnLocale();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-row>
|
||||
<a-col :span="24" class="header">
|
||||
<a-space :size="12" align="center">
|
||||
<div class="header-scale">
|
||||
<a-button type="default" shape="circle" @click="fnScaleView(-0.25)">
|
||||
<template #icon><ZoomOutOutlined /></template>
|
||||
</a-button>
|
||||
<span>{{ viewScale * 100 }}%</span>
|
||||
<a-button type="default" shape="circle" @click="fnScaleView(0.25)">
|
||||
<template #icon><ZoomInOutlined /></template>
|
||||
</a-button>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-space :size="12" align="center">
|
||||
<a-button type="default" @click="fnClickHelpDoc()">
|
||||
<template #icon><ToTopOutlined /> </template>
|
||||
{{ t('views.tool.help.pdfViewer') }}
|
||||
</a-button>
|
||||
<a-button type="primary" @click="fnDownload()">
|
||||
<template #icon><DownloadOutlined /></template>
|
||||
{{ t('views.tool.help.download') }}
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
<a-col :span="4" class="left">
|
||||
<template v-for="page in pages" :key="page">
|
||||
<div
|
||||
class="left-view"
|
||||
:class="{ 'left-view_action': page === viewPage }"
|
||||
@click="fnToPage(page)"
|
||||
>
|
||||
<VuePDF :pdf="pdf" :page="page" :scale="0.2" text-layer />
|
||||
<div>{{ page }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-col>
|
||||
<a-col :span="20" class="right">
|
||||
<div class="right-view">
|
||||
<a-spin size="large" style="margin: 50%" v-if="pages === 0" />
|
||||
<VuePDF
|
||||
v-else
|
||||
:pdf="pdf"
|
||||
:page="viewPage"
|
||||
:scale="viewScale"
|
||||
annotation-layer
|
||||
:annotations-filter="['Link']"
|
||||
@annotation="fnAnnotation"
|
||||
>
|
||||
<a-spin size="large" style="margin: 50%" />
|
||||
</VuePDF>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div class="container">
|
||||
<section>
|
||||
<div class="animation animation1"></div>
|
||||
<div class="animation animation2"></div>
|
||||
<div class="animation animation3"></div>
|
||||
<div class="animation animation4"></div>
|
||||
<div class="animation animation5"></div>
|
||||
</section>
|
||||
|
||||
<!-- <a-spin style="margin: 0 50%" v-if="docUrl === '#'" /> -->
|
||||
<!-- <div :style="'height:' + height" v-else>
|
||||
<iframe
|
||||
:src="docUrl"
|
||||
frameborder="no"
|
||||
style="width: 100%; height: 100%"
|
||||
scrolling="auto"
|
||||
></iframe>
|
||||
</div> -->
|
||||
<!-- 锁屏-登录 -->
|
||||
<div class="lock-screen_login">
|
||||
<div class="lock-screen_login-user">
|
||||
<a-avatar
|
||||
shape="circle"
|
||||
:size="100"
|
||||
:src="userStore.getAvatar"
|
||||
:alt="userStore.userName"
|
||||
></a-avatar>
|
||||
<span class="nick">
|
||||
{{ userStore.nickName }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="lock-screen_login-from">
|
||||
<a-input-group compact>
|
||||
<a-input
|
||||
type="password"
|
||||
v-model:value="password"
|
||||
:placeholder="t('components.LockScreen.inputPlacePwd')"
|
||||
:maxlength="32"
|
||||
style="width: calc(100% - 50px)"
|
||||
@keyup.enter="handleUnlock"
|
||||
/>
|
||||
<a-button type="primary" @click="handleUnlock">
|
||||
<LoginOutlined />
|
||||
</a-button>
|
||||
</a-input-group>
|
||||
<a-button type="text" class="logout" @click="handleBackLogin">
|
||||
{{ t('components.LockScreen.backLogin') }}
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.header {
|
||||
.lock-screen_login {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12px 24px;
|
||||
background-color: #323639;
|
||||
color: white;
|
||||
&-scale {
|
||||
background: rgba(0, 0, 0, 0.24);
|
||||
border-radius: 10px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
|
||||
&-user {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
width: 140px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
& > span {
|
||||
font-weight: 600;
|
||||
.nick {
|
||||
font-size: 28px;
|
||||
max-width: 164px;
|
||||
white-space: nowrap;
|
||||
text-align: start;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&-from {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
width: 256px;
|
||||
margin-top: 30px;
|
||||
|
||||
.logout {
|
||||
margin-top: 8px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
|
||||
&:hover {
|
||||
color: var(--ant-primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
overflow-y: auto;
|
||||
height: calc(100vh - 56px);
|
||||
padding: 20px 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #323639;
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
padding-top: 164px;
|
||||
|
||||
&-view {
|
||||
text-align: center;
|
||||
width: 160px;
|
||||
padding: 10px 20px;
|
||||
border: 4px transparent solid;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
color: white;
|
||||
transform: border;
|
||||
background: url('@/assets/black_dot.png') 0% 0% / 14px 14px repeat;
|
||||
|
||||
// background-image: url(@/assets/background.jpg);
|
||||
// background-repeat: no-repeat;
|
||||
// background-size: cover;
|
||||
// background-position: center center;
|
||||
|
||||
.animation {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: #1be1f6;
|
||||
|
||||
&.animation1 {
|
||||
left: 15%;
|
||||
top: 70%;
|
||||
animation: slashStar 2s ease-in-out 0.3s infinite;
|
||||
}
|
||||
&.animation2 {
|
||||
left: 34%;
|
||||
top: 35%;
|
||||
animation: slashStar 2s ease-in-out 1.2s infinite;
|
||||
}
|
||||
&.animation3 {
|
||||
left: 10%;
|
||||
top: 8%;
|
||||
animation: slashStar 2s ease-in-out 0.5s infinite;
|
||||
}
|
||||
&.animation4 {
|
||||
left: 68%;
|
||||
top: 68%;
|
||||
animation: slashStar 2s ease-in-out 0.8s infinite;
|
||||
}
|
||||
&.animation5 {
|
||||
left: 87%;
|
||||
top: 30%;
|
||||
animation: slashStar 2s ease-in-out 1.5s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
&-view_action {
|
||||
border: 4px #8ab4f8 solid;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
overflow-y: auto;
|
||||
height: calc(100vh - 56px);
|
||||
background-color: #525659;
|
||||
|
||||
&-view {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
@keyframes slashStar {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user