FaulknerWu
1429442dbd
- Rename customs-tablet-frontend/ to public-frontend/ for broader scope - Add new pages: customs, inspection with camera integration - Add new services: apiClient.ts, backendApi.ts, normalizers.ts - Add CameraFrame component for real-time video streaming - Add scan_fixer module with clock_publisher and timestamp fix utilities - Update startup scripts to support new frontend structure - Update arm_server configuration and service files Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { Tag } from 'antd';
|
|
import {
|
|
CheckCircleOutlined,
|
|
ClockCircleOutlined,
|
|
CloseCircleOutlined,
|
|
MinusCircleOutlined,
|
|
PauseCircleOutlined,
|
|
QuestionCircleOutlined,
|
|
SyncOutlined,
|
|
WarningOutlined,
|
|
} from '@ant-design/icons';
|
|
|
|
type StatusType =
|
|
| 'pending'
|
|
| 'inspecting'
|
|
| 'released'
|
|
| 'abnormal'
|
|
| 'idle'
|
|
| 'running'
|
|
| 'paused'
|
|
| 'completed'
|
|
| 'online'
|
|
| 'offline';
|
|
|
|
interface StatusBadgeProps {
|
|
status: StatusType;
|
|
type?: 'badge' | 'tag';
|
|
}
|
|
|
|
export const StatusBadge: React.FC<StatusBadgeProps> = ({ status, type = 'badge' }) => {
|
|
const config = (() => {
|
|
switch (status) {
|
|
case 'pending':
|
|
return { color: 'warning', text: '待查验', icon: <ClockCircleOutlined style={{ color: '#faad14' }} /> };
|
|
case 'inspecting':
|
|
case 'running':
|
|
return { color: 'processing', text: '查验中', icon: <SyncOutlined style={{ color: '#1890ff' }} /> };
|
|
case 'released':
|
|
case 'completed':
|
|
return { color: 'success', text: '已放行', icon: <CheckCircleOutlined style={{ color: '#52c41a' }} /> };
|
|
case 'abnormal':
|
|
return { color: 'error', text: '异常', icon: <WarningOutlined style={{ color: '#ff4d4f' }} /> };
|
|
case 'idle':
|
|
return { color: 'default', text: '空闲', icon: <MinusCircleOutlined style={{ color: '#d9d9d9' }} /> };
|
|
case 'paused':
|
|
return { color: 'warning', text: '已暂停', icon: <PauseCircleOutlined style={{ color: '#faad14' }} /> };
|
|
case 'online':
|
|
return { color: 'success', text: '在线', icon: <CheckCircleOutlined style={{ color: '#52c41a' }} /> };
|
|
case 'offline':
|
|
return { color: 'error', text: '离线', icon: <CloseCircleOutlined style={{ color: '#ff4d4f' }} /> };
|
|
default:
|
|
return { color: 'default', text: '未知', icon: <QuestionCircleOutlined style={{ color: '#d9d9d9' }} /> };
|
|
}
|
|
})();
|
|
|
|
if (type === 'tag') {
|
|
return <Tag color={config.color} icon={config.icon}>{config.text}</Tag>;
|
|
}
|
|
|
|
return (
|
|
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
|
|
{config.icon}
|
|
<span>{config.text}</span>
|
|
</span>
|
|
);
|
|
};
|