33 lines
906 B
TypeScript
33 lines
906 B
TypeScript
"use client"
|
|
|
|
import { Card } from "@/components/ui/card"
|
|
import { Progress } from "@/components/ui/progress"
|
|
|
|
interface PoolUsageChartProps {
|
|
deviceStats: {
|
|
[key: string]: number
|
|
}
|
|
poolLimit: number
|
|
}
|
|
|
|
export function PoolUsageChart({ deviceStats, poolLimit }: PoolUsageChartProps) {
|
|
return (
|
|
<Card className="p-3">
|
|
<h3 className="text-sm font-medium mb-2">设备流量池使用情况</h3>
|
|
<div className="space-y-3">
|
|
{Object.entries(deviceStats).map(([device, count]) => (
|
|
<div key={device} className="space-y-1">
|
|
<div className="flex justify-between text-xs">
|
|
<span>设备{device}</span>
|
|
<span className="text-gray-500">
|
|
{count}/{poolLimit}
|
|
</span>
|
|
</div>
|
|
<Progress value={(count / poolLimit) * 100} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
)
|
|
}
|