fix:终端设备界面信息增加字段修改
This commit is contained in:
@@ -56,8 +56,9 @@ import { SimpleScrollbar } from '~/packages/materials/src';
|
||||
import { computed, shallowRef, watch } from 'vue';
|
||||
import { useElementSize } from '@vueuse/core';
|
||||
import { fetchTerminalList } from '@/service/api/auth';
|
||||
import { Card as ACard, Table as ATable } 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 { formatStorage, formatTime } from '@/utils/units';
|
||||
|
||||
|
||||
const wrapperEl = shallowRef<HTMLElement | null>(null);
|
||||
@@ -68,6 +69,43 @@ const scrollConfig = computed(() => ({
|
||||
x: 800
|
||||
}));
|
||||
|
||||
const getAuthStatusText = (status: number) => {
|
||||
switch (status) {
|
||||
case 1:
|
||||
return 'pending';
|
||||
case 2:
|
||||
return 'authorized';
|
||||
default:
|
||||
return '未知';
|
||||
}
|
||||
};
|
||||
|
||||
const getAuthStatusColor = (status: number) => {
|
||||
switch (status) {
|
||||
case 1:
|
||||
return 'warning';
|
||||
case 2:
|
||||
return 'success';
|
||||
default:
|
||||
return 'default';
|
||||
}
|
||||
};
|
||||
|
||||
const formatDetailedTime = (seconds: number): string => {
|
||||
const days = Math.floor(seconds / 86400);
|
||||
const hours = Math.floor((seconds % 86400) / 3600);
|
||||
const minutes = Math.floor((seconds % 3600) / 60);
|
||||
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}秒`);
|
||||
|
||||
return parts.join('');
|
||||
};
|
||||
|
||||
const {
|
||||
columns,
|
||||
columnChecks,
|
||||
@@ -114,25 +152,83 @@ const {
|
||||
pagination: true,
|
||||
columns: (): AntDesign.TableColumn<Api.Device.TerminalDevice>[] => [
|
||||
{
|
||||
key: 'clientName',
|
||||
dataIndex: 'clientName',
|
||||
key: 'name',
|
||||
dataIndex: 'name',
|
||||
title: '设备名称',
|
||||
align: 'center',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
key: 'clientDeviceType',
|
||||
dataIndex: 'clientDeviceType',
|
||||
title: '设备类型',
|
||||
key: 'ip',
|
||||
dataIndex: 'ip',
|
||||
title: 'IP地址',
|
||||
align: 'center',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
key: 'clientMac',
|
||||
dataIndex: 'clientMac',
|
||||
title: 'MAC地址',
|
||||
key: 'authStatus',
|
||||
dataIndex: 'authStatus',
|
||||
title: '状态',
|
||||
align: 'center',
|
||||
width: 180
|
||||
width: 120,
|
||||
customRender: ({ text }) => h(ATag, {
|
||||
color: getAuthStatusColor(text)
|
||||
}, () => getAuthStatusText(text))
|
||||
},
|
||||
{
|
||||
key: 'ssid',
|
||||
dataIndex: 'ssid',
|
||||
title: '网络',
|
||||
align: 'center',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
key: 'apName',
|
||||
dataIndex: 'apName',
|
||||
title: '所属AP设备',
|
||||
align: 'center',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
key: 'activity',
|
||||
dataIndex: 'activity',
|
||||
title: '下载速率',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
customRender: ({ text }) => {
|
||||
const { value, unit } = formatStorage(text);
|
||||
return `${value.toFixed(2)} ${unit}/s`;
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'trafficDown',
|
||||
dataIndex: 'trafficDown',
|
||||
title: '下载量',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
customRender: ({ text }) => {
|
||||
const { value, unit } = formatStorage(text);
|
||||
return `${value.toFixed(2)} ${unit}`;
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'trafficUp',
|
||||
dataIndex: 'trafficUp',
|
||||
title: '上传量',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
customRender: ({ text }) => {
|
||||
const { value, unit } = formatStorage(text);
|
||||
return `${value.toFixed(2)} ${unit}`;
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'uptime',
|
||||
dataIndex: 'uptime',
|
||||
title: '在线时长',
|
||||
align: 'center',
|
||||
width: 150,
|
||||
customRender: ({ text }) => formatDetailedTime(text)
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user