技术服务于业务，业务才是技术更新的原动力

背景

项目从零到一逐渐成型，统计数据、监控数据、日志数据等已经逐渐丰富。素材已到位，概览大屏的设计开发任务也应用而生。产品基本以客户定制化导向，所以大屏概览的定制化程度很高。在设计落地方面也面临诸多挑战。

设计

后端设计

首先后端微服务规划统计指标，因为在微服务大框架下采集的数据来自各个微服务、第三方服务。所以建立一个大屏概览统一的微服务来从各个微服务实时采集、周期性同步数据，梳理整合成业务指标来向上提供统一数据模型的数据。

数据模型设计

数据模型以统一规划的json数据的固定结构 + metadata构成。（不过多描述）

前端设计

前端设计上主要以设计器和解析器为主，配合组件、过滤器完成整体设计。设计器示意图：

单独模块的配置：

组件设计（前端）

组件设计上分为三类

1. 基础生态组件（折线图、水球图、柱状图等，无业务状态）
2. 基础业务组件（这类组件是和业务关联的，有一定业务状态，属于业务定制化组件）
3. 业务片段（这类属于定制化开发过程中积累的动态组件，属于基础业务组件的最小单位）
4. 业务组件（这类属于发布后的基础业务组件或基础生态组件，它对接了接口，一般发布给客户直接用的） 备注：每个组件类都有过滤器的注入口，方便一些定制化数据过滤。复杂些可以配置多层过滤器，默认配置的是一组demo数据，主要解决刚拖进设计编辑器区域渲染空白问题。

模块设计（前端）

模块设计指的是概览大屏的呈现容器，模块容器可拉伸放大（类似栅格设计，最小屏幕宽度1/6）。

1. 模块大小变化：可能会引起部分组件的重新绘制。因为组件中存在canvas绘制的组件，这类组件会触发重绘，一般通用组件采用flex布局会自动适配模块容器的大小变化。
2. 模块中组件组装：模块中组件可以呈现一个或多个，可以合并在一起以按钮切换查看，也可以一次性同时铺开呈现多个。如下图：

3. 模块数据：模块配置的请求数据分为两类。一类配置这个模块承载几个数据指标（eg：承载cpu、内存、磁盘三个指标），一类数据模块的额外配置metadata（eg：模块中组件配色组是什么？图标用哪些？多个组件怎么分组？）

应用设计

应用设计主要指的设计出来的概览大屏怎么用

1. 概览大屏列表，如下图。创建出游离态的概览大屏，把它应用给角色、账户。
2. 具体应用，如下图。一个账号可能拥有多个角色（它可能拥有多套大屏概览），部分模块配置的数据指标可能不是实时的增加强制同步功能。

缺点

这套方案不是完全的纯技术方案，封装定制化组件有一定规则限制，不是很友好。 前后端对数据模型的设计有诸多内置规则，配置上存在学习成本。 暂不支持一个模块中放置不同类的组件。

备注

以上方案基本以概览设计为主分享，大屏设计上细节更为复杂一些。有幸之前学习参阅过业界一些商用的大屏概览设计方案，粒度更细、复杂度更高，当然也更好。想想应该起一个醒目点的标题...