fix：仪表盘界面（未接通）
This commit is contained in:
zhongzm
@@ -202,6 +202,14 @@ export function updateBillRule(data: Api.Billing.BillRuleUpdate) {
|
||||
data
|
||||
});
|
||||
}
|
||||
/** 获取仪表盘概览数据 */
|
||||
export function getDashboardOverview() {
|
||||
return request<Api.DashboardOverview>({
|
||||
url: '/system/dashboard/overview',
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
41
src/typings/api.d.ts
vendored
41
src/typings/api.d.ts
vendored
@@ -607,4 +607,45 @@ declare namespace Api {
|
||||
enable: boolean;
|
||||
}
|
||||
}
|
||||
|
||||
interface DashboardOverview {
|
||||
cloud: {
|
||||
connected: boolean;
|
||||
};
|
||||
sites: {
|
||||
total: number;
|
||||
countries: number;
|
||||
connected: number;
|
||||
disconnected: number;
|
||||
};
|
||||
devices: {
|
||||
gateways: {
|
||||
connected: number;
|
||||
disconnected: number;
|
||||
};
|
||||
switches: {
|
||||
connected: number;
|
||||
disconnected: number;
|
||||
};
|
||||
olts: {
|
||||
connected: number;
|
||||
disconnected: number;
|
||||
};
|
||||
ap: {
|
||||
connected: number;
|
||||
disconnected: number;
|
||||
isolated: number;
|
||||
};
|
||||
};
|
||||
client: {
|
||||
wiredUsers: number;
|
||||
wirelessUsers: number;
|
||||
wirelessGuests: number;
|
||||
};
|
||||
alerts: number;
|
||||
users: {
|
||||
registered: number;
|
||||
online: number;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
1
src/typings/auto-imports.d.ts
vendored
1
src/typings/auto-imports.d.ts
vendored
@@ -152,6 +152,7 @@ declare global {
|
||||
const getCacheRouteNames: typeof import('../store/modules/route/shared')['getCacheRouteNames']
|
||||
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
||||
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
||||
const getDashboardOverview: typeof import('../service/api/auth')['getDashboardOverview']
|
||||
const getData: typeof import('../service/api/dictData')['getData']
|
||||
const getDefaultHomeTab: typeof import('../store/modules/tab/shared')['getDefaultHomeTab']
|
||||
const getDictDataType: typeof import('../service/api/dict')['getDictDataType']
|
||||
|
||||
5
src/typings/components.d.ts
vendored
5
src/typings/components.d.ts
vendored
@@ -45,7 +45,6 @@ declare module 'vue' {
|
||||
ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
|
||||
ASpace: typeof import('ant-design-vue/es')['Space']
|
||||
ASpin: typeof import('ant-design-vue/es')['Spin']
|
||||
AStatistic: typeof import('ant-design-vue/es')['Statistic']
|
||||
AStep: typeof import('ant-design-vue/es')['Step']
|
||||
ASteps: typeof import('ant-design-vue/es')['Steps']
|
||||
ASwitch: typeof import('ant-design-vue/es')['Switch']
|
||||
@@ -77,7 +76,11 @@ declare module 'vue' {
|
||||
IconIcRoundSearch: typeof import('~icons/ic/round-search')['default']
|
||||
IconLocalBanner: typeof import('~icons/local/banner')['default']
|
||||
IconLocalLogo: typeof import('~icons/local/logo')['default']
|
||||
IconMdiAccessPoint: typeof import('~icons/mdi/access-point')['default']
|
||||
IconMdiAlert: typeof import('~icons/mdi/alert')['default']
|
||||
IconMdiCloud: typeof import('~icons/mdi/cloud')['default']
|
||||
IconMdiDrag: typeof import('~icons/mdi/drag')['default']
|
||||
IconMdiLaptop: typeof import('~icons/mdi/laptop')['default']
|
||||
IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
|
||||
IconMdiSearch: typeof import('~icons/mdi/search')['default']
|
||||
LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
|
||||
|
||||
@@ -1,109 +1,231 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { createReusableTemplate } from '@vueuse/core';
|
||||
import { $t } from '@/locales';
|
||||
import { computed, ref } from 'vue';
|
||||
import {
|
||||
EnvironmentOutlined,
|
||||
EditOutlined,
|
||||
CopyOutlined,
|
||||
DeleteOutlined,
|
||||
HomeOutlined,
|
||||
SearchOutlined,
|
||||
PlusOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
defineOptions({
|
||||
name: 'CardData'
|
||||
});
|
||||
|
||||
interface CardData {
|
||||
key: string;
|
||||
title: string;
|
||||
value: number;
|
||||
unit: string;
|
||||
color: {
|
||||
start: string;
|
||||
end: string;
|
||||
};
|
||||
icon: string;
|
||||
interface SiteData {
|
||||
id: number;
|
||||
name: string;
|
||||
region: string;
|
||||
alerts: number;
|
||||
gateway: string;
|
||||
switches: string;
|
||||
olts: string;
|
||||
eaps: string;
|
||||
}
|
||||
|
||||
const cardData = computed<CardData[]>(() => [
|
||||
// 搜索和分页状态
|
||||
const searchValue = ref('');
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
|
||||
// 表格列定义
|
||||
const columns = [
|
||||
{
|
||||
key: 'visitCount',
|
||||
title: $t('page.home.visitCount'),
|
||||
value: 9725,
|
||||
unit: '',
|
||||
color: {
|
||||
start: '#ec4786',
|
||||
end: '#b955a4'
|
||||
},
|
||||
icon: 'ant-design:bar-chart-outlined'
|
||||
title: 'NAME',
|
||||
key: 'name',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
key: 'turnover',
|
||||
title: $t('page.home.turnover'),
|
||||
value: 1026,
|
||||
unit: '$',
|
||||
color: {
|
||||
start: '#865ec0',
|
||||
end: '#5144b4'
|
||||
},
|
||||
icon: 'ant-design:money-collect-outlined'
|
||||
title: 'COUNTRY/REGION',
|
||||
key: 'region',
|
||||
dataIndex: 'region'
|
||||
},
|
||||
{
|
||||
key: 'downloadCount',
|
||||
title: $t('page.home.downloadCount'),
|
||||
value: 970925,
|
||||
unit: '',
|
||||
color: {
|
||||
start: '#56cdf3',
|
||||
end: '#719de3'
|
||||
},
|
||||
icon: 'carbon:document-download'
|
||||
title: 'ALERTS',
|
||||
key: 'alerts',
|
||||
dataIndex: 'alerts',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
key: 'dealCount',
|
||||
title: $t('page.home.dealCount'),
|
||||
value: 9527,
|
||||
unit: '',
|
||||
color: {
|
||||
start: '#fcbc25',
|
||||
end: '#f68057'
|
||||
},
|
||||
icon: 'ant-design:trademark-circle-outlined'
|
||||
title: 'GATEWAY',
|
||||
key: 'gateway',
|
||||
dataIndex: 'gateway',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: 'SWITCHES',
|
||||
key: 'switches',
|
||||
dataIndex: 'switches',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: 'OLTS',
|
||||
key: 'olts',
|
||||
dataIndex: 'olts',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: 'EAPS',
|
||||
key: 'eaps',
|
||||
dataIndex: 'eaps',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: 'ACTION',
|
||||
key: 'action',
|
||||
width: 150,
|
||||
fixed: 'right'
|
||||
}
|
||||
];
|
||||
|
||||
const siteData = computed<SiteData[]>(() => [
|
||||
{
|
||||
id: 1,
|
||||
name: 'wfc-dev-omada1-site1',
|
||||
region: 'China mainland',
|
||||
alerts: 0,
|
||||
gateway: '-',
|
||||
switches: '0 / 0',
|
||||
olts: '0 / 0',
|
||||
eaps: '1 / 1'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'wfc-dev-omada1-site2',
|
||||
region: 'China mainland',
|
||||
alerts: 0,
|
||||
gateway: '-',
|
||||
switches: '0 / 0',
|
||||
olts: '0 / 0',
|
||||
eaps: '0 / 1'
|
||||
}
|
||||
]);
|
||||
|
||||
interface GradientBgProps {
|
||||
gradientColor: string;
|
||||
}
|
||||
// 按钮操作处理函数
|
||||
const handleEdit = (record: SiteData) => {
|
||||
console.log('Edit:', record);
|
||||
};
|
||||
|
||||
const [DefineGradientBg, GradientBg] = createReusableTemplate<GradientBgProps>();
|
||||
const handleCopy = (record: SiteData) => {
|
||||
console.log('Copy:', record);
|
||||
};
|
||||
|
||||
function getGradientColor(color: CardData['color']) {
|
||||
return `linear-gradient(to bottom right, ${color.start}, ${color.end})`;
|
||||
}
|
||||
const handleDelete = (record: SiteData) => {
|
||||
console.log('Delete:', record);
|
||||
};
|
||||
|
||||
const handleHome = (record: SiteData) => {
|
||||
console.log('Home:', record);
|
||||
};
|
||||
|
||||
// 分页处理函数
|
||||
// const handlePageChange = (page: number) => {
|
||||
// currentPage.value = page;
|
||||
// };
|
||||
|
||||
// const handlePageSizeChange = (size: number) => {
|
||||
// pageSize.value = size;
|
||||
// currentPage.value = 1;
|
||||
// };
|
||||
|
||||
// const handleGoToPage = () => {
|
||||
// // 处理跳转页面逻辑
|
||||
// console.log('Go to page:', currentPage.value);
|
||||
// };
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ACard :bordered="false" size="small" class="card-wrapper">
|
||||
<!-- define component start: GradientBg -->
|
||||
<DefineGradientBg v-slot="{ $slots, gradientColor }">
|
||||
<div class="rd-8px px-16px pb-4px pt-8px text-white" :style="{ backgroundImage: gradientColor }">
|
||||
<component :is="$slots.default" />
|
||||
<div class="flex justify-between items-center mb-16px">
|
||||
<div class="flex items-center gap-8px">
|
||||
<span class="text-16px font-medium">Site List</span>
|
||||
<!-- <span class="text-12px text-gray-500">1-2 of 2 records</span>-->
|
||||
</div>
|
||||
</DefineGradientBg>
|
||||
<!-- define component end: GradientBg -->
|
||||
<div class="flex items-center gap-16px">
|
||||
<AInput
|
||||
v-model:value="searchValue"
|
||||
placeholder="Search Site Name"
|
||||
class="w-240px"
|
||||
allow-clear
|
||||
>
|
||||
<template #prefix>
|
||||
<search-outlined />
|
||||
</template>
|
||||
</AInput>
|
||||
<AButton type="primary">
|
||||
<template #icon>
|
||||
<plus-outlined />
|
||||
</template>
|
||||
Import Site
|
||||
</AButton>
|
||||
<AButton type="primary">
|
||||
<template #icon>
|
||||
<plus-outlined />
|
||||
</template>
|
||||
Add New Site
|
||||
</AButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ARow :gutter="[16, 16]">
|
||||
<ACol v-for="item in cardData" :key="item.key" :span="24" :md="12" :lg="6">
|
||||
<GradientBg :gradient-color="getGradientColor(item.color)" class="flex-1">
|
||||
<h3 class="text-16px">{{ item.title }}</h3>
|
||||
<div class="flex justify-between pt-12px">
|
||||
<SvgIcon :icon="item.icon" class="text-32px" />
|
||||
<CountTo
|
||||
:prefix="item.unit"
|
||||
:start-value="1"
|
||||
:end-value="item.value"
|
||||
class="text-30px text-white dark:text-dark"
|
||||
/>
|
||||
<ATable
|
||||
:columns="columns"
|
||||
:data-source="siteData"
|
||||
:pagination="false"
|
||||
:scroll="{ x: 1200 }"
|
||||
row-key="id"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'name'">
|
||||
<div class="flex items-center gap-8px">
|
||||
<environment-outlined class="text-16px" />
|
||||
<span>{{ record.name }}</span>
|
||||
</div>
|
||||
</GradientBg>
|
||||
</ACol>
|
||||
</ARow>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'alerts'">
|
||||
<ATag v-if="record.alerts > 0" color="error">{{ record.alerts }}</ATag>
|
||||
<span v-else>{{ record.alerts }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<div class="flex items-center gap-8px">
|
||||
<edit-outlined class="cursor-pointer text-primary" @click="handleEdit(record)" />
|
||||
<copy-outlined class="cursor-pointer text-primary" @click="handleCopy(record)" />
|
||||
<delete-outlined class="cursor-pointer text-red-500" @click="handleDelete(record)" />
|
||||
<home-outlined class="cursor-pointer text-primary" @click="handleHome(record)" />
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</ATable>
|
||||
|
||||
<div class="flex justify-between items-center mt-16px">
|
||||
<div class="text-12px text-gray-500">
|
||||
Showing 1-2 of 2 records
|
||||
</div>
|
||||
<div class="flex items-center gap-8px">
|
||||
<ASelect v-model:value="pageSize" style="width: 100px">
|
||||
<ASelectOption :value="10">10 / page</ASelectOption>
|
||||
<ASelectOption :value="20">20 / page</ASelectOption>
|
||||
<ASelectOption :value="50">50 / page</ASelectOption>
|
||||
</ASelect>
|
||||
<span class="text-12px text-gray-500">Go to page:</span>
|
||||
<AInput v-model:value="currentPage" style="width: 50px" />
|
||||
<AButton>Go</AButton>
|
||||
</div>
|
||||
</div>
|
||||
</ACard>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
.card-wrapper {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.w-240px {
|
||||
width: 240px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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>
|
||||
|
||||
8
src/views/device/dashboard/index.vue
Normal file
8
src/views/device/dashboard/index.vue
Normal file
@@ -0,0 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>仪表盘面板</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user