WFC/fe.wfc
2
0
Fork 0
Code Activity

fix：仪表盘中英文适配

Browse Source
This commit is contained in:
zhongzm
2025-02-07 09:52:10 +08:00
parent 489d4c8603
commit a8f3e247c6
4 changed files with 104 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,8 +10,9 @@ import {
SearchOutlined,
PlusOutlined
} from '@ant-design/icons-vue';
import { getDashboardSiteList } from '@/service/api/auth';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
defineOptions({
name: 'CardData'
@@ -65,27 +66,27 @@ watch([currentPage, pageSize, searchValue], () => {
// 表格列定义
const columns: TableColumnType<Api.DashboardSite>[] = [
{
title: 'NAME',
title: t('page.carddata.sitename'),
key: 'name',
dataIndex: 'name'
},
{
title: 'COUNTRY/REGION',
title: t('page.carddata.country'),
key: 'region',
dataIndex: 'region'
},
{
title: 'ALERTS',
title: t('page.carddata.alert'),
key: 'alerts',
width: 100
},
{
title: 'GATEWAY',
title: t('page.carddata.gateway'),
key: 'gateway',
width: 100
},
{
title: 'SWITCHES',
title: t('page.carddata.switches'),
key: 'switches',
width: 100
},
@@ -100,7 +101,7 @@ const columns: TableColumnType<Api.DashboardSite>[] = [
width: 100
},
{
title: 'CLIENTS',
title: t('page.carddata.clients'),
key: 'clients',
width: 150
},
@@ -146,12 +147,12 @@ const handlePageSizeChange = (size: number) => {
<ACard :bordered="false" size="small" class="card-wrapper">
<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-16px font-medium">{{ t('page.carddata.sitelist') }}</span>
</div>
<div class="flex items-center gap-16px">
<AInput
v-model:value="searchValue"
placeholder="Search Site Name"
:placeholder="t('page.carddata.search')"
class="w-240px"
allow-clear
>

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

@@ -9,6 +9,8 @@ import {
} from '@ant-design/icons-vue';
import { computed, ref, onMounted } from 'vue';
import { getDashboardOverview } from '@/service/api/auth';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
defineOptions({
name: 'HeaderBanner'
@@ -119,7 +121,7 @@ const otherDevices = computed(() => ({
<template>
<ACard :bordered="false" class="card-wrapper">
<div class="text-16px font-bold mb-4px">Controller Overview</div>
<div class="text-16px font-bold mb-4px">{{ t('page.headerbanner.controller') }}</div>
<ARow :gutter="[16, 16]">
<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">
@@ -129,11 +131,11 @@ const otherDevices = computed(() => ({
<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 class="text-16px font-medium">{{ t('page.headerbanner.connected') }}</div>
</div>
<div class="border-t border-gray-100 my-4px"></div>
<div class="text-12px text-gray-500">
Cloud Access
{{ t('page.headerbanner.cloud') }}
</div>
</div>
@@ -144,11 +146,11 @@ const otherDevices = computed(() => ({
<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 class="text-16px font-medium">{{ t('page.headerbanner.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>{{ t('page.headerbanner.totalsite') }}: {{ siteInfo.total }}</span>
</div>
</div>
@@ -159,12 +161,12 @@ const otherDevices = computed(() => ({
<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 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>Connected: {{ otherDevices.gateways.connected }}</span>
<span>Disconnected: {{ otherDevices.gateways.disconnected }}</span>
<span>{{ t('page.headerbanner.connect') }}: {{ otherDevices.gateways.connected }}</span>
<span>{{ t('page.headerbanner.disconnect') }}: {{ otherDevices.gateways.disconnected }}</span>
</div>
</div>
@@ -175,12 +177,12 @@ const otherDevices = computed(() => ({
<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 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>Connected: {{ otherDevices.switches.connected }}</span>
<span>Disconnected: {{ otherDevices.switches.disconnected }}</span>
<span>{{ t('page.headerbanner.connect') }}: {{ otherDevices.switches.connected }}</span>
<span>{{ t('page.headerbanner.disconnect') }}: {{ otherDevices.switches.disconnected }}</span>
</div>
</div>
@@ -195,8 +197,8 @@ const otherDevices = computed(() => ({
</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>
<span>{{ t('page.headerbanner.connect') }}: {{ otherDevices.olts.connected }}</span>
<span>{{ t('page.headerbanner.disconnect') }}: {{ otherDevices.olts.disconnected }}</span>
</div>
</div>
@@ -206,11 +208,11 @@ const otherDevices = computed(() => ({
<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 class="text-16px font-medium">{{ t('page.headerbanner.register') }}</div>
</div>
<div class="border-t border-gray-100 my-4px"></div>
<div class="flex flex-col text-12px text-gray-500">
<span>Register: {{ deviceStatus.users.registered }}</span>
<span>{{ t('page.headerbanner.registuser') }}: {{ deviceStatus.users.registered }}</span>
</div>
</div>
@@ -220,11 +222,11 @@ const otherDevices = computed(() => ({
<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 class="text-16px font-medium">{{ t('page.headerbanner.online') }}</div>
</div>
<div class="border-t border-gray-100 my-4px"></div>
<div class="flex flex-col text-12px text-gray-500">
<span>Online: {{ deviceStatus.users.online }}</span>
<span>{{ t('page.headerbanner.onlineuser') }}: {{ deviceStatus.users.online }}</span>
</div>
</div>
@@ -241,9 +243,9 @@ const otherDevices = computed(() => ({
</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>
<span>{{ t('page.headerbanner.connect') }}: {{ deviceStatus.ap.connected }}</span>
<span>{{ t('page.headerbanner.disconnect') }}: {{ deviceStatus.ap.disconnected }}</span>
<span>{{ t('page.headerbanner.isolated') }}: {{ deviceStatus.ap.isolated }}</span>
</div>
</div>
@@ -256,13 +258,13 @@ const otherDevices = computed(() => ({
{{ overviewData.totalClientNum }}
</span>
</div>
<div class="text-16px font-medium">Client</div>
<div class="text-16px font-medium">{{ t('page.headerbanner.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 client: {{ deviceStatus.client.wiredUsers }}</span>
<span>Wireless client: {{ deviceStatus.client.wirelessUsers }}</span>
<span>Wireless Guests: {{ deviceStatus.client.wirelessGuests }}</span>
<span>{{ t('page.headerbanner.wired') }}: {{ deviceStatus.client.wiredUsers }}</span>
<span>{{ t('page.headerbanner.wireless') }}: {{ deviceStatus.client.wirelessUsers }}</span>
<span>{{ t('page.headerbanner.guest') }}: {{ deviceStatus.client.wirelessGuests }}</span>
</div>
</div>
@@ -272,11 +274,11 @@ const otherDevices = computed(() => ({
<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 class="text-16px font-medium">{{ t('page.headerbanner.alerts') }}</div>
</div>
<div class="border-t border-gray-100 my-4px"></div>
<div class="flex flex-col text-12px text-gray-500">
<span>Alerts: {{ deviceStatus.alerts || 0 }}</span>
<span>{{ t('page.headerbanner.alert') }}: {{ deviceStatus.alerts || 0 }}</span>
</div>
</div>
</div>