一个展厅大屏幕的项目

1、需求

一些大企业都有自己的展厅，除了展示自己核心的产品技术，剩下的就是各个业务条线上IT信息化的争芳斗艳了。当有客户或者各级领导来企业参观时，展厅是最好表现企业风貌的场所，我们这次面对的需求就是和展厅相关。

我们的客户xx电梯公司，在上海的有两个分部据点，分别各自建造了一个展厅。昌化路的展厅正面是一面墙，24块高清显示屏拼接在一起组成的墙。而我们要做是可以展示在这片墙上的前端页面。陆陆续续搜集到客户的需求有：

1. 实时数据：大屏幕上的数据是实时变化的，动态更新。
2. APP镜像控制：大屏幕的PC端是可以交互的，为了在接待客户时也方便操作，期望有一个配套的移动终端，用来实时控制大屏幕的界面。
3. 前端选型：整体设计上要大气，充满科技感，最好依托成熟的产品。

2、技术方案

2.1、实时数据

客户的第一个需求，要求数据是实时更新的，这个好办。我们开发websocket接口，前端通过websocket长连接来实时获取数据。要注意的是做好心跳机制。

客户端每30秒发送心跳数据请求服务端，服务器端做出回应，则证明心跳连接正常。如果没有收到服务端的回应，则继续请求，重复3次要是还没有回应，则开始重连。

我们将各个模块从数据库取数据，再通过websocket传送数据的过程，做成一个个http接口。实际上每次调用这个http的接口，websocket才能拿到新的的数据。借用我们之前已经给客户开发过的一个定时调度平台，业务部门可以自己配置实时刷新数据的频率。

2.2、APP镜像控制

我们需要开发一个APP，在一些界面上和PC端保证一致，当我们在触摸屏上操控APP端时，大屏幕上的PC端应用也会镜像的发生变化，就像一个控制大屏幕的遥控器。

APP和PC端之间数据的实时传输，我们还是可以通过websocket来实现。但难住我的是，前端有很多交互操作实际上是 js 的动作，并未触发后台数据交互。websocket并不能传输 js 的事件呐。

js 的动作其实也是可以监听的，我们把移动端的动作描述成数据，传输给PC端，PC端就能做出同样的动作。例如地图的缩放：移动端在做缩放地图的操作时，将缩放地图的比例通过websocket接口传输给PC端，PC端一旦接收到对应类型的数据，就做出同样比例的缩放。只要网络传输够快，用户看上去就会感觉是在利用APP实时镜像控制大屏幕。

我在定义websocket传输数据的结构时，一致分成两大类。（1）data类型，用于服务器端的实时数据传输；（2）action类型，则用于传输能监听到的，移动端的行为操作，例如切换看板、切换地图、缩放移动地图、开启关闭坐标弹框，等等。

2.3、前端选型

显而易见，这个项目侧重于前端的用户体验，按照客户的原话来说，“怎么酷炫怎么搞”。

2.3.1、Tableau和DataV

早些年客户上对于前端体验并不重视，我们在项目上一直是在做ADF开发，也是到了今年，项目上才正式引入前端开发人员。客户平时接触过较为炫酷的页面就是tableau，所以客户一开始就提出，前端直接用tableau来展示。

客户最近准备上云，在接触了很多阿里云的供应商之后，无意中看到阿里用于做前端展示的产品- DataV。不得不承认，DataV做出的报表绝对带给人震撼，它自带的组件包含很多酷炫的3D效果，用于大屏幕展示绝对没问题。客户负责人直接充了五千块钱，让我调研DataV，用在本次大屏幕的项目里面。

在和客户几次沟通后了解到，客户看中Tableau，是因为它有丰富而且美观的图表组件；而看中DataV，则是看中了它酷炫的3D地图模型。

而我在评估方案的风险时，担忧的是这类第三方产品的客制化拓展能力，万一领导提出要修改一些组件的样式风格，我们能不能对Tableau或DataV的组件做出修改。还有我们之前的技术方案都是基于websocket，这两个产品在websocket上的支持能到什么程度？也尚不可知。

2.3.2、ECharts和高德地图

我们擅长H5，如果用H5来开发前端，上述的担忧就都不存在。在了解了客户真实的想法后，我在想如果基于我们熟悉的H5，能否也能实现客户的预期？

首先Tableau就完全被可以替换掉，Tableau里面的图表组件，我们完全可以用ECharts这个 js 库实现。而且如果客户非要修改某个组件的样式，我们也可以针对 js 做客制化开发。

其次就是DataV，我们之前有用过高德地图、百度地图等js库，做过基于地图的前端开发。尤其高德地图官网提供了一个叫“数据可视化 JS API”的模块，可以基于不用的应用场景，定制化地图的样式，同样可以做的很酷炫。

但是客户更看重DataV的3D地图模型，这是高德地图替代不了的，我就花了时间对DataV做了一些技术调研，发现它的局限性很大。（1）DataV自带的3D组件功能有限，而且选择少，根本满足不了需求。如果需要拓展，得找阿里的合作伙伴，做定制化3D建模。（2）DataV组件基本都是只能看的“花瓶”，无法做定制化的数据交互。比如说点击某个电梯坐标，显示电梯详情啥的，都不行。后来我和客户约见了阿里的销售，证实了我的结论。他们之前给客户负责人看的某个沿海企业的DataV展示项目，光海港区域的3D地图建模，就投入了近千万人民币。

最终出于方案的总体可行性和项目实施成本，客户在前端技术选型上，同意了ECharts和高德地图，放弃了Tableau和DataV。

3、完成效果

这个项目拖了很久，一直到离承诺给业务部门的日期，只剩一周了，才开始着手开发。由于前期所有的技术方案都很明确，大家也很给力，一周的时间内，我们就开发完了综合看板的PC端和移动端。周五在给客户演示的时候，客户领导也表示了赞扬。