wmp/jh-monitor
1
0
Fork 0
Code Actions Packages Releases 5 Activity

网关配置增加分页功能&更新分配装填布局

Browse Source
This commit is contained in:
wmp
2025-09-22 18:40:41 +08:00
parent fd8fede301
commit 0288855002
4 changed files with 192 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/app/api/stats/route.ts
View File

@@ -54,17 +54,76 @@ async function getGatewayInfo() {
async function getGatewayConfig(request: NextRequest) {
try {
const { searchParams } = new URL(request.url)
const macAddress = searchParams.get('mac') || '000C29DF1647'
const macAddress = searchParams.get('mac') || ''
const offset = parseInt(searchParams.get('offset') || '0')
const limit = parseInt(searchParams.get('limit') || '100')
// 使用参数化查询防止SQL注入
const result = await prisma.$queryRaw`
SELECT edge, city, user, public, inner_ip, ischange, isonline
// 定义类型接口
interface GatewayRecord {
edge: string | null;
city: string | null;
user: string | null;
public: string | null;
inner_ip: string | null;
ischange: boolean | number | null;
isonline: boolean | number | null;
}
// 获取总数
let totalCountQuery = ''
let totalCountParams: (string | number)[] = []
if (macAddress) {
totalCountQuery = `
SELECT COUNT(*) as total
FROM gateway
LEFT JOIN cityhash ON cityhash.hash = gateway.cityhash
LEFT JOIN edge ON edge.macaddr = gateway.edge
WHERE gateway.macaddr = ${macAddress};
WHERE gateway.macaddr = ?
`
return NextResponse.json(safeSerialize(result))
totalCountParams = [macAddress]
} else {
totalCountQuery = `
SELECT COUNT(*) as total
FROM gateway
`
}
const totalCountResult = await prisma.$queryRawUnsafe<[{ total: bigint }]>(
totalCountQuery,
...totalCountParams
)
const totalCount = Number(totalCountResult[0]?.total || 0)
// 获取分页数据
let query = `
select edge, city, user, public, inner_ip, ischange, isonline
from
gateway
left join cityhash
on cityhash.hash = gateway.cityhash
left join edge
on edge.macaddr = gateway.edge
`
let params: (string | number)[] = []
if (macAddress) {
query += ' WHERE gateway.macaddr = ?'
params = [macAddress]
} else {
query += ' LIMIT ? OFFSET ?'
params.push(limit, offset)
}
// 指定返回类型
const result = await prisma.$queryRawUnsafe<GatewayRecord[]>(query, ...params)
return NextResponse.json({
data: safeSerialize(result),
totalCount: totalCount,
currentPage: Math.floor(offset / limit) + 1,
totalPages: Math.ceil(totalCount / limit)
})
} catch (error) {
console.error('Gateway config query error:', error)
return NextResponse.json({ error: '查询网关配置失败' }, { status: 500 })

13
src/app/dashboard/components/allocationStatus.tsx
View File

@@ -127,7 +127,7 @@ export default function AllocationStatus({ detailed = false }: { detailed?: bool
</div>
<div className='flex gap-6 overflow-hidden'>
<div className="flex flex-3 w-full">
<div className="flex w-full">
<Table>
<TableHeader>
<TableRow className="bg-gray-50">
@@ -159,17 +159,6 @@ export default function AllocationStatus({ detailed = false }: { detailed?: bool
</TableBody>
</Table>
</div>
<div className="flex flex-1 flex-col gap-4 mb-6">
<div className="bg-blue-50 p-4 rounded-lg">
<div className="text-2xl font-bold text-blue-600">{formatNumber(data.length)}</div>
<div className="text-sm text-blue-800">监控城市数量</div>
</div>
<div className="bg-red-50 p-4 rounded-lg">
<div className="text-2xl font-bold text-red-600">{formatNumber(problematicCities.length)}</div>
<div className="text-sm text-red-800">需关注城市</div>
</div>
</div>
</div>
</div>
)

177
src/app/dashboard/components/gatewayConfig.tsx
View File

@@ -2,9 +2,9 @@
import { useEffect, useState, Suspense } from 'react'
import { useSearchParams } from 'next/navigation'
import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from '@/components/ui/table'
import { Pagination } from '@/components/ui/pagination'
interface GatewayConfig {
id: number
city: string
edge: string
user: string
@@ -14,79 +14,83 @@ interface GatewayConfig {
isonline: number
}
interface ApiResponse {
data: GatewayConfig[]
totalCount: number
currentPage: number
totalPages: number
}
function GatewayConfigContent() {
const [data, setData] = useState<GatewayConfig[]>([])
const [loading, setLoading] = useState(false)
const [macAddress, setMacAddress] = useState('')
const [error, setError] = useState('')
const [success, setSuccess] = useState('')
const searchParams = useSearchParams()
// 监听URL的mac参数变化：同步到输入框并触发查询
// 分页状态
const [currentPage, setCurrentPage] = useState(1)
const [itemsPerPage, setItemsPerPage] = useState(100)
const [totalItems, setTotalItems] = useState(0)
// 判断是否为MAC地址查询（用于控制分页显示）
const isMacQuery = !!macAddress
// 监听URL的mac参数变化
useEffect(() => {
const urlMac = searchParams.get('mac')
if (urlMac) {
setMacAddress(urlMac)
fetchData(urlMac)
setCurrentPage(1) // 重置到第一页
fetchData(urlMac, 1, itemsPerPage)
} else {
// 如果没有mac参数，显示所有网关配置
setMacAddress('')
fetchData('')
setCurrentPage(1) // 重置到第一页
fetchData('', 1, itemsPerPage)
}
}, [searchParams])
const fetchData = async (mac: string) => {
const fetchData = async (mac: string, page: number = 1, limit: number = itemsPerPage) => {
setLoading(true)
setError('')
setSuccess('')
try {
// 构建API URL - 如果有MAC地址则添加参数，否则获取全部
const apiUrl = mac.trim()
? `/api/stats?type=gateway_config&mac=${encodeURIComponent(mac)}`
: `/api/stats?type=gateway_config`
// 计算偏移量
const offset = (page - 1) * limit
const response = await fetch(apiUrl)
const result = await response.json()
if (!response.ok) {
throw new Error(result.error || '查询失败')
// 构建API URL
let apiUrl = `/api/stats?type=gateway_config&offset=${offset}&limit=${limit}`
if (mac.trim()) {
apiUrl += `&mac=${encodeURIComponent(mac)}`
}
const response = await fetch(apiUrl)
if (!response.ok) {
throw new Error(`HTTP错误! 状态: ${response.status}`)
}
const result: ApiResponse = await response.json()
// 检查返回的数据是否有效
if (!result || result.length === 0) {
if (!result.data || result.data.length === 0) {
if (mac.trim()) {
setError(`未找到MAC地址为 ${mac} 的网关配置信息`)
} else {
setError('未找到任何网关配置信息')
}
setData([])
setTotalItems(0)
return
}
const validatedData = result.map((item: {
city: string
edge: string
user: string
public: string
inner_ip: string
ischange: number
isonline: number
}) => ({
city: item.city,
edge: item.edge,
user: item.user,
public: item.public,
inner_ip: item.inner_ip,
ischange: item.ischange,
isonline: item.isonline,
}))
setData(result.data)
setData(validatedData)
setTotalItems(result.totalCount || 0)
} catch (error) {
console.error('Failed to fetch gateway config:', error)
console.error('获取网关配置失败:', error)
setError(error instanceof Error ? error.message : '获取网关配置失败')
setData([])
setTotalItems(0)
} finally {
setLoading(false)
}
@@ -94,7 +98,21 @@ function GatewayConfigContent() {
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault()
fetchData(macAddress)
setCurrentPage(1) // 重置到第一页
fetchData(macAddress, 1, itemsPerPage)
}
// 处理页码变化
const handlePageChange = (page: number) => {
setCurrentPage(page)
fetchData(macAddress, page, itemsPerPage)
}
// 处理每页显示数量变化
const handleSizeChange = (size: number) => {
setItemsPerPage(size)
setCurrentPage(1)
fetchData(macAddress, 1, size)
}
const getStatusBadge = (value: number, trueText: string = '是', falseText: string = '否') => {
@@ -128,7 +146,7 @@ function GatewayConfigContent() {
{/* 查询表单 */}
<form onSubmit={handleSubmit} className="mb-6">
<div className="flex items-center">
<div className="flex items-center gap-2">
<input
type="text"
value={macAddress}
@@ -154,17 +172,6 @@ function GatewayConfigContent() {
</div>
</div>
)}
{success && !error && (
<div className="mt-4 p-3 bg-green-50 border border-green-200 rounded-md">
<div className="flex items-center text-green-800">
<svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
</svg>
{success}
</div>
</div>
)}
</form>
{loading ? (
@@ -174,46 +181,43 @@ function GatewayConfigContent() {
</div>
) : data.length > 0 ? (
<>
{/* 详细表格 */}
<div className='flex gap-6 overflow-hidden'>
<div className="flex-3 w-full flex">
<Table>
<TableHeader>
<TableRow className="bg-gray-50 TableRow ">
<TableHead className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">MAC地址</TableHead>
<TableRow className="bg-gray-50">
<TableHead className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">城市</TableHead>
<TableHead className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">内部账号</TableHead>
<TableHead className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">MAC地址</TableHead>
<TableHead className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">IP地址</TableHead>
<TableHead className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">内网入口</TableHead>
<TableHead className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">线路</TableHead>
<TableHead className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">端口</TableHead>
<TableHead className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">配置更新</TableHead>
<TableHead className="px-6 py-3 text-left text-xs font-medium 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="hover:bg-gray-50 transition-colors">
<div className="font-mono text-sm text-blue-600 font-medium">{item.edge}</div>
</TableCell>
<TableCell className="px-6 whitespace-nowrap">
<TableRow key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
<TableCell>
<span className="px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs">
{item.city}
</span></TableCell>
<TableCell className="px-6 whitespace-nowrap text-sm text-gray-900">{item.user}</TableCell>
<TableCell className="px-6 whitespace-nowrap">
</span>
</TableCell>
<TableCell>
<div className="font-mono text-sm text-blue-600 font-medium">{item.edge}</div>
</TableCell>
<TableCell>
<div className="font-mono text-sm text-green-600">{item.public}</div>
</TableCell>
<TableCell className="px-6 whitespace-nowrap">
<TableCell className="text-sm text-gray-900">{item.user}</TableCell>
<TableCell>
<div className="font-mono text-sm text-purple-600">{item.inner_ip}</div>
</TableCell>
<TableCell className="px-6 whitespace-nowrap">
<div className="font-mono text-sm text-green-600">{getStatusBadge(item.ischange, '正常', '更新')}</div>
<TableCell>
{getStatusBadge(item.ischange, '正常', '更新')}
</TableCell>
<TableCell className="px-6 whitespace-nowrap">
<div className="font-mono text-sm text-purple-600">{getOnlineStatus(item.isonline)}</div>
<TableCell>
{getOnlineStatus(item.isonline)}
</TableCell>
</TableRow>
))}
@@ -222,32 +226,41 @@ function GatewayConfigContent() {
</div>
<div className="flex flex-1 flex-col gap-4 mb-6">
<div className="bg-blue-50 p-4 rounded-lg border border-blue-100">
<div className="text-2xl font-bold text-blue-600">{data.length}</div>
<div className="text-sm text-blue-800">网关数量</div>
<div className="text-2xl font-bold text-blue-600">{totalItems}</div>
<div className="text-sm text-blue-800">配置条数</div>
</div>
<div className="bg-green-50 p-4 rounded-lg border border-green-100">
<div className="text-2xl font-bold text-green-600">
{data.filter(item => item.isonline === 1).length}
</div>
<div className="text-sm text-green-800">在线网关</div>
<div className="text-sm text-green-800">在用节点</div>
</div>
<div className="bg-orange-50 p-4 rounded-lg border border-orange-100">
<div className="text-2xl font-bold text-orange-600">
{data.filter(item => item.ischange === 1).length}
</div>
<div className="text-sm text-orange-800">已更新配置</div>
</div>
<div className="bg-purple-50 p-4 rounded-lg border border-purple-100">
<div className="text-2xl font-bold text-purple-600">
{new Set(data.map(item => item.city)).size}
</div>
<div className="text-sm text-purple-800">覆盖城市</div>
<div className="text-sm text-orange-800">需要更新</div>
</div>
</div>
</div>
{/* 分页组件 - 仅在非MAC查询时显示 */}
{!isMacQuery && (
<Pagination
page={currentPage}
size={itemsPerPage}
total={totalItems}
onPageChange={handlePageChange}
onSizeChange={handleSizeChange}
className="mt-4"
/>
)}
</>
) : (
<></>
<div className="text-center py-12">
<div className="text-gray-400 text-4xl mb-4">📋</div>
<p className="text-gray-600">暂无网关配置数据</p>
</div>
)}
</div>
)

6
src/app/dashboard/components/gatewayinfo.tsx
View File

@@ -213,12 +213,6 @@ useEffect(() => {
</div>
<div className="text-sm text-red-800">禁用网关</div>
</div>
<div className="bg-purple-50 p-4 rounded-lg">
<div className="text-2xl font-bold text-purple-600">
{new Set(data.map(item => item.setid)).size}
</div>
<div className="text-sm text-purple-800">配置版本数</div>
</div>
</div>
</div>
</div>