WFC/fe.wfc
2
0
Fork 0
Code Activity

feat:隐藏网关、交换机、OLTs项，增加告警跳转

Browse Source
This commit is contained in:
zhongzm
2025-06-11 11:14:31 +08:00
parent bc89546ec6
commit c9b4e430e9
2 changed files with 66 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/views/dashboard/modules/card-data.vue
View File

@@ -167,21 +167,21 @@ const columns: TableColumnType<Api.DashboardSite>[] = [
key: 'alerts',
width: 100
},
{
title: t('page.carddata.gateway'),
key: 'gateway',
width: 100
},
{
title: t('page.carddata.switches'),
key: 'switches',
width: 100
},
{
title: 'OLTS',
key: 'olts',
width: 100
},
// {
// title: t('page.carddata.gateway'),
// key: 'gateway',
// width: 100
// },
// {
// title: t('page.carddata.switches'),
// key: 'switches',
// width: 100
// },
// {
// title: 'OLTS',
// key: 'olts',
// width: 100
// },
{
title: 'EAPS',
key: 'eaps',

98
src/views/dashboard/modules/header-banner.vue
View File

@@ -25,6 +25,10 @@ const handleUserClick = () =>{
const handleterminalClick = () => {
router.push('/device/terminal');
};
//告警跳转
const handAlertsClick = () => {
router.push('/device/alerts');
};
defineOptions({
@@ -164,53 +168,53 @@ const otherDevices = computed(() => ({
</div>
</div>
<!-- Gateways -->
<div class="flex flex-col p-6px">
<div class="flex items-center gap-6px mb-6px">
<div class="size-48px flex-center bg-gray-100 rounded-lg relative">
<safety-outlined class="text-24px text-primary" />
<span class="text-20px font-semibold absolute -right-2 -top-2 bg-primary text-white rounded-full w-6 h-6 flex-center">{{ otherDevices.gateways.connected + otherDevices.gateways.disconnected }}</span>
</div>
<div class="text-16px font-medium">{{ t('page.headerbanner.gateway') }}</div>
</div>
<div class="border-t border-gray-100 my-4px"></div>
<div class="flex flex-col text-12px text-gray-500">
<span>{{ t('page.headerbanner.connect') }}: {{ otherDevices.gateways.connected }}</span>
<span>{{ t('page.headerbanner.disconnect') }}: {{ otherDevices.gateways.disconnected }}</span>
</div>
</div>
<!-- &lt;!&ndash; Gateways &ndash;&gt;-->
<!-- <div class="flex flex-col p-6px">-->
<!-- <div class="flex items-center gap-6px mb-6px">-->
<!-- <div class="size-48px flex-center bg-gray-100 rounded-lg relative">-->
<!-- <safety-outlined class="text-24px text-primary" />-->
<!-- <span class="text-20px font-semibold absolute -right-2 -top-2 bg-primary text-white rounded-full w-6 h-6 flex-center">{{ otherDevices.gateways.connected + otherDevices.gateways.disconnected }}</span>-->
<!-- </div>-->
<!-- <div class="text-16px font-medium">{{ t('page.headerbanner.gateway') }}</div>-->
<!-- </div>-->
<!-- <div class="border-t border-gray-100 my-4px"></div>-->
<!-- <div class="flex flex-col text-12px text-gray-500">-->
<!-- <span>{{ t('page.headerbanner.connect') }}: {{ otherDevices.gateways.connected }}</span>-->
<!-- <span>{{ t('page.headerbanner.disconnect') }}: {{ otherDevices.gateways.disconnected }}</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- Switches -->
<div class="flex flex-col p-6px">
<div class="flex items-center gap-6px mb-6px">
<div class="size-48px flex-center bg-gray-100 rounded-lg relative">
<hdd-outlined class="text-24px text-primary" />
<span class="text-20px font-semibold absolute -right-2 -top-2 bg-primary text-white rounded-full w-6 h-6 flex-center">{{ otherDevices.switches.connected + otherDevices.switches.disconnected }}</span>
</div>
<div class="text-16px font-medium">{{ t('page.headerbanner.switches') }}</div>
</div>
<div class="border-t border-gray-100 my-4px"></div>
<div class="flex flex-col text-12px text-gray-500">
<span>{{ t('page.headerbanner.connect') }}: {{ otherDevices.switches.connected }}</span>
<span>{{ t('page.headerbanner.disconnect') }}: {{ otherDevices.switches.disconnected }}</span>
</div>
</div>
<!-- &lt;!&ndash; Switches &ndash;&gt;-->
<!-- <div class="flex flex-col p-6px">-->
<!-- <div class="flex items-center gap-6px mb-6px">-->
<!-- <div class="size-48px flex-center bg-gray-100 rounded-lg relative">-->
<!-- <hdd-outlined class="text-24px text-primary" />-->
<!-- <span class="text-20px font-semibold absolute -right-2 -top-2 bg-primary text-white rounded-full w-6 h-6 flex-center">{{ otherDevices.switches.connected + otherDevices.switches.disconnected }}</span>-->
<!-- </div>-->
<!-- <div class="text-16px font-medium">{{ t('page.headerbanner.switches') }}</div>-->
<!-- </div>-->
<!-- <div class="border-t border-gray-100 my-4px"></div>-->
<!-- <div class="flex flex-col text-12px text-gray-500">-->
<!-- <span>{{ t('page.headerbanner.connect') }}: {{ otherDevices.switches.connected }}</span>-->
<!-- <span>{{ t('page.headerbanner.disconnect') }}: {{ otherDevices.switches.disconnected }}</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- OLTs -->
<div class="flex flex-col p-6px">
<div class="flex items-center gap-6px mb-6px">
<div class="size-48px flex-center bg-gray-100 rounded-lg relative">
<group-outlined class="text-24px text-primary" />
<span class="text-20px font-semibold absolute -right-2 -top-2 bg-primary text-white rounded-full w-6 h-6 flex-center">{{ otherDevices.olts.total }}</span>
</div>
<div class="text-16px font-medium">OLTs</div>
</div>
<div class="border-t border-gray-100 my-4px"></div>
<div class="flex flex-col text-12px text-gray-500">
<span>{{ t('page.headerbanner.connect') }}: {{ otherDevices.olts.connected }}</span>
<span>{{ t('page.headerbanner.disconnect') }}: {{ otherDevices.olts.disconnected }}</span>
</div>
</div>
<!-- &lt;!&ndash; OLTs &ndash;&gt;-->
<!-- <div class="flex flex-col p-6px">-->
<!-- <div class="flex items-center gap-6px mb-6px">-->
<!-- <div class="size-48px flex-center bg-gray-100 rounded-lg relative">-->
<!-- <group-outlined class="text-24px text-primary" />-->
<!-- <span class="text-20px font-semibold absolute -right-2 -top-2 bg-primary text-white rounded-full w-6 h-6 flex-center">{{ otherDevices.olts.total }}</span>-->
<!-- </div>-->
<!-- <div class="text-16px font-medium">OLTs</div>-->
<!-- </div>-->
<!-- <div class="border-t border-gray-100 my-4px"></div>-->
<!-- <div class="flex flex-col text-12px text-gray-500">-->
<!-- <span>{{ t('page.headerbanner.connect') }}: {{ otherDevices.olts.connected }}</span>-->
<!-- <span>{{ t('page.headerbanner.disconnect') }}: {{ otherDevices.olts.disconnected }}</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- Register Users -->
<div class="flex flex-col p-6px">
@@ -281,8 +285,8 @@ const otherDevices = computed(() => ({
<!-- Alerts -->
<div class="flex flex-col p-6px">
<div class="flex items-center gap-6px mb-6px">
<div class="size-48px flex-center bg-yellow-50 rounded-lg">
<icon-mdi-alert class="text-warning text-24px" />
<div class="size-48px flex-center bg-yellow-50 rounded-lg relative hover:bg-green-100">
<icon-mdi-alert class="text-warning text-24px cursor-pointer" @click="handAlertsClick"/>
</div>
<div class="text-16px font-medium">{{ t('page.headerbanner.alerts') }}</div>
</div>