fix:当前设备界面路径修改以及组件封装
This commit is contained in:
zhongzm
@@ -1,192 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {ref} from 'vue'
|
import access from '@/views/userInfo/access/index.vue'
|
||||||
import type {TableColumnsType} from 'ant-design-vue'
|
|
||||||
import {WifiOutlined} from '@ant-design/icons-vue'
|
|
||||||
import {useI18n} from "vue-i18n";
|
|
||||||
import {clientAuth, clientInfo, clientUnAuth} from '@/service/ue/client';
|
|
||||||
|
|
||||||
const { t } = useI18n();
|
|
||||||
|
|
||||||
// 设备列表数据
|
|
||||||
const deviceList = ref<{
|
|
||||||
deviceName: string;
|
|
||||||
macAddress: string;
|
|
||||||
speed: string;
|
|
||||||
id: number;
|
|
||||||
}[]>([]);
|
|
||||||
const loading = ref(false);
|
|
||||||
|
|
||||||
const columns: TableColumnsType = [
|
|
||||||
{
|
|
||||||
title: t('page.access.devicename'),
|
|
||||||
dataIndex: 'deviceName',
|
|
||||||
key: 'deviceName',
|
|
||||||
width: '30%'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: t('page.access.mac'),
|
|
||||||
dataIndex: 'macAddress',
|
|
||||||
key: 'macAddress',
|
|
||||||
width: '40%'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: t('page.access.speed'),
|
|
||||||
dataIndex: 'speed',
|
|
||||||
key: 'speed',
|
|
||||||
width: '30%',
|
|
||||||
align: 'right'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
// 格式化速度函数
|
|
||||||
function formatSpeed(bytesPerSecond: number): string {
|
|
||||||
// 处理 0 值、undefined 或 null 的情况
|
|
||||||
if (!bytesPerSecond || bytesPerSecond === 0) {
|
|
||||||
return '0 B/s';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (bytesPerSecond < 1024) {
|
|
||||||
return `${Number(bytesPerSecond.toFixed(2))} B/s`;
|
|
||||||
} else if (bytesPerSecond < 1024 * 1024) {
|
|
||||||
return `${Number((bytesPerSecond / 1024).toFixed(2))} KB/s`;
|
|
||||||
} else if (bytesPerSecond < 1024 * 1024 * 1024) {
|
|
||||||
return `${Number((bytesPerSecond / (1024 * 1024)).toFixed(2))} MB/s`;
|
|
||||||
} else {
|
|
||||||
return `${Number((bytesPerSecond / (1024 * 1024 * 1024)).toFixed(2))} GB/s`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取设备列表数据
|
|
||||||
async function getDeviceList() {
|
|
||||||
loading.value = true;
|
|
||||||
try {
|
|
||||||
const { data, error } = await fetchCurrentDevices();
|
|
||||||
if (!error && data) {
|
|
||||||
// 将API返回的数据映射到表格所需的格式
|
|
||||||
deviceList.value = data.rows.map(item => ({
|
|
||||||
id: item.id,
|
|
||||||
deviceName: item.clientName,
|
|
||||||
macAddress: item.clientMac,
|
|
||||||
speed: formatSpeed(item.activity) // 如果需要显示设备类型作为速度
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Failed to fetch device list:', err);
|
|
||||||
} finally {
|
|
||||||
loading.value = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 刷新设备列表
|
|
||||||
async function handleRefresh() {
|
|
||||||
await getDeviceList();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 组件挂载时获取数据
|
|
||||||
onMounted(() => {
|
|
||||||
getDeviceList();
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 模拟测试上网
|
|
||||||
* @param type
|
|
||||||
*/
|
|
||||||
function clickBtn(type: string) {
|
|
||||||
if (type === "auth") {
|
|
||||||
clientAuth().then((res) => {
|
|
||||||
alert(JSON.stringify(res))
|
|
||||||
})
|
|
||||||
}
|
|
||||||
if (type === "unauth") {
|
|
||||||
clientUnAuth().then((res) => {
|
|
||||||
alert(JSON.stringify(res))
|
|
||||||
})
|
|
||||||
}
|
|
||||||
if (type === "info") {
|
|
||||||
clientInfo().then((res) => {
|
|
||||||
alert(JSON.stringify(res))
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="device-list-container">
|
<access/>
|
||||||
<a-card :bordered="false">
|
|
||||||
<template #title>
|
|
||||||
<div class="card-title">
|
|
||||||
<WifiOutlined/>
|
|
||||||
<span>{{ t('page.access.currentdevice') }}</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #extra>
|
|
||||||
<a-button type="primary" :loading="loading" @click="handleRefresh">
|
|
||||||
<template #icon>
|
|
||||||
<span class="i-carbon:refresh"></span>
|
|
||||||
</template>
|
|
||||||
{{ t('page.access.refresh') }}
|
|
||||||
</a-button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<a-table
|
|
||||||
:loading="loading"
|
|
||||||
:columns="columns"
|
|
||||||
:data-source="deviceList"
|
|
||||||
:pagination="{
|
|
||||||
total: deviceList.length,
|
|
||||||
pageSize: 10,
|
|
||||||
showSizeChanger: false,
|
|
||||||
showTotal: (total) => `共 ${total} 条`
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
</a-table>
|
|
||||||
</a-card>
|
|
||||||
|
|
||||||
<!-- 终端测试上网 -->
|
|
||||||
<a-space wrap>
|
|
||||||
<a-button type="primary" @click="clickBtn('auth')">终端上网</a-button>
|
|
||||||
<a-button @click="clickBtn('unauth')">终端下线</a-button>
|
|
||||||
<a-button type="dashed" @click="clickBtn('info')">终端信息</a-button>
|
|
||||||
</a-space>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
<style scoped></style>
|
||||||
<style scoped>
|
|
||||||
.device-list-container {
|
|
||||||
padding: 8px;
|
|
||||||
background-color: #f5f5f7;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.ant-card-head) {
|
|
||||||
border-bottom: 1px solid #f0f0f0;
|
|
||||||
padding: 0 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.ant-card-body) {
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.ant-table-wrapper) {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.ant-table) {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 768px) {
|
|
||||||
.device-list-container {
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
206
src/views/userInfo/access/index.vue
Normal file
206
src/views/userInfo/access/index.vue
Normal file
@@ -0,0 +1,206 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import {ref} from 'vue'
|
||||||
|
import type {TableColumnsType} from 'ant-design-vue'
|
||||||
|
import {WifiOutlined} from '@ant-design/icons-vue'
|
||||||
|
import {useI18n} from "vue-i18n";
|
||||||
|
import {clientAuth, clientInfo, clientUnAuth} from '@/service/ue/client';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
defineOptions({
|
||||||
|
name: 'access'
|
||||||
|
});
|
||||||
|
const { t } = useI18n();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const handleBack = () => {
|
||||||
|
router.push('/userInfo/usercard');
|
||||||
|
};
|
||||||
|
|
||||||
|
// 设备列表数据
|
||||||
|
const deviceList = ref<{
|
||||||
|
deviceName: string;
|
||||||
|
macAddress: string;
|
||||||
|
speed: string;
|
||||||
|
id: number;
|
||||||
|
}[]>([]);
|
||||||
|
const loading = ref(false);
|
||||||
|
|
||||||
|
const columns: TableColumnsType = [
|
||||||
|
{
|
||||||
|
title: t('page.access.devicename'),
|
||||||
|
dataIndex: 'deviceName',
|
||||||
|
key: 'deviceName',
|
||||||
|
width: '30%'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: t('page.access.mac'),
|
||||||
|
dataIndex: 'macAddress',
|
||||||
|
key: 'macAddress',
|
||||||
|
width: '40%'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: t('page.access.speed'),
|
||||||
|
dataIndex: 'speed',
|
||||||
|
key: 'speed',
|
||||||
|
width: '30%',
|
||||||
|
align: 'right'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
// 格式化速度函数
|
||||||
|
function formatSpeed(bytesPerSecond: number): string {
|
||||||
|
// 处理 0 值、undefined 或 null 的情况
|
||||||
|
if (!bytesPerSecond || bytesPerSecond === 0) {
|
||||||
|
return '0 B/s';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (bytesPerSecond < 1024) {
|
||||||
|
return `${Number(bytesPerSecond.toFixed(2))} B/s`;
|
||||||
|
} else if (bytesPerSecond < 1024 * 1024) {
|
||||||
|
return `${Number((bytesPerSecond / 1024).toFixed(2))} KB/s`;
|
||||||
|
} else if (bytesPerSecond < 1024 * 1024 * 1024) {
|
||||||
|
return `${Number((bytesPerSecond / (1024 * 1024)).toFixed(2))} MB/s`;
|
||||||
|
} else {
|
||||||
|
return `${Number((bytesPerSecond / (1024 * 1024 * 1024)).toFixed(2))} GB/s`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取设备列表数据
|
||||||
|
async function getDeviceList() {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
const { data, error } = await fetchCurrentDevices();
|
||||||
|
if (!error && data) {
|
||||||
|
// 将API返回的数据映射到表格所需的格式
|
||||||
|
deviceList.value = data.rows.map(item => ({
|
||||||
|
id: item.id,
|
||||||
|
deviceName: item.clientName,
|
||||||
|
macAddress: item.clientMac,
|
||||||
|
speed: formatSpeed(item.activity) // 如果需要显示设备类型作为速度
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Failed to fetch device list:', err);
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 刷新设备列表
|
||||||
|
async function handleRefresh() {
|
||||||
|
await getDeviceList();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 组件挂载时获取数据
|
||||||
|
onMounted(() => {
|
||||||
|
getDeviceList();
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 模拟测试上网
|
||||||
|
* @param type
|
||||||
|
*/
|
||||||
|
function clickBtn(type: string) {
|
||||||
|
if (type === "auth") {
|
||||||
|
clientAuth().then((res) => {
|
||||||
|
alert(JSON.stringify(res))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (type === "unauth") {
|
||||||
|
clientUnAuth().then((res) => {
|
||||||
|
alert(JSON.stringify(res))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (type === "info") {
|
||||||
|
clientInfo().then((res) => {
|
||||||
|
alert(JSON.stringify(res))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="device-list-container">
|
||||||
|
<a-card :bordered="false">
|
||||||
|
<template #title>
|
||||||
|
<div class="card-title">
|
||||||
|
<WifiOutlined/>
|
||||||
|
<span>{{ t('page.access.currentdevice') }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #extra>
|
||||||
|
<a-button @click="handleBack">
|
||||||
|
{{ t('page.login.common.back') }}
|
||||||
|
</a-button>
|
||||||
|
<a-button type="primary" :loading="loading" @click="handleRefresh">
|
||||||
|
<template #icon>
|
||||||
|
<span class="i-carbon:refresh"></span>
|
||||||
|
</template>
|
||||||
|
{{ t('page.access.refresh') }}
|
||||||
|
</a-button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<a-table
|
||||||
|
:loading="loading"
|
||||||
|
:columns="columns"
|
||||||
|
:data-source="deviceList"
|
||||||
|
:pagination="{
|
||||||
|
total: deviceList.length,
|
||||||
|
pageSize: 10,
|
||||||
|
showSizeChanger: false,
|
||||||
|
showTotal: (total) => `共 ${total} 条`
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
</a-table>
|
||||||
|
</a-card>
|
||||||
|
|
||||||
|
<!-- 终端测试上网 -->
|
||||||
|
<a-space wrap>
|
||||||
|
<a-button type="primary" @click="clickBtn('auth')">终端上网</a-button>
|
||||||
|
<a-button @click="clickBtn('unauth')">终端下线</a-button>
|
||||||
|
<a-button type="dashed" @click="clickBtn('info')">终端信息</a-button>
|
||||||
|
<a-button @click="handleBack">
|
||||||
|
{{ t('page.login.common.back') }}
|
||||||
|
</a-button>
|
||||||
|
</a-space>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.device-list-container {
|
||||||
|
padding: 8px;
|
||||||
|
background-color: #f5f5f7;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-card-head) {
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-card-body) {
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-table-wrapper) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-table) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
.device-list-container {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user