143 lines
4.7 KiB
Vue
143 lines
4.7 KiB
Vue
<script lang="ts">
|
|
function renderIcon(icon: Component): () => VNode {
|
|
return () => h(NIcon, null, { default: () => h(icon) });
|
|
}
|
|
</script>
|
|
|
|
<script setup lang="ts">
|
|
import ThemeSwitch from '@/components/theme-switch.vue';
|
|
import { useStationListQuery } from '@/composables/query';
|
|
import { useStationStore } from '@/stores/station';
|
|
import { useUserStore } from '@/stores/user';
|
|
import { AlertFilled, /* AreaChartOutlined, */ FileTextFilled, HomeFilled, LogoutOutlined, VideoCameraFilled } from '@vicons/antd';
|
|
import { ChevronDown } from '@vicons/carbon';
|
|
import { NButton, NDropdown, NFlex, NIcon, NLayout, NLayoutContent, NLayoutFooter, NLayoutHeader, NLayoutSider, NMenu, NScrollbar, type DropdownOption, type MenuOption } from 'naive-ui';
|
|
import { storeToRefs } from 'pinia';
|
|
import { h, onBeforeMount, onBeforeUnmount, ref, type Component, type VNode } from 'vue';
|
|
import { RouterLink, useRoute, useRouter } from 'vue-router';
|
|
|
|
const userStore = useUserStore();
|
|
const { userInfo } = storeToRefs(userStore);
|
|
|
|
const stationStore = useStationStore();
|
|
const { stationList } = storeToRefs(stationStore);
|
|
|
|
useStationListQuery();
|
|
|
|
onBeforeUnmount(() => {
|
|
stationList.value = [];
|
|
});
|
|
|
|
onBeforeMount(() => {
|
|
userStore.userGetInfo().catch((err) => window.$message.error(err));
|
|
});
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
const menuOptions = ref<MenuOption[]>([
|
|
{
|
|
label: () => h(RouterLink, { to: '/dashboard' }, { default: () => '今日数据看板' }),
|
|
key: '/dashboard',
|
|
icon: renderIcon(HomeFilled),
|
|
},
|
|
{
|
|
label: () => h(RouterLink, { to: '/device' }, { default: () => '实时设备状态' }),
|
|
key: '/device',
|
|
icon: renderIcon(VideoCameraFilled),
|
|
},
|
|
{
|
|
label: () => h(RouterLink, { to: '/alarm' }, { default: () => '设备告警记录' }),
|
|
key: '/alarm',
|
|
icon: renderIcon(AlertFilled),
|
|
},
|
|
// {
|
|
// label: () => h(RouterLink, { to: '/statistics' }, { default: () => '设备性能统计' }),
|
|
// key: '/statistics',
|
|
// icon: renderIcon(AreaChartOutlined),
|
|
// },
|
|
{
|
|
label: () => h(RouterLink, { to: '/log/vimp-log' }, { default: () => '视频平台日志' }), // '系统日志记录'
|
|
key: '/log/vimp-log',
|
|
icon: renderIcon(FileTextFilled),
|
|
// children: [
|
|
// {
|
|
// label: () => h(RouterLink, { to: '/log/vimp-log' }, { default: () => '视频平台日志' }),
|
|
// key: '/log/vimp-log',
|
|
// },
|
|
// ],
|
|
},
|
|
]);
|
|
|
|
const dropdownOptions = ref<DropdownOption[]>([
|
|
{
|
|
label: '退出登录',
|
|
key: 'logout',
|
|
icon: renderIcon(LogoutOutlined),
|
|
onClick: async () => {
|
|
await userStore.userLogout();
|
|
router.push('/login');
|
|
},
|
|
},
|
|
]);
|
|
|
|
const selectDropdownOption = (key: string, option: DropdownOption) => {
|
|
if (typeof option['onClick'] === 'function') {
|
|
option['onClick']();
|
|
}
|
|
};
|
|
|
|
const toDashboardPage = () => router.push('/');
|
|
</script>
|
|
|
|
<template>
|
|
<NScrollbar x-scrollable style="width: 100vw; height: 100vh">
|
|
<NLayout has-sider :content-style="{ 'min-width': '1400px' }">
|
|
<NLayoutSider bordered collapsed :collapse-mode="'width'" :collapsed-width="60">
|
|
<NMenu collapsed :collapsed-width="60" :collapsed-icon-size="18" :value="route.path" :options="menuOptions" />
|
|
</NLayoutSider>
|
|
<NLayout :native-scrollbar="false">
|
|
<NLayoutHeader bordered class="app-layout-header">
|
|
<NFlex justify="space-between" align="center" :size="8" style="width: 100%; height: 100%">
|
|
<span style="font-size: 16px; font-weight: 500; margin-left: 16px; cursor: pointer" @click="toDashboardPage">网络设备管理平台</span>
|
|
<NFlex align="center" :size="8">
|
|
<ThemeSwitch />
|
|
<NDropdown trigger="hover" show-arrow :options="dropdownOptions" @select="selectDropdownOption">
|
|
<NButton secondary icon-placement="right" style="margin-right: 8px">
|
|
<template #default>
|
|
<span>{{ userInfo?.nickName ?? '' }}</span>
|
|
</template>
|
|
<template #icon>
|
|
<NIcon :component="ChevronDown" />
|
|
</template>
|
|
</NButton>
|
|
</NDropdown>
|
|
</NFlex>
|
|
</NFlex>
|
|
</NLayoutHeader>
|
|
<NLayoutContent class="app-layout-content">
|
|
<RouterView />
|
|
</NLayoutContent>
|
|
<NLayoutFooter bordered class="app-layout-footer" />
|
|
</NLayout>
|
|
</NLayout>
|
|
</NScrollbar>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
$layout-header-height: 48px;
|
|
$layout-footer-height: 48px;
|
|
|
|
.app-layout-header {
|
|
height: $layout-header-height;
|
|
}
|
|
|
|
.app-layout-content {
|
|
height: calc(100vh - $layout-header-height - $layout-footer-height);
|
|
}
|
|
|
|
.app-layout-footer {
|
|
height: $layout-footer-height;
|
|
}
|
|
</style>
|