Browse Source
- 将设备运行时管理路由从独立路由调整为放在 instruments 路由内部 - 更新菜单配置，将设备运行时管理菜单项移动到仪表管理下面 - 在 AuthContext.tsx 的 getDefaultPermissions 函数中添加设备运行时管理权限 - 更新路由路径：/dashboard/instruments/device-runtimes/list - 更新菜单路径：仪表管理 -> 运行时状态 - 添加 deviceruntimes.view 和 deviceruntimes.manage 权限 - 更新 modify.md 记录所有修改内容feature/x1-web-request
hyh
4 days ago
21 changed files with 2596 additions and 159 deletions
@ -1,106 +0,0 @@ |
|||
using System.ComponentModel.DataAnnotations; |
|||
using System.ComponentModel.DataAnnotations.Schema; |
|||
using CellularManagement.Domain.Entities.Common; |
|||
|
|||
namespace CellularManagement.Domain.Entities.Device; |
|||
|
|||
/// <summary>
|
|||
/// 蜂窝设备运行时历史记录实体
|
|||
/// </summary>
|
|||
public class CellularDeviceRuntimeHistory : BaseEntity |
|||
{ |
|||
private CellularDeviceRuntimeHistory() { } |
|||
|
|||
/// <summary>
|
|||
/// 运行时ID（外键）
|
|||
/// </summary>
|
|||
[Required] |
|||
[MaxLength(450)] |
|||
public string RuntimeId { get; private set; } = null!; |
|||
|
|||
/// <summary>
|
|||
/// 设备编号
|
|||
/// </summary>
|
|||
[Required] |
|||
[MaxLength(50)] |
|||
public string DeviceCode { get; private set; } = null!; |
|||
|
|||
/// <summary>
|
|||
/// 操作前状态
|
|||
/// </summary>
|
|||
public DeviceRuntimeStatus PreviousStatus { get; private set; } |
|||
|
|||
/// <summary>
|
|||
/// 操作后状态
|
|||
/// </summary>
|
|||
public DeviceRuntimeStatus NewStatus { get; private set; } |
|||
|
|||
/// <summary>
|
|||
/// 运行编码
|
|||
/// </summary>
|
|||
[MaxLength(50)] |
|||
public string? RuntimeCode { get; private set; } |
|||
|
|||
/// <summary>
|
|||
/// 网络栈配置编号
|
|||
/// </summary>
|
|||
[MaxLength(50)] |
|||
public string? NetworkStackCode { get; private set; } |
|||
|
|||
/// <summary>
|
|||
/// 操作人ID
|
|||
/// </summary>
|
|||
[Required] |
|||
[MaxLength(450)] |
|||
public string OperatorId { get; private set; } = null!; |
|||
|
|||
/// <summary>
|
|||
/// 操作描述
|
|||
/// </summary>
|
|||
[Required] |
|||
[MaxLength(200)] |
|||
public string OperationDescription { get; private set; } = null!; |
|||
|
|||
/// <summary>
|
|||
/// 操作时间
|
|||
/// </summary>
|
|||
public DateTime OperationAt { get; private set; } |
|||
|
|||
/// <summary>
|
|||
/// 运行时实例
|
|||
/// </summary>
|
|||
public virtual CellularDeviceRuntime Runtime { get; private set; } = null!; |
|||
|
|||
/// <summary>
|
|||
/// 创建设备运行时历史记录
|
|||
/// </summary>
|
|||
public static CellularDeviceRuntimeHistory Create( |
|||
string runtimeId, |
|||
string deviceCode, |
|||
DeviceRuntimeStatus previousStatus, |
|||
DeviceRuntimeStatus newStatus, |
|||
string? runtimeCode, |
|||
string? networkStackCode, |
|||
string operatorId, |
|||
string operationDescription, |
|||
DateTime operationAt) |
|||
{ |
|||
var history = new CellularDeviceRuntimeHistory |
|||
{ |
|||
Id = Guid.NewGuid().ToString(), |
|||
RuntimeId = runtimeId, |
|||
DeviceCode = deviceCode, |
|||
PreviousStatus = previousStatus, |
|||
NewStatus = newStatus, |
|||
RuntimeCode = runtimeCode, |
|||
NetworkStackCode = networkStackCode, |
|||
OperatorId = operatorId, |
|||
OperationDescription = operationDescription, |
|||
OperationAt = operationAt, |
|||
CreatedAt = DateTime.UtcNow, |
|||
UpdatedAt = DateTime.UtcNow |
|||
}; |
|||
|
|||
return history; |
|||
} |
|||
} |
|||
@ -0,0 +1,276 @@ |
|||
import React, { useState, useEffect } from 'react'; |
|||
import { useParams, useNavigate } from 'react-router-dom'; |
|||
import { |
|||
deviceRuntimeService, |
|||
GetDeviceRuntimeStatusResponse |
|||
} from '@/services/deviceRuntimeService'; |
|||
import { Button } from '@/components/ui/button'; |
|||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; |
|||
import { Badge } from '@/components/ui/badge'; |
|||
import { Separator } from '@/components/ui/separator'; |
|||
import { useToast } from '@/components/ui/use-toast'; |
|||
import { ArrowLeftIcon, ReloadIcon } from '@radix-ui/react-icons'; |
|||
import { format } from 'date-fns'; |
|||
import { cn } from '@/lib/utils'; |
|||
|
|||
export default function DeviceRuntimeDetail() { |
|||
const { deviceCode } = useParams<{ deviceCode: string }>(); |
|||
const navigate = useNavigate(); |
|||
const { toast } = useToast(); |
|||
|
|||
const [deviceRuntime, setDeviceRuntime] = useState<GetDeviceRuntimeStatusResponse | null>(null); |
|||
const [loading, setLoading] = useState(false); |
|||
const [refreshing, setRefreshing] = useState(false); |
|||
|
|||
// 获取设备运行时状态详情
|
|||
const fetchDeviceRuntimeStatus = async (isRefresh = false) => { |
|||
if (!deviceCode) return; |
|||
|
|||
if (isRefresh) { |
|||
setRefreshing(true); |
|||
} else { |
|||
setLoading(true); |
|||
} |
|||
|
|||
try { |
|||
const result = await deviceRuntimeService.getDeviceRuntimeStatus(deviceCode); |
|||
|
|||
if (result.isSuccess && result.data) { |
|||
setDeviceRuntime(result.data); |
|||
} else { |
|||
toast({ |
|||
title: '获取设备运行时状态失败', |
|||
description: result.errorMessages?.join(', ') || '未知错误', |
|||
variant: 'destructive', |
|||
}); |
|||
} |
|||
} catch (error) { |
|||
console.error('获取设备运行时状态失败:', error); |
|||
toast({ |
|||
title: '获取设备运行时状态失败', |
|||
description: '网络错误或服务器异常', |
|||
variant: 'destructive', |
|||
}); |
|||
} finally { |
|||
setLoading(false); |
|||
setRefreshing(false); |
|||
} |
|||
}; |
|||
|
|||
// 格式化时间
|
|||
const formatDateTime = (dateString: string) => { |
|||
try { |
|||
return format(new Date(dateString), 'yyyy-MM-dd HH:mm:ss'); |
|||
} catch { |
|||
return dateString; |
|||
} |
|||
}; |
|||
|
|||
// 获取状态描述和颜色
|
|||
const getStatusInfo = (status: string) => { |
|||
const description = deviceRuntimeService.getRuntimeStatusDescription(status); |
|||
const color = deviceRuntimeService.getRuntimeStatusColor(status); |
|||
return { description, color }; |
|||
}; |
|||
|
|||
// 初始化加载
|
|||
useEffect(() => { |
|||
fetchDeviceRuntimeStatus(); |
|||
}, [deviceCode]); |
|||
|
|||
if (loading) { |
|||
return ( |
|||
<div className="flex items-center justify-center min-h-[400px]"> |
|||
<div className="flex items-center space-x-2"> |
|||
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div> |
|||
<span>加载中...</span> |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
if (!deviceRuntime) { |
|||
return ( |
|||
<div className="flex items-center justify-center min-h-[400px]"> |
|||
<div className="text-center"> |
|||
<h3 className="text-lg font-medium">设备运行时状态不存在</h3> |
|||
<p className="text-muted-foreground">未找到设备编号为 {deviceCode} 的运行时状态</p> |
|||
<Button |
|||
onClick={() => navigate('/device-runtimes')} |
|||
className="mt-4" |
|||
variant="outline" |
|||
> |
|||
返回列表 |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
const statusInfo = getStatusInfo(deviceRuntime.runtimeStatus); |
|||
|
|||
return ( |
|||
<div className="space-y-6"> |
|||
{/* 页面头部 */} |
|||
<div className="flex items-center justify-between"> |
|||
<div className="flex items-center space-x-4"> |
|||
<Button |
|||
variant="ghost" |
|||
size="sm" |
|||
onClick={() => navigate('/device-runtimes')} |
|||
> |
|||
<ArrowLeftIcon className="h-4 w-4 mr-2" /> |
|||
返回列表 |
|||
</Button> |
|||
<div> |
|||
<h1 className="text-2xl font-bold">设备运行时详情</h1> |
|||
<p className="text-muted-foreground">设备编号: {deviceRuntime.deviceCode}</p> |
|||
</div> |
|||
</div> |
|||
<Button |
|||
variant="outline" |
|||
size="sm" |
|||
onClick={() => fetchDeviceRuntimeStatus(true)} |
|||
disabled={refreshing} |
|||
> |
|||
<ReloadIcon className={cn("h-4 w-4 mr-2", refreshing && "animate-spin")} /> |
|||
{refreshing ? '刷新中...' : '刷新'} |
|||
</Button> |
|||
</div> |
|||
|
|||
{/* 状态概览卡片 */} |
|||
<Card> |
|||
<CardHeader> |
|||
<CardTitle className="flex items-center justify-between"> |
|||
<span>运行时状态</span> |
|||
<Badge |
|||
variant={statusInfo.color === 'success' ? 'default' : |
|||
statusInfo.color === 'warning' ? 'secondary' : |
|||
statusInfo.color === 'error' ? 'destructive' : 'outline'} |
|||
className={cn( |
|||
statusInfo.color === 'success' && 'bg-green-100 text-green-800 hover:bg-green-100', |
|||
statusInfo.color === 'warning' && 'bg-orange-100 text-orange-800 hover:bg-orange-100', |
|||
statusInfo.color === 'error' && 'bg-red-100 text-red-800 hover:bg-red-100' |
|||
)} |
|||
> |
|||
{statusInfo.description} |
|||
</Badge> |
|||
</CardTitle> |
|||
</CardHeader> |
|||
<CardContent> |
|||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|||
<div className="space-y-2"> |
|||
<div className="text-sm font-medium text-muted-foreground">设备编号</div> |
|||
<div className="text-lg font-semibold">{deviceRuntime.deviceCode}</div> |
|||
</div> |
|||
<div className="space-y-2"> |
|||
<div className="text-sm font-medium text-muted-foreground">运行编码</div> |
|||
<div className="text-lg font-mono"> |
|||
{deviceRuntime.runtimeCode || '-'} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</CardContent> |
|||
</Card> |
|||
|
|||
{/* 详细信息卡片 */} |
|||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6"> |
|||
{/* 网络配置信息 */} |
|||
<Card> |
|||
<CardHeader> |
|||
<CardTitle>网络配置</CardTitle> |
|||
</CardHeader> |
|||
<CardContent className="space-y-4"> |
|||
<div className="space-y-2"> |
|||
<div className="text-sm font-medium text-muted-foreground">网络栈配置编号</div> |
|||
<div className="text-base"> |
|||
{deviceRuntime.networkStackCode || '-'} |
|||
</div> |
|||
</div> |
|||
<Separator /> |
|||
<div className="space-y-2"> |
|||
<div className="text-sm font-medium text-muted-foreground">运行时状态</div> |
|||
<div className="text-base"> |
|||
<Badge |
|||
variant={statusInfo.color === 'success' ? 'default' : |
|||
statusInfo.color === 'warning' ? 'secondary' : |
|||
statusInfo.color === 'error' ? 'destructive' : 'outline'} |
|||
className={cn( |
|||
statusInfo.color === 'success' && 'bg-green-100 text-green-800 hover:bg-green-100', |
|||
statusInfo.color === 'warning' && 'bg-orange-100 text-orange-800 hover:bg-orange-100', |
|||
statusInfo.color === 'error' && 'bg-red-100 text-red-800 hover:bg-red-100' |
|||
)} |
|||
> |
|||
{statusInfo.description} |
|||
</Badge> |
|||
</div> |
|||
</div> |
|||
</CardContent> |
|||
</Card> |
|||
|
|||
{/* 时间信息 */} |
|||
<Card> |
|||
<CardHeader> |
|||
<CardTitle>时间信息</CardTitle> |
|||
</CardHeader> |
|||
<CardContent className="space-y-4"> |
|||
<div className="space-y-2"> |
|||
<div className="text-sm font-medium text-muted-foreground">最后更新时间</div> |
|||
<div className="text-base"> |
|||
{deviceRuntime.updatedAt ? formatDateTime(deviceRuntime.updatedAt) : '-'} |
|||
</div> |
|||
</div> |
|||
<Separator /> |
|||
<div className="space-y-2"> |
|||
<div className="text-sm font-medium text-muted-foreground">状态持续时间</div> |
|||
<div className="text-base"> |
|||
{deviceRuntime.updatedAt ? ( |
|||
<span> |
|||
{(() => { |
|||
const now = new Date(); |
|||
const updatedAt = new Date(deviceRuntime.updatedAt); |
|||
const diffMs = now.getTime() - updatedAt.getTime(); |
|||
const diffHours = Math.floor(diffMs / (1000 * 60 * 60)); |
|||
const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60)); |
|||
|
|||
if (diffHours > 0) { |
|||
return `${diffHours}小时${diffMinutes}分钟`; |
|||
} else { |
|||
return `${diffMinutes}分钟`; |
|||
} |
|||
})()} |
|||
</span> |
|||
) : '-'} |
|||
</div> |
|||
</div> |
|||
</CardContent> |
|||
</Card> |
|||
</div> |
|||
|
|||
{/* 操作按钮 */} |
|||
<Card> |
|||
<CardHeader> |
|||
<CardTitle>操作</CardTitle> |
|||
</CardHeader> |
|||
<CardContent> |
|||
<div className="flex items-center space-x-4"> |
|||
<Button |
|||
variant="outline" |
|||
onClick={() => navigate('/device-runtimes')} |
|||
> |
|||
返回列表 |
|||
</Button> |
|||
<Button |
|||
variant="outline" |
|||
onClick={() => fetchDeviceRuntimeStatus(true)} |
|||
disabled={refreshing} |
|||
> |
|||
<ReloadIcon className={cn("h-4 w-4 mr-2", refreshing && "animate-spin")} /> |
|||
{refreshing ? '刷新中...' : '刷新状态'} |
|||
</Button> |
|||
</div> |
|||
</CardContent> |
|||
</Card> |
|||
</div> |
|||
); |
|||
} |
|||
@ -0,0 +1,209 @@ |
|||
import React from 'react'; |
|||
import { DeviceRuntime } from '@/services/deviceRuntimeService'; |
|||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; |
|||
import { Button } from '@/components/ui/button'; |
|||
import { Badge } from '@/components/ui/badge'; |
|||
import { Checkbox } from '@/components/ui/checkbox'; |
|||
import { |
|||
DropdownMenu, |
|||
DropdownMenuContent, |
|||
DropdownMenuItem, |
|||
DropdownMenuTrigger |
|||
} from '@/components/ui/dropdown-menu'; |
|||
import { MoreHorizontalIcon, PlayIcon, StopIcon } from '@radix-ui/react-icons'; |
|||
import { format } from 'date-fns'; |
|||
import { cn } from '@/lib/utils'; |
|||
|
|||
interface DeviceRuntimesTableProps { |
|||
deviceRuntimes: DeviceRuntime[]; |
|||
loading: boolean; |
|||
columns: { key: string; title: string; visible: boolean }[]; |
|||
density: 'compact' | 'default' | 'comfortable'; |
|||
selectedDevices: string[]; |
|||
onDeviceSelect: (deviceCode: string, checked: boolean) => void; |
|||
onSelectAll: (checked: boolean) => void; |
|||
onStopDevice: (deviceCode: string) => void; |
|||
getRuntimeStatusDescription: (status: number | string) => string; |
|||
getRuntimeStatusColor: (status: number | string) => string; |
|||
} |
|||
|
|||
export default function DeviceRuntimesTable({ |
|||
deviceRuntimes, |
|||
loading, |
|||
columns, |
|||
density, |
|||
selectedDevices, |
|||
onDeviceSelect, |
|||
onSelectAll, |
|||
onStopDevice, |
|||
getRuntimeStatusDescription, |
|||
getRuntimeStatusColor, |
|||
}: DeviceRuntimesTableProps) { |
|||
// 密度样式映射
|
|||
const densityStyles = { |
|||
compact: 'py-1', |
|||
default: 'py-2', |
|||
comfortable: 'py-3', |
|||
}; |
|||
|
|||
// 格式化时间
|
|||
const formatDateTime = (dateString: string) => { |
|||
try { |
|||
return format(new Date(dateString), 'yyyy-MM-dd HH:mm:ss'); |
|||
} catch { |
|||
return dateString; |
|||
} |
|||
}; |
|||
|
|||
// 渲染单元格内容
|
|||
const renderCell = (device: DeviceRuntime, columnKey: string) => { |
|||
switch (columnKey) { |
|||
case 'deviceCode': |
|||
return ( |
|||
<div className="font-medium"> |
|||
{device.deviceCode} |
|||
</div> |
|||
); |
|||
|
|||
case 'name': |
|||
return ( |
|||
<div className="text-sm text-muted-foreground"> |
|||
{device.name || '-'} |
|||
</div> |
|||
); |
|||
|
|||
case 'runtimeStatus': |
|||
const statusDescription = getRuntimeStatusDescription(device.runtimeStatus); |
|||
const statusColor = getRuntimeStatusColor(device.runtimeStatus); |
|||
return ( |
|||
<Badge |
|||
variant={statusColor === 'success' ? 'default' : |
|||
statusColor === 'warning' ? 'secondary' : |
|||
statusColor === 'error' ? 'destructive' : 'outline'} |
|||
className={cn( |
|||
statusColor === 'success' && 'bg-green-100 text-green-800 hover:bg-green-100', |
|||
statusColor === 'warning' && 'bg-orange-100 text-orange-800 hover:bg-orange-100', |
|||
statusColor === 'error' && 'bg-red-100 text-red-800 hover:bg-red-100' |
|||
)} |
|||
> |
|||
{statusDescription} |
|||
</Badge> |
|||
); |
|||
|
|||
case 'networkStackCode': |
|||
return ( |
|||
<div className="text-sm"> |
|||
{device.networkStackCode || '-'} |
|||
</div> |
|||
); |
|||
|
|||
case 'createdAt': |
|||
return ( |
|||
<div className="text-sm text-muted-foreground"> |
|||
{formatDateTime(device.createdAt)} |
|||
</div> |
|||
); |
|||
|
|||
case 'actions': |
|||
return ( |
|||
<DropdownMenu> |
|||
<DropdownMenuTrigger asChild> |
|||
<Button variant="ghost" size="sm"> |
|||
<MoreHorizontalIcon className="h-4 w-4" /> |
|||
<span className="sr-only">操作菜单</span> |
|||
</Button> |
|||
</DropdownMenuTrigger> |
|||
<DropdownMenuContent align="end"> |
|||
{device.runtimeStatus === 1 && ( |
|||
<DropdownMenuItem |
|||
onClick={() => onStopDevice(device.deviceCode)} |
|||
className="text-red-600 focus:text-red-600" |
|||
> |
|||
<StopIcon className="h-4 w-4 mr-2" /> |
|||
停止设备 |
|||
</DropdownMenuItem> |
|||
)} |
|||
{device.runtimeStatus !== 1 && ( |
|||
<DropdownMenuItem disabled className="text-muted-foreground"> |
|||
<PlayIcon className="h-4 w-4 mr-2" /> |
|||
设备未运行 |
|||
</DropdownMenuItem> |
|||
)} |
|||
</DropdownMenuContent> |
|||
</DropdownMenu> |
|||
); |
|||
|
|||
default: |
|||
return null; |
|||
} |
|||
}; |
|||
|
|||
// 过滤可见列
|
|||
const visibleColumns = columns.filter(col => col.visible); |
|||
|
|||
return ( |
|||
<div className="rounded-md border"> |
|||
<Table> |
|||
<TableHeader> |
|||
<TableRow> |
|||
{/* 选择框列 */} |
|||
<TableHead className="w-12"> |
|||
<Checkbox |
|||
checked={selectedDevices.length === deviceRuntimes.length && deviceRuntimes.length > 0} |
|||
onCheckedChange={onSelectAll} |
|||
aria-label="全选" |
|||
/> |
|||
</TableHead> |
|||
|
|||
{/* 动态列 */} |
|||
{visibleColumns.map((column) => ( |
|||
<TableHead key={column.key} className={cn(densityStyles[density])}> |
|||
{column.title} |
|||
</TableHead> |
|||
))} |
|||
</TableRow> |
|||
</TableHeader> |
|||
<TableBody> |
|||
{loading ? ( |
|||
<TableRow> |
|||
<TableCell colSpan={visibleColumns.length + 1} 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> |
|||
) : deviceRuntimes.length === 0 ? ( |
|||
<TableRow> |
|||
<TableCell colSpan={visibleColumns.length + 1} className="text-center py-8"> |
|||
<div className="text-muted-foreground"> |
|||
暂无设备运行时数据 |
|||
</div> |
|||
</TableCell> |
|||
</TableRow> |
|||
) : ( |
|||
deviceRuntimes.map((device) => ( |
|||
<TableRow key={device.deviceCode}> |
|||
{/* 选择框 */} |
|||
<TableCell className="w-12"> |
|||
<Checkbox |
|||
checked={selectedDevices.includes(device.deviceCode)} |
|||
onCheckedChange={(checked) => onDeviceSelect(device.deviceCode, checked as boolean)} |
|||
aria-label={`选择设备 ${device.deviceCode}`} |
|||
/> |
|||
</TableCell> |
|||
|
|||
{/* 动态单元格 */} |
|||
{visibleColumns.map((column) => ( |
|||
<TableCell key={column.key} className={cn(densityStyles[density])}> |
|||
{renderCell(device, column.key)} |
|||
</TableCell> |
|||
))} |
|||
</TableRow> |
|||
)) |
|||
)} |
|||
</TableBody> |
|||
</Table> |
|||
</div> |
|||
); |
|||
} |
|||
@ -0,0 +1,507 @@ |
|||
import React, { useState, useEffect } from 'react'; |
|||
import { |
|||
getDeviceRuntimes, |
|||
DeviceRuntime, |
|||
GetDeviceRuntimesRequest, |
|||
startDevices, |
|||
stopDevice, |
|||
StartDeviceRequest, |
|||
deviceRuntimeService |
|||
} from '@/services/deviceRuntimeService'; |
|||
import DeviceRuntimesTable from './DeviceRuntimesTable'; |
|||
import { Input } from '@/components/ui/input'; |
|||
import PaginationBar from '@/components/ui/PaginationBar'; |
|||
import TableToolbar, { DensityType } from '@/components/ui/TableToolbar'; |
|||
import { Button } from '@/components/ui/button'; |
|||
import { ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons'; |
|||
import { useToast } from '@/components/ui/use-toast'; |
|||
import { Badge } from '@/components/ui/badge'; |
|||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; |
|||
import { |
|||
Dialog, |
|||
DialogContent, |
|||
DialogHeader, |
|||
DialogTitle, |
|||
DialogTrigger |
|||
} from '@/components/ui/dialog'; |
|||
import { Label } from '@/components/ui/label'; |
|||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; |
|||
import { Checkbox } from '@/components/ui/checkbox'; |
|||
|
|||
const defaultColumns = [ |
|||
{ key: 'deviceCode', title: '设备编号', visible: true }, |
|||
{ key: 'name', title: '设备名称', visible: true }, |
|||
{ key: 'runtimeStatus', title: '运行时状态', visible: true }, |
|||
{ key: 'networkStackCode', title: '网络栈配置', visible: true }, |
|||
{ key: 'createdAt', title: '创建时间', visible: true }, |
|||
{ key: 'actions', title: '操作', visible: true }, |
|||
]; |
|||
|
|||
// 字段类型声明
|
|||
type SearchField = |
|||
| { key: string; label: string; type: 'input'; placeholder: string } |
|||
| { key: string; label: string; type: 'select'; options: { value: string; label: string }[] }; |
|||
|
|||
// 第一行字段（收起时只显示这3个）
|
|||
const firstRowFields: SearchField[] = [ |
|||
{ key: 'searchTerm', label: '搜索关键词', type: 'input', placeholder: '请输入设备编号或设备名称' }, |
|||
{ key: 'runtimeStatus', label: '运行时状态', type: 'select', options: [ |
|||
{ value: '', label: '全部状态' }, |
|||
{ value: '0', label: '初始化' }, |
|||
{ value: '1', label: '运行中' }, |
|||
{ value: '2', label: '已停止' }, |
|||
{ value: '3', label: '错误' }, |
|||
] }, |
|||
]; |
|||
|
|||
// 高级字段（展开时才显示）
|
|||
const advancedFields: SearchField[] = [ |
|||
{ key: 'pageSize', label: '每页数量', type: 'select', options: [ |
|||
{ value: '10', label: '10条/页' }, |
|||
{ value: '20', label: '20条/页' }, |
|||
{ value: '50', label: '50条/页' }, |
|||
{ value: '100', label: '100条/页' }, |
|||
] }, |
|||
]; |
|||
|
|||
/** |
|||
* 设备运行时管理页面 |
|||
* |
|||
* 表格字段映射关系（基于后端DeviceRuntimeDto）： |
|||
* - deviceCode: 设备编号 |
|||
* - name: 设备名称 |
|||
* - runtimeStatus: 运行时状态（0:初始化, 1:运行中, 2:已停止, 3:错误） |
|||
* - networkStackCode: 网络栈配置编号 |
|||
* - createdAt: 创建时间 |
|||
*/ |
|||
|
|||
export default function DeviceRuntimesView() { |
|||
const [deviceRuntimes, setDeviceRuntimes] = useState<DeviceRuntime[]>([]); |
|||
const [loading, setLoading] = useState(false); |
|||
const [total, setTotal] = useState(0); |
|||
const [pageNumber, setPageNumber] = useState(1); |
|||
const [pageSize, setPageSize] = useState(10); |
|||
const [density, setDensity] = useState<DensityType>('default'); |
|||
const [columns, setColumns] = useState(defaultColumns); |
|||
const [showAdvanced, setShowAdvanced] = useState(false); |
|||
|
|||
// 搜索参数
|
|||
const [searchTerm, setSearchTerm] = useState(''); |
|||
const [runtimeStatus, setRuntimeStatus] = useState<number | undefined>(undefined); |
|||
|
|||
// 批量操作状态
|
|||
const [selectedDevices, setSelectedDevices] = useState<string[]>([]); |
|||
const [startDialogOpen, setStartDialogOpen] = useState(false); |
|||
const [networkStackCode, setNetworkStackCode] = useState(''); |
|||
const [isSubmitting, setIsSubmitting] = useState(false); |
|||
|
|||
// Toast 提示
|
|||
const { toast } = useToast(); |
|||
|
|||
// 获取设备运行时状态列表
|
|||
const fetchDeviceRuntimes = async (params: Partial<GetDeviceRuntimesRequest> = {}) => { |
|||
setLoading(true); |
|||
try { |
|||
const result = await getDeviceRuntimes({ |
|||
pageNumber: params.pageNumber || pageNumber, |
|||
pageSize: params.pageSize || pageSize, |
|||
searchTerm: params.searchTerm !== undefined ? params.searchTerm : searchTerm, |
|||
runtimeStatus: params.runtimeStatus !== undefined ? params.runtimeStatus : runtimeStatus, |
|||
}); |
|||
|
|||
if (result.isSuccess && result.data) { |
|||
setDeviceRuntimes(result.data.items); |
|||
setTotal(result.data.totalCount); |
|||
if (params.pageNumber) setPageNumber(params.pageNumber); |
|||
if (params.pageSize) setPageSize(params.pageSize); |
|||
} else { |
|||
toast({ |
|||
title: '获取设备运行时状态失败', |
|||
description: result.errorMessages?.join(', ') || '未知错误', |
|||
variant: 'destructive', |
|||
}); |
|||
} |
|||
} catch (error) { |
|||
console.error('获取设备运行时状态失败:', error); |
|||
toast({ |
|||
title: '获取设备运行时状态失败', |
|||
description: '网络错误或服务器异常', |
|||
variant: 'destructive', |
|||
}); |
|||
} finally { |
|||
setLoading(false); |
|||
} |
|||
}; |
|||
|
|||
// 启动设备
|
|||
const handleStartDevices = async () => { |
|||
if (!networkStackCode.trim()) { |
|||
toast({ |
|||
title: '网络栈配置不能为空', |
|||
description: '请选择网络栈配置', |
|||
variant: 'destructive', |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
if (selectedDevices.length === 0) { |
|||
toast({ |
|||
title: '请选择要启动的设备', |
|||
description: '请至少选择一个设备', |
|||
variant: 'destructive', |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
setIsSubmitting(true); |
|||
try { |
|||
const deviceRequests: StartDeviceRequest[] = selectedDevices.map(deviceCode => ({ |
|||
deviceCode, |
|||
networkStackCode: networkStackCode.trim() |
|||
})); |
|||
|
|||
const result = await startDevices(deviceRequests); |
|||
|
|||
if (result.isSuccess && result.data) { |
|||
const { summary } = result.data; |
|||
toast({ |
|||
title: '设备启动完成', |
|||
description: `总数: ${summary?.totalCount}, 成功: ${summary?.successCount}, 失败: ${summary?.failureCount}`, |
|||
variant: summary?.failureCount === 0 ? 'default' : 'destructive', |
|||
}); |
|||
|
|||
// 刷新列表
|
|||
fetchDeviceRuntimes(); |
|||
setStartDialogOpen(false); |
|||
setSelectedDevices([]); |
|||
setNetworkStackCode(''); |
|||
} else { |
|||
toast({ |
|||
title: '设备启动失败', |
|||
description: result.errorMessages?.join(', ') || '未知错误', |
|||
variant: 'destructive', |
|||
}); |
|||
} |
|||
} catch (error) { |
|||
console.error('设备启动失败:', error); |
|||
toast({ |
|||
title: '设备启动失败', |
|||
description: '网络错误或服务器异常', |
|||
variant: 'destructive', |
|||
}); |
|||
} finally { |
|||
setIsSubmitting(false); |
|||
} |
|||
}; |
|||
|
|||
// 停止设备
|
|||
const handleStopDevice = async (deviceCode: string) => { |
|||
try { |
|||
const result = await stopDevice(deviceCode); |
|||
|
|||
if (result.isSuccess) { |
|||
toast({ |
|||
title: '设备停止成功', |
|||
description: `设备 ${deviceCode} 已停止`, |
|||
}); |
|||
// 刷新列表
|
|||
fetchDeviceRuntimes(); |
|||
} else { |
|||
toast({ |
|||
title: '设备停止失败', |
|||
description: result.errorMessages?.join(', ') || '未知错误', |
|||
variant: 'destructive', |
|||
}); |
|||
} |
|||
} catch (error) { |
|||
console.error('设备停止失败:', error); |
|||
toast({ |
|||
title: '设备停止失败', |
|||
description: '网络错误或服务器异常', |
|||
variant: 'destructive', |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
// 处理设备选择
|
|||
const handleDeviceSelect = (deviceCode: string, checked: boolean) => { |
|||
if (checked) { |
|||
setSelectedDevices(prev => [...prev, deviceCode]); |
|||
} else { |
|||
setSelectedDevices(prev => prev.filter(code => code !== deviceCode)); |
|||
} |
|||
}; |
|||
|
|||
// 处理全选
|
|||
const handleSelectAll = (checked: boolean) => { |
|||
if (checked) { |
|||
setSelectedDevices(deviceRuntimes.map(device => device.deviceCode)); |
|||
} else { |
|||
setSelectedDevices([]); |
|||
} |
|||
}; |
|||
|
|||
// 查询
|
|||
const handleQuery = () => { |
|||
fetchDeviceRuntimes({ pageNumber: 1 }); |
|||
}; |
|||
|
|||
// 重置
|
|||
const handleReset = () => { |
|||
setSearchTerm(''); |
|||
setRuntimeStatus(undefined); |
|||
setSelectedDevices([]); |
|||
fetchDeviceRuntimes({ |
|||
pageNumber: 1, |
|||
searchTerm: '', |
|||
runtimeStatus: undefined |
|||
}); |
|||
}; |
|||
|
|||
// 页码变化
|
|||
const handlePageChange = (page: number) => { |
|||
fetchDeviceRuntimes({ pageNumber: page }); |
|||
}; |
|||
|
|||
// 每页数量变化
|
|||
const handlePageSizeChange = (size: number) => { |
|||
fetchDeviceRuntimes({ pageNumber: 1, pageSize: size }); |
|||
}; |
|||
|
|||
// 初始化加载
|
|||
useEffect(() => { |
|||
fetchDeviceRuntimes(); |
|||
}, []); |
|||
|
|||
// 统计信息
|
|||
const runningCount = deviceRuntimes.filter(d => d.runtimeStatus === 1).length; |
|||
const stoppedCount = deviceRuntimes.filter(d => d.runtimeStatus === 2).length; |
|||
const errorCount = deviceRuntimes.filter(d => d.runtimeStatus === 3).length; |
|||
|
|||
return ( |
|||
<div className="space-y-6"> |
|||
{/* 页面标题 */} |
|||
<div className="flex items-center justify-between"> |
|||
<div> |
|||
<h1 className="text-2xl font-bold">设备运行时管理</h1> |
|||
<p className="text-muted-foreground">管理设备的运行时状态，包括启动、停止和状态监控</p> |
|||
</div> |
|||
</div> |
|||
|
|||
{/* 统计卡片 */} |
|||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4"> |
|||
<Card> |
|||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> |
|||
<CardTitle className="text-sm font-medium">总设备数</CardTitle> |
|||
</CardHeader> |
|||
<CardContent> |
|||
<div className="text-2xl font-bold">{total}</div> |
|||
</CardContent> |
|||
</Card> |
|||
<Card> |
|||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> |
|||
<CardTitle className="text-sm font-medium">运行中</CardTitle> |
|||
</CardHeader> |
|||
<CardContent> |
|||
<div className="text-2xl font-bold text-green-600">{runningCount}</div> |
|||
</CardContent> |
|||
</Card> |
|||
<Card> |
|||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> |
|||
<CardTitle className="text-sm font-medium">已停止</CardTitle> |
|||
</CardHeader> |
|||
<CardContent> |
|||
<div className="text-2xl font-bold text-orange-600">{stoppedCount}</div> |
|||
</CardContent> |
|||
</Card> |
|||
<Card> |
|||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> |
|||
<CardTitle className="text-sm font-medium">错误状态</CardTitle> |
|||
</CardHeader> |
|||
<CardContent> |
|||
<div className="text-2xl font-bold text-red-600">{errorCount}</div> |
|||
</CardContent> |
|||
</Card> |
|||
</div> |
|||
|
|||
{/* 搜索工具栏 */} |
|||
<Card> |
|||
<CardHeader> |
|||
<CardTitle className="text-lg">搜索条件</CardTitle> |
|||
</CardHeader> |
|||
<CardContent> |
|||
<div className="space-y-4"> |
|||
{/* 第一行搜索字段 */} |
|||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|||
<div className="space-y-2"> |
|||
<Label htmlFor="searchTerm">搜索关键词</Label> |
|||
<Input |
|||
id="searchTerm" |
|||
placeholder="请输入设备编号或设备名称" |
|||
value={searchTerm} |
|||
onChange={(e) => setSearchTerm(e.target.value)} |
|||
/> |
|||
</div> |
|||
<div className="space-y-2"> |
|||
<Label htmlFor="runtimeStatus">运行时状态</Label> |
|||
<Select |
|||
value={runtimeStatus?.toString() || ''} |
|||
onValueChange={(value) => setRuntimeStatus(value ? parseInt(value) : undefined)} |
|||
> |
|||
<SelectTrigger> |
|||
<SelectValue placeholder="请选择状态" /> |
|||
</SelectTrigger> |
|||
<SelectContent> |
|||
<SelectItem value="">全部状态</SelectItem> |
|||
<SelectItem value="0">初始化</SelectItem> |
|||
<SelectItem value="1">运行中</SelectItem> |
|||
<SelectItem value="2">已停止</SelectItem> |
|||
<SelectItem value="3">错误</SelectItem> |
|||
</SelectContent> |
|||
</Select> |
|||
</div> |
|||
</div> |
|||
|
|||
{/* 高级搜索字段 */} |
|||
{showAdvanced && ( |
|||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|||
<div className="space-y-2"> |
|||
<Label htmlFor="pageSize">每页数量</Label> |
|||
<Select |
|||
value={pageSize.toString()} |
|||
onValueChange={(value) => handlePageSizeChange(parseInt(value))} |
|||
> |
|||
<SelectTrigger> |
|||
<SelectValue /> |
|||
</SelectTrigger> |
|||
<SelectContent> |
|||
<SelectItem value="10">10条/页</SelectItem> |
|||
<SelectItem value="20">20条/页</SelectItem> |
|||
<SelectItem value="50">50条/页</SelectItem> |
|||
<SelectItem value="100">100条/页</SelectItem> |
|||
</SelectContent> |
|||
</Select> |
|||
</div> |
|||
</div> |
|||
)} |
|||
|
|||
{/* 操作按钮 */} |
|||
<div className="flex items-center justify-between"> |
|||
<div className="flex items-center space-x-2"> |
|||
<Button onClick={handleQuery} disabled={loading}> |
|||
查询 |
|||
</Button> |
|||
<Button variant="outline" onClick={handleReset} disabled={loading}> |
|||
重置 |
|||
</Button> |
|||
<Button |
|||
variant="ghost" |
|||
size="sm" |
|||
onClick={() => setShowAdvanced(!showAdvanced)} |
|||
> |
|||
{showAdvanced ? ( |
|||
<> |
|||
<ChevronUpIcon className="h-4 w-4 mr-1" /> |
|||
收起高级 |
|||
</> |
|||
) : ( |
|||
<> |
|||
<ChevronDownIcon className="h-4 w-4 mr-1" /> |
|||
展开高级 |
|||
</> |
|||
)} |
|||
</Button> |
|||
</div> |
|||
|
|||
{/* 批量操作按钮 */} |
|||
<div className="flex items-center space-x-2"> |
|||
<Dialog open={startDialogOpen} onOpenChange={setStartDialogOpen}> |
|||
<DialogTrigger asChild> |
|||
<Button |
|||
disabled={selectedDevices.length === 0} |
|||
className="bg-green-600 hover:bg-green-700" |
|||
> |
|||
批量启动 ({selectedDevices.length}) |
|||
</Button> |
|||
</DialogTrigger> |
|||
<DialogContent> |
|||
<DialogHeader> |
|||
<DialogTitle>批量启动设备</DialogTitle> |
|||
</DialogHeader> |
|||
<div className="space-y-4"> |
|||
<div className="space-y-2"> |
|||
<Label htmlFor="networkStackCode">网络栈配置编号</Label> |
|||
<Input |
|||
id="networkStackCode" |
|||
placeholder="请输入网络栈配置编号" |
|||
value={networkStackCode} |
|||
onChange={(e) => setNetworkStackCode(e.target.value)} |
|||
/> |
|||
</div> |
|||
<div className="space-y-2"> |
|||
<Label>选中的设备 ({selectedDevices.length} 个)</Label> |
|||
<div className="max-h-32 overflow-y-auto space-y-1"> |
|||
{selectedDevices.map(deviceCode => ( |
|||
<Badge key={deviceCode} variant="secondary" className="mr-1"> |
|||
{deviceCode} |
|||
</Badge> |
|||
))} |
|||
</div> |
|||
</div> |
|||
<div className="flex justify-end space-x-2"> |
|||
<Button variant="outline" onClick={() => setStartDialogOpen(false)}> |
|||
取消 |
|||
</Button> |
|||
<Button |
|||
onClick={handleStartDevices} |
|||
disabled={isSubmitting || !networkStackCode.trim()} |
|||
className="bg-green-600 hover:bg-green-700" |
|||
> |
|||
{isSubmitting ? '启动中...' : '确认启动'} |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
</DialogContent> |
|||
</Dialog> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</CardContent> |
|||
</Card> |
|||
|
|||
{/* 表格工具栏 */} |
|||
<TableToolbar |
|||
density={density} |
|||
onDensityChange={setDensity} |
|||
columns={columns} |
|||
onColumnsChange={setColumns} |
|||
selectedCount={selectedDevices.length} |
|||
totalCount={deviceRuntimes.length} |
|||
/> |
|||
|
|||
{/* 设备运行时表格 */} |
|||
<DeviceRuntimesTable |
|||
deviceRuntimes={deviceRuntimes} |
|||
loading={loading} |
|||
columns={columns} |
|||
density={density} |
|||
selectedDevices={selectedDevices} |
|||
onDeviceSelect={handleDeviceSelect} |
|||
onSelectAll={handleSelectAll} |
|||
onStopDevice={handleStopDevice} |
|||
getRuntimeStatusDescription={deviceRuntimeService.getRuntimeStatusDescription} |
|||
getRuntimeStatusColor={deviceRuntimeService.getRuntimeStatusColor} |
|||
/> |
|||
|
|||
{/* 分页 */} |
|||
<PaginationBar |
|||
currentPage={pageNumber} |
|||
totalPages={Math.ceil(total / pageSize)} |
|||
totalItems={total} |
|||
pageSize={pageSize} |
|||
onPageChange={handlePageChange} |
|||
onPageSizeChange={handlePageSizeChange} |
|||
/> |
|||
</div> |
|||
); |
|||
} |
|||
@ -0,0 +1,178 @@ |
|||
import { httpClient } from '@/lib/http-client'; |
|||
import { OperationResult } from '@/types/auth'; |
|||
import { API_PATHS } from '@/constants/api'; |
|||
|
|||
// 设备运行时状态枚举
|
|||
export enum DeviceRuntimeStatus { |
|||
Running = 'Running', |
|||
Stopped = 'Stopped', |
|||
Error = 'Error', |
|||
Unknown = 'Unknown' |
|||
} |
|||
|
|||
// 设备运行时信息接口 - 对应 DeviceRuntimeDto
|
|||
export interface DeviceRuntime { |
|||
deviceCode: string; |
|||
runtimeStatus: number; // 对应后端的 int 类型
|
|||
networkStackCode?: string; |
|||
name?: string; // 对应后端的 Name 字段
|
|||
createdAt: string; // 对应后端的 DateTime
|
|||
} |
|||
|
|||
// 获取设备运行时列表请求接口 - 对应 GetDeviceRuntimesQuery
|
|||
export interface GetDeviceRuntimesRequest { |
|||
pageNumber?: number; |
|||
pageSize?: number; |
|||
searchTerm?: string; |
|||
runtimeStatus?: number; // 对应后端的 int 类型
|
|||
} |
|||
|
|||
// 获取设备运行时列表响应接口 - 对应 GetDeviceRuntimesResponse
|
|||
export interface GetDeviceRuntimesResponse { |
|||
totalCount: number; |
|||
pageNumber: number; |
|||
pageSize: number; |
|||
totalPages: number; |
|||
items: DeviceRuntime[]; // 对应后端的 Items 字段
|
|||
} |
|||
|
|||
// 获取设备运行时状态响应接口 - 对应 GetDeviceRuntimeStatusResponse
|
|||
export interface GetDeviceRuntimeStatusResponse { |
|||
deviceCode: string; |
|||
runtimeStatus: string; // 对应后端的 string 类型
|
|||
runtimeCode?: string; |
|||
networkStackCode?: string; |
|||
updatedAt?: string; // 对应后端的 DateTime
|
|||
} |
|||
|
|||
// 启动设备请求接口 - 对应 DeviceStartRequest
|
|||
export interface StartDeviceRequest { |
|||
deviceCode: string; |
|||
networkStackCode: string; // 必填字段
|
|||
} |
|||
|
|||
// 启动设备响应接口 - 对应 StartDeviceRuntimeResponse
|
|||
export interface StartDeviceRuntimeResponse { |
|||
id?: string; |
|||
deviceCode?: string; |
|||
runtimeStatus?: string; |
|||
networkStackCode?: string; |
|||
updatedAt: string; // 对应后端的 DateTime
|
|||
deviceResults?: DeviceStartResult[]; // 对应后端的 DeviceResults
|
|||
summary?: BatchOperationSummary; // 对应后端的 Summary
|
|||
} |
|||
|
|||
// 设备启动结果 - 对应 DeviceStartResult
|
|||
export interface DeviceStartResult { |
|||
deviceCode: string; |
|||
id: string; |
|||
runtimeStatus: string; |
|||
networkStackCode?: string; |
|||
updatedAt: string; // 对应后端的 DateTime
|
|||
isSuccess: boolean; |
|||
errorMessage?: string; |
|||
} |
|||
|
|||
// 批量操作统计 - 对应 BatchOperationSummary
|
|||
export interface BatchOperationSummary { |
|||
totalCount: number; |
|||
successCount: number; |
|||
failureCount: number; |
|||
successRate: number; // 对应后端的计算属性
|
|||
} |
|||
|
|||
// 停止设备响应接口 - 对应 StopDeviceRuntimeResponse
|
|||
export interface StopDeviceRuntimeResponse { |
|||
id: string; |
|||
deviceCode: string; |
|||
runtimeStatus: string; |
|||
runtimeCode?: string; |
|||
networkStackCode?: string; |
|||
updatedAt: string; // 对应后端的 DateTime
|
|||
} |
|||
|
|||
class DeviceRuntimeService { |
|||
private readonly baseUrl = API_PATHS.DEVICE_RUNTIMES; |
|||
|
|||
// 获取设备运行时状态列表
|
|||
async getDeviceRuntimes(params: GetDeviceRuntimesRequest = {}): Promise<OperationResult<GetDeviceRuntimesResponse>> { |
|||
const queryParams = new URLSearchParams(); |
|||
|
|||
if (params.pageNumber) queryParams.append('pageNumber', params.pageNumber.toString()); |
|||
if (params.pageSize) queryParams.append('pageSize', params.pageSize.toString()); |
|||
if (params.searchTerm) queryParams.append('searchTerm', params.searchTerm); |
|||
if (params.runtimeStatus !== undefined) queryParams.append('runtimeStatus', params.runtimeStatus.toString()); |
|||
|
|||
const url = `${this.baseUrl}?${queryParams.toString()}`; |
|||
return httpClient.get<GetDeviceRuntimesResponse>(url); |
|||
} |
|||
|
|||
// 根据设备编号获取设备运行时状态
|
|||
async getDeviceRuntimeStatus(deviceCode: string): Promise<OperationResult<GetDeviceRuntimeStatusResponse>> { |
|||
return httpClient.get<GetDeviceRuntimeStatusResponse>(`${this.baseUrl}/${deviceCode}`); |
|||
} |
|||
|
|||
// 批量启动设备
|
|||
async startDevices(deviceRequests: StartDeviceRequest[]): Promise<OperationResult<StartDeviceRuntimeResponse>> { |
|||
return httpClient.post<StartDeviceRuntimeResponse>(`${this.baseUrl}/start`, { |
|||
deviceRequests |
|||
}); |
|||
} |
|||
|
|||
// 停止单个设备
|
|||
async stopDevice(deviceCode: string): Promise<OperationResult<StopDeviceRuntimeResponse>> { |
|||
return httpClient.post<StopDeviceRuntimeResponse>(`${this.baseUrl}/${deviceCode}/stop`); |
|||
} |
|||
|
|||
// 获取设备运行时状态的可读描述
|
|||
getRuntimeStatusDescription(status: number | string): string { |
|||
const statusStr = typeof status === 'number' ? this.getRuntimeStatusString(status) : status; |
|||
switch (statusStr) { |
|||
case 'Running': |
|||
return '运行中'; |
|||
case 'Stopped': |
|||
return '已停止'; |
|||
case 'Error': |
|||
return '错误'; |
|||
case 'Unknown': |
|||
return '未知'; |
|||
default: |
|||
return '未知状态'; |
|||
} |
|||
} |
|||
|
|||
// 获取设备运行时状态的颜色
|
|||
getRuntimeStatusColor(status: number | string): string { |
|||
const statusStr = typeof status === 'number' ? this.getRuntimeStatusString(status) : status; |
|||
switch (statusStr) { |
|||
case 'Running': |
|||
return 'success'; |
|||
case 'Stopped': |
|||
return 'warning'; |
|||
case 'Error': |
|||
return 'error'; |
|||
case 'Unknown': |
|||
return 'default'; |
|||
default: |
|||
return 'default'; |
|||
} |
|||
} |
|||
|
|||
// 将数字状态转换为字符串状态
|
|||
private getRuntimeStatusString(status: number): string { |
|||
switch (status) { |
|||
case 0: |
|||
return 'Initializing'; |
|||
case 1: |
|||
return 'Running'; |
|||
case 2: |
|||
return 'Stopped'; |
|||
case 3: |
|||
return 'Error'; |
|||
default: |
|||
return 'Unknown'; |
|||
} |
|||
} |
|||
} |
|||
|
|||
export const deviceRuntimeService = new DeviceRuntimeService(); |
|||
@ -0,0 +1,140 @@ |
|||
import { httpClient } from '@/lib/http-client'; |
|||
import { OperationResult } from '@/types/auth'; |
|||
import { API_PATHS } from '@/constants/api'; |
|||
|
|||
// 设备信息接口
|
|||
export interface Device { |
|||
deviceId: string; |
|||
deviceName: string; |
|||
deviceCode: string; |
|||
deviceType: string; |
|||
description?: string; |
|||
isActive: boolean; |
|||
createdAt: string; |
|||
updatedAt: string; |
|||
} |
|||
|
|||
// 获取设备列表请求接口
|
|||
export interface GetDevicesRequest { |
|||
pageNumber?: number; |
|||
pageSize?: number; |
|||
searchTerm?: string; |
|||
deviceType?: string; |
|||
isActive?: boolean; |
|||
} |
|||
|
|||
// 获取设备列表响应接口
|
|||
export interface GetDevicesResponse { |
|||
totalCount: number; |
|||
pageNumber: number; |
|||
pageSize: number; |
|||
totalPages: number; |
|||
hasPreviousPage: boolean; |
|||
hasNextPage: boolean; |
|||
items: Device[]; |
|||
} |
|||
|
|||
// 获取设备详情响应接口
|
|||
export interface GetDeviceByIdResponse { |
|||
deviceId: string; |
|||
deviceName: string; |
|||
deviceCode: string; |
|||
deviceType: string; |
|||
description?: string; |
|||
isActive: boolean; |
|||
createdAt: string; |
|||
updatedAt: string; |
|||
} |
|||
|
|||
// 创建设备请求接口
|
|||
export interface CreateDeviceRequest { |
|||
deviceName: string; |
|||
deviceCode: string; |
|||
deviceType: string; |
|||
description?: string; |
|||
isActive?: boolean; |
|||
} |
|||
|
|||
// 创建设备响应接口
|
|||
export interface CreateDeviceResponse { |
|||
deviceId: string; |
|||
deviceName: string; |
|||
deviceCode: string; |
|||
deviceType: string; |
|||
description?: string; |
|||
isActive: boolean; |
|||
createdAt: string; |
|||
updatedAt: string; |
|||
} |
|||
|
|||
// 更新设备请求接口
|
|||
export interface UpdateDeviceRequest { |
|||
deviceId: string; |
|||
deviceName: string; |
|||
deviceCode: string; |
|||
deviceType: string; |
|||
description?: string; |
|||
isActive?: boolean; |
|||
} |
|||
|
|||
// 更新设备响应接口
|
|||
export interface UpdateDeviceResponse { |
|||
deviceId: string; |
|||
deviceName: string; |
|||
deviceCode: string; |
|||
deviceType: string; |
|||
description?: string; |
|||
isActive: boolean; |
|||
createdAt: string; |
|||
updatedAt: string; |
|||
} |
|||
|
|||
class DeviceService { |
|||
private readonly baseUrl = API_PATHS.DEVICES; |
|||
|
|||
// 获取设备列表
|
|||
async getDevices(params: GetDevicesRequest = {}): Promise<OperationResult<GetDevicesResponse>> { |
|||
const queryParams = new URLSearchParams(); |
|||
|
|||
if (params.pageNumber) queryParams.append('pageNumber', params.pageNumber.toString()); |
|||
if (params.pageSize) queryParams.append('pageSize', params.pageSize.toString()); |
|||
if (params.searchTerm) queryParams.append('searchTerm', params.searchTerm); |
|||
if (params.deviceType) queryParams.append('deviceType', params.deviceType); |
|||
if (params.isActive !== undefined) queryParams.append('isActive', params.isActive.toString()); |
|||
|
|||
const url = `${this.baseUrl}?${queryParams.toString()}`; |
|||
return httpClient.get<GetDevicesResponse>(url); |
|||
} |
|||
|
|||
// 根据ID获取设备详情
|
|||
async getDeviceById(deviceId: string): Promise<OperationResult<GetDeviceByIdResponse>> { |
|||
return httpClient.get<GetDeviceByIdResponse>(`${this.baseUrl}/${deviceId}`); |
|||
} |
|||
|
|||
// 创建设备
|
|||
async createDevice(data: CreateDeviceRequest): Promise<OperationResult<CreateDeviceResponse>> { |
|||
return httpClient.post<CreateDeviceResponse>(this.baseUrl, data); |
|||
} |
|||
|
|||
// 更新设备
|
|||
async updateDevice(deviceId: string, data: UpdateDeviceRequest): Promise<OperationResult<UpdateDeviceResponse>> { |
|||
return httpClient.put<UpdateDeviceResponse>(`${this.baseUrl}/${deviceId}`, data); |
|||
} |
|||
|
|||
// 删除设备
|
|||
async deleteDevice(deviceId: string): Promise<OperationResult<boolean>> { |
|||
return httpClient.delete<boolean>(`${this.baseUrl}/${deviceId}`); |
|||
} |
|||
|
|||
// 获取设备状态的可读描述
|
|||
getDeviceStatusDescription(isActive: boolean): string { |
|||
return isActive ? '启用' : '禁用'; |
|||
} |
|||
|
|||
// 获取设备状态的颜色
|
|||
getDeviceStatusColor(isActive: boolean): string { |
|||
return isActive ? 'success' : 'error'; |
|||
} |
|||
} |
|||
|
|||
export const deviceService = new DeviceService(); |
|||
@ -0,0 +1,53 @@ |
|||
import { httpClient } from '@/lib/http-client'; |
|||
import { OperationResult } from '@/types/auth'; |
|||
import { API_PATHS } from '@/constants/api'; |
|||
|
|||
// 权限信息接口
|
|||
export interface Permission { |
|||
id: string; |
|||
name: string; |
|||
description?: string; |
|||
createdAt: string; |
|||
updatedAt: string; |
|||
} |
|||
|
|||
// 创建权限请求接口
|
|||
export interface CreatePermissionRequest { |
|||
name: string; |
|||
description?: string; |
|||
} |
|||
|
|||
// 创建权限响应接口
|
|||
export interface CreatePermissionResponse { |
|||
id: string; |
|||
name: string; |
|||
description?: string; |
|||
createdAt: string; |
|||
updatedAt: string; |
|||
} |
|||
|
|||
class PermissionService { |
|||
private readonly baseUrl = API_PATHS.PERMISSIONS; |
|||
|
|||
// 创建权限
|
|||
async createPermission(data: CreatePermissionRequest): Promise<OperationResult<CreatePermissionResponse>> { |
|||
return httpClient.post<CreatePermissionResponse>(this.baseUrl, data); |
|||
} |
|||
|
|||
// 获取权限列表（如果需要的话）
|
|||
async getPermissions(): Promise<OperationResult<Permission[]>> { |
|||
return httpClient.get<Permission[]>(this.baseUrl); |
|||
} |
|||
|
|||
// 根据ID获取权限详情（如果需要的话）
|
|||
async getPermissionById(permissionId: string): Promise<OperationResult<Permission>> { |
|||
return httpClient.get<Permission>(`${this.baseUrl}/${permissionId}`); |
|||
} |
|||
|
|||
// 删除权限（如果需要的话）
|
|||
async deletePermission(permissionId: string): Promise<OperationResult<boolean>> { |
|||
return httpClient.delete<boolean>(`${this.baseUrl}/${permissionId}`); |
|||
} |
|||
} |
|||
|
|||
export const permissionService = new PermissionService(); |
|||
@ -0,0 +1,102 @@ |
|||
import { httpClient } from '@/lib/http-client'; |
|||
import { OperationResult } from '@/types/auth'; |
|||
import { API_PATHS } from '@/constants/api'; |
|||
|
|||
// 权限信息接口
|
|||
export interface Permission { |
|||
id: string; |
|||
name: string; |
|||
description?: string; |
|||
} |
|||
|
|||
// 角色权限信息接口
|
|||
export interface RolePermission { |
|||
roleId: string; |
|||
roleName: string; |
|||
permissions: Permission[]; |
|||
} |
|||
|
|||
// 获取角色权限请求接口
|
|||
export interface GetRolePermissionsRequest { |
|||
roleId: string; |
|||
includeDetails?: boolean; |
|||
} |
|||
|
|||
// 获取角色权限响应接口
|
|||
export interface GetRolePermissionsResponse { |
|||
roleId: string; |
|||
roleName: string; |
|||
permissions: Permission[]; |
|||
} |
|||
|
|||
// 添加角色权限请求接口
|
|||
export interface AddRolePermissionsRequest { |
|||
roleId: string; |
|||
permissionIds: string[]; |
|||
} |
|||
|
|||
// 添加角色权限响应接口
|
|||
export interface AddRolePermissionsResponse { |
|||
roleId: string; |
|||
addedPermissionIds: string[]; |
|||
failedPermissionIds: string[]; |
|||
addedCount: number; |
|||
failedCount: number; |
|||
} |
|||
|
|||
// 删除角色权限请求接口
|
|||
export interface DeleteRolePermissionsRequest { |
|||
roleId: string; |
|||
permissionIds: string[]; |
|||
} |
|||
|
|||
// 删除角色权限响应接口
|
|||
export interface DeleteRolePermissionsResponse { |
|||
roleId: string; |
|||
deletedCount: number; |
|||
failedPermissionIds: string[]; |
|||
failedCount: number; |
|||
} |
|||
|
|||
class RolePermissionService { |
|||
private readonly baseUrl = API_PATHS.ROLE_PERMISSIONS; |
|||
|
|||
// 获取角色权限
|
|||
async getRolePermissions(roleId: string, includeDetails: boolean = true): Promise<OperationResult<GetRolePermissionsResponse>> { |
|||
const url = `${this.baseUrl}/${roleId}?includeDetails=${includeDetails}`; |
|||
return httpClient.get<GetRolePermissionsResponse>(url); |
|||
} |
|||
|
|||
// 添加角色权限
|
|||
async addRolePermissions(data: AddRolePermissionsRequest): Promise<OperationResult<AddRolePermissionsResponse>> { |
|||
return httpClient.post<AddRolePermissionsResponse>(this.baseUrl, data); |
|||
} |
|||
|
|||
// 删除角色权限
|
|||
async deleteRolePermissions(data: DeleteRolePermissionsRequest): Promise<OperationResult<DeleteRolePermissionsResponse>> { |
|||
return httpClient.delete<DeleteRolePermissionsResponse>(this.baseUrl, { data }); |
|||
} |
|||
|
|||
// 批量添加权限到角色
|
|||
async batchAddPermissions(roleId: string, permissionIds: string[]): Promise<OperationResult<AddRolePermissionsResponse>> { |
|||
return this.addRolePermissions({ roleId, permissionIds }); |
|||
} |
|||
|
|||
// 批量从角色删除权限
|
|||
async batchRemovePermissions(roleId: string, permissionIds: string[]): Promise<OperationResult<DeleteRolePermissionsResponse>> { |
|||
return this.deleteRolePermissions({ roleId, permissionIds }); |
|||
} |
|||
|
|||
// 获取角色权限统计信息
|
|||
getRolePermissionStats(response: GetRolePermissionsResponse): { |
|||
totalPermissions: number; |
|||
permissionNames: string[]; |
|||
} { |
|||
return { |
|||
totalPermissions: response.permissions.length, |
|||
permissionNames: response.permissions.map(p => p.name) |
|||
}; |
|||
} |
|||
} |
|||
|
|||
export const rolePermissionService = new RolePermissionService(); |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue