2
0

fix:终端界面中英适配以及字段修改

This commit is contained in:
zhongzm
2025-02-07 19:24:01 +08:00
parent 5b4f4b4ae1
commit 5eeaa824ff
5 changed files with 94 additions and 36 deletions

View File

@@ -713,8 +713,32 @@ const local: any = {
plemac:'Please enter MAC address',
search:'Search',
reset:'Reset',
},
terminal:{
title:'Terminal',
total:'Total',
unknow:'Unknow',
day:'Day',
hour:'Hour',
min:'min',
second:'s',
name:'Device Name',
ip:'IP',
status:'Status',
ssid:'Ssid',
apname:'Affiliated AP device',
activity:'Rate',
down:'Traffic Down',
up:'Traffic Up',
uptime:'Online Time',
pledevice:'Please enter device name',
model:'Model',
plemodel:'Please enter type of device',
mac:'MAC',
plemac:'Please enter MAC address',
search:'Search',
reset:'Reset',
}
},
form: {
required: 'Cannot be empty',

View File

@@ -713,8 +713,32 @@ const local:any = {
plemac:'请输入MAC地址',
search:'搜索',
reset:'重置',
},
terminal:{
title:'终端设备',
total:'共',
unknow:'未知',
day:'天',
hour:'小时',
min:'分钟',
second:'秒',
name:'设备名称',
ip:'IP地址',
status:'状态',
ssid:'网络',
apname:'所属AP设备',
activity:'下载速率',
down:'下载量',
up:'上传量',
uptime:'在线时长',
pledevice:'请输入设备名称',
model:'设备类型',
plemodel:'请输入设备类型',
mac:'MAC地址',
plemac:'请输入MAC地址',
search:'搜索',
reset:'重置',
}
},
form: {
required: '不能为空',

View File

@@ -575,6 +575,7 @@ declare namespace Api {
trafficDown: number;
trafficUp: number;
uptime: number;
clientMac:string;
createBy: string | null;
createTime: string;
updateBy: string | null;

View File

@@ -8,7 +8,7 @@
@search="handleSearch"
/>
<ACard
title="终端设备"
:title="t('page.terminal.title')"
:bordered="false"
:body-style="{ flex: 1, overflow: 'hidden' }"
class="flex-col-stretch sm:flex-1-hidden card-wrapper"
@@ -35,7 +35,7 @@
total: mobilePagination.total,
current: searchParams.pageNum,
pageSize: searchParams.pageSize,
showTotal: (total: number) => ` ${total} `
showTotal: (total: number) => `${t('page.terminal.total')} ${total} `
}"
:scroll="scrollConfig"
class="h-full"
@@ -59,7 +59,8 @@ import { fetchTerminalList } from '@/service/api/auth';
import { Card as ACard, Table as ATable, Tag as ATag } from 'ant-design-vue';
import TerminalSearch from './modules/terminal-search.vue';
import { formatStorage, formatTime } from '@/utils/units';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const wrapperEl = shallowRef<HTMLElement | null>(null);
const { height: wrapperElHeight } = useElementSize(wrapperEl);
@@ -76,7 +77,7 @@ const getAuthStatusText = (status: number) => {
case 2:
return 'authorized';
default:
return '未知';
return t('page.terminal.unknow');
}
};
@@ -98,10 +99,10 @@ const formatDetailedTime = (seconds: number): string => {
const remainingSeconds = seconds % 60;
const parts = [];
if (days > 0) parts.push(`${days}`);
if (hours > 0) parts.push(`${hours}小时`);
if (minutes > 0) parts.push(`${minutes}分钟`);
if (remainingSeconds > 0 || parts.length === 0) parts.push(`${remainingSeconds}`);
if (days > 0) parts.push(`${days}${t('page.terminal.day')}`);
if (hours > 0) parts.push(`${hours}${t('page.terminal.hour')}`);
if (minutes > 0) parts.push(`${minutes}${t('page.terminal.min')}`);
if (remainingSeconds > 0 || parts.length === 0) parts.push(`${remainingSeconds}${t('page.terminal.second')}`);
return parts.join('');
};
@@ -154,21 +155,21 @@ const {
{
key: 'name',
dataIndex: 'name',
title: '设备名称',
title: t('page.terminal.name'),
align: 'center',
width: 150
},
{
key: 'ip',
dataIndex: 'ip',
title: 'IP地址',
title: t('page.terminal.ip'),
align: 'center',
width: 150
},
{
key: 'authStatus',
dataIndex: 'authStatus',
title: '状态',
title: t('page.terminal.status'),
align: 'center',
width: 120,
customRender: ({ text }) => h(ATag, {
@@ -178,21 +179,28 @@ const {
{
key: 'ssid',
dataIndex: 'ssid',
title: '网络',
title: t('page.terminal.ssid'),
align: 'center',
width: 150
width: 120
},
{
key: 'apName',
dataIndex: 'apName',
title: '所属AP设备',
title: t('page.terminal.apname'),
align: 'center',
width: 120
},
{
key: 'clientMac',
dataIndex: 'clientMac',
title: t('page.terminal.mac'),
align: 'center',
width: 150
},
{
key: 'activity',
dataIndex: 'activity',
title: '下载速率',
title: t('page.terminal.activity'),
align: 'center',
width: 120,
customRender: ({ text }) => {
@@ -203,7 +211,7 @@ const {
{
key: 'trafficDown',
dataIndex: 'trafficDown',
title: '下载量',
title: t('page.terminal.down'),
align: 'center',
width: 120,
customRender: ({ text }) => {
@@ -214,7 +222,7 @@ const {
{
key: 'trafficUp',
dataIndex: 'trafficUp',
title: '上传量',
title: t('page.terminal.up'),
align: 'center',
width: 120,
customRender: ({ text }) => {
@@ -225,7 +233,7 @@ const {
{
key: 'uptime',
dataIndex: 'uptime',
title: '在线时长',
title: t('page.terminal.uptime'),
align: 'center',
width: 150,
customRender: ({ text }) => formatDetailedTime(text)

View File

@@ -1,28 +1,28 @@
<template>
<ACard :bordered="false" class="search-card">
<AForm layout="inline">
<AFormItem label="设备名称">
<AFormItem :label="t('page.terminal.name')">
<AInput
v-model:value="model.clientName"
placeholder="请输入设备名称"
:placeholder="t('page.terminal.pledevice')"
allow-clear
class="w-200px"
@pressEnter="search"
/>
</AFormItem>
<AFormItem label="设备类型">
<AInput
v-model:value="model.clientDeviceType"
placeholder="请输入设备类型"
allow-clear
class="w-200px"
@pressEnter="search"
/>
</AFormItem>
<AFormItem label="MAC地址">
<!-- <AFormItem label="设备类型">-->
<!-- <AInput-->
<!-- v-model:value="model.clientDeviceType"-->
<!-- placeholder="请输入设备类型"-->
<!-- allow-clear-->
<!-- class="w-200px"-->
<!-- @pressEnter="search"-->
<!-- />-->
<!-- </AFormItem>-->
<AFormItem :label="t('page.terminal.mac')">
<AInput
v-model:value="model.clientMac"
placeholder="请输入MAC地址"
:placeholder="t('page.terminal.plemac')"
allow-clear
class="w-200px"
@pressEnter="search"
@@ -34,13 +34,13 @@
<template #icon>
<icon-mdi-search />
</template>
搜索
{{ t('page.terminal.search') }}
</AButton>
<AButton @click="reset">
<template #icon>
<icon-mdi-refresh />
</template>
重置
{{ t('page.terminal.reset') }}
</AButton>
</ASpace>
</AFormItem>
@@ -50,7 +50,8 @@
<script setup lang="ts">
import { Form as AForm, FormItem as AFormItem, Input as AInput, Button as AButton, Space as ASpace, Card as ACard } from 'ant-design-vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
interface Props {
model: {
clientName?: string;