sequenceDiagram
participant 巡检App
participant Gateway
participant OrderSvc
participant EquipmentSvc
participant NotifySvc
巡检App->>Gateway: POST /defect (图片+坐标)
Gateway->>OrderSvc: 创建缺陷单
OrderSvc->>EquipmentSvc: 校验设备ID
EquipmentSvc-->>OrderSvc: 返回设备信息
OrderSvc->>OrderSvc: 启动流程实例
OrderSvc->>NotifySvc: 推送到责任人
NotifySvc-->>巡检App: WebSocket 消息
Note right of 巡检App: 状态实时刷新
共 60+ 画板,覆盖登录、首页、设备、工单、报表、系统管理
使用 Auto-Layout 4 px 栅格;主组件化按钮、表格、表单,支持一键换肤
导出:SVG + PDF + Zeplin 标注,开发可直接查看 css 像素值
设计令牌(Design Token)
颜色
– 主色:国网绿 #007A51
– 功能色:告警红 #D9001B、安全蓝 #005DFF
– 中性色:灰 1 #141414 … 灰 9 #F5F5F5
字体
– 标题:思源黑体 32/28/24 px
– 正文:HarmonyOS Sans 16/14 px
– 表格:等宽 Source Han Mono 13 px
阴影 & 圆角
– 卡片:0 2 8 0 rgba(0,0,0,0.08)
– 圆角:4 px(常规)、0 px(数据表格保持硬朗工业风)
交互动效(Figma Prototype)
登录页
背景:国网铁塔输电线路全景
元素:CA 证书一键登录、验证码、倒计时自动锁定
主题色:国网绿 #007A51 + 辅助金 #C89B3C
首页 Dashboard
顶部 KPI:在运设备 32 万台、今日缺陷 1 245 条、消缺率 97.8 %
左侧地图:基于 OpenLayers 的电网 GIS,支持 35 kV 及以上电压等级分层渲染
右下:实时负荷曲线(ECharts 面积图,5 min 刷新)
设备台账
表格:支持百万级分页、列冻结、头部筛选
行内操作:查看、编辑、生成缺陷单、定位到地图
批量导入:Excel 模板下载 + 国网 SG-CIM 字段校验
两票工单流
流程图:Flowable 节点高亮当前状态
操作:签发、许可、终结、打印(PDF 带签章)
安全校验:人脸识别 + 坐标位置 + 时间窗三重校验