更新网关配置的二维表格展示&修改节点信息的分页，取消网关信息的mac地址跳转功能
This commit is contained in:
wmp
@@ -28,8 +28,9 @@ export default function Edge() {
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
// 分页状态
|
||||
const [page, setPage] = useState(1)
|
||||
const [total, setTotal] = useState(0)
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
const [itemsPerPage, setItemsPerPage] = useState(100) // 默认100条
|
||||
const [totalItems, setTotalItems] = useState(0)
|
||||
|
||||
// 初始化表单
|
||||
const form = useForm<FilterFormValues>({
|
||||
@@ -43,8 +44,8 @@ export default function Edge() {
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
fetchData({}, page)
|
||||
}, [page])
|
||||
fetchData({}, currentPage)
|
||||
}, [currentPage, itemsPerPage])
|
||||
|
||||
const fetchData = async (val: {
|
||||
macaddr?: string
|
||||
@@ -56,7 +57,6 @@ export default function Edge() {
|
||||
setError(null)
|
||||
setLoading(true)
|
||||
const result = await getEdgeNodes(val, page)
|
||||
|
||||
const validatedData = (result.data).map(item => ({
|
||||
id: item.id,
|
||||
macaddr: item.macaddr || '',
|
||||
@@ -70,7 +70,7 @@ export default function Edge() {
|
||||
}))
|
||||
|
||||
setData(validatedData)
|
||||
setTotal(result.totalCount || 0)
|
||||
setTotalItems(result.totalCount || 0)
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Failed to fetch edge nodes:', error)
|
||||
@@ -82,7 +82,7 @@ export default function Edge() {
|
||||
}
|
||||
|
||||
const onSubmit = async (values: FilterFormValues) => {
|
||||
setPage(1)
|
||||
setCurrentPage(1)
|
||||
const filters = {
|
||||
macaddr: values.macaddr || undefined,
|
||||
public: values.public || undefined,
|
||||
@@ -164,7 +164,7 @@ export default function Edge() {
|
||||
|
||||
// 处理页码变化
|
||||
const handlePageChange = (page: number) => {
|
||||
setPage(page)
|
||||
setCurrentPage(page)
|
||||
const formValues = form.getValues()
|
||||
const filters = {
|
||||
macaddr: formValues.macaddr || '',
|
||||
@@ -177,7 +177,8 @@ export default function Edge() {
|
||||
|
||||
// 处理每页显示数量变化
|
||||
const handleSizeChange = (size: number) => {
|
||||
setPage(1)
|
||||
setItemsPerPage(size)
|
||||
setCurrentPage(1)
|
||||
const formValues = form.getValues()
|
||||
const filters = {
|
||||
macaddr: formValues.macaddr || '',
|
||||
@@ -329,10 +330,9 @@ export default function Edge() {
|
||||
|
||||
{/* 分页 */}
|
||||
<Pagination
|
||||
total={total}
|
||||
page={page}
|
||||
size={250}
|
||||
sizeOptions={[250]}
|
||||
page={currentPage}
|
||||
size={itemsPerPage}
|
||||
total={totalItems}
|
||||
onPageChange={handlePageChange}
|
||||
onSizeChange={handleSizeChange}
|
||||
className="mt-4"
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
'use client'
|
||||
import { useEffect, useState, Suspense, useCallback } from 'react'
|
||||
import { useSearchParams } from 'next/navigation'
|
||||
import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from '@/components/ui/table'
|
||||
import { Pagination } from '@/components/ui/pagination'
|
||||
import { getGatewayInfo, getGatewayConfig, type GatewayConfig, type GatewayInfo } from '@/actions/stats'
|
||||
import { Pagination } from '@/components/ui/pagination'
|
||||
import { toast } from 'sonner'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { useForm } from 'react-hook-form'
|
||||
@@ -17,10 +16,11 @@ import { Search } from 'lucide-react'
|
||||
function GatewayConfigContent() {
|
||||
const [data, setData] = useState<GatewayConfig[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const searchParams = useSearchParams()
|
||||
const [infoData, setInfoData] = useState<GatewayInfo[]>([])
|
||||
const [totalCount, setTotalCount] = useState(0)
|
||||
|
||||
// 分页状态
|
||||
const [page, setPage] = useState(1)
|
||||
const [total, setTotal] = useState(0)
|
||||
// 定义表单验证规则
|
||||
const filterSchema = z.object({
|
||||
macaddr: z.string().optional(),
|
||||
@@ -31,6 +31,7 @@ function GatewayConfigContent() {
|
||||
})
|
||||
|
||||
type FilterFormValues = z.infer<typeof filterSchema>
|
||||
|
||||
// 初始化表单
|
||||
const form = useForm<FilterFormValues>({
|
||||
resolver: zodResolver(filterSchema),
|
||||
@@ -42,82 +43,33 @@ function GatewayConfigContent() {
|
||||
user: '',
|
||||
},
|
||||
})
|
||||
const { watch, handleSubmit: formHandleSubmit, setValue } = form
|
||||
const macaddrValue = watch('macaddr')
|
||||
|
||||
// 将线性数据转换为二维矩阵数据
|
||||
const transformToMatrix = (data: GatewayConfig[]) => {
|
||||
// 按城市分组
|
||||
const cityGroups: { [city: string]: GatewayConfig[] } = {}
|
||||
|
||||
data.forEach((item) => {
|
||||
if (!item.city) return
|
||||
if (!cityGroups[item.city]) {
|
||||
cityGroups[item.city] = []
|
||||
}
|
||||
cityGroups[item.city].push(item)
|
||||
})
|
||||
|
||||
// 获取所有唯一的MAC地址（作为列）
|
||||
const allMacAddresses = Array.from(new Set(data.map(item => item.edge).filter(Boolean))).sort() as string[]
|
||||
|
||||
// 使用安全的类型定义
|
||||
interface MatrixRow {
|
||||
city: string
|
||||
devices: { [mac: string]: GatewayConfig | null }
|
||||
}
|
||||
|
||||
// 构建矩阵数据
|
||||
const matrixData: MatrixRow[] = Object.entries(cityGroups).map(([city, items]) => {
|
||||
const devices: { [mac: string]: GatewayConfig | null } = {}
|
||||
|
||||
// 初始化所有MAC地址为null
|
||||
allMacAddresses.forEach((mac) => {
|
||||
devices[mac] = null
|
||||
})
|
||||
|
||||
// 填充有数据的MAC地址
|
||||
items.forEach((item) => {
|
||||
if (item.edge) {
|
||||
devices[item.edge] = item
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
city,
|
||||
devices,
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
matrixData,
|
||||
macAddresses: allMacAddresses,
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化调用
|
||||
useEffect(() => {
|
||||
fetchData({}, 1)
|
||||
gatewayData()
|
||||
}, [])
|
||||
const initData = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
// 获取网关基本信息
|
||||
const infoResult = await getGatewayInfo()
|
||||
if (!infoResult.success) {
|
||||
throw new Error(infoResult.error || '查询网关信息失败')
|
||||
}
|
||||
|
||||
// 获取网关基本信息
|
||||
const gatewayData = async () => {
|
||||
try {
|
||||
const result = await getGatewayInfo()
|
||||
if (!result.success) {
|
||||
throw new Error(result.error || '查询网关信息失败')
|
||||
setInfoData(infoResult.data)
|
||||
}
|
||||
catch (error) {
|
||||
toast.error((error as Error).message || '获取数据失败')
|
||||
}
|
||||
finally {
|
||||
setLoading(false)
|
||||
}
|
||||
setInfoData(result.data)
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Failed to fetch gateway info:', error)
|
||||
}
|
||||
finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
// 网关配置数据
|
||||
|
||||
initData()
|
||||
fetchData({}, 1)
|
||||
}, [])
|
||||
const { handleSubmit: formHandleSubmit } = form
|
||||
// 网关配置数据查询函数（用于表单查询）
|
||||
const fetchData = async (filters: {
|
||||
mac?: string
|
||||
public?: string
|
||||
@@ -132,7 +84,6 @@ function GatewayConfigContent() {
|
||||
if (!result.success) {
|
||||
throw new Error(result.error || '查询网关配置失败')
|
||||
}
|
||||
|
||||
const shrink = ['黔东南', '延边']
|
||||
result.data.items.forEach((item) => {
|
||||
shrink.forEach((s) => {
|
||||
@@ -141,9 +92,8 @@ function GatewayConfigContent() {
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
setData(result.data.items)
|
||||
setTotalCount(result.data.total)
|
||||
setTotal(result.data.total)
|
||||
}
|
||||
catch (error) {
|
||||
toast.error((error as Error).message || '获取网关配置失败')
|
||||
@@ -154,6 +104,7 @@ function GatewayConfigContent() {
|
||||
}
|
||||
|
||||
const onSubmit = (data: FilterFormValues) => {
|
||||
setPage(1)
|
||||
const filters = {
|
||||
mac: data.macaddr || '',
|
||||
public: data.public || '',
|
||||
@@ -164,19 +115,68 @@ function GatewayConfigContent() {
|
||||
fetchData(filters, 1)
|
||||
}
|
||||
|
||||
// 获取转换后的矩阵数据
|
||||
const { matrixData, macAddresses } = transformToMatrix(data)
|
||||
// 处理页码变化
|
||||
const handlePageChange = (page: number) => {
|
||||
setPage(page)
|
||||
const formValues = form.getValues()
|
||||
const filters = {
|
||||
mac: formValues.macaddr || undefined,
|
||||
public: formValues.public || undefined,
|
||||
city: formValues.city || undefined,
|
||||
user: formValues.user || undefined,
|
||||
inner_ip: formValues.inner_ip || undefined,
|
||||
}
|
||||
fetchData(filters, page)
|
||||
}
|
||||
|
||||
// 处理每页显示数量变化
|
||||
const handleSizeChange = (size: number) => {
|
||||
setPage(1)
|
||||
const formValues = form.getValues()
|
||||
const filters = {
|
||||
mac: formValues.macaddr || undefined,
|
||||
public: formValues.public || undefined,
|
||||
city: formValues.city || undefined,
|
||||
user: formValues.user || undefined,
|
||||
inner_ip: formValues.inner_ip || undefined,
|
||||
}
|
||||
fetchData(filters, 1)
|
||||
}
|
||||
|
||||
const getStatusBadge = (value: number, trueText: string = '是', falseText: string = '否') => {
|
||||
// 0是正常1是更新，正常（绿）+ 更新（红）
|
||||
return (
|
||||
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${value === 0 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
|
||||
{value === 0 ? trueText : falseText}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
const getOnlineStatus = (isonline: number) => {
|
||||
// 0是空闲1是在用，在用（红）+ 空闲（绿）
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
<div className={`${isonline === 0 ? 'bg-green-500' : 'bg-red-500'}`} />
|
||||
{getStatusBadge(isonline, '空闲', '在用')}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
// 当前选中的mac
|
||||
const [selectedMac, setSelectedMac] = useState<string>('')
|
||||
const handleMacClick = useCallback(async (macaddr: string) => {
|
||||
setSelectedMac(macaddr)
|
||||
await fetchData({ mac: macaddr }, 1)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="flex flex-col bg-white shadow p-6 overflow-hidden">
|
||||
|
||||
{/* 查询表单 */}
|
||||
<div className="flex gap-6">
|
||||
<div className="flex flex-1">
|
||||
<div className="flex flex-col w-full">
|
||||
<Form {...form}>
|
||||
<form onSubmit={formHandleSubmit(onSubmit)} className="mb-6">
|
||||
<div className="flex gap-4">
|
||||
<form onSubmit={formHandleSubmit(onSubmit)}>
|
||||
<div className="flex gap-4 mb-2">
|
||||
<FormField
|
||||
name="macaddr"
|
||||
render={({ field }) => (
|
||||
@@ -201,7 +201,7 @@ function GatewayConfigContent() {
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
<div className="flex gap-4 mb-4">
|
||||
<div className="flex gap-4">
|
||||
<div className="flex items-center">
|
||||
<div className="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
|
||||
<span className="text-sm font-medium">在线 {infoData.filter(item => item.enable === 1).length}</span>
|
||||
@@ -215,8 +215,8 @@ function GatewayConfigContent() {
|
||||
</div>
|
||||
<div className="flex flex-3 rounded-lg bg-white">
|
||||
<Form {...form}>
|
||||
<form onSubmit={formHandleSubmit(onSubmit)} className="mb-6">
|
||||
<div className="flex gap-4">
|
||||
<form onSubmit={formHandleSubmit(onSubmit)}>
|
||||
<div className="flex gap-4">
|
||||
<FormField
|
||||
name="public"
|
||||
render={({ field }) => (
|
||||
@@ -267,18 +267,24 @@ function GatewayConfigContent() {
|
||||
<div className="text-gray-400 text-4xl mb-4">⏳</div>
|
||||
<p className="text-gray-600">正在查询网关配置信息...</p>
|
||||
</div>
|
||||
) : data.length > 0 ? (
|
||||
) : infoData.length > 0 ? (
|
||||
<>
|
||||
{/* 网关基本信息 */}
|
||||
<div className="flex gap-6 overflow-hidden">
|
||||
<div className="flex gap-6 p-2 overflow-hidden">
|
||||
<div className="flex flex-1 flex-col overflow-auto mb-6 border-t bg-white">
|
||||
{infoData.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={cn('p-4 flex-col', index !== infoData.length - 1 ? 'border-b' : '')}>
|
||||
className={cn('p-4 flex-col ', index !== infoData.length - 1 ? 'border-b' : '')}>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="font-medium text-gray-900">{item.macaddr}</div>
|
||||
<div
|
||||
className={cn('font-medium cursor-pointer',
|
||||
selectedMac === item.macaddr ? 'text-blue-700' : 'text-gray-900')}
|
||||
onClick={() => handleMacClick(item.macaddr)}
|
||||
>
|
||||
{item.macaddr}
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div
|
||||
className={cn(
|
||||
@@ -300,122 +306,66 @@ function GatewayConfigContent() {
|
||||
</div>
|
||||
<div className="flex gap-2 space-y-1 text-xs text-gray-500">
|
||||
<div>配置版本: {item.setid || 'N/A'}</div>
|
||||
{/* <div>
|
||||
在用节点: {data.filter(d => d.isonline === 1).length}
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 二维矩阵表格 */}
|
||||
<div className="flex-3 flex flex-col overflow-hidden">
|
||||
<div className="flex gap-6 p-4 items-center justify-between text-sm border-t bg-white">
|
||||
<div className="flex gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 bg-blue-100 border border-blue-300 rounded"></div>
|
||||
<span className="text-xs font-medium">蓝色：在用</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 bg-green-100 border border-green-300 rounded"></div>
|
||||
<span className="text-xs font-medium">绿色：空闲</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 bg-yellow-100 border border-yellow-300 rounded"></div>
|
||||
<span className="text-xs font-medium">黄色：更新</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="text-sm text-gray-600">
|
||||
共 <span className="font-semibold text-blue-600">{totalCount}</span> 条记录
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex border rounded-lg overflow-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-gray-50">
|
||||
<TableHead className="text-xs text-gray-500 uppercase tracking-wider sticky top-0 left-0 z-20 bg-gray-50 border-r">
|
||||
城市
|
||||
</TableHead>
|
||||
{macAddresses.map((mac, index) => (
|
||||
<TableHead
|
||||
key={index}
|
||||
className="text-xs text-gray-500 uppercase tracking-wider sticky top-0 text-center"
|
||||
>
|
||||
{mac}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{matrixData.map((row, rowIndex) => (
|
||||
<TableRow
|
||||
key={rowIndex}
|
||||
className={rowIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50'}
|
||||
>
|
||||
<TableCell className="px-4 py-2 font-medium sticky left-0 bg-inherit z-10 border-r">
|
||||
{row.city}
|
||||
</TableCell>
|
||||
{macAddresses.map((mac, colIndex) => {
|
||||
const item = row.devices[mac]
|
||||
if (!item) {
|
||||
return (
|
||||
<TableCell
|
||||
key={colIndex}
|
||||
className="px-2 py-3 text-center min-w-[180px]"
|
||||
>
|
||||
<div className="text-gray-400 text-sm py-6">-</div>
|
||||
</TableCell>
|
||||
)
|
||||
}
|
||||
|
||||
// 状态颜色配置
|
||||
const statusConfig = {
|
||||
ischange: item.ischange === 0
|
||||
? { bg: 'bg-green-100', border: 'border-green-200', text: 'text-green-800', label: '正常' }
|
||||
: { bg: 'bg-yellow-100', border: 'border-yellow-200', text: 'text-yellow-800', label: '更新' },
|
||||
isonline: item.isonline === 0
|
||||
? { bg: 'bg-green-100', border: 'border-green-200', text: 'text-green-800', label: '空闲' }
|
||||
: { bg: 'bg-blue-100', border: 'border-blue-200', text: 'text-blue-800', label: '在用' },
|
||||
}
|
||||
|
||||
return (
|
||||
<TableCell
|
||||
key={colIndex}
|
||||
className="px-2 py-3 min-w-[180px]"
|
||||
>
|
||||
<div className={`p-3 rounded-lg border ${statusConfig.isonline.bg} ${statusConfig.isonline.border}`}>
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className="text-xs text-gray-600">IP地址:</span>
|
||||
<span className="text-xs font-medium">{item.public || 'N/A'}</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className="text-xs text-gray-600">线路:</span>
|
||||
<span className="text-xs font-medium">{item.user || 'N/A'}</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<span className="text-xs text-gray-600">端口:</span>
|
||||
<span className="text-xs font-medium">{item.inner_ip || 'N/A'}</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className={`px-2 py-0.5 rounded text-xs font-medium ${statusConfig.ischange.bg} ${statusConfig.ischange.text}`}>
|
||||
{statusConfig.ischange.label}
|
||||
</span>
|
||||
<span className={`px-2 py-0.5 rounded text-xs font-medium ${statusConfig.isonline.bg} ${statusConfig.isonline.text}`}>
|
||||
{statusConfig.isonline.label}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
)
|
||||
})}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
{ data.length > 0
|
||||
? (
|
||||
<>
|
||||
<div className="flex overflow-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-gray-50">
|
||||
<TableHead className="text-xs text-gray-500 uppercase tracking-wider">端口</TableHead>
|
||||
<TableHead className="text-xs text-gray-500 uppercase tracking-wider">线路</TableHead>
|
||||
<TableHead className="text-xs text-gray-500 uppercase tracking-wider">城市</TableHead>
|
||||
<TableHead className="text-xs text-gray-500 uppercase tracking-wider">节点MAC</TableHead>
|
||||
<TableHead className="text-xs text-gray-500 uppercase tracking-wider">节点IP</TableHead>
|
||||
<TableHead className="text-xs text-gray-500 uppercase tracking-wider">配置更新</TableHead>
|
||||
<TableHead className="text-xs text-gray-500 uppercase tracking-wider">在用状态</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{data.map((item, index) => (
|
||||
<TableRow key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
|
||||
<TableCell className="px-4 py-2">{item.inner_ip}</TableCell>
|
||||
<TableCell className="px-4 py-2">{item.user}</TableCell>
|
||||
<TableCell className="px-4 py-2">{item.city}</TableCell>
|
||||
<TableCell className="px-4 py-2">{item.edge}</TableCell>
|
||||
<TableCell className="px-4 py-2">{item.public}</TableCell>
|
||||
<TableCell className="px-4 py-2">
|
||||
{getStatusBadge(item.ischange, '正常', '更新')}
|
||||
</TableCell>
|
||||
<TableCell className="px-4 py-2">
|
||||
{getOnlineStatus(item.isonline)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
{/* 分页组件 */}
|
||||
<div className="flex gap-6">
|
||||
<Pagination
|
||||
total={total}
|
||||
page={page}
|
||||
size={250}
|
||||
sizeOptions={[250]}
|
||||
onPageChange={handlePageChange}
|
||||
onSizeChange={handleSizeChange}
|
||||
className="mt-4"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<div className="text-gray-400 text-4xl mb-4">📋</div>
|
||||
<p className="text-gray-600">暂无网关配置数据</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
536
src/app/dashboard/components/gatewayConfigs.tsx
Normal file
536
src/app/dashboard/components/gatewayConfigs.tsx
Normal file
@@ -0,0 +1,536 @@
|
||||
'use client'
|
||||
import { useEffect, useState, Suspense } from 'react'
|
||||
import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from '@/components/ui/table'
|
||||
import { getGatewayInfo, getGatewayConfig, type GatewayConfig, type GatewayInfo } from '@/actions/stats'
|
||||
import { toast } from 'sonner'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { z } from 'zod'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Form, FormField, FormItem, FormLabel } from '@/components/ui/form'
|
||||
import { Input } from '@/components/ui/input'
|
||||
|
||||
function GatewayConfigContent() {
|
||||
const [data, setData] = useState<GatewayConfig[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [infoData, setInfoData] = useState<GatewayInfo[]>([])
|
||||
const [totalCount, setTotalCount] = useState(0)
|
||||
const [matrixData, setMatrixData] = useState<{ city: string, devices: { [macaddr: string]: GatewayConfig[] } }[]>([])
|
||||
const [cities, setCities] = useState<string[]>([])
|
||||
const [macAddresses, setMacAddresses] = useState<string[]>([])
|
||||
const [currentTotal, setCurrentTotal] = useState(0)
|
||||
// 缓存处理先保存初始MAC地址列表
|
||||
const [initialMacAddresses, setInitialMacAddresses] = useState<string[]>([])
|
||||
// 保存每个MAC地址对应的完整配置数据 { mac1: [config1, config2], mac2: [config3] }
|
||||
const [initialConfigData, setInitialConfigData] = useState<{ [mac: string]: GatewayConfig[] }>({})
|
||||
// 初始数据是否已加载完成
|
||||
const [isInitialDataLoaded, setIsInitialDataLoaded] = useState(false)
|
||||
// 定义表单验证规则
|
||||
const filterSchema = z.object({
|
||||
macaddr: z.string().optional(),
|
||||
public: z.string().optional(),
|
||||
city: z.string().optional(),
|
||||
inner_ip: z.string().optional(),
|
||||
user: z.string().optional(),
|
||||
})
|
||||
|
||||
type FilterFormValues = z.infer<typeof filterSchema>
|
||||
|
||||
// 初始化表单
|
||||
const form = useForm<FilterFormValues>({
|
||||
resolver: zodResolver(filterSchema),
|
||||
defaultValues: {
|
||||
macaddr: '',
|
||||
public: '',
|
||||
city: '',
|
||||
inner_ip: '',
|
||||
user: '',
|
||||
},
|
||||
})
|
||||
const { handleSubmit: formHandleSubmit } = form
|
||||
|
||||
// 处理城市名称缩写
|
||||
const processCityNames = (items: GatewayConfig[]) => {
|
||||
const shrink = ['黔东南', '延边']
|
||||
return items.map((item) => {
|
||||
const processedItem = { ...item }
|
||||
shrink.forEach((s) => {
|
||||
if (processedItem.city?.startsWith(s)) {
|
||||
processedItem.city = s
|
||||
}
|
||||
})
|
||||
return processedItem
|
||||
})
|
||||
}
|
||||
const getLastOctet = (ip: string | undefined): number => {
|
||||
if (!ip) return 0
|
||||
const parts = ip.split('.')
|
||||
if (parts.length !== 4) return 0
|
||||
const last = parseInt(parts[3], 10)
|
||||
return isNaN(last) ? 0 : last
|
||||
}
|
||||
|
||||
// 端口排序函数
|
||||
const sortByInnerIp = (a: GatewayConfig, b: GatewayConfig): number => {
|
||||
const lastOctetA = getLastOctet(a.inner_ip)
|
||||
const lastOctetB = getLastOctet(b.inner_ip)
|
||||
return lastOctetA - lastOctetB
|
||||
}
|
||||
|
||||
// 为每个MAC地址获取配置数据的函数
|
||||
const fetchConfigForMac = async (mac: string, filters: {
|
||||
mac?: string | undefined
|
||||
public?: string | undefined
|
||||
city?: string | undefined
|
||||
user?: string | undefined
|
||||
inner_ip?: string | undefined
|
||||
}) => {
|
||||
try {
|
||||
const queryParams = { ...filters, mac }
|
||||
const result = await getGatewayConfig(1, queryParams)
|
||||
if (result.success) {
|
||||
const processedData = processCityNames(result.data.items)
|
||||
const sortedData = [...processedData].sort(sortByInnerIp)
|
||||
return sortedData
|
||||
}
|
||||
return []
|
||||
}
|
||||
catch (error) {
|
||||
console.error(`获取MAC地址 ${mac} 的配置失败:`, error)
|
||||
return []
|
||||
}
|
||||
}
|
||||
const filterLocalData = (filters: {
|
||||
mac?: string
|
||||
public?: string
|
||||
city?: string
|
||||
user?: string
|
||||
inner_ip?: string
|
||||
}) => {
|
||||
const { mac, public: publicIp, city, user, inner_ip } = filters
|
||||
// 筛选MAC地址
|
||||
let filteredMacs = initialMacAddresses
|
||||
if (mac) {
|
||||
filteredMacs = filteredMacs.filter(macAddr =>
|
||||
macAddr.toLowerCase().includes(mac.toLowerCase()),
|
||||
)
|
||||
}
|
||||
// 筛选每个MAC地址对应的配置数据
|
||||
const filteredConfigs: { [mac: string]: GatewayConfig[] } = {}
|
||||
filteredMacs.forEach((macAddr) => {
|
||||
const configs = initialConfigData[macAddr] || []
|
||||
|
||||
const filtered = configs.filter((config) => {
|
||||
// 按各个字段筛选
|
||||
const matchPublic = !publicIp || (config.public && config.public.includes(publicIp))
|
||||
const matchCity = !city || (config.city && config.city.includes(city))
|
||||
const matchUser = !user || (config.user && config.user.includes(user))
|
||||
const matchInnerIp = !inner_ip || (config.inner_ip && config.inner_ip.includes(inner_ip))
|
||||
return matchPublic && matchCity && matchUser && matchInnerIp
|
||||
})
|
||||
|
||||
if (filtered.length > 0) {
|
||||
filteredConfigs[macAddr] = filtered
|
||||
}
|
||||
})
|
||||
return { filteredMacs: Object.keys(filteredConfigs), filteredConfigs }
|
||||
}
|
||||
|
||||
// 矩阵数据构建函数
|
||||
const buildMatrixData = async (
|
||||
macList: string[],
|
||||
configData: { [mac: string]: GatewayConfig[] } = {},
|
||||
useLocalData: boolean = false,
|
||||
) => {
|
||||
setLoading(true)
|
||||
try {
|
||||
let macConfigMap: { [mac: string]: GatewayConfig[] } = {}
|
||||
|
||||
if (useLocalData) {
|
||||
// 使用本地数据
|
||||
macConfigMap = configData
|
||||
}
|
||||
else {
|
||||
// 调用接口获取数据
|
||||
const configPromises = macList.map(mac => fetchConfigForMac(mac, {}))
|
||||
const configResults = await Promise.all(configPromises)
|
||||
|
||||
// 创建MAC地址到配置数据的映射
|
||||
macList.forEach((mac, index) => {
|
||||
macConfigMap[mac] = configResults[index] || []
|
||||
})
|
||||
}
|
||||
|
||||
const cityMinPortMap: { [city: string]: number } = {}
|
||||
Object.values(macConfigMap).forEach((configs) => {
|
||||
configs.forEach((config) => {
|
||||
const city = config.city
|
||||
if (!city) return // 跳过无城市的配置
|
||||
const currentPortLastOctet = getLastOctet(config.inner_ip)
|
||||
if (!cityMinPortMap[city] || currentPortLastOctet < cityMinPortMap[city]) {
|
||||
cityMinPortMap[city] = currentPortLastOctet
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// 获取所有唯一的城市
|
||||
const allCities = Array.from(
|
||||
new Set(
|
||||
Object.values(macConfigMap)
|
||||
.flat()
|
||||
.map(item => item.city)
|
||||
.filter(Boolean),
|
||||
),
|
||||
).sort((cityA, cityB) => {
|
||||
const portA = cityMinPortMap[cityA!] || 0
|
||||
const portB = cityMinPortMap[cityB!] || 0
|
||||
return portA - portB
|
||||
}) as string[]
|
||||
|
||||
// 构建矩阵数据
|
||||
const matrix = allCities.map((city) => {
|
||||
const row = {
|
||||
city,
|
||||
devices: {} as { [macaddr: string]: GatewayConfig[] },
|
||||
}
|
||||
|
||||
// 为每个MAC地址填充该城市的配置数据
|
||||
macList.forEach((mac) => {
|
||||
const configsForCity = macConfigMap[mac]
|
||||
.filter(item => item.city === city)
|
||||
.sort(sortByInnerIp)
|
||||
row.devices[mac] = configsForCity
|
||||
})
|
||||
return row
|
||||
})
|
||||
|
||||
setMatrixData(matrix)
|
||||
setCities(allCities)
|
||||
setMacAddresses(macList)
|
||||
setCurrentTotal(matrix.length)
|
||||
|
||||
// 计算总记录数
|
||||
const total = Object.values(macConfigMap).reduce((sum, configs) => sum + configs.length, 0)
|
||||
setTotalCount(total)
|
||||
}
|
||||
catch (error) {
|
||||
toast.error('构建矩阵数据失败')
|
||||
console.error('构建矩阵数据错误:', error)
|
||||
}
|
||||
finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
// 初始化调用
|
||||
useEffect(() => {
|
||||
const initData = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
// 获取网关基本信息
|
||||
const infoResult = await getGatewayInfo()
|
||||
if (!infoResult.success) {
|
||||
throw new Error(infoResult.error || '查询网关信息失败')
|
||||
}
|
||||
setInfoData(infoResult.data)
|
||||
// 获取所有MAC地址
|
||||
const allMacAddresses = Array.from(
|
||||
new Set(infoResult.data.map(item => item.macaddr).filter(Boolean)),
|
||||
).sort() as string[]
|
||||
setInitialMacAddresses(allMacAddresses)
|
||||
setMacAddresses(allMacAddresses)
|
||||
const configPromises = allMacAddresses.map(mac => fetchConfigForMac(mac, {}))
|
||||
const configResults = await Promise.all(configPromises)
|
||||
|
||||
const initialConfig: { [mac: string]: GatewayConfig[] } = {}
|
||||
allMacAddresses.forEach((mac, index) => {
|
||||
initialConfig[mac] = configResults[index] || []
|
||||
})
|
||||
|
||||
setInitialConfigData(initialConfig)
|
||||
setIsInitialDataLoaded(true)
|
||||
// 每个MAC地址调用接口
|
||||
await buildMatrixData(allMacAddresses, initialConfig, true)
|
||||
}
|
||||
catch (error) {
|
||||
toast.error((error as Error).message || '获取数据失败')
|
||||
}
|
||||
finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
initData()
|
||||
}, [])
|
||||
|
||||
// 网关配置数据查询函数（用于表单查询）
|
||||
const fetchData = async (filters: {
|
||||
mac?: string
|
||||
public?: string
|
||||
city?: string
|
||||
user?: string
|
||||
inner_ip?: string
|
||||
}, page: number = 1) => {
|
||||
setLoading(true)
|
||||
try {
|
||||
// 如果有初始数据，就本地筛选
|
||||
if (isInitialDataLoaded) {
|
||||
const { filteredMacs, filteredConfigs } = filterLocalData(filters)
|
||||
|
||||
// 更新表格数据（扁平化所有配置数据）
|
||||
const allFilteredData = Object.values(filteredConfigs).flat()
|
||||
setData(allFilteredData)
|
||||
setTotalCount(allFilteredData.length)
|
||||
|
||||
// 构建矩阵数据
|
||||
await buildMatrixData(filteredMacs, filteredConfigs, true)
|
||||
}
|
||||
else {
|
||||
// 如果没有初始数据，就接口查询
|
||||
const result = await getGatewayConfig(page, filters)
|
||||
|
||||
if (!result.success) {
|
||||
throw new Error(result.error || '查询网关配置失败')
|
||||
}
|
||||
const processedData = processCityNames(result.data.items)
|
||||
const sortedData = [...processedData].sort(sortByInnerIp)
|
||||
|
||||
setData(sortedData)
|
||||
setTotalCount(result.data.total)
|
||||
|
||||
const filteredMacs = Array.from(
|
||||
new Set(sortedData.map(item => item.edge).filter(Boolean)),
|
||||
).sort() as string[]
|
||||
|
||||
await buildMatrixData(filteredMacs, {}, false)
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
toast.error((error as Error).message || '获取网关配置失败')
|
||||
}
|
||||
finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const onSubmit = async (formData: FilterFormValues) => {
|
||||
const filters = {
|
||||
mac: formData.macaddr || '',
|
||||
public: formData.public || '',
|
||||
city: formData.city || '',
|
||||
user: formData.user || '',
|
||||
inner_ip: formData.inner_ip || '',
|
||||
}
|
||||
await fetchData(filters, 1)
|
||||
}
|
||||
return (
|
||||
<div className="flex flex-col bg-white shadow p-6 overflow-hidden">
|
||||
{/* 查询表单 */}
|
||||
<div className="flex gap-6">
|
||||
<div className="flex flex-3 rounded-lg bg-white">
|
||||
<Form {...form}>
|
||||
<form onSubmit={formHandleSubmit(onSubmit)}>
|
||||
<div className="flex gap-4">
|
||||
<FormField
|
||||
name="macaddr"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>MAC地址</FormLabel>
|
||||
<Input placeholder="输入MAC地址" {...field} />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
name="public"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>IP地址</FormLabel>
|
||||
<Input placeholder="输入IP地址" {...field} />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
name="user"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>线路</FormLabel>
|
||||
<Input placeholder="输入线路" {...field} />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
name="inner_ip"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>端口号</FormLabel>
|
||||
<Input placeholder="输入端口" {...field} />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
name="city"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>城市</FormLabel>
|
||||
<Input placeholder="输入城市" {...field} />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button type="submit" className="ml-2 mt-6 px-4 py-2 bg-blue-600 hover:bg-blue-700">
|
||||
查询
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="text-gray-400 text-4xl mb-4">⏳</div>
|
||||
<p className="text-gray-600">正在查询网关配置信息...</p>
|
||||
</div>
|
||||
) : matrixData.length > 0 ? (
|
||||
<>
|
||||
<div className="flex gap-6 overflow-hidden">
|
||||
{/* 二维矩阵表格 */}
|
||||
<div className="flex-3 flex flex-col overflow-hidden">
|
||||
<div className="flex gap-6 p-2 items-center justify-between text-sm">
|
||||
<div className="flex gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 bg-blue-100 border border-blue-300 rounded"></div>
|
||||
<span className="text-xs font-medium">蓝色：在用</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 bg-green-100 border border-green-300 rounded"></div>
|
||||
<span className="text-xs font-medium">绿色：空闲</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 bg-yellow-100 border border-yellow-300 rounded"></div>
|
||||
<span className="text-xs font-medium">黄色：更新</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
|
||||
<span className="text-sm font-medium">在线 {infoData.filter(item => item.enable === 1).length}</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
|
||||
<span className="text-sm font-medium">离线 {infoData.filter(item => item.enable === 0).length}</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="text-sm text-gray-600">
|
||||
当前<span className="font-semibold text-blue-600">{currentTotal}</span> 条 |
|
||||
共 <span className="font-semibold text-blue-600">{totalCount}</span> 条记录
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex border rounded-lg overflow-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-gray-50">
|
||||
<TableHead className="text-xs text-gray-500 uppercase tracking-wider sticky top-0 left-0 z-20 bg-gray-50 border-r min-w-[120px]">
|
||||
城市
|
||||
</TableHead>
|
||||
{macAddresses.map((macaddr, index) => (
|
||||
<TableHead
|
||||
key={index}
|
||||
className="text-xs text-gray-500 uppercase tracking-wider sticky top-0 text-center min-w-[200px]"
|
||||
>
|
||||
{macaddr}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{matrixData.map((row, rowIndex) => (
|
||||
<TableRow key={rowIndex}>
|
||||
<TableCell className="px-4 py-2 font-medium sticky left-0 bg-inherit z-10 border-r">
|
||||
{row.city}
|
||||
</TableCell>
|
||||
{macAddresses.map((macaddr, colIndex) => {
|
||||
const configs = row.devices[macaddr] || []
|
||||
|
||||
if (configs.length === 0) {
|
||||
return (
|
||||
<TableCell
|
||||
key={`${rowIndex}-${colIndex}`}
|
||||
className="px-2 py-3 text-center min-w-[180px]"
|
||||
>
|
||||
<div className="text-gray-400 text-sm py-6">-</div>
|
||||
</TableCell>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<TableCell
|
||||
key={`${rowIndex}-${colIndex}`}
|
||||
className="p-2 min-w-[180px]"
|
||||
>
|
||||
<div className="space-y-2">
|
||||
{configs.map((item, itemIndex) => {
|
||||
const statusConfig = {
|
||||
ischange: item.ischange === 0
|
||||
? { bg: 'bg-green-100', border: 'border-green-200', text: 'text-green-800', label: '正常' }
|
||||
: { bg: 'bg-yellow-100', border: 'border-yellow-200', text: 'text-yellow-800', label: '更新' },
|
||||
isonline: item.isonline === 0
|
||||
? { bg: 'bg-green-100', border: 'border-green-200', text: 'text-green-800', label: '空闲' }
|
||||
: { bg: 'bg-blue-100', border: 'border-blue-200', text: 'text-blue-800', label: '在用' },
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={itemIndex} className="flex flex-col gap-1">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm font-medium">{item.public || 'N/A'}</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-xs font-medium">{item.user || 'N/A'}</span>
|
||||
<span className="text-xs font-medium">{item.inner_ip || 'N/A'}</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className={`px-2 py-0.5 rounded text-xs font-medium ${statusConfig.ischange.bg} ${statusConfig.ischange.text}`}>
|
||||
{statusConfig.ischange.label}
|
||||
</span>
|
||||
<span className={`px-2 py-0.5 rounded text-xs font-medium ${statusConfig.isonline.bg} ${statusConfig.isonline.text}`}>
|
||||
{statusConfig.isonline.label}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</TableCell>
|
||||
)
|
||||
})}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<div className="text-gray-400 text-4xl mb-4">📋</div>
|
||||
<p className="text-gray-600">暂无网关配置数据</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function GatewayConfigs() {
|
||||
return (
|
||||
<Suspense fallback={(
|
||||
<div className="bg-white shadow p-6">
|
||||
<div className="text-center py-12">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto"></div>
|
||||
<p className="mt-4 text-gray-600">加载搜索参数...</p>
|
||||
</div>
|
||||
</div>
|
||||
)}>
|
||||
<GatewayConfigContent />
|
||||
</Suspense>
|
||||
)
|
||||
}
|
||||
@@ -1,7 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from '@/components/ui/table'
|
||||
import { Form, FormField } from '@/components/ui/form'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
@@ -82,7 +81,6 @@ export default function Gatewayinfo() {
|
||||
const [filteredData, setFilteredData] = useState<GatewayInfo[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
const router = useRouter()
|
||||
|
||||
const form = useForm<FilterSchema>({
|
||||
resolver: zodResolver(filterSchema),
|
||||
@@ -222,14 +220,14 @@ export default function Gatewayinfo() {
|
||||
>
|
||||
<TableCell className="px-4 py-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
{/* <button
|
||||
onClick={() => {
|
||||
router.push(`/dashboard?tab=gateway&mac=${item.macaddr}`)
|
||||
}}
|
||||
className="font-mono text-blue-600 hover:text-blue-800 hover:underline cursor-pointer"
|
||||
>
|
||||
{item.macaddr}
|
||||
</button>
|
||||
> */}
|
||||
{item.macaddr}
|
||||
{/* </button> */}
|
||||
<SmartCopyButton data={item.macaddr} />
|
||||
</div>
|
||||
</TableCell>
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useState, useEffect, Suspense } from 'react'
|
||||
import { useRouter, useSearchParams } from 'next/navigation'
|
||||
import Gatewayinfo from './components/gatewayinfo'
|
||||
import GatewayConfig from './components/gatewayConfig'
|
||||
import GatewayConfigs from './components/gatewayConfigs'
|
||||
import CityNodeStats from './components/cityNodeStats'
|
||||
import AllocationStatus from './components/allocationStatus'
|
||||
import Settings from './components/settings'
|
||||
@@ -14,6 +15,7 @@ import { logout } from '@/actions/auth'
|
||||
const tabs = [
|
||||
{ id: 'gatewayInfo', label: '网关信息' },
|
||||
{ id: 'gateway', label: '网关配置' },
|
||||
{ id: 'gateways', label: '网关查询' },
|
||||
{ id: 'city', label: '城市信息' },
|
||||
{ id: 'allocation', label: '分配状态' },
|
||||
{ id: 'edge', label: '节点信息' },
|
||||
@@ -109,6 +111,7 @@ function DashboardContent() {
|
||||
<div className="grid grid-cols-1 gap-6 border flex-auto">
|
||||
{activeTab === 'gatewayInfo' && <Gatewayinfo />}
|
||||
{activeTab === 'gateway' && <GatewayConfig />}
|
||||
{activeTab === 'gateways' && <GatewayConfigs />}
|
||||
{activeTab === 'city' && <CityNodeStats />}
|
||||
{activeTab === 'allocation' && <AllocationStatus detailed />}
|
||||
{activeTab === 'edge' && <Edge />}
|
||||
|
||||
Reference in New Issue
Block a user