239 lines
6.5 KiB
Vue
239 lines
6.5 KiB
Vue
<script setup lang="ts">
|
||
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
|
||
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 useMaskStore from '@/store/modules/mask';
|
||
import { hasPermissions } from '@/plugins/auth-user';
|
||
import { dbClear } from '@/utils/cache-db-utils';
|
||
import { CACHE_DB_TABLE_DND } from '@/constants/cache-keys-constants';
|
||
import { TENANTADMIN_ROLE_KEY } from '@/constants/admin-constants';
|
||
|
||
import { ref } from 'vue';
|
||
const { isFullscreen, toggle } = useFullscreen();
|
||
const { t, changeLocale, optionsLocale } = useI18n();
|
||
const maskStore = useMaskStore();
|
||
const userStore = useUserStore();
|
||
const appStore = useAppStore();
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
|
||
/**头像展开项点击 */
|
||
function fnClick({ key }: MenuInfo) {
|
||
switch (key) {
|
||
case 'settings':
|
||
router.push({ name: 'Settings' });
|
||
break;
|
||
case 'profile':
|
||
router.push({ name: 'Profile' });
|
||
break;
|
||
case 'logout':
|
||
userStore.fnLogOut().finally(() => {
|
||
dbClear(CACHE_DB_TABLE_DND);
|
||
router.push({ name: 'Login' });
|
||
});
|
||
break;
|
||
}
|
||
}
|
||
|
||
/**锁屏确认 */
|
||
const lockConfirm = ref<boolean>(false);
|
||
/**锁屏密码 */
|
||
const lockPasswd = ref<string>('');
|
||
|
||
/**锁屏按钮提示 */
|
||
function fnClickLock() {
|
||
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 } });
|
||
}
|
||
|
||
/**告警数按钮提示跳转 */
|
||
function fnClickAlarm() {
|
||
router.push({ name: 'ActiveAlarm_2088' });
|
||
}
|
||
|
||
/**系统使用手册跳转 */
|
||
function fnClickHelpDoc(language?: string) {
|
||
const routeData = router.resolve({ name: 'HelpDoc' });
|
||
let href = routeData.href;
|
||
if (language) {
|
||
href = `${routeData.href}?language=${language}`;
|
||
}
|
||
window.open(href, '_blank');
|
||
}
|
||
|
||
/**改变多语言 */
|
||
function fnChangeLocale(e: any) {
|
||
changeLocale(e.key);
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<a-space :size="12" align="center">
|
||
<a-button
|
||
type="text"
|
||
style="color: inherit"
|
||
@click="fnClickAlarm"
|
||
v-roles:has="[TENANTADMIN_ROLE_KEY]"
|
||
>
|
||
<template #icon>
|
||
<a-badge
|
||
:count="useAlarmStore().activeAlarmTotal"
|
||
:overflow-count="99"
|
||
status="warning"
|
||
style="color: inherit"
|
||
>
|
||
<BellOutlined />
|
||
</a-badge>
|
||
</template>
|
||
</a-button>
|
||
|
||
<!-- 锁屏操作 -->
|
||
<a-tooltip placement="bottom">
|
||
<template #title>{{ t('loayouts.rightContent.lock') }}</template>
|
||
<a-button type="text" style="color: inherit" @click="fnClickLock()">
|
||
<template #icon>
|
||
<LockOutlined />
|
||
</template>
|
||
</a-button>
|
||
<ProModal
|
||
:drag="true"
|
||
:width="400"
|
||
:minHeight="200"
|
||
: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>
|
||
</ProModal>
|
||
</a-tooltip>
|
||
|
||
<a-tooltip placement="bottom">
|
||
<template #title>{{ t('loayouts.rightContent.helpDoc') }}</template>
|
||
<a-button
|
||
type="text"
|
||
style="color: inherit"
|
||
@click="fnClickHelpDoc()"
|
||
v-roles:has="[TENANTADMIN_ROLE_KEY]"
|
||
>
|
||
<template #icon>
|
||
<QuestionCircleOutlined />
|
||
</template>
|
||
</a-button>
|
||
</a-tooltip>
|
||
|
||
<a-tooltip placement="bottom">
|
||
<template #title>{{ t('loayouts.rightContent.fullscreen') }}</template>
|
||
<a-button type="text" style="color: inherit" @click="toggle">
|
||
<template #icon>
|
||
<FullscreenExitOutlined v-if="isFullscreen" />
|
||
<FullscreenOutlined v-else />
|
||
</template>
|
||
</a-button>
|
||
</a-tooltip>
|
||
|
||
<a-dropdown
|
||
placement="bottom"
|
||
trigger="click"
|
||
v-if="appStore.i18nOpen && hasPermissions(['system:setting:i18n'])"
|
||
>
|
||
<a-button size="small" type="default">
|
||
{{ t('i18n') }}
|
||
<DownOutlined />
|
||
</a-button>
|
||
<template #overlay>
|
||
<a-menu @click="fnChangeLocale">
|
||
<a-menu-item v-for="opt in optionsLocale" :key="opt.value">
|
||
{{ opt.label }}
|
||
</a-menu-item>
|
||
</a-menu>
|
||
</template>
|
||
</a-dropdown>
|
||
|
||
<a-dropdown placement="bottomRight" trigger="click">
|
||
<div class="user">
|
||
<a-avatar
|
||
shape="circle"
|
||
size="default"
|
||
:src="userStore.getAvatar"
|
||
:alt="userStore.userName"
|
||
></a-avatar>
|
||
<span class="nick">
|
||
{{ userStore.nickName }}
|
||
</span>
|
||
</div>
|
||
<template #overlay>
|
||
<a-menu @click="fnClick">
|
||
<!-- <a-menu-item key="profile">
|
||
<template #icon>
|
||
<UserOutlined />
|
||
</template>
|
||
<span>{{ t('loayouts.rightContent.profile') }}</span>
|
||
</a-menu-item> -->
|
||
<a-menu-item key="settings">
|
||
<template #icon>
|
||
<SettingOutlined />
|
||
</template>
|
||
<span>{{ t('loayouts.rightContent.settings') }}</span>
|
||
</a-menu-item>
|
||
<a-menu-divider />
|
||
<a-menu-item key="logout">
|
||
<template #icon>
|
||
<LogoutOutlined />
|
||
</template>
|
||
<span>{{ t('loayouts.rightContent.logout') }}</span>
|
||
</a-menu-item>
|
||
</a-menu>
|
||
</template>
|
||
</a-dropdown>
|
||
</a-space>
|
||
</template>
|
||
|
||
<style lang="less" scoped>
|
||
.user {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
.nick {
|
||
padding-left: 8px;
|
||
padding-right: 16px;
|
||
font-size: 16px;
|
||
max-width: 164px;
|
||
white-space: nowrap;
|
||
text-align: start;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
</style>
|