feat: add emergency incident workspace
This commit is contained in:
302
modules/emergency/components/EmergencyWorkspaceClient.tsx
Normal file
302
modules/emergency/components/EmergencyWorkspaceClient.tsx
Normal file
@@ -0,0 +1,302 @@
|
||||
"use client";
|
||||
|
||||
import { FormEvent, useMemo, useState } from "react";
|
||||
import { CheckCircle2, CircleAlert, Search, ShieldAlert, Siren } from "lucide-react";
|
||||
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Dialog } from "@/components/ui/dialog";
|
||||
import { Input, Textarea } from "@/components/ui/input";
|
||||
import { Select } from "@/components/ui/select";
|
||||
import { Table } from "@/components/ui/table";
|
||||
import type { ApiResult } from "@/modules/core/server/api";
|
||||
import type { IncidentSeverity, IncidentStatus } from "@/modules/core/types";
|
||||
import type { EmergencyIncident, EmergencyIncidentData } from "@/modules/emergency/types";
|
||||
import { INCIDENT_SEVERITY_LABELS, INCIDENT_STATUS_LABELS } from "@/modules/emergency/types";
|
||||
|
||||
type EmergencyWorkspaceClientProps = {
|
||||
canManage: boolean;
|
||||
initialData: EmergencyIncidentData;
|
||||
};
|
||||
|
||||
const emptyCreateForm = {
|
||||
severity: "warning" as IncidentSeverity,
|
||||
title: "",
|
||||
description: "",
|
||||
source: "人工上报",
|
||||
};
|
||||
|
||||
function formatDateTime(value: string | undefined): string {
|
||||
return value ? new Date(value).toLocaleString("zh-CN") : "-";
|
||||
}
|
||||
|
||||
function severityVariant(severity: IncidentSeverity): "danger" | "secondary" | "warning" {
|
||||
if (severity === "critical") {
|
||||
return "danger";
|
||||
}
|
||||
|
||||
return severity === "warning" ? "warning" : "secondary";
|
||||
}
|
||||
|
||||
function statusVariant(status: IncidentStatus): "success" | "secondary" | "warning" {
|
||||
if (status === "open") {
|
||||
return "warning";
|
||||
}
|
||||
|
||||
return status === "resolved" || status === "closed" ? "success" : "secondary";
|
||||
}
|
||||
|
||||
export function EmergencyWorkspaceClient({ canManage, initialData }: EmergencyWorkspaceClientProps): React.ReactElement {
|
||||
const [data, setData] = useState(initialData);
|
||||
const [query, setQuery] = useState("");
|
||||
const [statusFilter, setStatusFilter] = useState<"all" | IncidentStatus>("all");
|
||||
const [severityFilter, setSeverityFilter] = useState<"all" | IncidentSeverity>("all");
|
||||
const [message, setMessage] = useState("");
|
||||
const [isPending, setIsPending] = useState(false);
|
||||
const [isCreateOpen, setIsCreateOpen] = useState(false);
|
||||
const [createForm, setCreateForm] = useState(emptyCreateForm);
|
||||
|
||||
const normalizedQuery = query.trim().toLowerCase();
|
||||
const filteredIncidents = useMemo(
|
||||
() =>
|
||||
data.incidents.filter((incident) => {
|
||||
const matchesQuery =
|
||||
!normalizedQuery ||
|
||||
[incident.title, incident.description, incident.source].join(" ").toLowerCase().includes(normalizedQuery);
|
||||
const matchesStatus = statusFilter === "all" || incident.status === statusFilter;
|
||||
const matchesSeverity = severityFilter === "all" || incident.severity === severityFilter;
|
||||
return matchesQuery && matchesStatus && matchesSeverity;
|
||||
}),
|
||||
[data.incidents, normalizedQuery, severityFilter, statusFilter],
|
||||
);
|
||||
|
||||
async function refreshData(): Promise<void> {
|
||||
const response = await fetch("/api/emergency/incidents");
|
||||
const result = (await response.json()) as ApiResult<{ data: EmergencyIncidentData }>;
|
||||
if (result.success) {
|
||||
setData(result.data);
|
||||
}
|
||||
}
|
||||
|
||||
async function createIncident(event: FormEvent<HTMLFormElement>): Promise<void> {
|
||||
event.preventDefault();
|
||||
if (!canManage) {
|
||||
setMessage("当前角色无权创建应急事件");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsPending(true);
|
||||
setMessage("");
|
||||
const response = await fetch("/api/emergency/incidents", {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify(createForm),
|
||||
});
|
||||
const result = (await response.json()) as ApiResult<{ incident: EmergencyIncident }>;
|
||||
setIsPending(false);
|
||||
setMessage(result.reason);
|
||||
|
||||
if (result.success) {
|
||||
setIsCreateOpen(false);
|
||||
setCreateForm(emptyCreateForm);
|
||||
await refreshData();
|
||||
}
|
||||
}
|
||||
|
||||
async function updateStatus(incident: EmergencyIncident, status: IncidentStatus): Promise<void> {
|
||||
if (!canManage) {
|
||||
setMessage("当前角色无权处理应急事件");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsPending(true);
|
||||
setMessage("");
|
||||
const response = await fetch(`/api/emergency/incidents/${incident.id}`, {
|
||||
method: "PATCH",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify({ status }),
|
||||
});
|
||||
const result = (await response.json()) as ApiResult<{ incident: EmergencyIncident }>;
|
||||
setIsPending(false);
|
||||
setMessage(result.reason);
|
||||
|
||||
if (result.success) {
|
||||
await refreshData();
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto flex w-full max-w-7xl flex-col gap-5">
|
||||
<section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
||||
<MetricCard icon={CircleAlert} label="待处理" value={data.metrics.open} />
|
||||
<MetricCard icon={ShieldAlert} label="已确认" value={data.metrics.acknowledged} />
|
||||
<MetricCard icon={Siren} label="紧急事件" value={data.metrics.critical} />
|
||||
<MetricCard icon={CheckCircle2} label="今日解决" value={data.metrics.resolvedToday} />
|
||||
</section>
|
||||
|
||||
<section className="flex flex-col gap-3 border-b pb-4 xl:flex-row xl:items-center xl:justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-semibold tracking-normal">安全应急</h1>
|
||||
<p className="mt-2 text-sm text-muted-foreground">查看、确认、解决和关闭机构内安全应急事件。</p>
|
||||
</div>
|
||||
<div className="grid gap-2 sm:grid-cols-2 xl:flex xl:items-center">
|
||||
<label className="relative block sm:col-span-2 xl:col-span-1">
|
||||
<Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
className="w-full pl-9 xl:w-72"
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
placeholder="搜索事件、来源或描述"
|
||||
value={query}
|
||||
/>
|
||||
</label>
|
||||
<Select
|
||||
aria-label="事件状态"
|
||||
onValueChange={(value) => setStatusFilter(value as "all" | IncidentStatus)}
|
||||
options={[
|
||||
{ value: "all", label: "全部状态" },
|
||||
...Object.entries(INCIDENT_STATUS_LABELS).map(([value, label]) => ({ value, label })),
|
||||
]}
|
||||
value={statusFilter}
|
||||
/>
|
||||
<Select
|
||||
aria-label="事件级别"
|
||||
onValueChange={(value) => setSeverityFilter(value as "all" | IncidentSeverity)}
|
||||
options={[
|
||||
{ value: "all", label: "全部级别" },
|
||||
...Object.entries(INCIDENT_SEVERITY_LABELS).map(([value, label]) => ({ value, label })),
|
||||
]}
|
||||
value={severityFilter}
|
||||
/>
|
||||
<Button disabled={!canManage} onClick={() => setIsCreateOpen(true)} type="button">
|
||||
新建事件
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{message ? (
|
||||
<p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
|
||||
{message}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>应急事件</CardTitle>
|
||||
<CardDescription>状态处理会记录确认人、解决人和审计日志。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="overflow-x-auto">
|
||||
<Table className="w-full min-w-[960px] text-sm">
|
||||
<Table.Header className="bg-secondary text-left text-xs text-muted-foreground">
|
||||
<Table.Row>
|
||||
<Table.Head className="px-4 py-3 font-medium">事件</Table.Head>
|
||||
<Table.Head className="px-4 py-3 font-medium">级别</Table.Head>
|
||||
<Table.Head className="px-4 py-3 font-medium">状态</Table.Head>
|
||||
<Table.Head className="px-4 py-3 font-medium">来源</Table.Head>
|
||||
<Table.Head className="px-4 py-3 font-medium">确认/解决</Table.Head>
|
||||
<Table.Head className="px-4 py-3 font-medium">更新时间</Table.Head>
|
||||
<Table.Head className="px-4 py-3 text-right font-medium">操作</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body className="divide-y bg-card">
|
||||
{filteredIncidents.map((incident) => (
|
||||
<Table.Row key={incident.id}>
|
||||
<Table.Cell className="px-4 py-3">
|
||||
<p className="font-medium">{incident.title}</p>
|
||||
<p className="text-xs text-muted-foreground">{incident.description}</p>
|
||||
</Table.Cell>
|
||||
<Table.Cell className="px-4 py-3">
|
||||
<Badge variant={severityVariant(incident.severity)}>{INCIDENT_SEVERITY_LABELS[incident.severity]}</Badge>
|
||||
</Table.Cell>
|
||||
<Table.Cell className="px-4 py-3">
|
||||
<Badge variant={statusVariant(incident.status)}>{INCIDENT_STATUS_LABELS[incident.status]}</Badge>
|
||||
</Table.Cell>
|
||||
<Table.Cell className="px-4 py-3 text-muted-foreground">{incident.source}</Table.Cell>
|
||||
<Table.Cell className="px-4 py-3 text-muted-foreground">
|
||||
{incident.resolvedByName ?? incident.acknowledgedByName ?? "-"}
|
||||
</Table.Cell>
|
||||
<Table.Cell className="px-4 py-3 text-muted-foreground">{formatDateTime(incident.updatedAt)}</Table.Cell>
|
||||
<Table.Cell className="px-4 py-3">
|
||||
<div className="flex justify-end gap-2">
|
||||
{incident.status === "open" ? (
|
||||
<Button disabled={!canManage || isPending} onClick={() => updateStatus(incident, "acknowledged")} size="sm" type="button" variant="outline">
|
||||
确认
|
||||
</Button>
|
||||
) : null}
|
||||
{incident.status === "open" || incident.status === "acknowledged" ? (
|
||||
<Button disabled={!canManage || isPending} onClick={() => updateStatus(incident, "resolved")} size="sm" type="button">
|
||||
解决
|
||||
</Button>
|
||||
) : null}
|
||||
{incident.status === "resolved" ? (
|
||||
<Button disabled={!canManage || isPending} onClick={() => updateStatus(incident, "closed")} size="sm" type="button" variant="outline">
|
||||
关闭
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
))}
|
||||
{filteredIncidents.length === 0 ? (
|
||||
<Table.Row>
|
||||
<Table.Cell className="px-4 py-8 text-center text-muted-foreground" colSpan={7}>
|
||||
暂无应急事件
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
) : null}
|
||||
</Table.Body>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Dialog className="max-w-xl" description="手工登记安全、应急或巡检异常事件。" onClose={() => setIsCreateOpen(false)} open={isCreateOpen} title="新建应急事件">
|
||||
<form className="grid gap-3" onSubmit={createIncident}>
|
||||
<Input label="事件标题" onChange={(event) => setCreateForm((current) => ({ ...current, title: event.target.value }))} required value={createForm.title} />
|
||||
<Select
|
||||
label="事件级别"
|
||||
onValueChange={(value) => setCreateForm((current) => ({ ...current, severity: value as IncidentSeverity }))}
|
||||
options={Object.entries(INCIDENT_SEVERITY_LABELS).map(([value, label]) => ({ value, label }))}
|
||||
value={createForm.severity}
|
||||
/>
|
||||
<Input label="来源" onChange={(event) => setCreateForm((current) => ({ ...current, source: event.target.value }))} value={createForm.source} />
|
||||
<Textarea
|
||||
label="事件描述"
|
||||
onChange={(event) => setCreateForm((current) => ({ ...current, description: event.target.value }))}
|
||||
required
|
||||
value={createForm.description}
|
||||
/>
|
||||
<div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
|
||||
<Button disabled={isPending} onClick={() => setIsCreateOpen(false)} type="button" variant="outline">
|
||||
取消
|
||||
</Button>
|
||||
<Button disabled={isPending} type="submit">
|
||||
创建事件
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MetricCard({
|
||||
icon: Icon,
|
||||
label,
|
||||
value,
|
||||
}: {
|
||||
icon: React.ComponentType<{ "aria-hidden"?: boolean; className?: string }>;
|
||||
label: string;
|
||||
value: number;
|
||||
}): React.ReactElement {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between p-4">
|
||||
<div>
|
||||
<CardDescription>{label}</CardDescription>
|
||||
<CardTitle className="mt-2 text-3xl">{value}</CardTitle>
|
||||
</div>
|
||||
<Icon className="size-5 text-primary" aria-hidden={true} />
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user