HoshinoSuzumi/helios-evcs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加信息和指标组件以增强充电订单和计量信息的展示

Browse Source
This commit is contained in:
Timothy Yin
2026-03-13 12:11:33 +08:00
parent 83e6ed2412
commit a6621f975c
5 changed files with 266 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
apps/web/app/dashboard/charge-points/[id]/page.tsx
View File

@@ -16,10 +16,11 @@ import {
Table, Table,
TextField, TextField,
} from "@heroui/react"; } from "@heroui/react";
import { ArrowLeft, Pencil, PlugConnection, ArrowRotateRight } from "@gravity-ui/icons"; import { ArrowLeft, Pencil, ArrowRotateRight } from "@gravity-ui/icons";
import { api } from "@/lib/api"; import { api } 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 InfoSection from "@/components/info-section";
import { Plug } from "lucide-react"; import { Plug } from "lucide-react";
// ── Status maps ──────────────────────────────────────────────────────────── // ── Status maps ────────────────────────────────────────────────────────────
@@ -270,8 +271,7 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
<div className="grid gap-4 md:grid-cols-2"> <div className="grid gap-4 md:grid-cols-2">
{/* Device info — admin only */} {/* Device info — admin only */}
{isAdmin && ( {isAdmin && (
<div className="rounded-xl border border-border bg-surface p-4"> <InfoSection title="设备信息">
<h2 className="mb-3 text-sm font-semibold text-foreground">设备信息</h2>
<dl className="divide-y divide-border"> <dl className="divide-y divide-border">
{[ {[
{ label: "品牌", value: cp.chargePointVendor }, { label: "品牌", value: cp.chargePointVendor },
@@ -291,13 +291,12 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
</div> </div>
))} ))}
</dl> </dl>
</div> </InfoSection>
)} )}
{/* Operation info — admin only */} {/* Operation info — admin only */}
{isAdmin && ( {isAdmin && (
<div className="rounded-xl border border-border bg-surface p-4"> <InfoSection title="运行配置">
<h2 className="mb-3 text-sm font-semibold text-foreground">运行配置</h2>
<dl className="divide-y divide-border"> <dl className="divide-y divide-border">
<div className="flex items-center justify-between gap-4 py-2"> <div className="flex items-center justify-between gap-4 py-2">
<dt className="shrink-0 text-sm text-muted">注册状态</dt> <dt className="shrink-0 text-sm text-muted">注册状态</dt>
@@ -369,13 +368,12 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
</dd> </dd>
</div> </div>
</dl> </dl>
</div> </InfoSection>
)} )}
{/* Fee info — user only */} {/* Fee info — user only */}
{!isAdmin && ( {!isAdmin && (
<div className="rounded-xl border border-border bg-surface p-4"> <InfoSection title="电价信息">
<h2 className="mb-3 text-sm font-semibold text-foreground">电价信息</h2>
<dl className="divide-y divide-border"> <dl className="divide-y divide-border">
<div className="flex items-center justify-between gap-4 py-2"> <div className="flex items-center justify-between gap-4 py-2">
<dt className="shrink-0 text-sm text-muted">单位电价</dt> <dt className="shrink-0 text-sm text-muted">单位电价</dt>
@@ -404,7 +402,7 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
</dd> </dd>
</div> </div>
</dl> </dl>
</div> </InfoSection>
)} )}
</div> </div>

35
apps/web/app/dashboard/page.tsx
View File

