diff --git a/系统设计/UI/dashboard/DESIGN.md b/系统设计/UI/dashboard/DESIGN.md new file mode 100644 index 0000000..096c2c6 --- /dev/null +++ b/系统设计/UI/dashboard/DESIGN.md @@ -0,0 +1,200 @@ +--- +name: Industrial Precision +colors: + surface: '#ffffff' + surface-dim: '#ccdbf1' + surface-bright: '#f8f9ff' + surface-container-lowest: '#ffffff' + surface-container-low: '#eef4ff' + surface-container: '#e5efff' + surface-container-high: '#dbe9ff' + surface-container-highest: '#d5e4fa' + on-surface: '#0d1c2c' + on-surface-variant: '#424655' + inverse-surface: '#233142' + inverse-on-surface: '#e9f1ff' + outline: '#727787' + outline-variant: '#c2c6d8' + surface-tint: '#0056d2' + primary: '#0054cd' + on-primary: '#ffffff' + primary-container: '#136bfb' + on-primary-container: '#fefcff' + inverse-primary: '#b2c5ff' + secondary: '#712ae2' + on-secondary: '#ffffff' + secondary-container: '#8a4cfc' + on-secondary-container: '#fffbff' + tertiary: '#00685f' + on-tertiary: '#ffffff' + tertiary-container: '#008378' + on-tertiary-container: '#f4fffc' + error: '#ba1a1a' + on-error: '#ffffff' + error-container: '#ffdad6' + on-error-container: '#93000a' + primary-fixed: '#dae2ff' + primary-fixed-dim: '#b2c5ff' + on-primary-fixed: '#001847' + on-primary-fixed-variant: '#0040a1' + secondary-fixed: '#eaddff' + secondary-fixed-dim: '#d2bbff' + on-secondary-fixed: '#25005a' + on-secondary-fixed-variant: '#5a00c6' + tertiary-fixed: '#89f5e7' + tertiary-fixed-dim: '#6bd8cb' + on-tertiary-fixed: '#00201d' + on-tertiary-fixed-variant: '#005049' + background: '#f8f9ff' + on-background: '#0d1c2c' + surface-variant: '#d5e4fa' + bg-page: '#eef3f8' + text-muted: '#5b6b7e' + border-rule: '#dbe4ee' + status-warn: '#e0852b' + status-error: '#dc2626' + accent-subtle: rgba(29,111,255,0.08) +typography: + display-lg: + fontFamily: hankenGrotesk + fontSize: 32px + fontWeight: '700' + lineHeight: 40px + headline-md: + fontFamily: hankenGrotesk + fontSize: 23px + fontWeight: '700' + lineHeight: 28px + title-sm: + fontFamily: hankenGrotesk + fontSize: 17px + fontWeight: '700' + lineHeight: 24px + body-md: + fontFamily: hankenGrotesk + fontSize: 15px + fontWeight: '400' + lineHeight: 24px + label-bold: + fontFamily: hankenGrotesk + fontSize: 13px + fontWeight: '700' + lineHeight: 16px + data-mono: + fontFamily: jetbrainsMono + fontSize: 12px + fontWeight: '500' + lineHeight: 16px + caption-sm: + fontFamily: hankenGrotesk + fontSize: 12px + fontWeight: '700' + lineHeight: 14px + headline-md-mobile: + fontFamily: hankenGrotesk + fontSize: 20px + fontWeight: '700' + lineHeight: 26px +rounded: + sm: 0.25rem + DEFAULT: 0.5rem + md: 0.75rem + lg: 1rem + xl: 1.5rem + full: 9999px +spacing: + base: 4px + xs: 8px + sm: 12px + md: 16px + lg: 24px + xl: 40px + container-max: 1200px + gutter: 16px +--- + +## Brand & Style + +The design system is engineered for the **Xintong Smart Power Operation Management APP**, targeting power engineers and grid operators. The brand personality is **Professional, Efficient, and Industrial Tech**. It emphasizes reliability through a structured, high-density interface that transforms complex electrical data into actionable insights. + +The design style is a blend of **Corporate Modern** and **Information-Dense Minimalism**. It utilizes a "Layered Surface" approach where data is organized into logical card blocks, using subtle elevations and clear semantic color-coding to denote system status. The aesthetic is clean and functional, avoiding decorative elements in favor of technical precision and rapid scanability. + +- **Professionalism:** High-contrast typography and a restrained color palette. +- **Efficiency:** Condensed layouts that prioritize data visualization and task status. +- **Reliability:** Solid borders, consistent spacing, and clear state indicators. + +## Colors + +The color architecture is strictly functional, mapping specifically to the operation layers of the power management system. + +- **Primary (Deep Blue):** Reserved for core branding, navigation, and "Client" layer interactions. +- **Secondary (Purple):** Dedicated to "Gateway" operations and task-specific management. +- **Tertiary (Teal):** Used for "Service" layer success states and optimized performance indicators. +- **Neutral (Ink):** Used for primary text to ensure maximum legibility against light surfaces. + +**Semantic Usage:** +- Use **status-warn (Amber)** for non-critical alerts or data synchronization states. +- Use **status-error (Red)** for critical power failures or permission denials. +- The **bg-page** provides a soft, low-strain canvas for long-duration monitoring, while **surface** (White) distinguishes interactive cards and data containers. + +## Typography + +This design system uses **Hanken Grotesk** as the primary typeface for its sharp, contemporary feel that bridges the gap between industrial and tech. **JetBrains Mono** is employed for technical data, device IDs, and numerical values to emphasize the system's engineering DNA. + +- **Hierarchy:** Use `display-lg` for dashboard summaries. `title-sm` is the default for card headers. +- **Data Visualization:** All tabular data and technical strings must use `data-mono` for character alignment and clarity. +- **Mobile Adaptation:** For mobile screens, headlines should scale down to `headline-md-mobile` to maintain visual balance while preserving authority. + +## Layout & Spacing + +The layout utilizes a **Flexible Grid System** with a focus on logical grouping through card-based containment. + +- **Grid:** A 12-column grid is used for desktop views, transitioning to a single-column stacked layout for mobile. +- **Rhythm:** An 8px-based spacing scale ensures vertical consistency. Use `lg (24px)` for outer card padding and `md (16px)` for internal element spacing. +- **Mobile Margins:** Standard mobile side margins are set to `md (16px)` to maximize screen real estate for dense data tables. +- **Sectioning:** Distinct operational modules should be separated by `xl (40px)` of vertical space to prevent cognitive overload. + +## Elevation & Depth + +This design system conveys hierarchy through **Tonal Layering** and **Subtle Ambient Shadows**. We avoid heavy skeuomorphism in favor of a "Flat-Plus" approach. + +- **Base Layer:** The page background (`bg-page`) sits at the lowest elevation. +- **Mid Layer (Cards):** UI cards use a white surface with a subtle shadow (`0 4px 14px rgba(0,0,0,.07)`) to appear slightly lifted. +- **Interactive Layer:** On hover or active state, cards may transition to a higher elevation (`0 8px 28px rgba(0,0,0,.1)`) with a slight upward translation of -2px. +- **Overlays:** Modals and dropdowns use the highest z-index with a distinct backdrop blur to maintain focus on the task at hand. +- **Gradients:** Use soft radial gradients in the background (Blue/Purple) to create environmental depth without interfering with content legibility. + +## Shapes + +The shape language is **Rounded**, balancing industrial rigidity with modern software approachability. + +- **Cards & Sections:** Use the standard `rounded-lg (1rem)` for primary containers. +- **Nodes & Blocks:** Architecture and data nodes use `rounded (0.5rem)` to fit more compactly within layouts. +- **Interactive Elements:** Buttons and tags use a "Pill-shape" (`rounded-xl` or 999px) to distinguish them from structural containers. +- **Borders:** Use `1px solid` with the `border-rule` color for most containers. Active states or primary focus areas may increase to `1.5px`. + +## Components + +**Buttons:** +- **Primary:** Solid `primary_color` with white text. Pill-shaped. +- **Secondary:** Transparent with `primary_color` border or subtle purple tint for operation tasks. +- **Danger:** Solid `status-error` for irreversible actions. + +**Cards:** +- White background, `1px` border-rule, and `rounded-lg` corners. +- Headers should have a `18px` internal padding and a bottom border to separate from the content body. + +**Input Fields:** +- Soft white background with `1px` border. +- Focused states should use a `primary_color` border with a subtle outer glow. + +**Chips & Tags:** +- Used for status (e.g., "Active", "Offline"). +- Backgrounds should use `8% opacity` versions of the semantic colors (Blue, Green, Red) with bolded text in the 100% opacity color. + +**Data Visualization:** +- Charts should use the primary blue and secondary purple as the main data series colors. +- Use `data-mono` for all axis labels and tooltips to ensure technical accuracy. + +**Status Indicators:** +- Small `7px` circular dots used within lists or architecture nodes to show real-time connectivity status. \ No newline at end of file diff --git a/系统设计/UI/dashboard/code.html b/系统设计/UI/dashboard/code.html new file mode 100644 index 0000000..9056d6e --- /dev/null +++ b/系统设计/UI/dashboard/code.html @@ -0,0 +1,564 @@ + + +
ICC 实时数据同步正常
search
person
主控工程师 · 李工运营监控中心
expand_more
+ +
+ +
+
+
+托管客户总数 +corporate_fare +
+
+128 +家 +
+
+
+trending_up +同比 +12.5% +
+本月新增 +4 +
+
+ +
+
+
+在线设备概况 +router +
+
+3,676 +端点在线 +
+
+ +网关 256 (98.8%) + + +探测器 3,420 (99.2%) + +
+
+ +
+
+
+今日实时报警 +warning +
+
+14 +起告警 +
+
+高危 2 起 (自动触发工单) +一般 12 起 +
+
+ +
+
+
+待处理运营派单 +assignment_late +
+
+28 +单待流转 +
+
+
6 警
+
8 修
+
10 保
+
4 勘
+
+
+
+ +
+
+
+hub +
+
+
+大华 ICC 外部采集与对接状态监控 + +OPENAPI 通道健康 + +
+通过 HTTP REST 主动按需拉取至 BullMQ 队列缓冲并写入 PostgreSQL 按月时序分区表 +
+
+ +
+
+electric_meter +
+用电采集 (5m) +1分钟前同步完成 +
+
+
+sync_alt +
+事件监听 (1m) +POLLING 监听中 +
+
+
+stacked_line_chart +
+BullMQ 队列缓冲 +排队: 0 / 延迟 12ms +
+
+ +
+
+ +
+ +
+
+
+
+

