1066 lines
40 KiB
TypeScript
1066 lines
40 KiB
TypeScript
"use client";
|
||
|
||
import { use, useState } from "react";
|
||
import { useQuery } from "@tanstack/react-query";
|
||
import Link from "next/link";
|
||
import {
|
||
Button,
|
||
Chip,
|
||
Input,
|
||
Label,
|
||
ListBox,
|
||
Modal,
|
||
Pagination,
|
||
Select,
|
||
Spinner,
|
||
Table,
|
||
TextField,
|
||
Tooltip,
|
||
} from "@heroui/react";
|
||
import { ArrowLeft, Pencil, ArrowRotateRight, Key, Copy, Check } from "@gravity-ui/icons";
|
||
import {
|
||
api,
|
||
type ChargePointPasswordReset,
|
||
type MeterHistoryPoint,
|
||
type MeterSampledValue,
|
||
} from "@/lib/api";
|
||
import { useSession } from "@/lib/auth-client";
|
||
import dayjs from "@/lib/dayjs";
|
||
import InfoSection from "@/components/info-section";
|
||
import { Plug } from "lucide-react";
|
||
|
||
// ── Status maps ────────────────────────────────────────────────────────────
|
||
|
||
const statusLabelMap: Record<string, string> = {
|
||
Available: "空闲",
|
||
Charging: "充电中",
|
||
Preparing: "准备中",
|
||
Finishing: "结束中",
|
||
SuspendedEV: "EV 暂停",
|
||
SuspendedEVSE: "EVSE 暂停",
|
||
Reserved: "已预约",
|
||
Faulted: "故障",
|
||
Unavailable: "不可用",
|
||
Occupied: "占用",
|
||
};
|
||
|
||
const statusDotClass: Record<string, string> = {
|
||
Available: "bg-success",
|
||
Charging: "bg-[var(--accent)] animate-pulse",
|
||
Preparing: "bg-warning animate-pulse",
|
||
Finishing: "bg-warning",
|
||
SuspendedEV: "bg-warning",
|
||
SuspendedEVSE: "bg-warning",
|
||
Reserved: "bg-warning",
|
||
Faulted: "bg-danger",
|
||
Unavailable: "bg-danger",
|
||
Occupied: "bg-warning",
|
||
};
|
||
|
||
const registrationColorMap: Record<string, "success" | "warning" | "danger"> = {
|
||
Accepted: "success",
|
||
Pending: "warning",
|
||
Rejected: "danger",
|
||
};
|
||
|
||
const RESET_CONFIRM_TEXT = "我将重新配置设备";
|
||
|
||
const TX_LIMIT = 10;
|
||
|
||
// ── Helpers ────────────────────────────────────────────────────────────────
|
||
|
||
function formatDuration(start: string, stop: string | null): string {
|
||
if (!stop) return "进行中";
|
||
const min = dayjs(stop).diff(dayjs(start), "minute");
|
||
if (min < 60) return `${min} 分钟`;
|
||
const h = Math.floor(min / 60);
|
||
const m = min % 60;
|
||
return `${h}h ${m}m`;
|
||
}
|
||
|
||
function relativeTime(iso: string): string {
|
||
return dayjs(iso).fromNow();
|
||
}
|
||
|
||
function formatDateTime(iso: string | null | undefined): string {
|
||
if (!iso) return "—";
|
||
return dayjs(iso).format("YYYY/M/D HH:mm:ss");
|
||
}
|
||
|
||
function extractMeterValue(sampledValues: MeterSampledValue[], measurands: string[]) {
|
||
const parsedValues = sampledValues
|
||
.map((sv) => {
|
||
const numericValue = Number(sv.value);
|
||
if (Number.isNaN(numericValue)) return null;
|
||
return {
|
||
value: numericValue,
|
||
measurand: sv.measurand,
|
||
phase: sv.phase,
|
||
unit: sv.unit,
|
||
};
|
||
})
|
||
.filter((sv): sv is NonNullable<typeof sv> => sv !== null);
|
||
|
||
const withoutPhase = parsedValues.find(
|
||
(sv) =>
|
||
((sv.measurand == null && measurands.includes("Energy.Active.Import.Register")) ||
|
||
(sv.measurand != null && measurands.includes(sv.measurand))) &&
|
||
!sv.phase,
|
||
);
|
||
if (withoutPhase) return withoutPhase;
|
||
|
||
return parsedValues.find(
|
||
(sv) =>
|
||
(sv.measurand == null && measurands.includes("Energy.Active.Import.Register")) ||
|
||
(sv.measurand != null && measurands.includes(sv.measurand)),
|
||
);
|
||
}
|
||
|
||
function MeterCard({
|
||
label,
|
||
value,
|
||
emphasis = false,
|
||
}: {
|
||
label: string;
|
||
value: string;
|
||
emphasis?: boolean;
|
||
}) {
|
||
return (
|
||
<div
|
||
className={`relative overflow-hidden rounded-xl border border-border/70 px-3 py-2.5 ${
|
||
emphasis ? "bg-surface-secondary" : "bg-surface"
|
||
}`}
|
||
>
|
||
<div className="min-w-0">
|
||
<dt className="text-xs font-medium tracking-wide text-muted">{label}</dt>
|
||
<dd className="mt-1 truncate text-base font-semibold tabular-nums text-foreground">
|
||
{value}
|
||
</dd>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function buildMeterSnapshot(history: MeterHistoryPoint[]) {
|
||
const latestPoint = history[history.length - 1];
|
||
return {
|
||
latestTimestamp: latestPoint?.timestamp ?? null,
|
||
latestValues: latestPoint?.sampledValues ?? [],
|
||
};
|
||
}
|
||
|
||
function MeterChannelSection({
|
||
connectorNumber,
|
||
history,
|
||
}: {
|
||
connectorNumber: number;
|
||
history: MeterHistoryPoint[];
|
||
}) {
|
||
const snapshot = buildMeterSnapshot(history);
|
||
const meterVoltage = extractMeterValue(snapshot.latestValues, ["Voltage"]);
|
||
const meterCurrent = extractMeterValue(snapshot.latestValues, ["Current.Import"]);
|
||
const meterPower = extractMeterValue(snapshot.latestValues, ["Power.Active.Import"]);
|
||
const meterPf = extractMeterValue(snapshot.latestValues, ["Power.Factor"]);
|
||
const meterFrequency = extractMeterValue(snapshot.latestValues, ["Frequency"]);
|
||
const meterTemperature = extractMeterValue(snapshot.latestValues, ["Temperature"]);
|
||
const meterEnergyReg = extractMeterValue(snapshot.latestValues, [
|
||
"Energy.Active.Import.Register",
|
||
]);
|
||
|
||
return (
|
||
<InfoSection title={`连接器 #${connectorNumber}`}>
|
||
{history.length === 0 ? (
|
||
<div className="rounded-xl border border-dashed border-border/70 bg-surface px-4 py-6 text-center">
|
||
<div className="mx-auto flex size-10 items-center justify-center rounded-full bg-muted/10 text-muted">
|
||
<Plug className="size-5" />
|
||
</div>
|
||
<p className="mt-3 text-sm font-medium text-foreground">
|
||
暂未收到该连接器的 MeterValue 采样数据
|
||
</p>
|
||
<p className="mt-1 text-xs leading-5 text-muted">
|
||
充电桩上报后，这里会自动显示电压、电流、功率等实时计量信息。
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<div className="space-y-3">
|
||
<div className="flex items-center justify-between gap-3 rounded-xl border border-border/70 bg-surface-secondary px-3 py-2">
|
||
<div>
|
||
<p className="text-xs font-medium tracking-wide text-muted">
|
||
连接器 #{connectorNumber}
|
||
</p>
|
||
<p className="text-sm font-medium text-foreground">
|
||
{formatDateTime(snapshot.latestTimestamp)}
|
||
</p>
|
||
</div>
|
||
<span className="rounded-full bg-accent/10 px-2 py-1 text-xs font-medium text-accent">
|
||
最近 {history.length} 条
|
||
</span>
|
||
</div>
|
||
<dl className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
|
||
<MeterCard
|
||
label="电压"
|
||
value={
|
||
meterVoltage ? `${meterVoltage.value.toFixed(1)} ${meterVoltage.unit ?? "V"}` : "—"
|
||
}
|
||
/>
|
||
<MeterCard
|
||
label="电流"
|
||
value={
|
||
meterCurrent ? `${meterCurrent.value.toFixed(2)} ${meterCurrent.unit ?? "A"}` : "—"
|
||
}
|
||
/>
|
||
<MeterCard
|
||
label="有功功率"
|
||
value={meterPower ? `${meterPower.value.toFixed(0)} ${meterPower.unit ?? "W"}` : "—"}
|
||
/>
|
||
<MeterCard label="功率因数" value={meterPf ? meterPf.value.toFixed(3) : "—"} />
|
||
<MeterCard
|
||
label="频率"
|
||
value={
|
||
meterFrequency
|
||
? `${meterFrequency.value.toFixed(1)} ${meterFrequency.unit ?? "Hz"}`
|
||
: "—"
|
||
}
|
||
/>
|
||
<MeterCard
|
||
label="温度"
|
||
value={
|
||
meterTemperature
|
||
? `${meterTemperature.value.toFixed(1)} ${meterTemperature.unit ?? "Celsius"}`
|
||
: "—"
|
||
}
|
||
/>
|
||
<div className="sm:col-span-2 xl:col-span-1">
|
||
<MeterCard
|
||
label="累计电能表读数"
|
||
value={
|
||
meterEnergyReg
|
||
? `${meterEnergyReg.value.toFixed(3)} ${meterEnergyReg.unit ?? "Wh"}`
|
||
: "—"
|
||
}
|
||
emphasis
|
||
/>
|
||
</div>
|
||
<div className="sm:col-span-2 xl:col-span-2">
|
||
<MeterCard
|
||
label="采样时间"
|
||
value={formatDateTime(snapshot.latestTimestamp)}
|
||
emphasis
|
||
/>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
)}
|
||
</InfoSection>
|
||
);
|
||
}
|
||
|
||
// ── Edit form type ─────────────────────────────────────────────────────────
|
||
|
||
type EditForm = {
|
||
deviceName: string;
|
||
chargePointVendor: string;
|
||
chargePointModel: string;
|
||
registrationStatus: "Accepted" | "Pending" | "Rejected";
|
||
pricingMode: "fixed" | "tou";
|
||
feePerKwh: string;
|
||
};
|
||
|
||
// ── Component ──────────────────────────────────────────────────────────────
|
||
|
||
export default function ChargePointDetailPage({ params }: { params: Promise<{ id: string }> }) {
|
||
const { id } = use(params);
|
||
|
||
// transactions
|
||
const [txPage, setTxPage] = useState(1);
|
||
|
||
// edit modal
|
||
const [editOpen, setEditOpen] = useState(false);
|
||
const [editBusy, setEditBusy] = useState(false);
|
||
const [editForm, setEditForm] = useState<EditForm>({
|
||
deviceName: "",
|
||
chargePointVendor: "",
|
||
chargePointModel: "",
|
||
registrationStatus: "Pending",
|
||
pricingMode: "fixed",
|
||
feePerKwh: "0",
|
||
});
|
||
|
||
// reset password
|
||
const [resetConfirmOpen, setResetConfirmOpen] = useState(false);
|
||
const [resetConfirmText, setResetConfirmText] = useState("");
|
||
const [resetBusy, setResetBusy] = useState(false);
|
||
const [resetResult, setResetResult] = useState<ChargePointPasswordReset | null>(null);
|
||
const [resetCopied, setResetCopied] = useState(false);
|
||
|
||
const openResetConfirm = () => {
|
||
setResetConfirmText("");
|
||
setResetConfirmOpen(true);
|
||
};
|
||
|
||
const handleConfirmResetPassword = async () => {
|
||
if (!cp) return;
|
||
setResetBusy(true);
|
||
try {
|
||
const result = await api.chargePoints.resetPassword(cp.id);
|
||
setResetResult(result);
|
||
setResetConfirmOpen(false);
|
||
setResetConfirmText("");
|
||
} finally {
|
||
setResetBusy(false);
|
||
}
|
||
};
|
||
|
||
const handleCopyResetPassword = (text: string) => {
|
||
navigator.clipboard.writeText(text).then(() => {
|
||
setResetCopied(true);
|
||
setTimeout(() => setResetCopied(false), 2000);
|
||
});
|
||
};
|
||
|
||
const { isFetching: refreshing, ...cpQuery } = useQuery({
|
||
queryKey: ["chargePoint", id],
|
||
queryFn: () => api.chargePoints.get(id),
|
||
refetchInterval: 3_000,
|
||
retry: false,
|
||
});
|
||
|
||
const txQuery = useQuery({
|
||
queryKey: ["chargePointTransactions", id, txPage],
|
||
queryFn: () => api.transactions.list({ page: txPage, limit: TX_LIMIT, chargePointId: id }),
|
||
refetchInterval: 3_000,
|
||
});
|
||
|
||
const cp = cpQuery.data;
|
||
const txData = txQuery.data;
|
||
|
||
const openEdit = () => {
|
||
if (!cp) return;
|
||
setEditForm({
|
||
deviceName: cp.deviceName ?? "",
|
||
chargePointVendor: cp.chargePointVendor ?? "",
|
||
chargePointModel: cp.chargePointModel ?? "",
|
||
registrationStatus: cp.registrationStatus as EditForm["registrationStatus"],
|
||
pricingMode: cp.pricingMode,
|
||
feePerKwh: String(cp.feePerKwh),
|
||
});
|
||
setEditOpen(true);
|
||
};
|
||
|
||
const handleEditSubmit = async () => {
|
||
if (!cp) return;
|
||
setEditBusy(true);
|
||
try {
|
||
const fee = Math.max(0, Math.round(Number(editForm.feePerKwh) || 0));
|
||
await api.chargePoints.update(cp.id, {
|
||
chargePointVendor: editForm.chargePointVendor,
|
||
chargePointModel: editForm.chargePointModel,
|
||
registrationStatus: editForm.registrationStatus,
|
||
pricingMode: editForm.pricingMode,
|
||
feePerKwh: editForm.pricingMode === "fixed" ? fee : 0,
|
||
deviceName: editForm.deviceName.trim() || null,
|
||
});
|
||
await cpQuery.refetch();
|
||
setEditOpen(false);
|
||
} finally {
|
||
setEditBusy(false);
|
||
}
|
||
};
|
||
|
||
// Online if last heartbeat within 3× interval
|
||
const isOnline =
|
||
cp?.transportStatus === "online" &&
|
||
cp?.lastHeartbeatAt != null &&
|
||
dayjs().diff(dayjs(cp.lastHeartbeatAt), "second") < (cp.heartbeatInterval ?? 60) * 3;
|
||
const commandChannelUnavailable = cp?.transportStatus === "unavailable";
|
||
const statusLabel = isOnline ? "在线" : commandChannelUnavailable ? "通道异常" : "离线";
|
||
const transportStatusDotClass = isOnline
|
||
? "bg-success animate-pulse"
|
||
: commandChannelUnavailable
|
||
? "bg-warning"
|
||
: "bg-muted";
|
||
|
||
const { data: sessionData } = useSession();
|
||
const isAdmin = sessionData?.user?.role === "admin";
|
||
|
||
// ── Render: loading / not found ──────────────────────────────────────────
|
||
|
||
if (cpQuery.isPending) {
|
||
return (
|
||
<div className="flex h-48 items-center justify-center">
|
||
<Spinner />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (!cp) {
|
||
return (
|
||
<div className="space-y-4">
|
||
<Link
|
||
href="/dashboard/charge-points"
|
||
className="inline-flex items-center gap-1.5 text-sm text-muted hover:text-foreground"
|
||
>
|
||
<ArrowLeft className="size-4" />
|
||
充电桩管理
|
||
</Link>
|
||
<p className="text-sm text-danger">充电桩不存在或已被删除。</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const sortedConnectors = [...cp.connectors].sort((a, b) => a.connectorId - b.connectorId);
|
||
const meterHistory = cp.meterHistory ?? [];
|
||
const meterHistoryByConnector = meterHistory.reduce<Record<number, MeterHistoryPoint[]>>(
|
||
(acc, row) => {
|
||
if (!acc[row.connectorNumber]) acc[row.connectorNumber] = [];
|
||
acc[row.connectorNumber].push(row);
|
||
return acc;
|
||
},
|
||
{},
|
||
);
|
||
const displayConnectors = sortedConnectors.filter((connector) => connector.connectorId > 0);
|
||
|
||
// ── Render ───────────────────────────────────────────────────────────────
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
{/* Breadcrumb back */}
|
||
<Link
|
||
href="/dashboard/charge-points"
|
||
className="inline-flex items-center gap-1.5 text-sm text-muted hover:text-foreground"
|
||
>
|
||
<ArrowLeft className="size-4" />
|
||
充电桩管理
|
||
</Link>
|
||
|
||
{/* Header */}
|
||
<div className="flex flex-wrap items-start justify-between gap-4">
|
||
<div className="space-y-1.5">
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<h1 className="text-2xl font-semibold text-foreground">
|
||
{cp.deviceName ?? <span>{cp.chargePointIdentifier}</span>}
|
||
</h1>
|
||
{isAdmin && cp.deviceName && (
|
||
<span className="text-sm text-muted">{cp.chargePointIdentifier}</span>
|
||
)}
|
||
<Chip
|
||
color={registrationColorMap[cp.registrationStatus] ?? "warning"}
|
||
size="sm"
|
||
variant="soft"
|
||
>
|
||
{cp.registrationStatus}
|
||
</Chip>
|
||
<div className="flex items-center gap-1.5">
|
||
<span className={`size-2 rounded-full ${transportStatusDotClass}`} />
|
||
<span className="text-xs text-muted">{statusLabel}</span>
|
||
</div>
|
||
</div>
|
||
{(cp.chargePointVendor || cp.chargePointModel) && (
|
||
<p className="text-sm text-muted">
|
||
{[cp.chargePointVendor, cp.chargePointModel].filter(Boolean).join(" · ")}
|
||
</p>
|
||
)}
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Button
|
||
isIconOnly
|
||
size="sm"
|
||
variant="ghost"
|
||
isDisabled={refreshing}
|
||
onPress={() => cpQuery.refetch()}
|
||
aria-label="刷新"
|
||
>
|
||
<ArrowRotateRight className={`size-4 ${refreshing ? "animate-spin" : ""}`} />
|
||
</Button>
|
||
{isAdmin && (
|
||
<>
|
||
<Tooltip>
|
||
<Tooltip.Content>重置 OCPP 认证密钥</Tooltip.Content>
|
||
<Tooltip.Trigger>
|
||
<Button
|
||
size="sm"
|
||
variant="ghost"
|
||
isDisabled={resetBusy}
|
||
onPress={openResetConfirm}
|
||
>
|
||
{resetBusy ? <Spinner size="sm" /> : <Key className="size-4" />}
|
||
重置密钥
|
||
</Button>
|
||
</Tooltip.Trigger>
|
||
</Tooltip>
|
||
<Button size="sm" variant="secondary" onPress={openEdit}>
|
||
<Pencil className="size-4" />
|
||
编辑
|
||
</Button>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Info grid */}
|
||
{cp.chargePointStatus && (
|
||
<div
|
||
className={`flex items-center gap-3 rounded-xl border px-4 py-3 ${
|
||
cp.chargePointStatus === "Available"
|
||
? "border-success/30 bg-success/5"
|
||
: cp.chargePointStatus === "Faulted" || cp.chargePointStatus === "Unavailable"
|
||
? "border-danger/30 bg-danger/5"
|
||
: "border-warning/30 bg-warning/5"
|
||
}`}
|
||
>
|
||
<span
|
||
className={`size-2.5 shrink-0 rounded-full ${statusDotClass[cp.chargePointStatus] ?? "bg-warning"}`}
|
||
/>
|
||
<span className="text-sm font-semibold text-foreground">
|
||
{cp.chargePointStatus === "Available"
|
||
? "正常"
|
||
: (statusLabelMap[cp.chargePointStatus] ?? cp.chargePointStatus)}
|
||
</span>
|
||
{cp.chargePointErrorCode && cp.chargePointErrorCode !== "NoError" && (
|
||
<>
|
||
<span className="text-muted">·</span>
|
||
<span className="text-xs text-danger">{cp.chargePointErrorCode}</span>
|
||
</>
|
||
)}
|
||
<span className="ml-auto text-xs text-muted">整桩状态</span>
|
||
</div>
|
||
)}
|
||
|
||
{/* Info grid */}
|
||
<div className="grid gap-4 md:grid-cols-2">
|
||
{/* Device info — admin only */}
|
||
{isAdmin && (
|
||
<InfoSection title="设备信息">
|
||
<dl className="divide-y divide-border">
|
||
{[
|
||
{ label: "品牌", value: cp.chargePointVendor },
|
||
{ label: "型号", value: cp.chargePointModel },
|
||
{ label: "序列号", value: cp.chargePointSerialNumber },
|
||
{ label: "固件版本", value: cp.firmwareVersion },
|
||
{ label: "电表型号", value: cp.meterType },
|
||
{ label: "电表序列号", value: cp.meterSerialNumber },
|
||
{ label: "ICCID", value: cp.iccid },
|
||
{ label: "IMSI", value: cp.imsi },
|
||
].map(({ label, value }) => (
|
||
<div key={label} className="flex items-center justify-between gap-4 py-2">
|
||
<dt className="shrink-0 text-sm text-muted">{label}</dt>
|
||
<dd className="truncate text-sm text-foreground">
|
||
{value ?? <span className="text-muted">—</span>}
|
||
</dd>
|
||
</div>
|
||
))}
|
||
|
||
{isAdmin && (
|
||
<Modal
|
||
isOpen={resetConfirmOpen}
|
||
onOpenChange={(open) => {
|
||
if (!resetBusy) {
|
||
setResetConfirmOpen(open);
|
||
if (!open) setResetConfirmText("");
|
||
}
|
||
}}
|
||
>
|
||
<Modal.Backdrop>
|
||
<Modal.Container scroll="outside">
|
||
<Modal.Dialog className="sm:max-w-md">
|
||
<Modal.CloseTrigger />
|
||
<Modal.Header>
|
||
<Modal.Heading>重置 OCPP 认证密钥</Modal.Heading>
|
||
</Modal.Header>
|
||
<Modal.Body className="space-y-4">
|
||
<p className="text-sm text-warning font-medium">
|
||
重置后旧密钥将立即失效，请先确认设备已准备重新配置。
|
||
</p>
|
||
<TextField fullWidth>
|
||
<Label className="text-sm font-normal">
|
||
请输入 “
|
||
<span className="font-medium cursor-text">{RESET_CONFIRM_TEXT}</span>”
|
||
以继续
|
||
</Label>
|
||
<Input
|
||
placeholder={RESET_CONFIRM_TEXT}
|
||
value={resetConfirmText}
|
||
onChange={(e) => setResetConfirmText(e.target.value)}
|
||
autoComplete="off"
|
||
/>
|
||
</TextField>
|
||
</Modal.Body>
|
||
<Modal.Footer className="flex justify-end gap-2">
|
||
<Button
|
||
variant="ghost"
|
||
onPress={() => {
|
||
setResetConfirmOpen(false);
|
||
setResetConfirmText("");
|
||
}}
|
||
isDisabled={resetBusy}
|
||
>
|
||
取消
|
||
</Button>
|
||
<Button
|
||
variant="danger"
|
||
isDisabled={resetBusy || resetConfirmText !== RESET_CONFIRM_TEXT}
|
||
onPress={handleConfirmResetPassword}
|
||
>
|
||
{resetBusy ? <Spinner size="sm" /> : "确认重置"}
|
||
</Button>
|
||
</Modal.Footer>
|
||
</Modal.Dialog>
|
||
</Modal.Container>
|
||
</Modal.Backdrop>
|
||
</Modal>
|
||
)}
|
||
</dl>
|
||
</InfoSection>
|
||
)}
|
||
|
||
{/* Operation info — admin only */}
|
||
{isAdmin && (
|
||
<InfoSection title="运行配置">
|
||
<dl className="divide-y divide-border">
|
||
<div className="flex items-center justify-between gap-4 py-2">
|
||
<dt className="shrink-0 text-sm text-muted">注册状态</dt>
|
||
<dd>
|
||
<Chip
|
||
color={registrationColorMap[cp.registrationStatus] ?? "warning"}
|
||
size="sm"
|
||
variant="soft"
|
||
>
|
||
{cp.registrationStatus}
|
||
</Chip>
|
||
</dd>
|
||
</div>
|
||
<div className="flex items-center justify-between gap-4 py-2">
|
||
<dt className="shrink-0 text-sm text-muted">电价</dt>
|
||
<dd className="text-sm text-foreground">
|
||
{cp.pricingMode === "tou" ? (
|
||
<span className="text-accent font-medium">峰谷电价</span>
|
||
) : cp.feePerKwh > 0 ? (
|
||
<span>
|
||
{cp.feePerKwh} 分/kWh
|
||
<span className="ml-1 text-xs text-muted">
|
||
(¥{(cp.feePerKwh / 100).toFixed(2)}/kWh)
|
||
</span>
|
||
</span>
|
||
) : (
|
||
"免费"
|
||
)}
|
||
</dd>
|
||
</div>
|
||
<div className="flex items-center justify-between gap-4 py-2">
|
||
<dt className="shrink-0 text-sm text-muted">心跳间隔</dt>
|
||
<dd className="text-sm text-foreground">
|
||
{cp.heartbeatInterval != null ? (
|
||
`${cp.heartbeatInterval} 秒`
|
||
) : (
|
||
<span className="text-muted">—</span>
|
||
)}
|
||
</dd>
|
||
</div>
|
||
<div className="flex items-center justify-between gap-4 py-2">
|
||
<dt className="shrink-0 text-sm text-muted">最后心跳</dt>
|
||
<dd className="text-right text-sm text-foreground">
|
||
{cp.lastHeartbeatAt ? (
|
||
<span title={dayjs(cp.lastHeartbeatAt).format("YYYY/M/D HH:mm:ss")}>
|
||
{relativeTime(cp.lastHeartbeatAt)}
|
||
</span>
|
||
) : (
|
||
<span className="text-muted">—</span>
|
||
)}
|
||
</dd>
|
||
</div>
|
||
<div className="flex items-center justify-between gap-4 py-2">
|
||
<dt className="shrink-0 text-sm text-muted">最后启动通知</dt>
|
||
<dd className="text-right text-sm text-foreground">
|
||
{cp.lastBootNotificationAt ? (
|
||
<span title={dayjs(cp.lastBootNotificationAt).format("YYYY/M/D HH:mm:ss")}>
|
||
{relativeTime(cp.lastBootNotificationAt)}
|
||
</span>
|
||
) : (
|
||
<span className="text-muted">—</span>
|
||
)}
|
||
</dd>
|
||
</div>
|
||
<div className="flex items-center justify-between gap-4 py-2">
|
||
<dt className="shrink-0 text-sm text-muted">注册时间</dt>
|
||
<dd className="text-sm text-foreground">
|
||
{dayjs(cp.createdAt).format("YYYY/M/D")}
|
||
</dd>
|
||
</div>
|
||
</dl>
|
||
</InfoSection>
|
||
)}
|
||
|
||
{/* Fee info — user only */}
|
||
{!isAdmin && (
|
||
<InfoSection title="电价信息">
|
||
<dl className="divide-y divide-border">
|
||
<div className="flex items-center justify-between gap-4 py-2">
|
||
<dt className="shrink-0 text-sm text-muted">单位电价</dt>
|
||
<dd className="text-sm text-foreground">
|
||
{cp.pricingMode === "tou" ? (
|
||
<span className="text-accent font-medium">峰谷电价</span>
|
||
) : cp.feePerKwh > 0 ? (
|
||
<span>
|
||
<span className="font-semibold">¥{(cp.feePerKwh / 100).toFixed(2)}</span>
|
||
<span className="ml-1 text-xs text-muted">/kWh</span>
|
||
</span>
|
||
) : (
|
||
<span className="text-success font-medium">免费</span>
|
||
)}
|
||
</dd>
|
||
</div>
|
||
<div className="flex items-center justify-between gap-4 py-2">
|
||
<dt className="shrink-0 text-sm text-muted">充电桥状态</dt>
|
||
<dd>
|
||
<div className="flex items-center gap-1.5">
|
||
<span className={`size-2 rounded-full ${transportStatusDotClass}`} />
|
||
<span className="text-sm text-foreground">{statusLabel}</span>
|
||
</div>
|
||
</dd>
|
||
</div>
|
||
</dl>
|
||
</InfoSection>
|
||
)}
|
||
</div>
|
||
|
||
{/* Connectors */}
|
||
{sortedConnectors.length > 0 && (
|
||
<div className="space-y-3">
|
||
<h2 className="text-sm font-semibold text-foreground">接口状态</h2>
|
||
<div className="flex flex-wrap gap-3">
|
||
{sortedConnectors.map((conn) => (
|
||
<div
|
||
key={conn.id}
|
||
className="flex min-w-40 flex-col gap-2 rounded-xl border border-border bg-surface p-3"
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
<Plug className="size-4 shrink-0 text-muted" />
|
||
<span className="text-sm font-medium text-foreground">
|
||
接口 #{conn.connectorId}
|
||
</span>
|
||
<span className="ml-auto flex items-center gap-1">
|
||
<span
|
||
className={`size-2 shrink-0 rounded-full ${statusDotClass[conn.status] ?? "bg-warning"}`}
|
||
/>
|
||
<span className="text-xs text-muted">
|
||
{statusLabelMap[conn.status] ?? conn.status}
|
||
</span>
|
||
</span>
|
||
</div>
|
||
{conn.errorCode && conn.errorCode !== "NoError" && (
|
||
<p className="text-xs text-danger">错误: {conn.errorCode}</p>
|
||
)}
|
||
<p className="text-xs text-muted">
|
||
更新于 {dayjs(conn.lastStatusAt).format("MM/DD HH:mm")}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* MeterValue */}
|
||
{isAdmin && (
|
||
<div className="grid gap-4 lg:grid-cols-2">
|
||
{displayConnectors.map((connector) => (
|
||
<MeterChannelSection
|
||
key={connector.id}
|
||
connectorNumber={connector.connectorId}
|
||
history={meterHistoryByConnector[connector.connectorId] ?? []}
|
||
/>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* Transactions */}
|
||
<div className="space-y-3">
|
||
<div className="flex items-center justify-between">
|
||
<h2 className="text-sm font-semibold text-foreground">充电记录</h2>
|
||
{txData && <span className="text-xs text-muted">共 {txData.total} 条</span>}
|
||
</div>
|
||
|
||
<Table>
|
||
<Table.ScrollContainer>
|
||
<Table.Content aria-label="充电记录">
|
||
<Table.Header>
|
||
<Table.Column isRowHeader>ID</Table.Column>
|
||
<Table.Column>接口</Table.Column>
|
||
<Table.Column>充电卡</Table.Column>
|
||
<Table.Column>开始时间</Table.Column>
|
||
<Table.Column>时长</Table.Column>
|
||
<Table.Column>用电量</Table.Column>
|
||
<Table.Column>费用</Table.Column>
|
||
<Table.Column>停止原因</Table.Column>
|
||
</Table.Header>
|
||
<Table.Body
|
||
renderEmptyState={() => (
|
||
<div className="py-8 text-center text-sm text-muted">
|
||
{txQuery.isPending ? "加载中…" : "暂无充电记录"}
|
||
</div>
|
||
)}
|
||
>
|
||
{(txData?.data ?? []).map((tx) => (
|
||
<Table.Row key={tx.id} id={tx.id}>
|
||
<Table.Cell className="font-mono text-sm text-muted">#{tx.id}</Table.Cell>
|
||
<Table.Cell>
|
||
{tx.connectorNumber != null ? (
|
||
`#${tx.connectorNumber}`
|
||
) : (
|
||
<span className="text-muted">—</span>
|
||
)}
|
||
</Table.Cell>
|
||
<Table.Cell className="font-mono">{tx.idTag}</Table.Cell>
|
||
<Table.Cell className="tabular-nums text-sm">
|
||
{dayjs(tx.startTimestamp).format("MM/DD HH:mm")}
|
||
</Table.Cell>
|
||
<Table.Cell>{formatDuration(tx.startTimestamp, tx.stopTimestamp)}</Table.Cell>
|
||
<Table.Cell className="tabular-nums">
|
||
{tx.energyWh != null ? (
|
||
`${(tx.energyWh / 1000).toFixed(2)} kWh`
|
||
) : (
|
||
<span className="text-muted">—</span>
|
||
)}
|
||
</Table.Cell>
|
||
<Table.Cell className="tabular-nums">
|
||
{tx.chargeAmount != null ? (
|
||
`¥${(tx.chargeAmount / 100).toFixed(2)}`
|
||
) : (
|
||
<span className="text-muted">—</span>
|
||
)}
|
||
</Table.Cell>
|
||
<Table.Cell>
|
||
{tx.stopReason ?? <span className="text-muted">—</span>}
|
||
</Table.Cell>
|
||
</Table.Row>
|
||
))}
|
||
</Table.Body>
|
||
</Table.Content>
|
||
</Table.ScrollContainer>
|
||
</Table>
|
||
|
||
{txData && txData.totalPages > 1 && (
|
||
<div className="flex justify-center">
|
||
<Pagination size="sm">
|
||
<Pagination.Content>
|
||
<Pagination.Item>
|
||
<Pagination.Previous
|
||
isDisabled={txPage === 1}
|
||
onPress={() => setTxPage((p) => Math.max(1, p - 1))}
|
||
>
|
||
<Pagination.PreviousIcon />
|
||
上一页
|
||
</Pagination.Previous>
|
||
</Pagination.Item>
|
||
{Array.from({ length: txData.totalPages }, (_, i) => i + 1).map((p) => (
|
||
<Pagination.Item key={p}>
|
||
<Pagination.Link isActive={p === txPage} onPress={() => setTxPage(p)}>
|
||
{p}
|
||
</Pagination.Link>
|
||
</Pagination.Item>
|
||
))}
|
||
<Pagination.Item>
|
||
<Pagination.Next
|
||
isDisabled={txPage === txData.totalPages}
|
||
onPress={() => setTxPage((p) => Math.min(txData.totalPages, p + 1))}
|
||
>
|
||
下一页
|
||
<Pagination.NextIcon />
|
||
</Pagination.Next>
|
||
</Pagination.Item>
|
||
</Pagination.Content>
|
||
</Pagination>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Reset password result modal */}
|
||
{isAdmin && (
|
||
<Modal
|
||
isOpen={resetResult !== null}
|
||
onOpenChange={(open) => {
|
||
if (!open) {
|
||
setResetResult(null);
|
||
setResetCopied(false);
|
||
}
|
||
}}
|
||
>
|
||
<Modal.Backdrop>
|
||
<Modal.Container scroll="outside">
|
||
<Modal.Dialog className="sm:max-w-md">
|
||
<Modal.Header>
|
||
<Modal.Heading>密钥已重置</Modal.Heading>
|
||
</Modal.Header>
|
||
<Modal.Body className="space-y-4">
|
||
<p className="text-sm text-warning font-medium">
|
||
此密钥仅显示一次。旧密钥已立即失效，请更新固件配置。
|
||
</p>
|
||
<div className="space-y-1.5">
|
||
<p className="text-xs text-muted font-medium">新 OCPP Basic Auth 密钥</p>
|
||
<div className="flex items-center gap-2">
|
||
<code className="flex-1 rounded-md bg-surface-secondary px-3 py-2 text-sm font-mono text-foreground select-all">
|
||
{resetResult?.plainPassword}
|
||
</code>
|
||
<Tooltip>
|
||
<Tooltip.Content>{resetCopied ? "已复制" : "复制密钥"}</Tooltip.Content>
|
||
<Tooltip.Trigger>
|
||
<Button
|
||
isIconOnly
|
||
size="sm"
|
||
variant="ghost"
|
||
onPress={() =>
|
||
resetResult && handleCopyResetPassword(resetResult.plainPassword)
|
||
}
|
||
>
|
||
{resetCopied ? (
|
||
<Check className="size-4 text-success" />
|
||
) : (
|
||
<Copy className="size-4" />
|
||
)}
|
||
</Button>
|
||
</Tooltip.Trigger>
|
||
</Tooltip>
|
||
</div>
|
||
</div>
|
||
</Modal.Body>
|
||
<Modal.Footer className="flex justify-end">
|
||
<Button
|
||
onPress={() => {
|
||
setResetResult(null);
|
||
setResetCopied(false);
|
||
}}
|
||
>
|
||
我已保存密钥
|
||
</Button>
|
||
</Modal.Footer>
|
||
</Modal.Dialog>
|
||
</Modal.Container>
|
||
</Modal.Backdrop>
|
||
</Modal>
|
||
)}
|
||
|
||
{/* Edit modal */}
|
||
{isAdmin && (
|
||
<Modal
|
||
isOpen={editOpen}
|
||
onOpenChange={(open) => {
|
||
if (!editBusy) setEditOpen(open);
|
||
}}
|
||
>
|
||
<Modal.Backdrop>
|
||
<Modal.Container scroll="outside">
|
||
<Modal.Dialog className="sm:max-w-md">
|
||
<Modal.CloseTrigger />
|
||
<Modal.Header>
|
||
<Modal.Heading>编辑充电桩</Modal.Heading>
|
||
</Modal.Header>
|
||
<Modal.Body className="space-y-3">
|
||
<TextField fullWidth>
|
||
<Label className="text-sm font-medium">设备名称</Label>
|
||
<Input
|
||
placeholder="1号楼A区01号桩"
|
||
value={editForm.deviceName}
|
||
onChange={(e) => setEditForm((f) => ({ ...f, deviceName: e.target.value }))}
|
||
/>
|
||
</TextField>
|
||
<div className="grid grid-cols-2 gap-3">
|
||
<TextField fullWidth>
|
||
<Label className="text-sm font-medium">品牌</Label>
|
||
<Input
|
||
placeholder="Unknown"
|
||
value={editForm.chargePointVendor}
|
||
onChange={(e) =>
|
||
setEditForm((f) => ({ ...f, chargePointVendor: e.target.value }))
|
||
}
|
||
/>
|
||
</TextField>
|
||
<TextField fullWidth>
|
||
<Label className="text-sm font-medium">型号</Label>
|
||
<Input
|
||
placeholder="Unknown"
|
||
value={editForm.chargePointModel}
|
||
onChange={(e) =>
|
||
setEditForm((f) => ({ ...f, chargePointModel: e.target.value }))
|
||
}
|
||
/>
|
||
</TextField>
|
||
</div>
|
||
<div className="space-y-1.5">
|
||
<Label className="text-sm font-medium">注册状态</Label>
|
||
<Select
|
||
fullWidth
|
||
selectedKey={editForm.registrationStatus}
|
||
onSelectionChange={(key) =>
|
||
setEditForm((f) => ({
|
||
...f,
|
||
registrationStatus: String(key) as EditForm["registrationStatus"],
|
||
}))
|
||
}
|
||
>
|
||
<Select.Trigger>
|
||
<Select.Value />
|
||
<Select.Indicator />
|
||
</Select.Trigger>
|
||
<Select.Popover>
|
||
<ListBox>
|
||
<ListBox.Item id="Accepted">Accepted</ListBox.Item>
|
||
<ListBox.Item id="Pending">Pending</ListBox.Item>
|
||
<ListBox.Item id="Rejected">Rejected</ListBox.Item>
|
||
</ListBox>
|
||
</Select.Popover>
|
||
</Select>
|
||
</div>
|
||
<div className="space-y-1.5">
|
||
<Label className="text-sm font-medium">计费模式</Label>
|
||
<Select
|
||
fullWidth
|
||
selectedKey={editForm.pricingMode}
|
||
onSelectionChange={(key) =>
|
||
setEditForm((f) => ({
|
||
...f,
|
||
pricingMode: String(key) as EditForm["pricingMode"],
|
||
}))
|
||
}
|
||
>
|
||
<Select.Trigger>
|
||
<Select.Value />
|
||
<Select.Indicator />
|
||
</Select.Trigger>
|
||
<Select.Popover>
|
||
<ListBox>
|
||
<ListBox.Item id="fixed">固定电价</ListBox.Item>
|
||
<ListBox.Item id="tou">峰谷电价</ListBox.Item>
|
||
</ListBox>
|
||
</Select.Popover>
|
||
</Select>
|
||
</div>
|
||
{editForm.pricingMode === "fixed" && (
|
||
<TextField fullWidth>
|
||
<Label className="text-sm font-medium">固定电价（分/kWh）</Label>
|
||
<Input
|
||
type="number"
|
||
min="0"
|
||
step="1"
|
||
placeholder="0"
|
||
value={editForm.feePerKwh}
|
||
onChange={(e) => setEditForm((f) => ({ ...f, feePerKwh: e.target.value }))}
|
||
/>
|
||
</TextField>
|
||
)}
|
||
</Modal.Body>
|
||
<Modal.Footer className="flex justify-end gap-2">
|
||
<Button variant="ghost" onPress={() => setEditOpen(false)}>
|
||
取消
|
||
</Button>
|
||
<Button isDisabled={editBusy} onPress={handleEditSubmit}>
|
||
{editBusy ? <Spinner size="sm" /> : "保存"}
|
||
</Button>
|
||
</Modal.Footer>
|
||
</Modal.Dialog>
|
||
</Modal.Container>
|
||
</Modal.Backdrop>
|
||
</Modal>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|