@@ -2,15 +2,13 @@
import { useState } from "react"; import { useState } from "react";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { Button, Card, Spinner } from "@heroui/react"; import { Button, Spinner } from "@heroui/react";
import Link from "next/link"; import Link from "next/link";
import { import {
Thunderbolt, Thunderbolt,
PlugConnection,
CreditCard, CreditCard,
ChartColumn, ChartColumn,
TagDollar, TagDollar,
Person,
ArrowRotateRight, ArrowRotateRight,
TriangleExclamation, TriangleExclamation,
} from "@gravity-ui/icons"; } from "@gravity-ui/icons";
@@ -27,6 +25,7 @@ import {
type ChartDataPoint, type ChartDataPoint,
} from "@/lib/api"; } from "@/lib/api";
import { BanknoteArrowDown, EvCharger, Plug, Users } from "lucide-react"; import { BanknoteArrowDown, EvCharger, Plug, Users } from "lucide-react";
import MetricIndicator from "@/components/metric-indicator";
// ── Helpers ──────────────────────────────────────────────────────────────── // ── Helpers ────────────────────────────────────────────────────────────────
@@ -72,24 +71,20 @@ function StatCard({
}) { }) {
const s = colorStyles[color]; const s = colorStyles[color];
return ( return (
<Card className={`border-t-2 ${s.border}`}> <MetricIndicator
<Card.Content className="flex flex-col gap-3"> title={title}
<div className="flex items-start justify-between gap-2"> value={value}
<p className="text-sm text-muted">{title}</p> color={s.border}
{Icon && ( valueClassName="text-3xl font-bold tabular-nums leading-none text-foreground"
<div className={`flex size-9 shrink-0 items-center justify-center rounded-xl ${s.bg}`}> icon={
<Icon className={`size-4.5 ${s.icon}`} /> Icon ? (
</div> <div className={`flex size-9 shrink-0 items-center justify-center rounded-xl ${s.bg}`}>
)} <Icon className={`size-4.5 ${s.icon}`} />
</div>
<p className="text-3xl font-bold tabular-nums leading-none text-foreground">{value}</p>
{footer && (
<div className="flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs text-muted">
{footer}
</div> </div>
)} ) : undefined
</Card.Content> }
</Card> footer={footer}
/>
); );
} }

295
apps/web/app/dashboard/transactions/[id]/page.tsx
View File

