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

更新二维矩阵里的首列字段展示

Browse Source
This commit is contained in:
wmp
2025-10-14 14:32:25 +08:00
parent 6e9e7af780
commit 10395a49c1
1 changed files with 40 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/app/dashboard/components/gatewayConfigs.tsx
View File

@@ -15,8 +15,7 @@ function GatewayConfigContent() {
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 [matrixData, setMatrixData] = useState<{ inner_ip: string, devices: { [macaddr: string]: GatewayConfig[] } }[]>([])
const [macAddresses, setMacAddresses] = useState<string[]>([])
const [currentTotal, setCurrentTotal] = useState(0)
// 缓存处理先保存初始MAC地址列表
@@ -161,51 +160,51 @@ function GatewayConfigContent() {
})
}
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(
const allPortLines = Array.from(
new Set(
Object.values(macConfigMap)
.flat()
.map(item => item.city)
.map(item => item.inner_ip)// 获取端口和线路
.filter(Boolean),
),
).sort((cityA, cityB) => {
const portA = cityMinPortMap[cityA!] || 0
const portB = cityMinPortMap[cityB!] || 0
)
const portLineConfigMap: { [key: string]: GatewayConfig } = {}
Object.values(macConfigMap).forEach((configs) => {
configs.forEach((config) => {
const key = config.inner_ip
if (!portLineConfigMap[key]) {
portLineConfigMap[key] = config
}
})
})
// 按端口号排序
const sortedPortLines = allPortLines.sort((a, b) => {
const portA = getLastOctet(a.split('|')[0])
const portB = getLastOctet(b.split('|')[0])
return portA - portB
}) as string[]
})
// 构建矩阵数据
const matrix = allCities.map((city) => {
const matrix = sortedPortLines.map((portLine) => {
const [inner_ip] = portLine.split('|')
const config = portLineConfigMap[portLine]
const row = {
city,
inner_ip: inner_ip || '',
devices: {} as { [macaddr: string]: GatewayConfig[] },
}
// 为每个MAC地址填充该城市的配置数据
macList.forEach((mac) => {
const configsForCity = macConfigMap[mac]
.filter(item => item.city === city)
const configsForPortLine = macConfigMap[mac]
.filter(item => item.inner_ip === inner_ip)
.sort(sortByInnerIp)
row.devices[mac] = configsForCity
row.devices[mac] = configsForPortLine
})
return row
})
setMatrixData(matrix)
setCities(allCities)
setMacAddresses(macList)
setCurrentTotal(matrix.length)
@@ -228,6 +227,7 @@ function GatewayConfigContent() {
try {
// 获取网关基本信息
const infoResult = await getGatewayInfo()
if (!infoResult.success) {
throw new Error(infoResult.error || '查询网关信息失败')
}
@@ -429,13 +429,13 @@ function GatewayConfigContent() {
<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 className="text-xs text-gray-500 bg-gray-50 uppercase tracking-wider sticky top-0 left-0 z-50 border-r min-w-[110px] shadow-md">
端口
</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]"
className="text-xs text-gray-500 uppercase tracking-wider sticky top-0 z-30 bg-gray-50 text-center min-w-[110px] border-r"
>
{macaddr}
</TableHead>
@@ -444,18 +444,19 @@ function GatewayConfigContent() {
</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}
<TableRow key={rowIndex} className="border-b">
<TableCell className="px-4 py-2 font-medium sticky left-0 z-40 border-r bg-white shadow-[2px_0_0_0_rgba(0,0,0,0.1)] min-w-[110px]">
<div className="flex justify-between items-center">
<span className="text-sm font-medium">{row.inner_ip || 'N/A'}</span>
</div>
</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]"
className="px-2 py-3 text-center min-w-[110px] border-r"
>
<div className="text-gray-400 text-sm py-6">-</div>
</TableCell>
@@ -465,7 +466,8 @@ function GatewayConfigContent() {
return (
<TableCell
key={`${rowIndex}-${colIndex}`}
className="p-2 min-w-[180px]"
// className="p-2 min-w-[110px] border-r text-center hover:bg-blue-50"
className="px-2 py-3 text-center min-w-[110px] border-r"
>
<div className="space-y-2">
{configs.map((item, itemIndex) => {
@@ -479,13 +481,12 @@ function GatewayConfigContent() {
}
return (
<div key={itemIndex} className="flex flex-col gap-1">
<div key={itemIndex} className="flex flex-col gap-1 transition-shadow">
<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>
<span className="text-xs font-medium">{item.city || '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}`}>