全网用电负荷与功率走势图

+24H 实时监控 +
+

对比基准规划负荷,按尖、峰、平、谷阶梯负荷动态监测

+
+
+
+实时负荷 + 基准负荷 +
+
+ + + +
+
+
+ +
+ + + + + + + + + + + + + + + +尖峰电价时段 (10:00-14:00) + + +4000kW + +3000kW + +2000kW + +1000kW + +0 + + + + + + + + + + + +3,640 kW + + +00:00 +04:00 +08:00 +12:00 +16:00 +20:00 + +
+ +
+
+当前全网瞬时负荷 +2,894.2 kW +
+
+今日最高峰值 (11:24) +3,640.0 kW +
+
+平均负荷率 +78.4 % +
+
+谷段吸纳储能电量 +14,280 kWh +
+
+
+ +
+
+
+

报警分类与处置健康度

+help +
+

ICC 实时预警规则触发聚合分析

+
+ +
+ + + + + + + + + + + + +
+工单处置率 +94.6% +闭环正常 +
+
+ +
+
+
+ +负荷过载 / 越限 +
+6起 (42%) +
+
+
+ +配电箱温升超标 +
+4起 (28%) +
+
+
+ +漏电电流异常 +
+3起 (18%) +
+
+
+ +三相不平衡 / 缺相 +
+1起 (12%) +
+
+
+
+ +
+ +
+
+
+
+

