564 lines
42 KiB
HTML
564 lines
42 KiB
HTML
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta content="width=device-width, initial-scale=1.0" name="viewport"><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=hankenGrotesk:wght@100..900&display=swap" rel="stylesheet"><style>@layer base { html, body { margin: 0; padding: 0; } body { overscroll-behavior: none; } main > :first-child { margin-top: 0 !important; } main > :last-child { margin-bottom: 0 !important; } } ::-webkit-scrollbar { display: none; }</style><script src="https://cdn.tailwindcss.com"></script><script id="tailwind-config">tailwind.config = { darkMode: "class", theme: { extend: { "colors": { "bg-page": "#eef3f8", "text-muted": "#5b6b7e", "surface-bright": "#f8f9ff", "primary-fixed-dim": "#b2c5ff", "accent-subtle": "rgba(29,111,255,0.08)", "on-surface-variant": "#424655", "on-surface": "#0d1c2c", "outline": "#727787", "outline-variant": "#c2c6d8", "secondary-fixed": "#eaddff", "status-error": "#dc2626", "on-tertiary-container": "#f4fffc", "inverse-primary": "#b2c5ff", "surface-container-low": "#eef4ff", "on-secondary-container": "#fffbff", "error": "#ba1a1a", "surface-container-high": "#dbe9ff", "on-primary-container": "#fefcff", "on-secondary-fixed": "#25005a", "on-secondary": "#ffffff", "surface-tint": "#0056d2", "inverse-surface": "#233142", "on-tertiary": "#ffffff", "on-secondary-fixed-variant": "#5a00c6", "secondary": "#712ae2", "on-tertiary-fixed-variant": "#005049", "primary-fixed": "#dae2ff", "inverse-on-surface": "#e9f1ff", "on-primary": "#ffffff", "status-warn": "#e0852b", "on-primary-fixed": "#001847", "on-background": "#0d1c2c", "secondary-fixed-dim": "#d2bbff", "surface-dim": "#ccdbf1", "surface-variant": "#d5e4fa", "surface-container": "#e5efff", "on-tertiary-fixed": "#00201d", "tertiary": "#00685f", "primary": "#0054cd", "on-primary-fixed-variant": "#0040a1", "primary-container": "#136bfb", "secondary-container": "#8a4cfc", "background": "#f8f9ff", "surface-container-highest": "#d5e4fa", "tertiary-fixed-dim": "#6bd8cb", "surface": "#ffffff", "on-error": "#ffffff", "surface-container-lowest": "#ffffff", "border-rule": "#dbe4ee", "error-container": "#ffdad6", "tertiary-fixed": "#89f5e7", "on-error-container": "#93000a", "tertiary-container": "#008378" }, "borderRadius": { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" }, "spacing": { "xs": "8px", "md": "16px", "container-max": "1200px", "sm": "12px", "lg": "24px", "base": "4px", "gutter": "16px", "xl": "40px" }, "fontFamily": { "body-md": ["hankenGrotesk"], "headline-md-mobile": ["hankenGrotesk"], "label-bold": ["hankenGrotesk"], "title-sm": ["hankenGrotesk"], "display-lg": ["hankenGrotesk"], "headline-md": ["hankenGrotesk"], "caption-sm": ["hankenGrotesk"], "data-mono": ["jetbrainsMono"] }, "fontSize": { "body-md": ["15px", { "lineHeight": "24px", "fontWeight": "400" }], "headline-md-mobile": ["20px", { "lineHeight": "26px", "fontWeight": "700" }], "label-bold": ["13px", { "lineHeight": "16px", "fontWeight": "700" }], "title-sm": ["17px", { "lineHeight": "24px", "fontWeight": "700" }], "display-lg": ["32px", { "lineHeight": "40px", "fontWeight": "700" }], "headline-md": ["23px", { "lineHeight": "28px", "fontWeight": "700" }], "caption-sm": ["12px", { "lineHeight": "14px", "fontWeight": "700" }], "data-mono": ["12px", { "lineHeight": "16px", "fontWeight": "500" }] } } } }</script></head><body class="bg-bg-page font-body-md text-body-md text-on-surface"><aside class="fixed left-0 top-0 h-full w-64 bg-inverse-surface z-50 flex flex-col justify-between select-none shadow-[0_1px_8px_rgba(0,0,0,0.04)]"><div class="flex flex-col"><div class="h-16 px-md flex items-center gap-sm bg-inverse-surface"><div class="w-9 h-9 rounded-lg bg-primary flex items-center justify-center text-white shadow-sm flex-shrink-0"><svg class="w-5 h-5 fill-current text-white" viewBox="0 0 24 24"><path d="M11 21h-1l1-7H7.5c-.58 0-.57-.32-.38-.66.19-.34.05-.08.08-.13L13 2h1l-1 7h3.5c.49 0 .56.33.47.51l-.07.13L11 21z"></path></svg></div><div class="flex flex-col min-w-0 justify-center"><span class="font-title-sm text-title-sm text-inverse-on-surface tracking-tight leading-snug truncate font-bold">鑫潼智电</span><span class="font-data-mono text-[10px] text-outline leading-tight truncate tracking-normal">XT-POWER OS · 智能配用电中枢</span></div></div><div class="px-md py-xs"><div class="font-caption-sm text-caption-sm text-outline uppercase tracking-wider px-xs py-base">综合运营管控</div></div><nav class="flex flex-col gap-base px-md" data-active-classes="bg-primary text-on-primary font-label-bold rounded-lg shadow-sm"><a aria-current="page" class="flex items-center gap-sm px-md py-xs transition-all group bg-primary text-on-primary font-label-bold rounded-lg shadow-sm" data-path="dashboard" href="#"><span class="material-symbols-outlined text-[20px] transition-transform group-hover:scale-105 flex-shrink-0">monitoring</span><span class="font-body-md text-body-md leading-none">运营工作台</span></a><a class="flex items-center gap-sm px-md py-xs rounded-lg text-inverse-on-surface hover:bg-surface-variant hover:text-on-surface transition-all group" data-path="client-management" href="#"><span class="material-symbols-outlined text-[20px] transition-transform group-hover:scale-105 flex-shrink-0">corporate_fare</span><span class="font-body-md text-body-md leading-none">客户管理</span></a><a class="flex items-center gap-sm px-md py-xs rounded-lg text-inverse-on-surface hover:bg-surface-variant hover:text-on-surface transition-all group" data-path="project-management" href="#"><span class="material-symbols-outlined text-[20px] transition-transform group-hover:scale-105 flex-shrink-0">lan</span><span class="font-body-md text-body-md leading-none">项目管理</span></a><a class="flex items-center gap-sm px-md py-xs rounded-lg text-inverse-on-surface hover:bg-surface-variant hover:text-on-surface transition-all group" data-path="dispatch-orders" href="#"><span class="material-symbols-outlined text-[20px] transition-transform group-hover:scale-105 flex-shrink-0">assignment_turned_in</span><span class="font-body-md text-body-md leading-none">运营派单</span></a><a class="flex items-center gap-sm px-md py-xs rounded-lg text-inverse-on-surface hover:bg-surface-variant hover:text-on-surface transition-all group" data-path="device-telemetry" href="#"><span class="material-symbols-outlined text-[20px] transition-transform group-hover:scale-105 flex-shrink-0">precision_manufacturing</span><span class="font-body-md text-body-md leading-none">设备监控</span></a><a class="flex items-center gap-sm px-md py-xs rounded-lg text-inverse-on-surface hover:bg-surface-variant hover:text-on-surface transition-all group" data-path="analytics-reports" href="#"><span class="material-symbols-outlined text-[20px] transition-transform group-hover:scale-105 flex-shrink-0">query_stats</span><span class="font-body-md text-body-md leading-none">统计报表</span></a><a class="flex items-center gap-sm px-md py-xs rounded-lg text-inverse-on-surface hover:bg-surface-variant hover:text-on-surface transition-all group" data-path="system-settings" href="#"><span class="material-symbols-outlined text-[20px] transition-transform group-hover:scale-105 flex-shrink-0">settings_suggest</span><span class="font-body-md text-body-md leading-none">系统管理</span></a></nav></div><div class="p-md m-md rounded-lg bg-surface-variant flex flex-col gap-xs"><div class="flex items-center justify-between"><span class="font-caption-sm text-caption-sm text-on-surface font-bold">边缘网关通信</span><span class="flex h-2 w-2 relative"><span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-tertiary opacity-75"></span><span class="relative inline-flex rounded-full h-2 w-2 bg-tertiary"></span></span></div><div class="flex items-center justify-between font-data-mono text-data-mono text-text-muted"><span class="">ICC Node #04</span><span class="">99.98%</span></div></div></aside><div class="pl-64 flex flex-col min-h-screen"><header class="fixed top-0 left-64 right-0 h-16 bg-surface/90 backdrop-blur-xl shadow-[0_1px_8px_rgba(0,0,0,0.04)] z-40 flex items-center justify-between px-lg"><div class="flex items-center gap-md"><div class="flex items-center gap-xs px-sm py-xs rounded-full bg-surface-container"><span class="h-2 w-2 rounded-full bg-tertiary flex-shrink-0 animate-pulse"></span><span class="font-caption-sm text-caption-sm text-on-surface whitespace-nowrap">ICC 实时数据同步正常</span></div><div class="h-4 w-px bg-outline-variant"></div><div class="relative flex items-center"><span class="material-symbols-outlined absolute left-sm text-outline text-[18px]">search</span><input class="w-72 pl-9 pr-md py-xs rounded-lg bg-surface-container-low font-body-md text-body-md text-on-surface placeholder:text-outline focus:outline-none focus:ring-1 focus:ring-primary" placeholder="按项目号 / 变电站 / 工单编号检索..." type="text"></div></div><div class="flex items-center gap-md"><button class="relative p-xs rounded-lg text-on-surface-variant hover:bg-surface-container hover:text-on-surface transition-colors" type="button"><span class="material-symbols-outlined text-[22px]">notifications</span><span class="absolute top-1 right-1 flex h-4 w-4 items-center justify-center rounded-full bg-status-error font-caption-sm text-caption-sm text-on-error">3</span></button><button class="p-xs rounded-lg text-on-surface-variant hover:bg-surface-container hover:text-on-surface transition-colors" type="button"><span class="material-symbols-outlined text-[22px]">grid_view</span></button><div class="h-6 w-px bg-outline-variant"></div><div class="flex items-center gap-sm cursor-pointer p-xs rounded-lg hover:bg-surface-container transition-colors"><div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center"><span class="material-symbols-outlined text-on-primary text-[18px]">person</span></div><div class="flex flex-col text-left"><span class="font-label-bold text-label-bold text-on-surface leading-none">主控工程师 · 李工</span><span class="font-caption-sm text-caption-sm text-text-muted mt-0.5">运营监控中心</span></div><span class="material-symbols-outlined text-outline text-[18px]">expand_more</span></div></div></header><main class="w-full pt-16 px-lg py-lg flex-1 bg-bg-page"><div class="flex flex-col w-full gap-lg">
|
|
<!-- KPI Top Metrics Section -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-md">
|
|
<!-- Metric 1: Clients -->
|
|
<div class="bg-surface rounded-xl p-lg shadow-sm flex flex-col justify-between relative overflow-hidden group hover:shadow-md transition-shadow">
|
|
<div class="absolute right-0 top-0 w-28 h-28 bg-primary/5 rounded-full blur-2xl pointer-events-none"></div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-caption-sm text-caption-sm text-text-muted uppercase tracking-wider">托管客户总数</span>
|
|
<span class="p-xs rounded-lg bg-surface-container text-primary material-symbols-outlined text-[20px]">corporate_fare</span>
|
|
</div>
|
|
<div class="mt-md flex items-baseline gap-xs">
|
|
<span class="font-display-lg text-display-lg text-on-surface font-headline-md tracking-tight">128</span>
|
|
<span class="font-label-bold text-label-bold text-text-muted">家</span>
|
|
</div>
|
|
<div class="mt-sm flex items-center justify-between text-caption-sm font-caption-sm">
|
|
<div class="flex items-center gap-base text-tertiary">
|
|
<span class="material-symbols-outlined text-[16px]">trending_up</span>
|
|
<span class="">同比 +12.5%</span>
|
|
</div>
|
|
<span class="text-text-muted font-data-mono text-data-mono">本月新增 +4</span>
|
|
</div>
|
|
</div>
|
|
<!-- Metric 2: Online Devices -->
|
|
<div class="bg-surface rounded-xl p-lg shadow-sm flex flex-col justify-between relative overflow-hidden group hover:shadow-md transition-shadow">
|
|
<div class="absolute right-0 top-0 w-28 h-28 bg-secondary/5 rounded-full blur-2xl pointer-events-none"></div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-caption-sm text-caption-sm text-text-muted uppercase tracking-wider">在线设备概况</span>
|
|
<span class="p-xs rounded-lg bg-surface-container text-secondary material-symbols-outlined text-[20px]">router</span>
|
|
</div>
|
|
<div class="mt-md flex items-baseline gap-xs">
|
|
<span class="font-display-lg text-display-lg text-on-surface tracking-tight">3,676</span>
|
|
<span class="font-label-bold text-label-bold text-text-muted">端点在线</span>
|
|
</div>
|
|
<div class="mt-sm flex items-center justify-between text-caption-sm font-caption-sm">
|
|
<span class="text-on-surface-variant flex items-center gap-base">
|
|
<span class="w-2 h-2 rounded-full bg-tertiary inline-block"></span>网关 256 <span class="text-text-muted font-data-mono text-data-mono">(98.8%)</span>
|
|
</span>
|
|
<span class="text-on-surface-variant flex items-center gap-base">
|
|
<span class="w-2 h-2 rounded-full bg-primary inline-block"></span>探测器 3,420 <span class="text-text-muted font-data-mono text-data-mono">(99.2%)</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- Metric 3: Today Alarms -->
|
|
<div class="bg-surface rounded-xl p-lg shadow-sm flex flex-col justify-between relative overflow-hidden group hover:shadow-md transition-shadow">
|
|
<div class="absolute right-0 top-0 w-28 h-28 bg-error/5 rounded-full blur-2xl pointer-events-none"></div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-caption-sm text-caption-sm text-text-muted uppercase tracking-wider">今日实时报警</span>
|
|
<span class="p-xs rounded-lg bg-error-container text-status-error material-symbols-outlined text-[20px]">warning</span>
|
|
</div>
|
|
<div class="mt-md flex items-baseline gap-xs">
|
|
<span class="font-display-lg text-display-lg text-on-surface tracking-tight">14</span>
|
|
<span class="font-label-bold text-label-bold text-text-muted">起告警</span>
|
|
</div>
|
|
<div class="mt-sm flex items-center justify-between text-caption-sm font-caption-sm">
|
|
<span class="px-xs py-base rounded bg-error/10 text-status-error font-label-bold text-label-bold">高危 2 起 (自动触发工单)</span>
|
|
<span class="text-text-muted font-data-mono text-data-mono">一般 12 起</span>
|
|
</div>
|
|
</div>
|
|
<!-- Metric 4: Pending Dispatch -->
|
|
<div class="bg-surface rounded-xl p-lg shadow-sm flex flex-col justify-between relative overflow-hidden group hover:shadow-md transition-shadow">
|
|
<div class="absolute right-0 top-0 w-28 h-28 bg-status-warn/5 rounded-full blur-2xl pointer-events-none"></div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-caption-sm text-caption-sm text-text-muted uppercase tracking-wider">待处理运营派单</span>
|
|
<span class="p-xs rounded-lg bg-surface-container text-status-warn material-symbols-outlined text-[20px]">assignment_late</span>
|
|
</div>
|
|
<div class="mt-md flex items-baseline gap-xs">
|
|
<span class="font-display-lg text-display-lg text-on-surface tracking-tight">28</span>
|
|
<span class="font-label-bold text-label-bold text-text-muted">单待流转</span>
|
|
</div>
|
|
<div class="mt-sm grid grid-cols-4 gap-base font-data-mono text-data-mono text-center">
|
|
<div class="bg-surface-container-low py-base rounded text-on-surface-variant"><span class="text-status-error font-bold">6</span> 警</div>
|
|
<div class="bg-surface-container-low py-base rounded text-on-surface-variant"><span class="text-status-warn font-bold">8</span> 修</div>
|
|
<div class="bg-surface-container-low py-base rounded text-on-surface-variant"><span class="text-primary font-bold">10</span> 保</div>
|
|
<div class="bg-surface-container-low py-base rounded text-on-surface-variant"><span class="text-tertiary font-bold">4</span> 勘</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ICC External Pipeline Connectivity Status Bar -->
|
|
<div class="bg-surface rounded-xl p-md shadow-sm flex flex-col lg:flex-row items-start lg:items-center justify-between gap-md relative">
|
|
<div class="flex items-center gap-md">
|
|
<div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary flex-shrink-0">
|
|
<span class="material-symbols-outlined text-[24px]">hub</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<div class="flex items-center gap-xs">
|
|
<span class="font-title-sm text-title-sm text-on-surface">大华 ICC 外部采集与对接状态监控</span>
|
|
<span class="px-xs py-base rounded-full bg-tertiary/10 text-tertiary font-caption-sm text-caption-sm font-bold flex items-center gap-base">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-tertiary animate-pulse"></span>OPENAPI 通道健康
|
|
</span>
|
|
</div>
|
|
<span class="font-body-md text-body-md text-text-muted text-xs">通过 HTTP REST 主动按需拉取至 BullMQ 队列缓冲并写入 PostgreSQL 按月时序分区表</span>
|
|
</div>
|
|
</div>
|
|
<!-- Telemetry Badges -->
|
|
<div class="flex flex-wrap items-center gap-xs lg:gap-md w-full lg:w-auto">
|
|
<div class="flex items-center gap-xs px-sm py-xs rounded-lg bg-surface-container-low flex-1 sm:flex-none">
|
|
<span class="material-symbols-outlined text-primary text-[18px]">electric_meter</span>
|
|
<div class="flex flex-col">
|
|
<span class="font-caption-sm text-caption-sm text-text-muted">用电采集 (5m)</span>
|
|
<span class="font-data-mono text-data-mono text-on-surface">1分钟前同步完成</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-xs px-sm py-xs rounded-lg bg-surface-container-low flex-1 sm:flex-none">
|
|
<span class="material-symbols-outlined text-tertiary text-[18px]">sync_alt</span>
|
|
<div class="flex flex-col">
|
|
<span class="font-caption-sm text-caption-sm text-text-muted">事件监听 (1m)</span>
|
|
<span class="font-data-mono text-data-mono text-tertiary font-bold">POLLING 监听中</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-xs px-sm py-xs rounded-lg bg-surface-container-low flex-1 sm:flex-none">
|
|
<span class="material-symbols-outlined text-secondary text-[18px]">stacked_line_chart</span>
|
|
<div class="flex flex-col">
|
|
<span class="font-caption-sm text-caption-sm text-text-muted">BullMQ 队列缓冲</span>
|
|
<span class="font-data-mono text-data-mono text-on-surface">排队: <b class="text-tertiary">0</b> / 延迟 12ms</span>
|
|
</div>
|
|
</div>
|
|
<button class="px-md py-xs rounded-full bg-primary text-on-primary font-label-bold text-label-bold flex items-center gap-xs hover:bg-primary-container transition-colors shadow-sm self-stretch sm:self-auto justify-center" type="button">
|
|
<span class="material-symbols-outlined text-[16px]">refresh</span>
|
|
<span class="">触发全量增量拉取</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Core Visualizations Grid -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-lg">
|
|
<!-- Left: Realtime Load & Power Demand Curve (8 cols) -->
|
|
<div class="lg:col-span-8 bg-surface rounded-xl p-lg shadow-sm flex flex-col justify-between">
|
|
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-sm pb-md">
|
|
<div>
|
|
<div class="flex items-center gap-xs">
|
|
<h2 class="font-title-sm text-title-sm text-on-surface">全网用电负荷与功率走势图</h2>
|
|
<span class="font-caption-sm text-caption-sm text-primary px-xs py-base rounded bg-primary/10">24H 实时监控</span>
|
|
</div>
|
|
<p class="font-body-md text-body-md text-text-muted text-xs">对比基准规划负荷,按尖、峰、平、谷阶梯负荷动态监测</p>
|
|
</div>
|
|
<div class="flex items-center gap-xs self-start sm:self-auto">
|
|
<div class="flex items-center gap-base text-caption-sm font-caption-sm text-text-muted mr-xs">
|
|
<span class="w-3 h-0.5 bg-primary inline-block"></span>实时负荷
|
|
<span class="w-3 h-0.5 bg-outline-variant inline-block ml-xs"></span>基准负荷
|
|
</div>
|
|
<div class="inline-flex rounded-lg bg-surface-container p-base">
|
|
<button class="px-xs py-base text-caption-sm font-caption-sm rounded bg-surface text-primary shadow-sm font-bold">当日</button>
|
|
<button class="px-xs py-base text-caption-sm font-caption-sm rounded text-text-muted hover:text-on-surface">近7日</button>
|
|
<button class="px-xs py-base text-caption-sm font-caption-sm rounded text-text-muted hover:text-on-surface">月度</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Line Graph Canvas (Inline SVG vector for performance & precision) -->
|
|
<div class="relative w-full h-72 my-xs">
|
|
<svg class="w-full h-full overflow-visible" preserveAspectRatio="none" viewBox="0 0 760 260">
|
|
<defs>
|
|
<linearGradient id="loadGradient" x1="0" x2="0" y1="0" y2="1">
|
|
<stop offset="0%" stop-color="#0054cd" stop-opacity="0.25"></stop>
|
|
<stop offset="100%" stop-color="#0054cd" stop-opacity="0.0"></stop>
|
|
</linearGradient>
|
|
<linearGradient id="peakZone" x1="0" x2="1" y1="0" y2="0">
|
|
<stop offset="38%" stop-color="transparent"></stop>
|
|
<stop offset="40%" stop-color="#dc2626" stop-opacity="0.08"></stop>
|
|
<stop offset="58%" stop-color="#dc2626" stop-opacity="0.08"></stop>
|
|
<stop offset="60%" stop-color="transparent"></stop>
|
|
</linearGradient>
|
|
</defs>
|
|
<!-- Tariff Peak Zone Background Highlight (10:00 - 15:00) -->
|
|
<rect fill="url(#peakZone)" height="200" rx="4" width="160" x="290" y="20"></rect>
|
|
<text fill="#dc2626" font-family="jetbrainsMono" font-size="10" font-weight="bold" text-anchor="middle" x="370" y="36">尖峰电价时段 (10:00-14:00)</text>
|
|
<!-- Horizontal Grid Lines -->
|
|
<line stroke="#dbe4ee" stroke-dasharray="3 3" x1="40" x2="740" y1="30" y2="30"></line>
|
|
<text fill="#5b6b7e" font-family="jetbrainsMono" font-size="10" text-anchor="end" x="32" y="34">4000kW</text>
|
|
<line stroke="#dbe4ee" stroke-dasharray="3 3" x1="40" x2="740" y1="80" y2="80"></line>
|
|
<text fill="#5b6b7e" font-family="jetbrainsMono" font-size="10" text-anchor="end" x="32" y="84">3000kW</text>
|
|
<line stroke="#dbe4ee" stroke-dasharray="3 3" x1="40" x2="740" y1="130" y2="130"></line>
|
|
<text fill="#5b6b7e" font-family="jetbrainsMono" font-size="10" text-anchor="end" x="32" y="134">2000kW</text>
|
|
<line stroke="#dbe4ee" stroke-dasharray="3 3" x1="40" x2="740" y1="180" y2="180"></line>
|
|
<text fill="#5b6b7e" font-family="jetbrainsMono" font-size="10" text-anchor="end" x="32" y="184">1000kW</text>
|
|
<line stroke="#dbe4ee" x1="40" x2="740" y1="230" y2="230"></line>
|
|
<text fill="#5b6b7e" font-family="jetbrainsMono" font-size="10" text-anchor="end" x="32" y="234">0</text>
|
|
<!-- Baseline Reference Line (dashed) -->
|
|
<path d="M 40 170 Q 180 165, 280 110 T 520 95 T 740 145" fill="none" stroke="#c2c6d8" stroke-dasharray="4 4" stroke-width="2"></path>
|
|
<!-- Realtime Power Load Gradient Area Fill -->
|
|
<path d="M 40 190 Q 120 185, 200 160 T 360 65 T 480 85 T 600 120 T 740 135 L 740 230 L 40 230 Z" fill="url(#loadGradient)"></path>
|
|
<!-- Realtime Power Line -->
|
|
<path d="M 40 190 Q 120 185, 200 160 T 360 65 T 480 85 T 600 120 T 740 135" fill="none" stroke="#0054cd" stroke-linecap="round" stroke-width="3"></path>
|
|
<!-- Active Load Pulse Node (Peak marker) -->
|
|
<g transform="translate(360, 65)">
|
|
<circle class="animate-ping" fill="#0054cd" fill-opacity="0.2" r="8"></circle>
|
|
<circle fill="#0054cd" r="4"></circle>
|
|
<rect fill="#0d1c2c" height="24" rx="4" width="84" x="-42" y="-32"></rect>
|
|
<text fill="#f8f9ff" font-family="jetbrainsMono" font-size="11" font-weight="bold" text-anchor="middle" x="0" y="-16">3,640 kW</text>
|
|
</g>
|
|
<!-- X-Axis Labels -->
|
|
<text fill="#5b6b7e" font-family="jetbrainsMono" font-size="11" x="40" y="250">00:00</text>
|
|
<text fill="#5b6b7e" font-family="jetbrainsMono" font-size="11" x="180" y="250">04:00</text>
|
|
<text fill="#5b6b7e" font-family="jetbrainsMono" font-size="11" x="320" y="250">08:00</text>
|
|
<text fill="#5b6b7e" font-family="jetbrainsMono" font-size="11" x="460" y="250">12:00</text>
|
|
<text fill="#5b6b7e" font-family="jetbrainsMono" font-size="11" x="600" y="250">16:00</text>
|
|
<text fill="#5b6b7e" font-family="jetbrainsMono" font-size="11" text-anchor="end" x="730" y="250">20:00</text>
|
|
</svg>
|
|
</div>
|
|
<!-- Load Stat Bottom Highlights -->
|
|
<div class="grid grid-cols-2 sm:grid-cols-4 gap-sm pt-md">
|
|
<div class="bg-surface-container-low p-sm rounded-lg flex flex-col">
|
|
<span class="font-caption-sm text-caption-sm text-text-muted">当前全网瞬时负荷</span>
|
|
<span class="font-title-sm text-title-sm font-data-mono text-primary font-bold">2,894.2 kW</span>
|
|
</div>
|
|
<div class="bg-surface-container-low p-sm rounded-lg flex flex-col">
|
|
<span class="font-caption-sm text-caption-sm text-text-muted">今日最高峰值 (11:24)</span>
|
|
<span class="font-title-sm text-title-sm font-data-mono text-status-error font-bold">3,640.0 kW</span>
|
|
</div>
|
|
<div class="bg-surface-container-low p-sm rounded-lg flex flex-col">
|
|
<span class="font-caption-sm text-caption-sm text-text-muted">平均负荷率</span>
|
|
<span class="font-title-sm text-title-sm font-data-mono text-tertiary font-bold">78.4 %</span>
|
|
</div>
|
|
<div class="bg-surface-container-low p-sm rounded-lg flex flex-col">
|
|
<span class="font-caption-sm text-caption-sm text-text-muted">谷段吸纳储能电量</span>
|
|
<span class="font-title-sm text-title-sm font-data-mono text-on-surface font-bold">14,280 kWh</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Right: Alarm Distribution & Health Status (4 cols) -->
|
|
<div class="lg:col-span-4 bg-surface rounded-xl p-lg shadow-sm flex flex-col justify-between">
|
|
<div>
|
|
<div class="flex items-center justify-between pb-xs">
|
|
<h2 class="font-title-sm text-title-sm text-on-surface">报警分类与处置健康度</h2>
|
|
<span class="material-symbols-outlined text-outline text-[20px]">help</span>
|
|
</div>
|
|
<p class="font-body-md text-body-md text-text-muted text-xs">ICC 实时预警规则触发聚合分析</p>
|
|
</div>
|
|
<!-- Donut Chart -->
|
|
<div class="relative flex items-center justify-center my-md">
|
|
<svg class="w-48 h-48 transform -rotate-90" viewBox="0 0 160 160">
|
|
<!-- Background track -->
|
|
<circle cx="80" cy="80" fill="transparent" r="62" stroke="#eef4ff" stroke-width="18"></circle>
|
|
<!-- Overload: 42% -> 163 circumference -->
|
|
<circle cx="80" cy="80" fill="transparent" r="62" stroke="#dc2626" stroke-dasharray="390" stroke-dashoffset="234" stroke-linecap="round" stroke-width="18"></circle>
|
|
<!-- Temp: 28% -->
|
|
<circle class="opacity-90" cx="80" cy="80" fill="transparent" r="62" stroke="#e0852b" stroke-dasharray="390" stroke-dashoffset="290" stroke-linecap="round" stroke-width="18"></circle>
|
|
<!-- Leakage: 18% -->
|
|
<circle cx="80" cy="80" fill="transparent" r="62" stroke="#0054cd" stroke-dasharray="390" stroke-dashoffset="330" stroke-linecap="round" stroke-width="18"></circle>
|
|
<!-- Phase loss: 12% -->
|
|
<circle cx="80" cy="80" fill="transparent" r="62" stroke="#712ae2" stroke-dasharray="390" stroke-dashoffset="350" stroke-linecap="round" stroke-width="18"></circle>
|
|
</svg>
|
|
<div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
|
|
<span class="font-data-mono text-data-mono text-text-muted text-xs">工单处置率</span>
|
|
<span class="font-headline-md text-headline-md text-on-surface font-bold">94.6%</span>
|
|
<span class="font-caption-sm text-caption-sm text-tertiary">闭环正常</span>
|
|
</div>
|
|
</div>
|
|
<!-- Legend List -->
|
|
<div class="space-y-xs">
|
|
<div class="flex items-center justify-between p-xs rounded bg-surface-container-low">
|
|
<div class="flex items-center gap-xs">
|
|
<span class="w-2.5 h-2.5 rounded-full bg-status-error"></span>
|
|
<span class="font-caption-sm text-caption-sm text-on-surface">负荷过载 / 越限</span>
|
|
</div>
|
|
<span class="font-data-mono text-data-mono font-bold text-on-surface">6起 (42%)</span>
|
|
</div>
|
|
<div class="flex items-center justify-between p-xs rounded bg-surface-container-low">
|
|
<div class="flex items-center gap-xs">
|
|
<span class="w-2.5 h-2.5 rounded-full bg-status-warn"></span>
|
|
<span class="font-caption-sm text-caption-sm text-on-surface">配电箱温升超标</span>
|
|
</div>
|
|
<span class="font-data-mono text-data-mono font-bold text-on-surface">4起 (28%)</span>
|
|
</div>
|
|
<div class="flex items-center justify-between p-xs rounded bg-surface-container-low">
|
|
<div class="flex items-center gap-xs">
|
|
<span class="w-2.5 h-2.5 rounded-full bg-primary"></span>
|
|
<span class="font-caption-sm text-caption-sm text-on-surface">漏电电流异常</span>
|
|
</div>
|
|
<span class="font-data-mono text-data-mono font-bold text-on-surface">3起 (18%)</span>
|
|
</div>
|
|
<div class="flex items-center justify-between p-xs rounded bg-surface-container-low">
|
|
<div class="flex items-center gap-xs">
|
|
<span class="w-2.5 h-2.5 rounded-full bg-secondary"></span>
|
|
<span class="font-caption-sm text-caption-sm text-on-surface">三相不平衡 / 缺相</span>
|
|
</div>
|
|
<span class="font-data-mono text-data-mono font-bold text-on-surface">1起 (12%)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Operational Core Workflow Section (Dual split) -->
|
|
<div class="grid grid-cols-1 xl:grid-cols-12 gap-lg items-start">
|
|
<!-- Left: Real-time Emergency Alarm & Dispatch Operations (7 cols) -->
|
|
<div class="xl:col-span-7 bg-surface rounded-xl p-lg shadow-sm flex flex-col gap-md">
|
|
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-xs">
|
|
<div>
|
|
<div class="flex items-center gap-xs">
|
|
<h2 class="font-title-sm text-title-sm text-on-surface">紧急报警与待办派单流水</h2>
|
|
<span class="px-xs py-base rounded bg-status-error/10 text-status-error font-data-mono text-caption-sm font-bold animate-pulse">LIVE ALERTS</span>
|
|
</div>
|
|
<p class="font-body-md text-body-md text-text-muted text-xs">大华 ICC 毫秒级捕获异常事件,支持一键派发共享电工现场取证处置</p>
|
|
</div>
|
|
<div class="flex items-center gap-xs">
|
|
<button class="px-sm py-xs rounded-lg bg-surface-container font-label-bold text-label-bold text-on-surface hover:bg-surface-variant transition-colors flex items-center gap-base" type="button">
|
|
<span class="material-symbols-outlined text-[16px]">filter_list</span>
|
|
<span class="">筛选条件</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Dense Table -->
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="bg-surface-container-low text-text-muted font-caption-sm text-caption-sm border-b border-border-rule">
|
|
<th class="py-sm px-sm font-bold">级别 / 编号</th>
|
|
<th class="py-sm px-sm font-bold">托管客户</th>
|
|
<th class="py-sm px-sm font-bold">异常点位 / 线路</th>
|
|
<th class="py-sm px-sm font-bold">触发时间</th>
|
|
<th class="py-sm px-sm font-bold">责任人 / 状态</th>
|
|
<th class="py-sm px-sm font-bold text-right">协同操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-border-rule font-body-md text-body-md text-xs">
|
|
<!-- Row 1: High -->
|
|
<tr class="hover:bg-surface-container-low/60 transition-colors">
|
|
<td class="py-sm px-sm">
|
|
<div class="flex items-center gap-base">
|
|
<span class="px-xs py-base rounded bg-error/15 text-status-error font-caption-sm font-bold">高危</span>
|
|
<span class="font-data-mono text-data-mono text-text-muted">#AL-9804</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-sm px-sm font-bold text-on-surface">市第一人民医院</td>
|
|
<td class="py-sm px-sm">
|
|
<div class="flex flex-col">
|
|
<span class="text-on-surface font-semibold">住院部东区 2F 配电间</span>
|
|
<span class="text-text-muted font-data-mono text-[11px]">电缆接头温升 82.4℃ (超限)</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-sm px-sm font-data-mono text-data-mono text-text-muted">14:02:18</td>
|
|
<td class="py-sm px-sm">
|
|
<div class="flex flex-col">
|
|
<span class="text-on-surface font-semibold flex items-center gap-base">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-status-warn"></span>张师傅 (接单待赴)
|
|
</span>
|
|
<span class="text-text-muted font-data-mono text-[11px]">距现场 1.2km</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-sm px-sm text-right">
|
|
<div class="flex items-center justify-end gap-xs">
|
|
<button class="p-base rounded bg-surface-container hover:bg-primary hover:text-on-primary text-primary transition-colors" title="快速派单/催办" type="button">
|
|
<span class="material-symbols-outlined text-[16px]">bolt</span>
|
|
</button>
|
|
<button class="p-base rounded bg-surface-container hover:bg-primary hover:text-on-primary text-primary transition-colors" title="电工电话" type="button">
|
|
<span class="material-symbols-outlined text-[16px]">call</span>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 2: High -->
|
|
<tr class="hover:bg-surface-container-low/60 transition-colors">
|
|
<td class="py-sm px-sm">
|
|
<div class="flex items-center gap-base">
|
|
<span class="px-xs py-base rounded bg-error/15 text-status-error font-caption-sm font-bold">高危</span>
|
|
<span class="font-data-mono text-data-mono text-text-muted">#AL-9801</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-sm px-sm font-bold text-on-surface">高新实验小学</td>
|
|
<td class="py-sm px-sm">
|
|
<div class="flex flex-col">
|
|
<span class="text-on-surface font-semibold">科技实验楼 1F 厨房总闸</span>
|
|
<span class="text-text-muted font-data-mono text-[11px]">漏电保护触发 (460mA)</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-sm px-sm font-data-mono text-data-mono text-text-muted">13:48:50</td>
|
|
<td class="py-sm px-sm">
|
|
<div class="flex flex-col">
|
|
<span class="text-on-surface font-semibold flex items-center gap-base">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-status-error"></span>待指派电工
|
|
</span>
|
|
<span class="text-status-error font-caption-sm">超时 12分钟</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-sm px-sm text-right">
|
|
<button class="px-xs py-base rounded-full bg-primary text-on-primary font-label-bold text-caption-sm hover:bg-primary-container transition-colors shadow-sm" type="button">
|
|
立即派单
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 3: Warn -->
|
|
<tr class="hover:bg-surface-container-low/60 transition-colors">
|
|
<td class="py-sm px-sm">
|
|
<div class="flex items-center gap-base">
|
|
<span class="px-xs py-base rounded bg-status-warn/15 text-status-warn font-caption-sm font-bold">预警</span>
|
|
<span class="font-data-mono text-data-mono text-text-muted">#AL-9799</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-sm px-sm font-bold text-on-surface">光谷智慧工业园 B3栋</td>
|
|
<td class="py-sm px-sm">
|
|
<div class="flex flex-col">
|
|
<span class="text-on-surface font-semibold">数控车间 A回路</span>
|
|
<span class="text-text-muted font-data-mono text-[11px]">持续过载 115% (已持续20m)</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-sm px-sm font-data-mono text-data-mono text-text-muted">13:10:05</td>
|
|
<td class="py-sm px-sm">
|
|
<div class="flex flex-col">
|
|
<span class="text-tertiary font-semibold flex items-center gap-base">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span>王工 (现场排查中)
|
|
</span>
|
|
<span class="text-text-muted font-caption-sm">已上传初勘照片</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-sm px-sm text-right">
|
|
<button class="p-base rounded bg-surface-container hover:bg-surface-variant text-on-surface-variant" title="查看现场图片" type="button">
|
|
<span class="material-symbols-outlined text-[16px]">image</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 4: Routine Maintenance -->
|
|
<tr class="hover:bg-surface-container-low/60 transition-colors">
|
|
<td class="py-sm px-sm">
|
|
<div class="flex items-center gap-base">
|
|
<span class="px-xs py-base rounded bg-primary/10 text-primary font-caption-sm font-bold">维保</span>
|
|
<span class="font-data-mono text-data-mono text-text-muted">#WO-4022</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-sm px-sm font-bold text-on-surface">绿城百合公寓 (配电房)</td>
|
|
<td class="py-sm px-sm">
|
|
<div class="flex flex-col">
|
|
<span class="text-on-surface font-semibold">地下变电所 #2 变压器</span>
|
|
<span class="text-text-muted font-data-mono text-[11px]">季度绝缘预防性试验检测</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-sm px-sm font-data-mono text-data-mono text-text-muted">09:00:00</td>
|
|
<td class="py-sm px-sm">
|
|
<span class="text-tertiary font-semibold flex items-center gap-base">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span>已完成 · 待客户评分
|
|
</span>
|
|
</td>
|
|
<td class="py-sm px-sm text-right">
|
|
<span class="text-text-muted font-caption-sm">待回访</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- Quick Footer Pagination/Link -->
|
|
<div class="flex items-center justify-between pt-xs text-xs">
|
|
<span class="text-text-muted font-data-mono text-data-mono">显示 4 / 28 个待办工单记录</span>
|
|
<a class="font-label-bold text-label-bold text-primary hover:underline flex items-center gap-base" href="#">
|
|
<span class="">进入派单全景工作流调度中心</span>
|
|
<span class="material-symbols-outlined text-[16px]">arrow_forward</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- Right: Project Lifecycle Progress & Approvals Kanban (5 cols) -->
|
|
<div class="xl:col-span-5 bg-surface rounded-xl p-lg shadow-sm flex flex-col gap-md">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h2 class="font-title-sm text-title-sm text-on-surface">智电工程推进与审批看板</h2>
|
|
<p class="font-body-md text-body-md text-text-muted text-xs">标准闭环:ICC录入 → 勘察 → 方案 → 合同 → 安装 → 验收</p>
|
|
</div>
|
|
<button class="p-xs rounded-lg bg-surface-container text-primary hover:bg-surface-variant transition-colors" title="新建工程项目" type="button">
|
|
<span class="material-symbols-outlined text-[20px]">add</span>
|
|
</button>
|
|
</div>
|
|
<!-- Project Cards Timeline -->
|
|
<div class="flex flex-col gap-sm">
|
|
<!-- Card 1 -->
|
|
<div class="p-md rounded-lg bg-surface-container-low flex flex-col gap-xs relative overflow-hidden group hover:shadow transition-shadow">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-xs">
|
|
<span class="font-label-bold text-label-bold text-on-surface">武汉软件工程职业学院 · 宿舍楼</span>
|
|
<span class="px-xs py-base rounded bg-primary text-on-primary text-[10px] font-bold">方案审批中</span>
|
|
</div>
|
|
<span class="font-data-mono text-data-mono text-text-muted text-[11px]">PRJ-2026-008</span>
|
|
</div>
|
|
<p class="font-body-md text-body-md text-text-muted text-xs line-clamp-1">勘察已完成,已提交包含 48台智能断路器、4台网关配置方案</p>
|
|
<!-- Stepper Progress Bar -->
|
|
<div class="w-full bg-surface-variant rounded-full h-1.5 my-xs overflow-hidden">
|
|
<div class="bg-primary h-full rounded-full" style="width: 50%;"></div>
|
|
</div>
|
|
<div class="flex items-center justify-between font-caption-sm text-caption-sm">
|
|
<span class="text-text-muted flex items-center gap-base">
|
|
<span class="material-symbols-outlined text-[14px]">person</span>负责业务员: 陈建军
|
|
</span>
|
|
<div class="flex items-center gap-xs">
|
|
<button class="px-xs py-base rounded bg-surface text-primary font-bold hover:bg-primary hover:text-on-primary transition-colors" type="button">
|
|
查看方案明细
|
|
</button>
|
|
<button class="px-xs py-base rounded bg-primary text-on-primary font-bold hover:bg-primary-container transition-colors" type="button">
|
|
同意审批
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Card 2 -->
|
|
<div class="p-md rounded-lg bg-surface-container-low flex flex-col gap-xs relative overflow-hidden group hover:shadow transition-shadow">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-xs">
|
|
<span class="font-label-bold text-label-bold text-on-surface">江夏区妇幼保健院 · 新院区工程</span>
|
|
<span class="px-xs py-base rounded bg-tertiary text-on-tertiary text-[10px] font-bold">设备安装调试</span>
|
|
</div>
|
|
<span class="font-data-mono text-data-mono text-text-muted text-[11px]">PRJ-2026-006</span>
|
|
</div>
|
|
<p class="font-body-md text-body-md text-text-muted text-xs line-clamp-1">大华 ICC 已完成网关接入通道映射,现场共享电工施工中 (领料单已确认)</p>
|
|
<!-- Stepper Progress Bar -->
|
|
<div class="w-full bg-surface-variant rounded-full h-1.5 my-xs overflow-hidden">
|
|
<div class="bg-tertiary h-full rounded-full" style="width: 80%;"></div>
|
|
</div>
|
|
<div class="flex items-center justify-between font-caption-sm text-caption-sm">
|
|
<span class="text-text-muted flex items-center gap-base">
|
|
<span class="material-symbols-outlined text-[14px]">photo_camera</span>已上传水印取证 24 张
|
|
</span>
|
|
<button class="px-xs py-base rounded bg-surface text-tertiary font-bold hover:bg-tertiary hover:text-on-tertiary transition-colors" type="button">
|
|
ICC 状态联调
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Card 3 -->
|
|
<div class="p-md rounded-lg bg-surface-container-low flex flex-col gap-xs relative overflow-hidden group hover:shadow transition-shadow">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-xs">
|
|
<span class="font-label-bold text-label-bold text-on-surface">东湖楚天科技大厦 · 节能改造</span>
|
|
<span class="px-xs py-base rounded bg-secondary text-on-secondary text-[10px] font-bold">待项目验收</span>
|
|
</div>
|
|
<span class="font-data-mono text-data-mono text-text-muted text-[11px]">PRJ-2026-002</span>
|
|
</div>
|
|
<p class="font-body-md text-body-md text-text-muted text-xs line-clamp-1">已连续平稳试运行 14天,月度用电基准分析已生成,等待甲方签字</p>
|
|
<!-- Stepper Progress Bar -->
|
|
<div class="w-full bg-surface-variant rounded-full h-1.5 my-xs overflow-hidden">
|
|
<div class="bg-secondary h-full rounded-full" style="width: 95%;"></div>
|
|
</div>
|
|
<div class="flex items-center justify-between font-caption-sm text-caption-sm">
|
|
<span class="text-text-muted flex items-center gap-base">
|
|
<span class="material-symbols-outlined text-[14px]">account_box</span>已分配客户访问账号
|
|
</span>
|
|
<button class="px-xs py-base rounded bg-surface text-secondary font-bold hover:bg-secondary hover:text-on-secondary transition-colors" type="button">
|
|
导出验收归档包
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Quick Dispatch Helper Strip -->
|
|
<div class="p-sm rounded-lg bg-surface-variant/40 flex items-center justify-between text-xs">
|
|
<div class="flex items-center gap-xs text-text-muted">
|
|
<span class="material-symbols-outlined text-primary text-[18px]">verified_user</span>
|
|
<span class="">RustFS 取证云存储状态正常 (剩余 4.2TB)</span>
|
|
</div>
|
|
<span class="font-data-mono text-data-mono text-primary font-bold">TypeORM v0.3.20</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
// Simple interactive micro-actions for admin dashboard responsiveness
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const refreshBtn = document.querySelector('button:has(.material-symbols-outlined)');
|
|
if (refreshBtn) {
|
|
refreshBtn.addEventListener('click', () => {
|
|
const icon = refreshBtn.querySelector('.material-symbols-outlined');
|
|
if (icon) {
|
|
icon.classList.add('animate-spin');
|
|
setTimeout(() => {
|
|
icon.classList.remove('animate-spin');
|
|
}, 800);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script></main></div>
|
|
|
|
</body></html> |