15 changed files with 1082 additions and 36 deletions
@ -0,0 +1,295 @@ |
|||
import React, { useState } from 'react'; |
|||
import { ProtocolLogDto } from '@/services/protocolLogsService'; |
|||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; |
|||
import { Badge } from '@/components/ui/badge'; |
|||
import { Button } from '@/components/ui/button'; |
|||
import { Drawer, DrawerContent, DrawerHeader } from '@/components/ui/drawer'; |
|||
import { Eye, X } from 'lucide-react'; |
|||
import { cn } from '@/lib/utils'; |
|||
import { DensityType } from '@/components/ui/TableToolbar'; |
|||
import { getProtocolLayerLabel } from '@/constants/protocolLayerOptions'; |
|||
import ConfigContentViewer from '@/components/ui/ConfigContentViewer'; |
|||
|
|||
interface ProtocolLogsTableProps { |
|||
protocolLogs: ProtocolLogDto[]; |
|||
loading: boolean; |
|||
columns: { key: string; title: string; visible: boolean }[]; |
|||
density: DensityType; |
|||
} |
|||
|
|||
export default function ProtocolLogsTable({ |
|||
protocolLogs, |
|||
loading, |
|||
columns, |
|||
density, |
|||
}: ProtocolLogsTableProps) { |
|||
const [selectedMessageDetail, setSelectedMessageDetail] = useState<string>(''); |
|||
const [isDrawerOpen, setIsDrawerOpen] = useState(false); |
|||
|
|||
// 密度样式映射
|
|||
const densityStyles = { |
|||
relaxed: 'py-3', |
|||
compact: 'py-1', |
|||
default: 'py-2', |
|||
}; |
|||
|
|||
// 格式化时间戳
|
|||
const formatTimestamp = (timestamp: number) => { |
|||
try { |
|||
return new Date(timestamp).toLocaleString('zh-CN'); |
|||
} catch { |
|||
return timestamp.toString(); |
|||
} |
|||
}; |
|||
|
|||
// 获取方向描述
|
|||
const getDirectionDescription = (direction: number) => { |
|||
switch (direction) { |
|||
case 0: |
|||
return '上行'; |
|||
case 1: |
|||
return '下行'; |
|||
default: |
|||
return '未知'; |
|||
} |
|||
}; |
|||
|
|||
// 获取方向颜色
|
|||
const getDirectionColor = (direction: number) => { |
|||
switch (direction) { |
|||
case 0: |
|||
return 'bg-blue-100 text-blue-800 hover:bg-blue-100'; |
|||
case 1: |
|||
return 'bg-green-100 text-green-800 hover:bg-green-100'; |
|||
default: |
|||
return 'bg-gray-100 text-gray-800 hover:bg-gray-100'; |
|||
} |
|||
}; |
|||
|
|||
|
|||
|
|||
// 查看消息详情
|
|||
const handleViewMessageDetail = (messageDetailJson: string) => { |
|||
// 尝试格式化 JSON 数据
|
|||
let formattedContent = messageDetailJson; |
|||
try { |
|||
// 如果是 JSON 字符串，尝试解析并格式化
|
|||
if (messageDetailJson && (messageDetailJson.startsWith('[') || messageDetailJson.startsWith('{'))) { |
|||
const parsed = JSON.parse(messageDetailJson); |
|||
formattedContent = JSON.stringify(parsed, null, 2); |
|||
} |
|||
} catch (error) { |
|||
// 如果解析失败，保持原始内容
|
|||
console.log('messageDetailJson 不是有效的 JSON 格式，使用原始内容'); |
|||
} |
|||
setSelectedMessageDetail(formattedContent); |
|||
setIsDrawerOpen(true); |
|||
}; |
|||
|
|||
// 复制消息详情
|
|||
const handleCopyMessageDetail = async () => { |
|||
try { |
|||
await navigator.clipboard.writeText(selectedMessageDetail); |
|||
// 可以添加一个 toast 提示
|
|||
} catch (error) { |
|||
console.error('复制失败:', error); |
|||
} |
|||
}; |
|||
|
|||
// 下载消息详情
|
|||
const handleDownloadMessageDetail = () => { |
|||
const blob = new Blob([selectedMessageDetail], { type: 'text/plain' }); |
|||
const url = URL.createObjectURL(blob); |
|||
const a = document.createElement('a'); |
|||
a.href = url; |
|||
a.download = `message-detail-${Date.now()}.txt`; |
|||
document.body.appendChild(a); |
|||
a.click(); |
|||
document.body.removeChild(a); |
|||
URL.revokeObjectURL(url); |
|||
}; |
|||
|
|||
// 渲染单元格内容
|
|||
const renderCell = (log: ProtocolLogDto, columnKey: string) => { |
|||
switch (columnKey) { |
|||
case 'layerType': |
|||
return ( |
|||
<div className="text-sm"> |
|||
{getProtocolLayerLabel(log.layerType)} |
|||
</div> |
|||
); |
|||
|
|||
case 'time': |
|||
return ( |
|||
<div className="text-sm text-muted-foreground"> |
|||
{log.time ? log.time.substring(0, 12) : '-'} |
|||
</div> |
|||
); |
|||
|
|||
case 'plmn': |
|||
return ( |
|||
<div className="text-sm font-mono"> |
|||
{(log as any).plmn || log.PLMN || '-'} |
|||
</div> |
|||
); |
|||
|
|||
case 'info': |
|||
return ( |
|||
<div className="text-sm max-w-xs truncate" title={log.info}> |
|||
{log.info || '-'} |
|||
</div> |
|||
); |
|||
|
|||
case 'ueid': |
|||
return ( |
|||
<div className="text-sm text-muted-foreground"> |
|||
{(log as any).ueid || log.UEID || '-'} |
|||
</div> |
|||
); |
|||
|
|||
case 'imsi': |
|||
return ( |
|||
<div className="text-sm font-mono"> |
|||
{(log as any).imsi || log.IMSI || '-'} |
|||
</div> |
|||
); |
|||
|
|||
case 'cellID': |
|||
return ( |
|||
<div className="text-sm text-muted-foreground"> |
|||
{(log as any).cellID || log.CellID || '-'} |
|||
</div> |
|||
); |
|||
|
|||
case 'direction': |
|||
const directionDesc = getDirectionDescription(log.direction); |
|||
const directionColor = getDirectionColor(log.direction); |
|||
return ( |
|||
<Badge |
|||
variant="outline" |
|||
className={cn(directionColor)} |
|||
> |
|||
{directionDesc} |
|||
</Badge> |
|||
); |
|||
|
|||
case 'message': |
|||
return ( |
|||
<div className="text-sm max-w-xs truncate" title={log.message}> |
|||
{log.message || '-'} |
|||
</div> |
|||
); |
|||
|
|||
case 'MessageDetailJson': |
|||
return ( |
|||
<div className="text-center"> |
|||
<Button |
|||
variant="ghost" |
|||
size="sm" |
|||
onClick={() => handleViewMessageDetail(log.messageDetailJson || '')} |
|||
disabled={!log.messageDetailJson} |
|||
className="h-8 w-8 p-0 hover:bg-accent" |
|||
title="查看详情" |
|||
> |
|||
<Eye className="h-4 w-4 text-muted-foreground hover:text-foreground" /> |
|||
</Button> |
|||
</div> |
|||
); |
|||
|
|||
default: |
|||
return null; |
|||
} |
|||
}; |
|||
|
|||
// 过滤可见列
|
|||
const visibleColumns = columns.filter(col => col.visible); |
|||
|
|||
return ( |
|||
<> |
|||
<div className="rounded-md border overflow-hidden"> |
|||
<div className="overflow-x-auto"> |
|||
{/* 固定的表头 */} |
|||
<div className="bg-background border-b shadow-sm"> |
|||
<Table className="w-full table-fixed"> |
|||
<TableHeader> |
|||
<TableRow> |
|||
{visibleColumns.map((column) => ( |
|||
<TableHead key={column.key} className={cn("text-center whitespace-nowrap bg-background", densityStyles[density])} style={{ width: `${100 / visibleColumns.length}%` }}> |
|||
{column.title} |
|||
</TableHead> |
|||
))} |
|||
</TableRow> |
|||
</TableHeader> |
|||
</Table> |
|||
</div> |
|||
|
|||
{/* 可滚动的表体 */} |
|||
<div className="max-h-[600px] overflow-auto"> |
|||
<Table className="w-full table-fixed"> |
|||
<TableBody> |
|||
{loading ? ( |
|||
<TableRow> |
|||
<TableCell colSpan={visibleColumns.length} className="text-center py-8"> |
|||
<div className="flex items-center justify-center"> |
|||
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div> |
|||
<span className="ml-2">加载中...</span> |
|||
</div> |
|||
</TableCell> |
|||
</TableRow> |
|||
) : protocolLogs.length === 0 ? ( |
|||
<TableRow> |
|||
<TableCell colSpan={visibleColumns.length} className="text-center py-8"> |
|||
<div className="text-muted-foreground"> |
|||
暂无协议日志数据 |
|||
</div> |
|||
</TableCell> |
|||
</TableRow> |
|||
) : ( |
|||
protocolLogs.map((log, index) => ( |
|||
<TableRow key={`${log.id}-${index}`}> |
|||
{visibleColumns.map((column) => ( |
|||
<TableCell key={column.key} className={cn("text-center whitespace-nowrap", densityStyles[density])} style={{ width: `${100 / visibleColumns.length}%` }}> |
|||
{renderCell(log, column.key)} |
|||
</TableCell> |
|||
))} |
|||
</TableRow> |
|||
)) |
|||
)} |
|||
</TableBody> |
|||
</Table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
{/* 消息详情抽屉 */} |
|||
<Drawer open={isDrawerOpen} onOpenChange={setIsDrawerOpen}> |
|||
<div className="flex flex-col h-full"> |
|||
<DrawerHeader className="flex-shrink-0"> |
|||
<div className="flex items-center justify-between w-full"> |
|||
<h2 className="text-lg font-semibold">Message Detail</h2> |
|||
<Button |
|||
variant="ghost" |
|||
size="sm" |
|||
onClick={() => setIsDrawerOpen(false)} |
|||
className="h-8 w-8 p-0" |
|||
> |
|||
<X className="h-4 w-4" /> |
|||
</Button> |
|||
</div> |
|||
</DrawerHeader> |
|||
|
|||
<DrawerContent className="flex flex-col flex-1 min-h-0"> |
|||
<div className="flex-1 p-4"> |
|||
<ConfigContentViewer |
|||
content={selectedMessageDetail || 'No message detail available'} |
|||
onCopy={handleCopyMessageDetail} |
|||
onDownload={handleDownloadMessageDetail} |
|||
className="h-full" |
|||
/> |
|||
</div> |
|||
</DrawerContent> |
|||
</div> |
|||
</Drawer> |
|||
</> |
|||
); |
|||
} |
|||
@ -0,0 +1,71 @@ |
|||
// 完整的协议层类型枚举选项（用于标签显示）
|
|||
export const allProtocolLayerOptions = [ |
|||
{ value: '0', label: 'NONE' }, |
|||
{ value: '1', label: 'GTPU' }, |
|||
{ value: '2', label: 'LPPa' }, |
|||
{ value: '3', label: 'M2AP' }, |
|||
{ value: '4', label: 'MAC' }, |
|||
{ value: '5', label: 'NAS' }, |
|||
{ value: '6', label: 'NGAP' }, |
|||
{ value: '7', label: 'NRPPa' }, |
|||
{ value: '8', label: 'PDCP' }, |
|||
{ value: '9', label: 'PROD' }, |
|||
{ value: '10', label: 'PHY' }, |
|||
{ value: '11', label: 'RLC' }, |
|||
{ value: '12', label: 'RRC' }, |
|||
{ value: '13', label: 'S1AP' }, |
|||
{ value: '14', label: 'TRX' }, |
|||
{ value: '15', label: 'X2AP' }, |
|||
{ value: '16', label: 'XnAP' }, |
|||
{ value: '17', label: 'IP' }, |
|||
{ value: '18', label: 'IMS' }, |
|||
{ value: '19', label: 'CX' }, |
|||
{ value: '20', label: 'RX' }, |
|||
{ value: '21', label: 'S6' }, |
|||
{ value: '22', label: 'S13' }, |
|||
{ value: '23', label: 'SGsAP' }, |
|||
{ value: '24', label: 'SBcAP' }, |
|||
{ value: '25', label: 'LCSAP' }, |
|||
{ value: '26', label: 'N12' }, |
|||
{ value: '27', label: 'N8' }, |
|||
{ value: '28', label: 'N17' }, |
|||
{ value: '29', label: 'N50' }, |
|||
{ value: '30', label: 'N13' }, |
|||
{ value: '31', label: 'NL1' }, |
|||
{ value: '32', label: 'HTTP2' }, |
|||
{ value: '33', label: 'EPDG' }, |
|||
{ value: '34', label: 'IKEV2' }, |
|||
{ value: '35', label: 'IPSEC' }, |
|||
{ value: '36', label: 'MEDIA' }, |
|||
{ value: '37', label: 'MMS' }, |
|||
{ value: '38', label: 'SIP' }, |
|||
]; |
|||
|
|||
// 根据实际数据动态生成协议层类型选项
|
|||
export const generateProtocolLayerOptions = (protocolLogs: any[]): { value: string; label: string }[] => { |
|||
// 从数据中提取所有唯一的 layerType 值
|
|||
const uniqueLayerTypes = [...new Set(protocolLogs.map(log => log.layerType))].sort((a, b) => a - b); |
|||
|
|||
// 构建选项数组，始终包含"全部"选项
|
|||
const options = [{ value: 'ALL', label: '全部' }]; |
|||
|
|||
// 为每个唯一的 layerType 添加对应的选项
|
|||
uniqueLayerTypes.forEach(layerType => { |
|||
const option = allProtocolLayerOptions.find(opt => opt.value === String(layerType)); |
|||
if (option) { |
|||
options.push(option); |
|||
} |
|||
}); |
|||
|
|||
return options; |
|||
}; |
|||
|
|||
// 保持向后兼容的 protocolLayerOptions（现在使用动态生成）
|
|||
export const protocolLayerOptions = allProtocolLayerOptions; |
|||
|
|||
// 获取协议层类型标签的辅助函数
|
|||
export const getProtocolLayerLabel = (layerType: string | number): string => { |
|||
const layerTypeStr = String(layerType); |
|||
const option = allProtocolLayerOptions.find(opt => opt.value === layerTypeStr); |
|||
return option ? option.label : layerTypeStr; |
|||
}; |
|||
@ -0,0 +1,300 @@ |
|||
import React, { useState, useEffect } from 'react'; |
|||
import { |
|||
ProtocolLogDto, |
|||
GetProtocolLogsRequest, |
|||
protocolLogsService |
|||
} from '@/services/protocolLogsService'; |
|||
import ProtocolLogsTable from '@/components/protocol-logs/ProtocolLogsTable'; |
|||
import { Input } from '@/components/ui/input'; |
|||
import TableToolbar, { DensityType } from '@/components/ui/TableToolbar'; |
|||
import { Button } from '@/components/ui/button'; |
|||
import { useToast } from '@/components/ui/use-toast'; |
|||
import { generateProtocolLayerOptions } from '@/constants/protocolLayerOptions'; |
|||
import { Checkbox } from '@/components/ui/checkbox'; |
|||
import { Badge } from '@/components/ui/badge'; |
|||
import { ChevronDown, X } from 'lucide-react'; |
|||
|
|||
const defaultColumns = [ |
|||
{ key: 'layerType', title: 'Layer Type', visible: true }, |
|||
{ key: 'time', title: 'Time', visible: true }, |
|||
{ key: 'plmn', title: 'PLMN', visible: true }, |
|||
{ key: 'info', title: 'Info', visible: true }, |
|||
{ key: 'ueid', title: 'UEID', visible: true }, |
|||
{ key: 'imsi', title: 'IMSI', visible: true }, |
|||
{ key: 'cellID', title: 'CellID', visible: true }, |
|||
{ key: 'direction', title: 'Direction', visible: true }, |
|||
{ key: 'message', title: 'Message', visible: true }, |
|||
{ key: 'MessageDetailJson', title: 'Detail', visible: true }, |
|||
]; |
|||
|
|||
export default function OnlineProtocolLogsView() { |
|||
const [protocolLogs, setProtocolLogs] = useState<ProtocolLogDto[]>([]); |
|||
const [loading, setLoading] = useState(false); |
|||
const [density, setDensity] = useState<DensityType>('default'); |
|||
const [columns, setColumns] = useState(defaultColumns); |
|||
const [layerTypeOpen, setLayerTypeOpen] = useState(false); |
|||
|
|||
// 动态生成协议层类型选项
|
|||
const protocolLayerOptions = generateProtocolLayerOptions(protocolLogs); |
|||
|
|||
const [searchParams, setSearchParams] = useState<GetProtocolLogsRequest>({ |
|||
deviceCode: '', |
|||
startTimestamp: undefined, |
|||
endTimestamp: undefined, |
|||
layerTypes: [], |
|||
deviceRuntimeStatus: undefined, |
|||
runtimeCodes: [], |
|||
runtimeStatuses: [1], // 默认只显示运行中的设备日志
|
|||
orderByDescending: true, |
|||
}); |
|||
|
|||
const { toast } = useToast(); |
|||
|
|||
const fetchProtocolLogs = async (params: GetProtocolLogsRequest = searchParams) => { |
|||
setLoading(true); |
|||
try { |
|||
// 确保所有字段都被包含在请求中，即使为空
|
|||
const requestParams = { |
|||
deviceCode: params.deviceCode || '', |
|||
startTimestamp: params.startTimestamp, |
|||
endTimestamp: params.endTimestamp, |
|||
layerTypes: params.layerTypes || [], |
|||
deviceRuntimeStatus: params.deviceRuntimeStatus, |
|||
runtimeCodes: params.runtimeCodes || [], |
|||
runtimeStatuses: params.runtimeStatuses || [], |
|||
orderByDescending: params.orderByDescending ?? true, |
|||
}; |
|||
|
|||
// 调试：打印请求参数
|
|||
console.log('发送在线协议日志请求参数:', JSON.stringify(requestParams, null, 2)); |
|||
|
|||
const result = await protocolLogsService.getProtocolLogs(requestParams); |
|||
|
|||
if (result.isSuccess && result.data) { |
|||
setProtocolLogs(result.data.items || []); |
|||
} else { |
|||
toast({ |
|||
title: '获取在线协议日志失败', |
|||
description: result.errorMessages?.join(', ') || '未知错误', |
|||
variant: 'destructive', |
|||
}); |
|||
} |
|||
} catch (error) { |
|||
console.error('获取在线协议日志失败:', error); |
|||
toast({ |
|||
title: '获取在线协议日志失败', |
|||
description: '网络错误或服务器异常', |
|||
variant: 'destructive', |
|||
}); |
|||
} finally { |
|||
setLoading(false); |
|||
} |
|||
}; |
|||
|
|||
const handleQuery = () => { |
|||
fetchProtocolLogs(); |
|||
}; |
|||
|
|||
const handleReset = () => { |
|||
const resetParams: GetProtocolLogsRequest = { |
|||
deviceCode: '', |
|||
startTimestamp: undefined, |
|||
endTimestamp: undefined, |
|||
layerTypes: [], |
|||
deviceRuntimeStatus: undefined, |
|||
runtimeCodes: [], |
|||
runtimeStatuses: [1], // 重置时也保持只显示运行中的设备日志
|
|||
orderByDescending: true, |
|||
}; |
|||
setSearchParams(resetParams); |
|||
fetchProtocolLogs(resetParams); |
|||
}; |
|||
|
|||
useEffect(() => { |
|||
fetchProtocolLogs(); |
|||
}, []); |
|||
|
|||
// 点击外部关闭下拉框
|
|||
useEffect(() => { |
|||
const handleClickOutside = (event: MouseEvent) => { |
|||
const target = event.target as Element; |
|||
if (!target.closest('.layer-type-dropdown')) { |
|||
setLayerTypeOpen(false); |
|||
} |
|||
}; |
|||
|
|||
document.addEventListener('mousedown', handleClickOutside); |
|||
return () => { |
|||
document.removeEventListener('mousedown', handleClickOutside); |
|||
}; |
|||
}, []); |
|||
|
|||
return ( |
|||
<main className="flex-1 p-4 transition-all duration-300 ease-in-out sm:p-6"> |
|||
<div className="w-full space-y-4"> |
|||
<div> |
|||
<h1 className="text-2xl font-bold text-foreground">在线协议日志</h1> |
|||
<p className="text-sm text-muted-foreground mt-1"> |
|||
实时监控协议日志记录 |
|||
</p> |
|||
</div> |
|||
|
|||
<div className="flex flex-col bg-background p-4 rounded-md border mb-2"> |
|||
<form |
|||
className="flex gap-x-8 gap-y-4 items-center flex-wrap" |
|||
onSubmit={e => { |
|||
e.preventDefault(); |
|||
handleQuery(); |
|||
}} |
|||
> |
|||
<div className="flex flex-row items-center min-w-[200px] flex-1"> |
|||
<label className="mr-2 text-sm font-medium text-foreground whitespace-nowrap text-right" style={{ width: 80, minWidth: 80 }}> |
|||
设备编号： |
|||
</label> |
|||
<Input |
|||
className="flex-1 bg-background text-foreground placeholder:text-muted-foreground border border-border focus:outline-none focus:ring-0 focus:border-border transition-all" |
|||
placeholder="请输入设备编号" |
|||
value={searchParams.deviceCode || ''} |
|||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => |
|||
setSearchParams(prev => ({ ...prev, deviceCode: e.target.value })) |
|||
} |
|||
/> |
|||
</div> |
|||
|
|||
<div className="flex flex-row items-center min-w-[200px] flex-1"> |
|||
<label className="mr-2 text-sm font-medium text-foreground whitespace-nowrap text-right" style={{ width: 80, minWidth: 80 }}> |
|||
协议层类型： |
|||
</label> |
|||
<div className="flex-1 relative layer-type-dropdown"> |
|||
<Button |
|||
variant="outline" |
|||
className="w-full justify-between bg-background text-foreground border border-border focus:outline-none focus:ring-0 focus:border-border transition-all" |
|||
onClick={() => setLayerTypeOpen(!layerTypeOpen)} |
|||
> |
|||
<span className="truncate"> |
|||
{searchParams.layerTypes?.length ? `${searchParams.layerTypes.length} 个类型` : '请选择协议层类型'} |
|||
</span> |
|||
<ChevronDown className="h-4 w-4 opacity-50" /> |
|||
</Button> |
|||
|
|||
{layerTypeOpen && ( |
|||
<div className="absolute top-full left-0 right-0 z-50 mt-1 bg-background border border-border rounded-md shadow-lg max-h-60 overflow-y-auto"> |
|||
<div className="p-2"> |
|||
<div className="flex items-center justify-between mb-2"> |
|||
<span className="text-sm font-medium">选择协议层类型</span> |
|||
<Button |
|||
variant="ghost" |
|||
size="sm" |
|||
onClick={() => setSearchParams(prev => ({ ...prev, layerTypes: [] }))} |
|||
className="h-6 px-2 text-xs" |
|||
> |
|||
清空 |
|||
</Button> |
|||
</div> |
|||
{protocolLayerOptions.map((option) => ( |
|||
<div key={option.value} className="flex items-center space-x-2 py-1"> |
|||
<Checkbox |
|||
id={`layer-${option.value}`} |
|||
checked={searchParams.layerTypes?.includes(parseInt(option.value)) || false} |
|||
onCheckedChange={(checked) => { |
|||
const currentTypes = searchParams.layerTypes || []; |
|||
if (checked) { |
|||
setSearchParams(prev => ({ |
|||
...prev, |
|||
layerTypes: [...currentTypes, parseInt(option.value)] |
|||
})); |
|||
} else { |
|||
setSearchParams(prev => ({ |
|||
...prev, |
|||
layerTypes: currentTypes.filter(type => type !== parseInt(option.value)) |
|||
})); |
|||
} |
|||
}} |
|||
/> |
|||
<label |
|||
htmlFor={`layer-${option.value}`} |
|||
className="text-sm cursor-pointer flex-1" |
|||
> |
|||
{option.label} |
|||
</label> |
|||
</div> |
|||
))} |
|||
</div> |
|||
</div> |
|||
)} |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<div className="flex flex-row items-center min-w-[200px] flex-1"> |
|||
<label className="mr-2 text-sm font-medium text-foreground whitespace-nowrap text-right" style={{ width: 80, minWidth: 80 }}> |
|||
开始时间戳： |
|||
</label> |
|||
<Input |
|||
type="number" |
|||
className="flex-1 bg-background text-foreground placeholder:text-muted-foreground border border-border focus:outline-none focus:ring-0 focus:border-border transition-all" |
|||
placeholder="请输入开始时间戳" |
|||
value={searchParams.startTimestamp || ''} |
|||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => |
|||
setSearchParams(prev => ({ |
|||
...prev, |
|||
startTimestamp: e.target.value ? parseInt(e.target.value) : undefined |
|||
})) |
|||
} |
|||
/> |
|||
</div> |
|||
|
|||
<div className="flex flex-row items-center min-w-[200px] flex-1"> |
|||
<label className="mr-2 text-sm font-medium text-foreground whitespace-nowrap text-right" style={{ width: 80, minWidth: 80 }}> |
|||
结束时间戳： |
|||
</label> |
|||
<Input |
|||
type="number" |
|||
className="flex-1 bg-background text-foreground placeholder:text-muted-foreground border border-border focus:outline-none focus:ring-0 focus:border-border transition-all" |
|||
placeholder="请输入结束时间戳" |
|||
value={searchParams.endTimestamp || ''} |
|||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => |
|||
setSearchParams(prev => ({ |
|||
...prev, |
|||
endTimestamp: e.target.value ? parseInt(e.target.value) : undefined |
|||
})) |
|||
} |
|||
/> |
|||
</div> |
|||
|
|||
<div className="flex flex-row items-center gap-2"> |
|||
<Button variant="outline" onClick={handleReset}>重置</Button> |
|||
<Button onClick={handleQuery}>查询</Button> |
|||
</div> |
|||
</form> |
|||
</div> |
|||
|
|||
<div className="rounded-md border bg-background p-4"> |
|||
<div className="flex items-center justify-between mb-2"> |
|||
<div className="flex items-center gap-2"> |
|||
<span className="text-sm text-muted-foreground"> |
|||
共 {protocolLogs.length} 条记录 |
|||
</span> |
|||
</div> |
|||
<TableToolbar |
|||
onRefresh={() => fetchProtocolLogs()} |
|||
onDensityChange={setDensity} |
|||
onColumnsChange={setColumns} |
|||
onColumnsReset={() => setColumns(defaultColumns)} |
|||
columns={columns} |
|||
density={density} |
|||
/> |
|||
</div> |
|||
|
|||
<ProtocolLogsTable |
|||
protocolLogs={protocolLogs} |
|||
loading={loading} |
|||
columns={columns} |
|||
density={density} |
|||
/> |
|||
</div> |
|||
</div> |
|||
</main> |
|||
); |
|||
} |
|||
@ -0,0 +1,322 @@ |
|||
import React, { useState, useEffect } from 'react'; |
|||
import { |
|||
ProtocolLogDto, |
|||
GetProtocolLogsRequest, |
|||
protocolLogsService |
|||
} from '@/services/protocolLogsService'; |
|||
import ProtocolLogsTable from '@/components/protocol-logs/ProtocolLogsTable'; |
|||
import { Input } from '@/components/ui/input'; |
|||
import TableToolbar, { DensityType } from '@/components/ui/TableToolbar'; |
|||
import { Button } from '@/components/ui/button'; |
|||
import { useToast } from '@/components/ui/use-toast'; |
|||
import { generateProtocolLayerOptions } from '@/constants/protocolLayerOptions'; |
|||
import { Checkbox } from '@/components/ui/checkbox'; |
|||
import { Badge } from '@/components/ui/badge'; |
|||
import { ChevronDown, X } from 'lucide-react'; |
|||
|
|||
const defaultColumns = [ |
|||
{ key: 'layerType', title: 'Layer Type', visible: true }, |
|||
{ key: 'time', title: 'Time', visible: true }, |
|||
{ key: 'plmn', title: 'PLMN', visible: true }, |
|||
{ key: 'info', title: 'Info', visible: true }, |
|||
{ key: 'ueid', title: 'UEID', visible: true }, |
|||
{ key: 'imsi', title: 'IMSI', visible: true }, |
|||
{ key: 'cellID', title: 'CellID', visible: true }, |
|||
{ key: 'direction', title: 'Direction', visible: true }, |
|||
{ key: 'message', title: 'Message', visible: true }, |
|||
{ key: 'MessageDetailJson', title: 'Detail', visible: true }, |
|||
]; |
|||
|
|||
export default function HistoryProtocolLogsView() { |
|||
const [protocolLogs, setProtocolLogs] = useState<ProtocolLogDto[]>([]); |
|||
const [loading, setLoading] = useState(false); |
|||
const [density, setDensity] = useState<DensityType>('default'); |
|||
const [columns, setColumns] = useState(defaultColumns); |
|||
|
|||
// 动态生成协议层类型选项
|
|||
const protocolLayerOptions = generateProtocolLayerOptions(protocolLogs); |
|||
|
|||
const [searchParams, setSearchParams] = useState<GetProtocolLogsRequest>({ |
|||
deviceCode: '', |
|||
startTimestamp: undefined, |
|||
endTimestamp: undefined, |
|||
layerTypes: [], |
|||
deviceRuntimeStatus: undefined, |
|||
runtimeCodes: [], |
|||
runtimeStatuses: [0,2,3], |
|||
orderByDescending: true, |
|||
}); |
|||
|
|||
const { toast } = useToast(); |
|||
|
|||
const fetchProtocolLogs = async (params: GetProtocolLogsRequest = searchParams) => { |
|||
setLoading(true); |
|||
try { |
|||
// 确保所有字段都被包含在请求中，即使为空
|
|||
const requestParams = { |
|||
deviceCode: params.deviceCode || '', |
|||
startTimestamp: params.startTimestamp, |
|||
endTimestamp: params.endTimestamp, |
|||
layerTypes: params.layerTypes || [], |
|||
deviceRuntimeStatus: params.deviceRuntimeStatus, |
|||
runtimeCodes: params.runtimeCodes || [], |
|||
runtimeStatuses: params.runtimeStatuses || [], |
|||
orderByDescending: params.orderByDescending ?? true, |
|||
}; |
|||
|
|||
// 调试：打印请求参数
|
|||
console.log('发送协议日志请求参数:', JSON.stringify(requestParams, null, 2)); |
|||
|
|||
const result = await protocolLogsService.getProtocolLogs(requestParams); |
|||
|
|||
if (result.isSuccess && result.data) { |
|||
setProtocolLogs(result.data.items || []); |
|||
} else { |
|||
toast({ |
|||
title: '获取历史协议日志失败', |
|||
description: result.errorMessages?.join(', ') || '未知错误', |
|||
variant: 'destructive', |
|||
}); |
|||
} |
|||
} catch (error) { |
|||
console.error('获取历史协议日志失败:', error); |
|||
toast({ |
|||
title: '获取历史协议日志失败', |
|||
description: '网络错误或服务器异常', |
|||
variant: 'destructive', |
|||
}); |
|||
} finally { |
|||
setLoading(false); |
|||
} |
|||
}; |
|||
|
|||
const handleQuery = () => { |
|||
fetchProtocolLogs(); |
|||
}; |
|||
|
|||
const handleReset = () => { |
|||
const resetParams: GetProtocolLogsRequest = { |
|||
deviceCode: '', |
|||
startTimestamp: undefined, |
|||
endTimestamp: undefined, |
|||
layerTypes: [], |
|||
deviceRuntimeStatus: undefined, |
|||
runtimeCodes: [], |
|||
runtimeStatuses: [0,2,3], // 重置时显示非运行状态的设备日志
|
|||
orderByDescending: true, |
|||
}; |
|||
setSearchParams(resetParams); |
|||
fetchProtocolLogs(resetParams); |
|||
}; |
|||
|
|||
useEffect(() => { |
|||
fetchProtocolLogs(); |
|||
}, []); |
|||
|
|||
// 点击外部关闭下拉框
|
|||
useEffect(() => { |
|||
const handleClickOutside = (event: MouseEvent) => { |
|||
const dropdown = document.getElementById('layerTypeDropdown'); |
|||
const button = document.querySelector('[data-layer-type-button]'); |
|||
if (dropdown && !dropdown.contains(event.target as Node) && !button?.contains(event.target as Node)) { |
|||
dropdown.classList.add('hidden'); |
|||
} |
|||
}; |
|||
|
|||
document.addEventListener('mousedown', handleClickOutside); |
|||
return () => { |
|||
document.removeEventListener('mousedown', handleClickOutside); |
|||
}; |
|||
}, []); |
|||
|
|||
return ( |
|||
<main className="flex-1 p-4 transition-all duration-300 ease-in-out sm:p-6"> |
|||
<div className="w-full space-y-4"> |
|||
|
|||
|
|||
<div className="flex flex-col bg-background p-4 rounded-md border mb-2"> |
|||
<form |
|||
className="flex gap-x-8 gap-y-4 items-center flex-wrap" |
|||
onSubmit={e => { |
|||
e.preventDefault(); |
|||
handleQuery(); |
|||
}} |
|||
> |
|||
<div className="flex flex-row items-center min-w-[200px] flex-1"> |
|||
<label className="mr-2 text-sm font-medium text-foreground whitespace-nowrap text-right" style={{ width: 80, minWidth: 80 }}> |
|||
设备编号： |
|||
</label> |
|||
<Input |
|||
className="flex-1 bg-background text-foreground placeholder:text-muted-foreground border border-border focus:outline-none focus:ring-0 focus:border-border transition-all" |
|||
placeholder="请输入设备编号" |
|||
value={searchParams.deviceCode || ''} |
|||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => |
|||
setSearchParams(prev => ({ ...prev, deviceCode: e.target.value })) |
|||
} |
|||
/> |
|||
</div> |
|||
|
|||
<div className="flex flex-row items-center min-w-[200px] flex-1"> |
|||
<label className="mr-2 text-sm font-medium text-foreground whitespace-nowrap text-right" style={{ width: 80, minWidth: 80 }}> |
|||
协议层类型： |
|||
</label> |
|||
<div className="flex-1 relative"> |
|||
<Button |
|||
variant="outline" |
|||
data-layer-type-button |
|||
className="w-full justify-between bg-background text-foreground border border-border focus:outline-none focus:ring-0 focus:border-border transition-all" |
|||
onClick={() => { |
|||
const dropdown = document.getElementById('layerTypeDropdown'); |
|||
if (dropdown) { |
|||
dropdown.classList.toggle('hidden'); |
|||
} |
|||
}} |
|||
> |
|||
<span className="truncate"> |
|||
{searchParams.layerTypes?.length |
|||
? `${searchParams.layerTypes.length} 个已选择` |
|||
: '请选择协议层类型' |
|||
} |
|||
</span> |
|||
<ChevronDown className="h-4 w-4" /> |
|||
</Button> |
|||
|
|||
<div |
|||
id="layerTypeDropdown" |
|||
className="hidden absolute z-50 w-full mt-1 bg-background border border-border rounded-md shadow-lg max-h-60 overflow-auto" |
|||
> |
|||
<div className="p-2"> |
|||
<div className="flex items-center space-x-2 p-2 hover:bg-accent rounded"> |
|||
<Checkbox |
|||
id="select-all" |
|||
checked={(searchParams.layerTypes?.length || 0) === 0} |
|||
onCheckedChange={(checked) => { |
|||
setSearchParams(prev => ({ ...prev, layerTypes: [] })); |
|||
}} |
|||
/> |
|||
<label htmlFor="select-all" className="text-sm">全部</label> |
|||
</div> |
|||
|
|||
{protocolLayerOptions.filter(option => option.value !== 'ALL').map((option) => ( |
|||
<div key={option.value} className="flex items-center space-x-2 p-2 hover:bg-accent rounded"> |
|||
<Checkbox |
|||
id={`layer-${option.value}`} |
|||
checked={searchParams.layerTypes?.includes(parseInt(option.value)) || false} |
|||
onCheckedChange={(checked) => { |
|||
const currentTypes = searchParams.layerTypes || []; |
|||
if (checked) { |
|||
setSearchParams(prev => ({ |
|||
...prev, |
|||
layerTypes: [...currentTypes, parseInt(option.value)] |
|||
})); |
|||
} else { |
|||
setSearchParams(prev => ({ |
|||
...prev, |
|||
layerTypes: currentTypes.filter(type => type !== parseInt(option.value)) |
|||
})); |
|||
} |
|||
}} |
|||
/> |
|||
<label htmlFor={`layer-${option.value}`} className="text-sm">{option.label}</label> |
|||
</div> |
|||
))} |
|||
</div> |
|||
</div> |
|||
|
|||
{(searchParams.layerTypes?.length || 0) > 0 && ( |
|||
<div className="flex flex-wrap gap-1 mt-1"> |
|||
{(searchParams.layerTypes || []).map((type) => { |
|||
const option = protocolLayerOptions.find(opt => opt.value === String(type)); |
|||
return ( |
|||
<Badge key={type} variant="secondary" className="text-xs"> |
|||
{option?.label || type} |
|||
<X |
|||
className="h-3 w-3 ml-1 cursor-pointer" |
|||
onClick={() => { |
|||
setSearchParams(prev => ({ |
|||
...prev, |
|||
layerTypes: prev.layerTypes?.filter(t => t !== type) || [] |
|||
})); |
|||
}} |
|||
/> |
|||
</Badge> |
|||
); |
|||
})} |
|||
</div> |
|||
)} |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<div className="flex flex-row items-center min-w-[200px] flex-1"> |
|||
<label className="mr-2 text-sm font-medium text-foreground whitespace-nowrap text-right" style={{ width: 80, minWidth: 80 }}> |
|||
开始时间戳： |
|||
</label> |
|||
<Input |
|||
type="number" |
|||
className="flex-1 bg-background text-foreground placeholder:text-muted-foreground border border-border focus:outline-none focus:ring-0 focus:border-border transition-all" |
|||
placeholder="请输入开始时间戳" |
|||
value={searchParams.startTimestamp || ''} |
|||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => |
|||
setSearchParams(prev => ({ |
|||
...prev, |
|||
startTimestamp: e.target.value ? parseInt(e.target.value) : undefined |
|||
})) |
|||
} |
|||
/> |
|||
</div> |
|||
|
|||
<div className="flex flex-row items-center min-w-[200px] flex-1"> |
|||
<label className="mr-2 text-sm font-medium text-foreground whitespace-nowrap text-right" style={{ width: 80, minWidth: 80 }}> |
|||
结束时间戳： |
|||
</label> |
|||
<Input |
|||
type="number" |
|||
className="flex-1 bg-background text-foreground placeholder:text-muted-foreground border border-border focus:outline-none focus:ring-0 focus:border-border transition-all" |
|||
placeholder="请输入结束时间戳" |
|||
value={searchParams.endTimestamp || ''} |
|||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => |
|||
setSearchParams(prev => ({ |
|||
...prev, |
|||
endTimestamp: e.target.value ? parseInt(e.target.value) : undefined |
|||
})) |
|||
} |
|||
/> |
|||
</div> |
|||
|
|||
<div className="flex flex-row items-center gap-2"> |
|||
<Button variant="outline" onClick={handleReset}>重置</Button> |
|||
<Button onClick={handleQuery}>查询</Button> |
|||
</div> |
|||
</form> |
|||
</div> |
|||
|
|||
<div className="rounded-md border bg-background p-4"> |
|||
<div className="flex items-center justify-between mb-2"> |
|||
<div className="flex items-center gap-2"> |
|||
<span className="text-sm text-muted-foreground"> |
|||
共 {protocolLogs.length} 条记录 |
|||
</span> |
|||
</div> |
|||
<TableToolbar |
|||
onRefresh={() => fetchProtocolLogs()} |
|||
onDensityChange={setDensity} |
|||
onColumnsChange={setColumns} |
|||
onColumnsReset={() => setColumns(defaultColumns)} |
|||
columns={columns} |
|||
density={density} |
|||
/> |
|||
</div> |
|||
|
|||
<ProtocolLogsTable |
|||
protocolLogs={protocolLogs} |
|||
loading={loading} |
|||
columns={columns} |
|||
density={density} |
|||
/> |
|||
</div> |
|||
</div> |
|||
</main> |
|||
); |
|||
} |
|||
Loading…
Reference in new issue