fix:终端界面中英适配以及字段修改
This commit is contained in:
@@ -713,8 +713,32 @@ const local: any = {
|
|||||||
plemac:'Please enter MAC address',
|
plemac:'Please enter MAC address',
|
||||||
search:'Search',
|
search:'Search',
|
||||||
reset:'Reset',
|
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: {
|
form: {
|
||||||
required: 'Cannot be empty',
|
required: 'Cannot be empty',
|
||||||
|
|||||||
@@ -713,8 +713,32 @@ const local:any = {
|
|||||||
plemac:'请输入MAC地址',
|
plemac:'请输入MAC地址',
|
||||||
search:'搜索',
|
search:'搜索',
|
||||||
reset:'重置',
|
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: {
|
form: {
|
||||||
required: '不能为空',
|
required: '不能为空',
|
||||||
|
|||||||
1
src/typings/api.d.ts
vendored
1
src/typings/api.d.ts
vendored
@@ -575,6 +575,7 @@ declare namespace Api {
|
|||||||
trafficDown: number;
|
trafficDown: number;
|
||||||
trafficUp: number;
|
trafficUp: number;
|
||||||
uptime: number;
|
uptime: number;
|
||||||
|
clientMac:string;
|
||||||
createBy: string | null;
|
createBy: string | null;
|
||||||
createTime: string;
|
createTime: string;
|
||||||
updateBy: string | null;
|
updateBy: string | null;
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
@search="handleSearch"
|
@search="handleSearch"
|
||||||
/>
|
/>
|
||||||
<ACard
|
<ACard
|
||||||
title="终端设备"
|
:title="t('page.terminal.title')"
|
||||||
:bordered="false"
|
:bordered="false"
|
||||||
:body-style="{ flex: 1, overflow: 'hidden' }"
|
:body-style="{ flex: 1, overflow: 'hidden' }"
|
||||||
class="flex-col-stretch sm:flex-1-hidden card-wrapper"
|
class="flex-col-stretch sm:flex-1-hidden card-wrapper"
|
||||||
@@ -35,7 +35,7 @@
|
|||||||
total: mobilePagination.total,
|
total: mobilePagination.total,
|
||||||
current: searchParams.pageNum,
|
current: searchParams.pageNum,
|
||||||
pageSize: searchParams.pageSize,
|
pageSize: searchParams.pageSize,
|
||||||
showTotal: (total: number) => `共 ${total} 条`
|
showTotal: (total: number) => `${t('page.terminal.total')} ${total} `
|
||||||
}"
|
}"
|
||||||
:scroll="scrollConfig"
|
:scroll="scrollConfig"
|
||||||
class="h-full"
|
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 { Card as ACard, Table as ATable, Tag as ATag } from 'ant-design-vue';
|
||||||
import TerminalSearch from './modules/terminal-search.vue';
|
import TerminalSearch from './modules/terminal-search.vue';
|
||||||
import { formatStorage, formatTime } from '@/utils/units';
|
import { formatStorage, formatTime } from '@/utils/units';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
const wrapperEl = shallowRef<HTMLElement | null>(null);
|
const wrapperEl = shallowRef<HTMLElement | null>(null);
|
||||||
const { height: wrapperElHeight } = useElementSize(wrapperEl);
|
const { height: wrapperElHeight } = useElementSize(wrapperEl);
|
||||||
@@ -76,7 +77,7 @@ const getAuthStatusText = (status: number) => {
|
|||||||
case 2:
|
case 2:
|
||||||
return 'authorized';
|
return 'authorized';
|
||||||
default:
|
default:
|
||||||
return '未知';
|
return t('page.terminal.unknow');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -98,10 +99,10 @@ const formatDetailedTime = (seconds: number): string => {
|
|||||||
const remainingSeconds = seconds % 60;
|
const remainingSeconds = seconds % 60;
|
||||||
|
|
||||||
const parts = [];
|
const parts = [];
|
||||||
if (days > 0) parts.push(`${days}天`);
|
if (days > 0) parts.push(`${days}${t('page.terminal.day')}`);
|
||||||
if (hours > 0) parts.push(`${hours}小时`);
|
if (hours > 0) parts.push(`${hours}${t('page.terminal.hour')}`);
|
||||||
if (minutes > 0) parts.push(`${minutes}分钟`);
|
if (minutes > 0) parts.push(`${minutes}${t('page.terminal.min')}`);
|
||||||
if (remainingSeconds > 0 || parts.length === 0) parts.push(`${remainingSeconds}秒`);
|
if (remainingSeconds > 0 || parts.length === 0) parts.push(`${remainingSeconds}${t('page.terminal.second')}`);
|
||||||
|
|
||||||
return parts.join('');
|
return parts.join('');
|
||||||
};
|
};
|
||||||
@@ -154,21 +155,21 @@ const {
|
|||||||
{
|
{
|
||||||
key: 'name',
|
key: 'name',
|
||||||
dataIndex: 'name',
|
dataIndex: 'name',
|
||||||
title: '设备名称',
|
title: t('page.terminal.name'),
|
||||||
align: 'center',
|
align: 'center',
|
||||||
width: 150
|
width: 150
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'ip',
|
key: 'ip',
|
||||||
dataIndex: 'ip',
|
dataIndex: 'ip',
|
||||||
title: 'IP地址',
|
title: t('page.terminal.ip'),
|
||||||
align: 'center',
|
align: 'center',
|
||||||
width: 150
|
width: 150
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'authStatus',
|
key: 'authStatus',
|
||||||
dataIndex: 'authStatus',
|
dataIndex: 'authStatus',
|
||||||
title: '状态',
|
title: t('page.terminal.status'),
|
||||||
align: 'center',
|
align: 'center',
|
||||||
width: 120,
|
width: 120,
|
||||||
customRender: ({ text }) => h(ATag, {
|
customRender: ({ text }) => h(ATag, {
|
||||||
@@ -178,21 +179,28 @@ const {
|
|||||||
{
|
{
|
||||||
key: 'ssid',
|
key: 'ssid',
|
||||||
dataIndex: 'ssid',
|
dataIndex: 'ssid',
|
||||||
title: '网络',
|
title: t('page.terminal.ssid'),
|
||||||
align: 'center',
|
align: 'center',
|
||||||
width: 150
|
width: 120
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'apName',
|
key: 'apName',
|
||||||
dataIndex: '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',
|
align: 'center',
|
||||||
width: 150
|
width: 150
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'activity',
|
key: 'activity',
|
||||||
dataIndex: 'activity',
|
dataIndex: 'activity',
|
||||||
title: '下载速率',
|
title: t('page.terminal.activity'),
|
||||||
align: 'center',
|
align: 'center',
|
||||||
width: 120,
|
width: 120,
|
||||||
customRender: ({ text }) => {
|
customRender: ({ text }) => {
|
||||||
@@ -203,7 +211,7 @@ const {
|
|||||||
{
|
{
|
||||||
key: 'trafficDown',
|
key: 'trafficDown',
|
||||||
dataIndex: 'trafficDown',
|
dataIndex: 'trafficDown',
|
||||||
title: '下载量',
|
title: t('page.terminal.down'),
|
||||||
align: 'center',
|
align: 'center',
|
||||||
width: 120,
|
width: 120,
|
||||||
customRender: ({ text }) => {
|
customRender: ({ text }) => {
|
||||||
@@ -214,7 +222,7 @@ const {
|
|||||||
{
|
{
|
||||||
key: 'trafficUp',
|
key: 'trafficUp',
|
||||||
dataIndex: 'trafficUp',
|
dataIndex: 'trafficUp',
|
||||||
title: '上传量',
|
title: t('page.terminal.up'),
|
||||||
align: 'center',
|
align: 'center',
|
||||||
width: 120,
|
width: 120,
|
||||||
customRender: ({ text }) => {
|
customRender: ({ text }) => {
|
||||||
@@ -225,7 +233,7 @@ const {
|
|||||||
{
|
{
|
||||||
key: 'uptime',
|
key: 'uptime',
|
||||||
dataIndex: 'uptime',
|
dataIndex: 'uptime',
|
||||||
title: '在线时长',
|
title: t('page.terminal.uptime'),
|
||||||
align: 'center',
|
align: 'center',
|
||||||
width: 150,
|
width: 150,
|
||||||
customRender: ({ text }) => formatDetailedTime(text)
|
customRender: ({ text }) => formatDetailedTime(text)
|
||||||
|
|||||||
@@ -1,28 +1,28 @@
|
|||||||
<template>
|
<template>
|
||||||
<ACard :bordered="false" class="search-card">
|
<ACard :bordered="false" class="search-card">
|
||||||
<AForm layout="inline">
|
<AForm layout="inline">
|
||||||
<AFormItem label="设备名称">
|
<AFormItem :label="t('page.terminal.name')">
|
||||||
<AInput
|
<AInput
|
||||||
v-model:value="model.clientName"
|
v-model:value="model.clientName"
|
||||||
placeholder="请输入设备名称"
|
:placeholder="t('page.terminal.pledevice')"
|
||||||
allow-clear
|
allow-clear
|
||||||
class="w-200px"
|
class="w-200px"
|
||||||
@pressEnter="search"
|
@pressEnter="search"
|
||||||
/>
|
/>
|
||||||
</AFormItem>
|
</AFormItem>
|
||||||
<AFormItem label="设备类型">
|
<!-- <AFormItem label="设备类型">-->
|
||||||
<AInput
|
<!-- <AInput-->
|
||||||
v-model:value="model.clientDeviceType"
|
<!-- v-model:value="model.clientDeviceType"-->
|
||||||
placeholder="请输入设备类型"
|
<!-- placeholder="请输入设备类型"-->
|
||||||
allow-clear
|
<!-- allow-clear-->
|
||||||
class="w-200px"
|
<!-- class="w-200px"-->
|
||||||
@pressEnter="search"
|
<!-- @pressEnter="search"-->
|
||||||
/>
|
<!-- />-->
|
||||||
</AFormItem>
|
<!-- </AFormItem>-->
|
||||||
<AFormItem label="MAC地址">
|
<AFormItem :label="t('page.terminal.mac')">
|
||||||
<AInput
|
<AInput
|
||||||
v-model:value="model.clientMac"
|
v-model:value="model.clientMac"
|
||||||
placeholder="请输入MAC地址"
|
:placeholder="t('page.terminal.plemac')"
|
||||||
allow-clear
|
allow-clear
|
||||||
class="w-200px"
|
class="w-200px"
|
||||||
@pressEnter="search"
|
@pressEnter="search"
|
||||||
@@ -34,13 +34,13 @@
|
|||||||
<template #icon>
|
<template #icon>
|
||||||
<icon-mdi-search />
|
<icon-mdi-search />
|
||||||
</template>
|
</template>
|
||||||
搜索
|
{{ t('page.terminal.search') }}
|
||||||
</AButton>
|
</AButton>
|
||||||
<AButton @click="reset">
|
<AButton @click="reset">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<icon-mdi-refresh />
|
<icon-mdi-refresh />
|
||||||
</template>
|
</template>
|
||||||
重置
|
{{ t('page.terminal.reset') }}
|
||||||
</AButton>
|
</AButton>
|
||||||
</ASpace>
|
</ASpace>
|
||||||
</AFormItem>
|
</AFormItem>
|
||||||
@@ -50,7 +50,8 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<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 { 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 {
|
interface Props {
|
||||||
model: {
|
model: {
|
||||||
clientName?: string;
|
clientName?: string;
|
||||||
|
|||||||
Reference in New Issue
Block a user