可视化诊断平台阶段性总结

UI设计方面:

  • 由项目定位,功能模块分为以下几部分:
    • 数据可视化展示
    • 实时监测
    • 数据分析模块
    • 日志管理
    • 系统管理

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

  • 代码层面:
    • 功能模块划分清晰
    • 公共css分类管理,单独文件中css,没有scope限制的需要用类名来约束
    • 由于参数个性化程度高,好多exchart配置项没办法作有效封装