@@ -4,11 +4,35 @@ import { use, useState } from "react";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { Button, Chip, Modal, Spinner } from "@heroui/react"; import { Alert, Button, Chip, Modal, Spinner } from "@heroui/react";
import { ArrowLeft, ArrowRotateRight, TrashBin } from "@gravity-ui/icons"; import { ArrowLeft, ArrowRotateRight, TrashBin } from "@gravity-ui/icons";
import { APIError, api } from "@/lib/api"; import { APIError, api } 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 InfoSection from "@/components/info-section";
import MetricIndicator from "@/components/metric-indicator";
import { BanknoteArrowUp, Clock, EvCharger } from "lucide-react";
const stopReasonLabelMap: Record<string, string> = {
EmergencyStop: "紧急停止",
EVDisconnected: "车辆断开",
HardReset: "硬重启",
Local: "本地结束",
Other: "其他原因",
PowerLoss: "断电结束",
Reboot: "重启结束",
Remote: "远程结束",
SoftReset: "软重启",
UnlockCommand: "解锁结束",
DeAuthorized: "鉴权拒绝",
};
const idTagRejectLabelMap: Record<string, string> = {
Blocked: "卡片不可用或余额不足",
Expired: "卡片已过期",
Invalid: "卡片无效",
ConcurrentTx: "该卡已有进行中的订单",
};
function formatDuration(start: string, stop: string | null): string { function formatDuration(start: string, stop: string | null): string {
if (!stop) return "进行中"; if (!stop) return "进行中";
@@ -128,6 +152,14 @@ export default function TransactionDetailPage({ params }: { params: Promise<{ id
const amountFen = tx.chargeAmount ?? tx.estimatedCost; const amountFen = tx.chargeAmount ?? tx.estimatedCost;
const isEstimatedEnergy = tx.energyWh == null && tx.liveEnergyWh != null; const isEstimatedEnergy = tx.energyWh == null && tx.liveEnergyWh != null;
const isEstimatedAmount = tx.chargeAmount == null && tx.estimatedCost != null; const isEstimatedAmount = tx.chargeAmount == null && tx.estimatedCost != null;
const isRejected = tx.stopReason === "DeAuthorized";
const stopReasonLabel = tx.stopReason
? (stopReasonLabelMap[tx.stopReason] ?? tx.stopReason)
: "—";
const rejectReason =
tx.idTagStatus && tx.idTagStatus !== "Accepted"
? (idTagRejectLabelMap[tx.idTagStatus] ?? tx.idTagStatus)
: "鉴权失败";
return ( return (
<div className="space-y-6"> <div className="space-y-6">
@@ -142,8 +174,12 @@ export default function TransactionDetailPage({ params }: { params: Promise<{ id
<div className="flex flex-wrap items-start justify-between gap-4"> <div className="flex flex-wrap items-start justify-between gap-4">
<div className="space-y-1.5"> <div className="space-y-1.5">
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
<h1 className="font-mono text-2xl font-semibold text-foreground">充电订单#{tx.id}</h1> <h1 className="font-mono text-2xl font-semibold text-foreground">订单 #{tx.id}</h1>
{tx.stopTimestamp ? ( {isRejected ? (
<Chip color="danger" size="sm" variant="soft">
已拒绝
</Chip>
) : tx.stopTimestamp ? (
<Chip color="success" size="sm" variant="soft"> <Chip color="success" size="sm" variant="soft">
已完成 已完成
</Chip> </Chip>
@@ -157,6 +193,11 @@ export default function TransactionDetailPage({ params }: { params: Promise<{ id
费用预估 费用预估
</Chip> </Chip>
)} )}
{tx.stopReason && !isRejected && (
<Chip color="default" size="sm" variant="soft">
{stopReasonLabel}
</Chip>
)}
</div> </div>
<p className="text-sm text-muted"> <p className="text-sm text-muted">
开始于 {formatDateTime(tx.startTimestamp)} · {tx.stopTimestamp ? "时长 " : ""} 开始于 {formatDateTime(tx.startTimestamp)} · {tx.stopTimestamp ? "时长 " : ""}
@@ -251,118 +292,156 @@ export default function TransactionDetailPage({ params }: { params: Promise<{ id
</div> </div>
</div> </div>
<Alert status={isRejected ? "danger" : tx.stopTimestamp ? "success" : "accent"}>
<Alert.Indicator />
<Alert.Content>
<Alert.Title>
{isRejected ? "交易已被系统拒绝" : tx.stopTimestamp ? "本次交易已结束" : "充电进行中"}
</Alert.Title>
<Alert.Description>
{isRejected
? rejectReason
: tx.stopTimestamp
? `结束原因：${stopReasonLabel}`
: "充电进行中，实际充电量和费用以结束时系统计算为准。"}
</Alert.Description>
</Alert.Content>
</Alert>
<div className="grid gap-4 md:grid-cols-4"> <div className="grid gap-4 md:grid-cols-4">
<div className="rounded-xl border border-border bg-surface-secondary p-4"> <MetricIndicator
<p className="text-xs text-muted">充电量</p> title="充电量"
<div className="mt-1 inline-flex items-center gap-1.5"> color="border-success"
<p className="text-xl font-semibold text-foreground">{formatEnergy(energyWh)}</p> icon={<EvCharger className="size-5 text-success" />}
{isEstimatedEnergy && ( value={
<span className="rounded bg-warning-soft px-1 py-0.5 text-[10px] font-semibold text-warning leading-none text-nowrap"> <span className="inline-flex items-center gap-1.5">
预估 {formatEnergy(energyWh)}
</span> {isEstimatedEnergy && (
)} <span className="rounded bg-warning-soft px-1 py-0.5 text-[10px] font-semibold text-warning leading-none text-nowrap">
</div> 预估
</div> </span>
<div className="rounded-xl border border-border bg-surface-secondary p-4"> )}
<p className="text-xs text-muted">总费用</p> </span>
<div className="mt-1 inline-flex items-center gap-1.5"> }
<p className="text-xl font-semibold text-foreground">{formatAmount(amountFen)}</p> />
{isEstimatedAmount && ( <MetricIndicator
<span className="rounded bg-warning-soft px-1 py-0.5 text-[10px] font-semibold text-warning leading-none text-nowrap"> title="总费用"
预估 color="border-accent"
</span> icon={<BanknoteArrowUp className="size-5 text-accent" />}
)} value={
</div> <span className="inline-flex items-center gap-1.5">
</div> {formatAmount(amountFen)}
<div className="rounded-xl border border-border bg-surface-secondary p-4"> {isEstimatedAmount && (
<p className="text-xs text-muted">状态</p> <span className="rounded bg-warning-soft px-1 py-0.5 text-[10px] font-semibold text-warning leading-none text-nowrap">
<p className="mt-1 text-xl font-semibold text-foreground"> 预估
{tx.stopTimestamp ? "已完成" : "进行中"} </span>
</p> )}
</div> </span>
<div className="rounded-xl border border-border bg-surface-secondary p-4"> }
<p className="text-xs text-muted">停止原因</p> />
<p className="mt-1 text-xl font-semibold text-foreground">{tx.stopReason ?? "—"}</p> <MetricIndicator
</div> title="订单状态"
icon={<Clock className="size-5 text-foreground" />}
color={
isRejected ? "border-danger" : tx.stopTimestamp ? "border-success" : "border-warning"
}
value={isRejected ? "已拒绝" : tx.stopTimestamp ? "已完成" : "进行中"}
/>
<MetricIndicator title="停止原因" value={isRejected ? rejectReason : stopReasonLabel} />
</div> </div>
<div className="grid gap-4 lg:grid-cols-2"> <div className="grid gap-4 lg:grid-cols-2">
<div className="rounded-xl border border-border bg-surface-secondary"> <InfoSection title="交易信息">
<div className="border-b border-border px-5 py-3.5"> <dl className="divide-y divide-border">
<p className="text-sm font-semibold text-foreground">交易信息</p> <div className="flex items-center justify-between gap-4 py-2">
</div> <dt className="shrink-0 text-sm text-muted">交易编号</dt>
<dl className="grid grid-cols-[120px_1fr] gap-x-4 gap-y-3 px-5 py-4 text-sm"> <dd className="font-mono text-sm text-foreground">#{tx.id}</dd>
<dt className="text-muted">交易编号</dt> </div>
<dd className="font-mono text-foreground">#{tx.id}</dd> <div className="flex items-center justify-between gap-4 py-2">
<dt className="shrink-0 text-sm text-muted">储值卡</dt>
<dt className="text-muted">储值卡</dt> <dd className="font-mono text-sm text-foreground">{tx.idTag}</dd>
<dd className="font-mono text-foreground">{tx.idTag}</dd> </div>
<div className="flex items-center justify-between gap-4 py-2">
<dt className="text-muted">桩编号</dt> <dt className="shrink-0 text-sm text-muted">桩编号</dt>
<dd className="font-mono text-foreground">{tx.chargePointIdentifier ?? "—"}</dd> <dd className="font-mono text-sm text-foreground">
{tx.chargePointIdentifier ?? "—"}
<dt className="text-muted">连接器</dt> </dd>
<dd className="text-foreground">{tx.connectorNumber ?? "—"}</dd> </div>
<div className="flex items-center justify-between gap-4 py-2">
<dt className="text-muted">开始时间</dt> <dt className="shrink-0 text-sm text-muted">连接器</dt>
<dd className="text-foreground">{formatDateTime(tx.startTimestamp)}</dd> <dd className="text-sm text-foreground">{tx.connectorNumber ?? "—"}</dd>
</div>
<dt className="text-muted">结束时间</dt> <div className="flex items-center justify-between gap-4 py-2">
<dd className="text-foreground">{formatDateTime(tx.stopTimestamp)}</dd> <dt className="shrink-0 text-sm text-muted">开始时间</dt>
<dd className="text-right text-sm text-foreground">
<dt className="text-muted">持续时长</dt> {formatDateTime(tx.startTimestamp)}
<dd className="text-foreground"> </dd>
{formatDuration(tx.startTimestamp, tx.stopTimestamp)} </div>
</dd> <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">
{formatDateTime(tx.stopTimestamp)}
</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">
{formatDuration(tx.startTimestamp, tx.stopTimestamp)}
</dd>
</div>
</dl> </dl>
</div> </InfoSection>
<div className="rounded-xl border border-border bg-surface-secondary"> <InfoSection title="计量与费用">
<div className="border-b border-border px-5 py-3.5"> <dl className="divide-y divide-border">
<p className="text-sm font-semibold text-foreground">计量与费用</p> <div className="flex items-center justify-between gap-4 py-2">
</div> <dt className="shrink-0 text-sm text-muted">起始表计</dt>
<dl className="grid grid-cols-[140px_1fr] gap-x-4 gap-y-3 px-5 py-4 text-sm"> <dd className="text-sm text-foreground">
<dt className="text-muted">起始表计</dt> {tx.startMeterValue != null ? `${tx.startMeterValue} Wh` : "—"}
<dd className="text-foreground"> </dd>
{tx.startMeterValue != null ? `${tx.startMeterValue} Wh` : "—"} </div>
</dd> <div className="flex items-center justify-between gap-4 py-2">
<dt className="shrink-0 text-sm text-muted">结束表计</dt>
<dt className="text-muted">结束表计</dt> <dd className="text-sm text-foreground">
<dd className="text-foreground"> {tx.stopMeterValue != null ? `${tx.stopMeterValue} Wh` : "—"}
{tx.stopMeterValue != null ? `${tx.stopMeterValue} Wh` : "—"} </dd>
</dd> </div>
<div className="flex items-center justify-between gap-4 py-2">
<dt className="text-muted">消耗电量</dt> <dt className="shrink-0 text-sm text-muted">消耗电量</dt>
<dd className="text-foreground"> <dd className="text-sm text-foreground">
<span className="inline-flex items-center gap-1"> <span className="inline-flex items-center gap-1">
{formatEnergy(energyWh)} {formatEnergy(energyWh)}
{isEstimatedEnergy && ( {isEstimatedEnergy && (
<span className="rounded bg-warning-soft px-1 py-0.5 text-[10px] font-semibold text-warning leading-none text-nowrap"> <span className="rounded bg-warning-soft px-1 py-0.5 text-[10px] font-semibold text-warning leading-none text-nowrap">
预估 预估
</span> </span>
)} )}
</span> </span>
</dd> </dd>
</div>
<dt className="text-muted">电费</dt> <div className="flex items-center justify-between gap-4 py-2">
<dd className="text-foreground">{formatAmount(tx.electricityFee)}</dd> <dt className="shrink-0 text-sm text-muted">电费</dt>
<dd className="text-sm text-foreground">{formatAmount(tx.electricityFee)}</dd>
<dt className="text-muted">服务费</dt> </div>
<dd className="text-foreground">{formatAmount(tx.serviceFee)}</dd> <div className="flex items-center justify-between gap-4 py-2">
<dt className="shrink-0 text-sm text-muted">服务费</dt>
<dt className="text-muted">总费用</dt> <dd className="text-sm text-foreground">{formatAmount(tx.serviceFee)}</dd>
<dd className="text-foreground"> </div>
<span className="inline-flex items-center gap-1"> <div className="flex items-center justify-between gap-4 py-2">
{formatAmount(amountFen)} <dt className="shrink-0 text-sm text-muted">总费用</dt>
{isEstimatedAmount && ( <dd className="text-sm text-foreground">
<span className="rounded bg-warning-soft px-1 py-0.5 text-[10px] font-semibold text-warning leading-none text-nowrap"> <span className="inline-flex items-center gap-1">
预估 {formatAmount(amountFen)}
</span> {isEstimatedAmount && (
)} <span className="rounded bg-warning-soft px-1 py-0.5 text-[10px] font-semibold text-warning leading-none text-nowrap">
</span> 预估
</dd> </span>
)}
</span>
</dd>
</div>
</dl> </dl>
</div> </InfoSection>
</div> </div>
</div> </div>
); );

15
apps/web/components/info-section.tsx Normal file
View File

@@ -0,0 +1,15 @@
import type { ReactNode } from "react";
type InfoSectionProps = {
title: string;
children: ReactNode;
};
export default function InfoSection({ title, children }: InfoSectionProps) {
return (
<div className="rounded-xl border border-border bg-surface p-4">
<h2 className="mb-3 text-sm font-semibold text-foreground">{title}</h2>
{children}
</div>
);
}

41
apps/web/components/metric-indicator.tsx Normal file
View File

@@ -0,0 +1,41 @@
import type { ReactNode } from "react";
import { Card } from "@heroui/react";
type MetricIndicatorProps = {
title: string;
value: ReactNode;
hint?: ReactNode;
footer?: ReactNode;
icon?: ReactNode;
color?: string;
valueClassName?: string;
};
export default function MetricIndicator({
title,
value,
hint,
footer,
icon,
color = "border-border",
valueClassName = "text-xl font-semibold text-foreground tabular-nums",
}: MetricIndicatorProps) {
return (
<Card className={`border-t-2 ${color}`}>
<Card.Content className="flex flex-col gap-3">
<div className="flex items-start justify-between gap-2">
<p className="text-xs text-muted">{title}</p>
{icon}
</div>
<p className={valueClassName}>{value}</p>
{footer ? (
<div className="flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs text-muted">
{footer}
</div>
) : (
hint && <div className="text-xs text-muted">{hint}</div>
)}
</Card.Content>
</Card>
);
}