紧急报警与待办派单流水

+LIVE ALERTS +
+

大华 ICC 毫秒级捕获异常事件,支持一键派发共享电工现场取证处置

+
+
+ +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
级别 / 编号托管客户异常点位 / 线路触发时间责任人 / 状态协同操作
+
+高危 +#AL-9804 +
+
市第一人民医院 +
+住院部东区 2F 配电间 +电缆接头温升 82.4℃ (超限) +
+
14:02:18 +
+ +张师傅 (接单待赴) + +距现场 1.2km +
+
+
+ + +
+
+
+高危 +#AL-9801 +
+
高新实验小学 +
+科技实验楼 1F 厨房总闸 +漏电保护触发 (460mA) +
+
13:48:50 +
+ +待指派电工 + +超时 12分钟 +
+
+ +
+
+预警 +#AL-9799 +
+
光谷智慧工业园 B3栋 +
+数控车间 A回路 +持续过载 115% (已持续20m) +
+
13:10:05 +
+ +王工 (现场排查中) + +已上传初勘照片 +
+
+ +
+
+维保 +#WO-4022 +
+
绿城百合公寓 (配电房) +
+地下变电所 #2 变压器 +季度绝缘预防性试验检测 +
+
09:00:00 + +已完成 · 待客户评分 + + +待回访 +
+
+ +
+显示 4 / 28 个待办工单记录 + +进入派单全景工作流调度中心 +arrow_forward + +
+
+ +
+
+
+

智电工程推进与审批看板

+

标准闭环:ICC录入 → 勘察 → 方案 → 合同 → 安装 → 验收

+
+ +
+ +
+ +
+
+
+武汉软件工程职业学院 · 宿舍楼 +方案审批中 +
+PRJ-2026-008 +
+

勘察已完成,已提交包含 48台智能断路器、4台网关配置方案

+ +
+
+
+
+ +person负责业务员: 陈建军 + +
+ + +
+
+
+ +
+
+
+江夏区妇幼保健院 · 新院区工程 +设备安装调试 +
+PRJ-2026-006 +
+

大华 ICC 已完成网关接入通道映射,现场共享电工施工中 (领料单已确认)

+ +
+
+
+
+ +photo_camera已上传水印取证 24 张 + + +
+
+ +
+
+
+东湖楚天科技大厦 · 节能改造 +待项目验收 +
+PRJ-2026-002 +
+

已连续平稳试运行 14天,月度用电基准分析已生成,等待甲方签字

+ +
+
+
+
+ +account_box已分配客户访问账号 + + +
+
+
+ +
+
+verified_user +RustFS 取证云存储状态正常 (剩余 4.2TB) +
+TypeORM v0.3.20 +
+
+
+
+
+ + \ No newline at end of file diff --git a/系统设计/UI/dashboard/screen.png b/系统设计/UI/dashboard/screen.png new file mode 100644 index 0000000..8c215fd Binary files /dev/null and b/系统设计/UI/dashboard/screen.png differ