feat(web): 充电桩二维码支持下载导出
This commit is contained in:
@@ -32,6 +32,7 @@ import { ScrollFade } from "@/components/scroll-fade";
|
|||||||
import { api, type ChargePoint, type ChargePointCreated } from "@/lib/api";
|
import { api, type ChargePoint, type ChargePointCreated } from "@/lib/api";
|
||||||
import { useSession } from "@/lib/auth-client";
|
import { useSession } from "@/lib/auth-client";
|
||||||
import dayjs from "@/lib/dayjs";
|
import dayjs from "@/lib/dayjs";
|
||||||
|
import { Download } from "lucide-react";
|
||||||
|
|
||||||
const statusLabelMap: Record<string, string> = {
|
const statusLabelMap: Record<string, string> = {
|
||||||
Available: "空闲中",
|
Available: "空闲中",
|
||||||
@@ -128,6 +129,7 @@ export default function ChargePointsPage() {
|
|||||||
const [qrTarget, setQrTarget] = useState<ChargePoint | null>(null);
|
const [qrTarget, setQrTarget] = useState<ChargePoint | null>(null);
|
||||||
const [createdCp, setCreatedCp] = useState<ChargePointCreated | null>(null);
|
const [createdCp, setCreatedCp] = useState<ChargePointCreated | null>(null);
|
||||||
const [copied, setCopied] = useState(false);
|
const [copied, setCopied] = useState(false);
|
||||||
|
const [downloadingQrKey, setDownloadingQrKey] = useState<string | null>(null);
|
||||||
const {
|
const {
|
||||||
data: chargePoints = [],
|
data: chargePoints = [],
|
||||||
refetch: refetchList,
|
refetch: refetchList,
|
||||||
@@ -216,6 +218,66 @@ export default function ChargePointsPage() {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleDownloadConnectorQr = async (
|
||||||
|
chargePointId: string | number,
|
||||||
|
connectorId: number,
|
||||||
|
chargePointIdentifier: string,
|
||||||
|
) => {
|
||||||
|
const svgId = `connector-qr-${chargePointId}-${connectorId}`;
|
||||||
|
const key = `${chargePointId}-${connectorId}`;
|
||||||
|
const svg = document.getElementById(svgId) as SVGSVGElement | null;
|
||||||
|
if (!svg) return;
|
||||||
|
|
||||||
|
setDownloadingQrKey(key);
|
||||||
|
try {
|
||||||
|
const serializer = new XMLSerializer();
|
||||||
|
const svgText = serializer.serializeToString(svg);
|
||||||
|
const svgBlob = new Blob([svgText], { type: "image/svg+xml;charset=utf-8" });
|
||||||
|
const svgUrl = URL.createObjectURL(svgBlob);
|
||||||
|
|
||||||
|
const image = await new Promise<HTMLImageElement>((resolve, reject) => {
|
||||||
|
const img = new Image();
|
||||||
|
img.onload = () => resolve(img);
|
||||||
|
img.onerror = () => reject(new Error("二维码导出失败"));
|
||||||
|
img.src = svgUrl;
|
||||||
|
});
|
||||||
|
|
||||||
|
const canvas = document.createElement("canvas");
|
||||||
|
canvas.width = 1024;
|
||||||
|
canvas.height = 1024;
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
if (!ctx) throw new Error("二维码导出失败");
|
||||||
|
|
||||||
|
ctx.fillStyle = "#ffffff";
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
const pngBlob = await new Promise<Blob>((resolve, reject) => {
|
||||||
|
canvas.toBlob((blob) => {
|
||||||
|
if (blob) resolve(blob);
|
||||||
|
else reject(new Error("二维码导出失败"));
|
||||||
|
}, "image/png");
|
||||||
|
});
|
||||||
|
|
||||||
|
const fileUrl = URL.createObjectURL(pngBlob);
|
||||||
|
const link = document.createElement("a");
|
||||||
|
const safeIdentifier = String(chargePointIdentifier).replace(/[^a-zA-Z0-9_-]/g, "");
|
||||||
|
const safeConnectorId = String(connectorId).replace(/[^a-zA-Z0-9_-]/g, "");
|
||||||
|
|
||||||
|
link.href = fileUrl;
|
||||||
|
link.download = `${safeIdentifier}-connector-${safeConnectorId}.png`;
|
||||||
|
link.rel = "noopener";
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
|
||||||
|
URL.revokeObjectURL(svgUrl);
|
||||||
|
URL.revokeObjectURL(fileUrl);
|
||||||
|
} finally {
|
||||||
|
setDownloadingQrKey(null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const { data: sessionData } = useSession();
|
const { data: sessionData } = useSession();
|
||||||
const isAdmin = sessionData?.user?.role === "admin";
|
const isAdmin = sessionData?.user?.role === "admin";
|
||||||
|
|
||||||
@@ -429,15 +491,50 @@ export default function ChargePointsPage() {
|
|||||||
.sort((a, b) => a.connectorId - b.connectorId)
|
.sort((a, b) => a.connectorId - b.connectorId)
|
||||||
.map((conn) => {
|
.map((conn) => {
|
||||||
const url = `${qrOrigin}/dashboard/charge?cpId=${qrTarget.id}&connector=${conn.connectorId}`;
|
const url = `${qrOrigin}/dashboard/charge?cpId=${qrTarget.id}&connector=${conn.connectorId}`;
|
||||||
|
const downloadKey = `${qrTarget.id}-${conn.connectorId}`;
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={conn.id}
|
key={conn.id}
|
||||||
className="flex flex-col items-center gap-2 rounded-xl border border-border p-3"
|
className="flex flex-col items-center gap-2 rounded-xl border border-border px-2 py-1"
|
||||||
>
|
>
|
||||||
<p className="text-xs font-medium text-foreground">
|
<div className="flex w-full items-center justify-between gap-2">
|
||||||
接口 #{conn.connectorId}
|
<p className="text-xs font-medium text-foreground">
|
||||||
</p>
|
接口 #{conn.connectorId}
|
||||||
<QRCodeSVG value={url} size={120} className="rounded" />
|
</p>
|
||||||
|
<Tooltip delay={0}>
|
||||||
|
<Tooltip.Content>下载二维码</Tooltip.Content>
|
||||||
|
<Tooltip.Trigger>
|
||||||
|
<Button
|
||||||
|
isIconOnly
|
||||||
|
size="sm"
|
||||||
|
variant="ghost"
|
||||||
|
isDisabled={downloadingQrKey === downloadKey}
|
||||||
|
onPress={() =>
|
||||||
|
handleDownloadConnectorQr(
|
||||||
|
qrTarget.id,
|
||||||
|
conn.connectorId,
|
||||||
|
qrTarget.chargePointIdentifier,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
aria-label={`下载接口 #${conn.connectorId} 二维码`}
|
||||||
|
className="h-6 min-h-6 w-6 min-w-6"
|
||||||
|
>
|
||||||
|
{downloadingQrKey === downloadKey ? (
|
||||||
|
<Spinner size="sm" />
|
||||||
|
) : (
|
||||||
|
<Download className="size-3.5" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</Tooltip.Trigger>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
<QRCodeSVG
|
||||||
|
id={`connector-qr-${qrTarget.id}-${conn.connectorId}`}
|
||||||
|
value={url}
|
||||||
|
size={120}
|
||||||
|
className="rounded"
|
||||||
|
bgColor="#ffffff"
|
||||||
|
/>
|
||||||
<p className="break-all text-center font-mono text-[9px] text-muted leading-tight">
|
<p className="break-all text-center font-mono text-[9px] text-muted leading-tight">
|
||||||
{url}
|
{url}
|
||||||
</p>
|
</p>
|
||||||
@@ -583,174 +680,184 @@ export default function ChargePointsPage() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Table.Row key={cp.id} id={String(cp.id)} className={"group"}>
|
<Table.Row key={cp.id} id={String(cp.id)} className={"group"}>
|
||||||
<Table.Cell>
|
<Table.Cell>
|
||||||
<Tooltip delay={0}>
|
<Tooltip delay={0}>
|
||||||
<Tooltip.Trigger>
|
<Tooltip.Trigger>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<span
|
<span
|
||||||
className={`size-2 shrink-0 rounded-full ${
|
className={`size-2 shrink-0 rounded-full ${
|
||||||
online ? "bg-success" : commandChannelUnavailable ? "bg-warning" : "bg-gray-300"
|
online
|
||||||
}`}
|
? "bg-success"
|
||||||
/>
|
: commandChannelUnavailable
|
||||||
|
? "bg-warning"
|
||||||
|
: "bg-gray-300"
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<Link
|
||||||
|
href={`/dashboard/charge-points/${cp.id}`}
|
||||||
|
className="font-medium text-accent"
|
||||||
|
>
|
||||||
|
{cp.deviceName ?? cp.chargePointIdentifier}
|
||||||
|
</Link>
|
||||||
|
{isAdmin && cp.deviceName && (
|
||||||
|
<span className="font-mono text-xs text-muted">
|
||||||
|
{cp.chargePointIdentifier}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Tooltip.Trigger>
|
||||||
|
<Tooltip.Content placement="start">
|
||||||
|
{online
|
||||||
|
? "在线"
|
||||||
|
: commandChannelUnavailable
|
||||||
|
? "通道异常"
|
||||||
|
: cp.lastHeartbeatAt
|
||||||
|
? "离线"
|
||||||
|
: "从未连接"}
|
||||||
|
</Tooltip.Content>
|
||||||
|
</Tooltip>
|
||||||
|
</Table.Cell>
|
||||||
|
{isAdmin && (
|
||||||
|
<Table.Cell>
|
||||||
|
{cp.chargePointVendor || cp.chargePointModel ? (
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<Link
|
{cp.chargePointVendor && (
|
||||||
href={`/dashboard/charge-points/${cp.id}`}
|
<span className="text-xs text-muted font-medium">
|
||||||
className="font-medium text-accent"
|
{cp.chargePointVendor}
|
||||||
>
|
|
||||||
{cp.deviceName ?? cp.chargePointIdentifier}
|
|
||||||
</Link>
|
|
||||||
{isAdmin && cp.deviceName && (
|
|
||||||
<span className="font-mono text-xs text-muted">
|
|
||||||
{cp.chargePointIdentifier}
|
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
{cp.chargePointModel && (
|
||||||
|
<span className="text-sm text-foreground">{cp.chargePointModel}</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
) : (
|
||||||
</Tooltip.Trigger>
|
<span className="text-muted">—</span>
|
||||||
<Tooltip.Content placement="start">
|
)}
|
||||||
{online ? "在线" : commandChannelUnavailable ? "通道异常" : cp.lastHeartbeatAt ? "离线" : "从未连接"}
|
</Table.Cell>
|
||||||
</Tooltip.Content>
|
)}
|
||||||
</Tooltip>
|
{isAdmin && (
|
||||||
</Table.Cell>
|
<Table.Cell>
|
||||||
{isAdmin && (
|
<Chip
|
||||||
|
color={registrationColorMap[cp.registrationStatus] ?? "warning"}
|
||||||
|
size="sm"
|
||||||
|
variant="soft"
|
||||||
|
>
|
||||||
|
{cp.registrationStatus}
|
||||||
|
</Chip>
|
||||||
|
</Table.Cell>
|
||||||
|
)}
|
||||||
<Table.Cell>
|
<Table.Cell>
|
||||||
{cp.chargePointVendor || cp.chargePointModel ? (
|
{cp.pricingMode === "tou" ? (
|
||||||
<div className="flex flex-col">
|
<span className="text-accent font-medium">峰谷电价</span>
|
||||||
{cp.chargePointVendor && (
|
) : cp.feePerKwh > 0 ? (
|
||||||
<span className="text-xs text-muted font-medium">
|
<span>
|
||||||
{cp.chargePointVendor}
|
{cp.feePerKwh} 分
|
||||||
</span>
|
<span className="ml-1 text-xs text-muted">
|
||||||
)}
|
(¥{(cp.feePerKwh / 100).toFixed(2)}/kWh)
|
||||||
{cp.chargePointModel && (
|
</span>
|
||||||
<span className="text-sm text-foreground">{cp.chargePointModel}</span>
|
</span>
|
||||||
)}
|
) : (
|
||||||
|
<span className="text-muted">免费</span>
|
||||||
|
)}
|
||||||
|
</Table.Cell>
|
||||||
|
<Table.Cell>
|
||||||
|
{cp.lastHeartbeatAt ? (
|
||||||
|
dayjs(cp.lastHeartbeatAt).format("YYYY/M/D HH:mm:ss")
|
||||||
|
) : (
|
||||||
|
<span className="text-muted">—</span>
|
||||||
|
)}
|
||||||
|
</Table.Cell>
|
||||||
|
<Table.Cell>
|
||||||
|
{cp.chargePointStatus ? (
|
||||||
|
<div className="flex items-center gap-1.5">
|
||||||
|
<span
|
||||||
|
className={`size-1.5 shrink-0 rounded-full ${statusDotClass[cp.chargePointStatus] ?? "bg-warning"}`}
|
||||||
|
/>
|
||||||
|
<span className="text-sm text-foreground text-nowrap">
|
||||||
|
{cp.chargePointStatus === "Available"
|
||||||
|
? "正常"
|
||||||
|
: (statusLabelMap[cp.chargePointStatus] ?? cp.chargePointStatus)}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<span className="text-muted">—</span>
|
<span className="text-muted">—</span>
|
||||||
)}
|
)}
|
||||||
</Table.Cell>
|
</Table.Cell>
|
||||||
)}
|
|
||||||
{isAdmin && (
|
|
||||||
<Table.Cell>
|
<Table.Cell>
|
||||||
<Chip
|
<ConnectorCell connectors={cp.connectors} />
|
||||||
color={registrationColorMap[cp.registrationStatus] ?? "warning"}
|
|
||||||
size="sm"
|
|
||||||
variant="soft"
|
|
||||||
>
|
|
||||||
{cp.registrationStatus}
|
|
||||||
</Chip>
|
|
||||||
</Table.Cell>
|
</Table.Cell>
|
||||||
)}
|
{isAdmin && (
|
||||||
<Table.Cell>
|
<Table.Cell>
|
||||||
{cp.pricingMode === "tou" ? (
|
<div className="flex items-center gap-1">
|
||||||
<span className="text-accent font-medium">峰谷电价</span>
|
|
||||||
) : cp.feePerKwh > 0 ? (
|
|
||||||
<span>
|
|
||||||
{cp.feePerKwh} 分
|
|
||||||
<span className="ml-1 text-xs text-muted">
|
|
||||||
(¥{(cp.feePerKwh / 100).toFixed(2)}/kWh)
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<span className="text-muted">免费</span>
|
|
||||||
)}
|
|
||||||
</Table.Cell>
|
|
||||||
<Table.Cell>
|
|
||||||
{cp.lastHeartbeatAt ? (
|
|
||||||
dayjs(cp.lastHeartbeatAt).format("YYYY/M/D HH:mm:ss")
|
|
||||||
) : (
|
|
||||||
<span className="text-muted">—</span>
|
|
||||||
)}
|
|
||||||
</Table.Cell>
|
|
||||||
<Table.Cell>
|
|
||||||
{cp.chargePointStatus ? (
|
|
||||||
<div className="flex items-center gap-1.5">
|
|
||||||
<span
|
|
||||||
className={`size-1.5 shrink-0 rounded-full ${statusDotClass[cp.chargePointStatus] ?? "bg-warning"}`}
|
|
||||||
/>
|
|
||||||
<span className="text-sm text-foreground text-nowrap">
|
|
||||||
{cp.chargePointStatus === "Available"
|
|
||||||
? "正常"
|
|
||||||
: (statusLabelMap[cp.chargePointStatus] ?? cp.chargePointStatus)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<span className="text-muted">—</span>
|
|
||||||
)}
|
|
||||||
</Table.Cell>
|
|
||||||
<Table.Cell>
|
|
||||||
<ConnectorCell connectors={cp.connectors} />
|
|
||||||
</Table.Cell>
|
|
||||||
{isAdmin && (
|
|
||||||
<Table.Cell>
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<Button
|
|
||||||
isIconOnly
|
|
||||||
size="sm"
|
|
||||||
variant="tertiary"
|
|
||||||
onPress={() => openEdit(cp)}
|
|
||||||
>
|
|
||||||
<Pencil className="size-4" />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
isIconOnly
|
|
||||||
size="sm"
|
|
||||||
variant="tertiary"
|
|
||||||
onPress={() => setQrTarget(cp)}
|
|
||||||
aria-label="查看二维码"
|
|
||||||
>
|
|
||||||
<QrCode className="size-4" />
|
|
||||||
</Button>
|
|
||||||
<Modal>
|
|
||||||
<Button
|
<Button
|
||||||
isIconOnly
|
isIconOnly
|
||||||
size="sm"
|
size="sm"
|
||||||
variant="danger-soft"
|
variant="tertiary"
|
||||||
onPress={() => setDeleteTarget(cp)}
|
onPress={() => openEdit(cp)}
|
||||||
>
|
>
|
||||||
<TrashBin className="size-4" />
|
<Pencil className="size-4" />
|
||||||
</Button>
|
</Button>
|
||||||
<Modal.Backdrop>
|
<Button
|
||||||
<Modal.Container scroll="outside">
|
isIconOnly
|
||||||
<Modal.Dialog className="sm:max-w-96">
|
size="sm"
|
||||||
<Modal.CloseTrigger />
|
variant="tertiary"
|
||||||
<Modal.Header>
|
onPress={() => setQrTarget(cp)}
|
||||||
<Modal.Heading>确认删除充电桩</Modal.Heading>
|
aria-label="查看二维码"
|
||||||
</Modal.Header>
|
>
|
||||||
<Modal.Body>
|
<QrCode className="size-4" />
|
||||||
<p className="text-sm text-muted">
|
</Button>
|
||||||
将删除充电桩{" "}
|
<Modal>
|
||||||
<span className="font-medium text-foreground">
|
<Button
|
||||||
{cp.deviceName ?? cp.chargePointIdentifier}
|
isIconOnly
|
||||||
</span>
|
size="sm"
|
||||||
{cp.deviceName && (
|
variant="danger-soft"
|
||||||
<span className="font-mono ml-1 text-xs text-muted">
|
onPress={() => setDeleteTarget(cp)}
|
||||||
({cp.chargePointIdentifier})
|
>
|
||||||
|
<TrashBin className="size-4" />
|
||||||
|
</Button>
|
||||||
|
<Modal.Backdrop>
|
||||||
|
<Modal.Container scroll="outside">
|
||||||
|
<Modal.Dialog className="sm:max-w-96">
|
||||||
|
<Modal.CloseTrigger />
|
||||||
|
<Modal.Header>
|
||||||
|
<Modal.Heading>确认删除充电桩</Modal.Heading>
|
||||||
|
</Modal.Header>
|
||||||
|
<Modal.Body>
|
||||||
|
<p className="text-sm text-muted">
|
||||||
|
将删除充电桩{" "}
|
||||||
|
<span className="font-medium text-foreground">
|
||||||
|
{cp.deviceName ?? cp.chargePointIdentifier}
|
||||||
</span>
|
</span>
|
||||||
)}
|
{cp.deviceName && (
|
||||||
及其所有连接器和充电记录，此操作不可恢复。
|
<span className="font-mono ml-1 text-xs text-muted">
|
||||||
</p>
|
({cp.chargePointIdentifier})
|
||||||
</Modal.Body>
|
</span>
|
||||||
<Modal.Footer className="flex justify-end gap-2">
|
)}
|
||||||
<Button slot="close" variant="ghost">
|
及其所有连接器和充电记录，此操作不可恢复。
|
||||||
取消
|
</p>
|
||||||
</Button>
|
</Modal.Body>
|
||||||
<Button
|
<Modal.Footer className="flex justify-end gap-2">
|
||||||
slot="close"
|
<Button slot="close" variant="ghost">
|
||||||
variant="danger"
|
取消
|
||||||
isDisabled={deleting}
|
</Button>
|
||||||
onPress={handleDelete}
|
<Button
|
||||||
>
|
slot="close"
|
||||||
{deleting ? <Spinner size="sm" /> : "确认删除"}
|
variant="danger"
|
||||||
</Button>
|
isDisabled={deleting}
|
||||||
</Modal.Footer>
|
onPress={handleDelete}
|
||||||
</Modal.Dialog>
|
>
|
||||||
</Modal.Container>
|
{deleting ? <Spinner size="sm" /> : "确认删除"}
|
||||||
</Modal.Backdrop>
|
</Button>
|
||||||
</Modal>
|
</Modal.Footer>
|
||||||
</div>
|
</Modal.Dialog>
|
||||||
</Table.Cell>
|
</Modal.Container>
|
||||||
)}
|
</Modal.Backdrop>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
</Table.Cell>
|
||||||
|
)}
|
||||||
</Table.Row>
|
</Table.Row>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|||||||
Submodule hardware/pcb/.history updated: 468ec3b809...a87aae3571
Reference in New Issue
Block a user