UI设计方面:
- 由项目定位,功能模块分为以下几部分:
- 数据可视化展示
- 实时监测
- 数据分析模块
- 日志管理
- 系统管理
- UI方面:
- 功能决定UI,主题
- 半透明和渐变是主要元素,增加网站的整体的美感
- 主要使用echart图表,表现形式主要有:地图、饼状图、柱状图、线性图、日历等表现形式
- 首页添加了一个canvas,另外,因为数据实时的缘故,网站图表颜色建议多变,增加可视化动感
- 文字方面,三级大小,个别地方单独处理,对于敏感的数字进行了放大处理,并根据对颜色的敏感度进行严格把控,进行统一处理,比如:报警是红色,正常为绿色
- 设备列表布局采用大图布局,辅助蒙层进行详细的参数说明,卡片化对于信息的表达更直观
- 实时监测方面,实时数据和设备示意图结合进行部件展示,表现形式可以用卡片和列表两种
- 警报中心、诊断中心采用日历、图表,列表结合的形式展示
- 数据分析模块考虑变换一下展示形式,类似后台统计管理类风格
- 代码层面:
- 功能模块划分清晰
- 公共css分类管理,单独文件中css,没有scope限制的需要用类名来约束
- 由于参数个性化程度高,好多exchart配置项没办法作有效封装