基于RPS开发模式的可视化设计解决方案(初稿)
设计目标
首先,随着开发工作的进行,发现有很多重复冗余的部分,前端开发进行组件化管理,并抽离出来形成一个可视化组件库,减少重复开发工作量,封装常用的UI组件和部分功能组件,避免重复开发以达到提高开发效率的目的。
其次,现场展屏的不确定性较多,为了完美适配宽高比例,重点解决大屏展示的屏幕适配问题,实现不需要修改项目源码,规避重新打包部署等流程,在现场展览台,现场工程师也能进行屏幕适配的微调工作。
再次,方便用户进行自由配置来实现不同数据的组合展示,通过配置可以达到基础的自定义可视化大屏,从区块式开发转变为资产式开发,提出资源池(资产池)概念。
最后,对于开发而言,快速开发一套可视化项目,如果用现有资源的堆叠和配置无疑会大量节省开发时间,提高开发效率,一个资源共享平台是很有必要的,实时的配置、预览效果,规范的数据格式,带来开发的良好体验。
开发模式
考虑到以后用户对系统关注的数据可能会更改或需要其他辅助数据展示等多样化的需求以及当前项目的拓展性,针对当前面临的问题,需要一种可配置并进行资源选择式的开发模式来解决,即ResourcePlatformSelect(RPS)模式。
开发方式:
1、组件开发,开发业务区块时可以引入Visual-ui,调用合适的UI组件,或者按照开发者规范封装自己的组件到Visual-ui,丰富Visual-ui库的多样性。
2、按照业务的不同,把相关的功能形成区块,放到资源池中
此时,可以默认开发出来主题一,主题二等组合,自定义数据时可以修改visual-platform对应的 config,将区块组件引入。
3、用户从资源池中选择区块,利用Visual-platform,调整大屏布局展示出来。
4、存储方式:首先优先后台接口保存,提醒用户存在用户配置数据,其次Visual-platform本地数据存储机制也可以实现一屏幕一数据。
注意:
1、在设计Visual-platform时,对开发人员定义默认模板的样式为基准,对用户修改部分配置进行限制。
2、Visual-platform提供Config本地存储,对外暴露两个回调函数:saveConfig、clearConfig,外部可以选择调用本地存储的配置数据,或者存储到后台。
3、支持多实例,设置'configName',可在本地保存多个实例配置,也就是说一个项目可以有多个可视化大屏并行,同时对其进行分别配置。
总结
基于RPS开发模式的一体式可视化解决设计方案,该方案主体部分由Visual-UI、Visual-Platform、Visual-Scheme组成,三者均可独立使用,又能搭配组合使用,现将这三者的功能简要阐述如下:
Visual-ui: 一个标准化的UI组件库+功能封装库,是一个有着标准规范的封装框架,可持续更新。
Visual-platform:一个GUI框架插件,RPS模式开发的架子,允许多实例开发,可适配不同尺寸的屏幕,支持区块的名称、边框、位置、大小等属性的在线修改,支持预设值。
Visual-Scheme:一个可视化资源共享平台,可实时查看预览,支持配置、模板下载,可持续更新,后续以RPS模式开发的新资源都可接入。
为方便读者更好的理解这三者的关系,我们以组装汽车和车展来打个比喻:Visual-UI 可以看做是标准化的汽车零件,有一套规范化的流程封装起来的UI和功能的集合,比如:轮子,方向盘,尾翼,扰流板等;Visual-platform 则可以看做是车架子,在这个架子的衔接下,不同的零件放的位置,大小等都是可以调整的,并且可以一个项目中包含多个架子。换句话来说,如果客户来到我们的汽车展台,我们就可以同时展览多辆,这就意味着能够根据不同的客户的身份或者关注点来进行不同主题和可视化数据的展示;Visual-Scheme这个平台可以看做是一个汽车展厅或者博物馆,这里有各种各样的不同年代的零件,也有组装好的车子,我们来到这里就可以挑选零件和车架子进行随意搭配重组和实时预览。
当然,添加一些新的零件和架子也可以更好的丰富visual-Scheme平台,在此表示欢迎。