WFC/fe.wfc
2
0
Fork 0
Code Activity

fix：仪表盘界面（未接通）

Browse Source
This commit is contained in:
zhongzm
2025-01-10 14:28:59 +08:00
parent 4708df2a6f
commit 28200f4931
7 changed files with 506 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,62 +1,263 @@
<script setup lang="ts">
import { computed } from 'vue';
import { $t } from '@/locales';
import { useAuthStore } from '@/store/modules/auth';
import {
EnvironmentOutlined,
SafetyOutlined,
HddOutlined,
GroupOutlined,
UserAddOutlined,
UserSwitchOutlined
} from '@ant-design/icons-vue';
defineOptions({
name: 'HeaderBanner'
});
const authStore = useAuthStore();
interface StatisticData {
id: number;
title: string;
value: string;
}
const statisticData = computed<StatisticData[]>(() => [
{
id: 0,
title: $t('page.home.projectCount'),
value: '25'
const overviewData = ref<Api.DashboardOverview>({
cloud: { connected: false },
sites: { total: 0, countries: 0, connected: 0, disconnected: 0 },
devices: {
gateways: { connected: 0, disconnected: 0 },
switches: { connected: 0, disconnected: 0 },
olts: { connected: 0, disconnected: 0 },
ap: { connected: 0, disconnected: 0, isolated: 0 }
},
{
id: 1,
title: $t('page.home.todo'),
value: '4/16'
},
{
id: 2,
title: $t('page.home.message'),
value: '12'
}
]);
client: { wiredUsers: 0, wirelessUsers: 0, wirelessGuests: 0 },
alerts: 0,
users: { registered: 0, online: 0 }
});
const fetchOverviewData = async () => {
// try {
// const data = await authStore.getDashboardOverview();
// overviewData.value = data;
// } catch (error) {
// console.error('Failed to fetch overview data:', error);
// }
};
onMounted(() => {
fetchOverviewData();
});
const deviceStatus = computed(() => ({
ap: overviewData.value.devices.ap,
client: overviewData.value.client,
alerts: overviewData.value.alerts,
users: overviewData.value.users
}));
const siteInfo = computed(() => overviewData.value.sites);
const otherDevices = computed(() => ({
gateways: overviewData.value.devices.gateways,
switches: overviewData.value.devices.switches,
olts: overviewData.value.devices.olts
}));
</script>
<template>
<ACard :bordered="false" class="card-wrapper">
<div class="text-16px font-bold mb-4px">Controller Overview</div>
<ARow :gutter="[16, 16]">
<ACol :span="24" :md="18">
<div class="flex-y-center">
<div class="size-72px shrink-0 overflow-hidden rd-1/2">
<img src="@/assets/imgs/soybean.jpg" class="size-full" />
<ACol :span="24">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8px">
<!-- Connected Status -->
<div class="flex flex-col p-6px">
<div class="flex items-center gap-6px mb-6px">
<div class="size-48px flex-center bg-blue-50 rounded-lg">
<icon-mdi-cloud class="text-primary text-24px" />
</div>
<div class="text-16px font-medium">Connected</div>
</div>
<div class="border-t border-gray-100 my-4px"></div>
<div class="text-12px text-gray-500">
Cloud Access
</div>
</div>
<div class="pl-12px">
<h3 class="text-18px font-semibold">
{{ $t('page.home.greeting', { username: authStore.userInfo.username }) }}
</h3>
<p class="text-#999 leading-30px">{{ $t('page.home.weatherDesc') }}</p>
<!-- Sites -->
<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">
<environment-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">{{ siteInfo.total }}</span>
</div>
<div class="text-16px font-medium">Sites</div>
</div>
<div class="border-t border-gray-100 my-4px"></div>
<div class="flex flex-col text-12px text-gray-500">
<span>Total Sites: {{ siteInfo.total }}</span>
<span>Countries: {{ siteInfo.countries }}</span>
<span>Connected: {{ siteInfo.connected }}</span>
<span>Disconnected: {{ siteInfo.disconnected }}</span>
</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">Gateways</div>
</div>
<div class="border-t border-gray-100 my-4px"></div>
<div class="flex flex-col text-12px text-gray-500">
<span>Connected: {{ otherDevices.gateways.connected }}</span>
<span>Disconnected: {{ 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">Switches</div>
</div>
<div class="border-t border-gray-100 my-4px"></div>
<div class="flex flex-col text-12px text-gray-500">
<span>Connected: {{ otherDevices.switches.connected }}</span>
<span>Disconnected: {{ 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.connected + otherDevices.olts.disconnected }}</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>Connected: {{ otherDevices.olts.connected }}</span>
<span>Disconnected: {{ otherDevices.olts.disconnected }}</span>
</div>
</div>
<!-- Register Users -->
<div class="flex flex-col p-6px">
<div class="flex items-center gap-6px mb-6px">
<div class="size-48px flex-center bg-blue-50 rounded-lg">
<user-add-outlined class="text-primary text-24px" />
</div>
<div class="text-16px font-medium">Register Users</div>
</div>
<div class="border-t border-gray-100 my-4px"></div>
<div class="flex flex-col text-12px text-gray-500">
<span>Total: {{ deviceStatus.users.registered }}</span>
<span>Online: {{ deviceStatus.users.online }}</span>
</div>
</div>
<!-- Online Users -->
<div class="flex flex-col p-6px">
<div class="flex items-center gap-6px mb-6px">
<div class="size-48px flex-center bg-green-50 rounded-lg">
<user-switch-outlined class="text-primary text-24px" />
</div>
<div class="text-16px font-medium">Online Users</div>
</div>
<div class="border-t border-gray-100 my-4px"></div>
<div class="flex flex-col text-12px text-gray-500">
<span>Active: {{ deviceStatus.users.online }}</span>
<span>Total: {{ deviceStatus.users.registered }}</span>
</div>
</div>
<!-- AP Status -->
<div class="flex flex-col p-6px">
<div class="flex items-center gap-6px mb-6px">
<div class="size-48px flex-center bg-green-50 rounded-lg">
<icon-mdi-access-point class="text-primary text-24px" />
</div>
<div class="text-16px font-medium">AP</div>
</div>
<div class="border-t border-gray-100 my-4px"></div>
<div class="flex flex-col text-12px text-gray-500">
<span>Connected: {{ deviceStatus.ap.connected }}</span>
<span>Disconnected: {{ deviceStatus.ap.disconnected }}</span>
<span>Isolated: {{ deviceStatus.ap.isolated }}</span>
</div>
</div>
<!-- Client Status -->
<div class="flex flex-col p-6px">
<div class="flex items-center gap-6px mb-6px">
<div class="size-48px flex-center bg-purple-50 rounded-lg">
<icon-mdi-laptop class="text-primary text-24px" />
</div>
<div class="text-16px font-medium">Client</div>
</div>
<div class="border-t border-gray-100 my-4px"></div>
<div class="flex flex-col text-12px text-gray-500">
<span>Wired Users: {{ deviceStatus.client.wiredUsers }}</span>
<span>Wireless Users: {{ deviceStatus.client.wirelessUsers }}</span>
<span>Wireless Guests: {{ deviceStatus.client.wirelessGuests }}</span>
</div>
</div>
<!-- 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>
<div class="text-16px font-medium">Alerts</div>
</div>
<div class="border-t border-gray-100 my-4px"></div>
<div class="flex flex-col text-12px text-gray-500">
<span>Total: {{ deviceStatus.alerts }}</span>
<span>Active: {{ deviceStatus.alerts }}</span>
</div>
</div>
</div>
</ACol>
<ACol :span="24" :md="6">
<ASpace class="w-full justify-end" :size="24">
<AStatistic v-for="item in statisticData" :key="item.id" class="whitespace-nowrap" v-bind="item" />
</ASpace>
</ACol>
</ARow>
</ACard>
</template>
<style scoped></style>
<style scoped>
.card-wrapper {
margin-bottom: 16px;
padding: 12px;
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.size-48px {
width: 48px;
height: 48px;
position: relative;
}
.flex-col > span {
line-height: 1.5;
}
.bg-gray-50 {
background-color: #fafafa;
}
.p-6px {
padding: 6px;
}
.mt-8px {
margin-top: 8px;
}
.mb-6px {
margin-bottom: 6px;
}
</style>