1。一些大企业要求有自己的展厅。除了展示他们的核心产品技术，剩下的就是各个业务线的IT信息化。当各级客户或领导来公司参观时，展厅是展示公司风采的最佳场所。我们这次面对的需求是跟展厅有关的。我们的客户xx电梯公司在上海有两家分公司，每家都建有展厅。彰化路展厅正面是一面墙，由24块高清显示屏拼接而成。而我们要做的就是把前端页面显示在这面墙上。客户的需求陆续被采集：实时数据：大屏数据实时变化，动态更新。APP镜像控制：大屏PC端可交互。为了方便接待客户时的操作，希望有配套的移动终端实时控制大屏界面。前端选型：整体设计要大气、科技感十足，最好依托成熟的产品。2、技术方案2.1．实时数据客户的第一需求就是数据实时更新，便于处理。我们开发websocket接口，前端通过websocket长连接实时获取数据。需要注意的是心跳机制要做好。客户端每30秒发送一次心跳数据请求服务器，服务器响应，证明心跳连接正常。如果服务器没有响应，则继续请求，重复3次，如果没有响应，则开始重连。我们将各个模块从数据库中取数据，通过websocket传输数据到http接口的过程一一制作。实际上，每次调用这个http接口，websocket都能拿到新的数据。借用我们之前为客户开发的定时调度平台，业务部门可以自行配置实时刷新数据的频率。2.2.APP镜像控制我们需要开发一个APP，在一些界面上和PC端保持一致。当我们在触摸屏上控制APP端时，大屏上的PC端应用也会镜像变化，就像一个大屏遥控器。我们还是可以通过websocket实现APP和PC之间数据的实时传输。但是难倒我的是，前端的很多交互操作其实都是js动作，不会触发后台数据交互。Websocket无法传输js事件。js的动作其实是可以监控的。我们把移动端的动作描述成数据传给PC，PC也可以做出同样的动作。例如地图的缩放：当移动端执行缩放地图的操作时，将缩放后的地图比例尺通过websocket接口传给PC端。PC端接收到相应类型的数据后，会按相同比例进行放大。只要网络传输足够快，用户就会感觉是在用APP实时控制大屏。我在定义websocket传输数据的结构时，把它们分为两类。(1)数据类型，用于服务器端的实时数据传输；(2)动作类型，用于传递移动端可监控的行为和操作，如切换看板、切换地图、缩放移动地图、打开和关闭坐标弹框等。2.3.前端的选择是显而易见的。该项目侧重于前端的用户体验。按照客户的原话，“多酷，怎么做”。2.3.1、Tableau和DataV早年客户不太注重前端体验。我们在项目中一直在做ADF开发，直到今年项目才正式引入前端开发人员。Tableau是客户平时接触到的最酷的页面，所以客户一开始就提出前端直接用tableau展示。客户最近准备上云。在接触了阿里云的多家供应商后，无意间看到了阿里巴巴用于前端展示的产品——DataV。不得不承认，DataV的报告绝对令人震惊。其内置组件包含许多炫酷的3D效果，大屏显示绝对没问题。客户负责人直接收了5000元，让我研究DataV，用在这个大屏项目上。与客户多次沟通后得知客户对Tableau感兴趣是因为它有丰富漂亮的图表组件；客户对DataV很感兴趣，因为它有很酷的3D地图模型。我在评估解决方案的风险时，担心此类第三方产品的定制和扩展能力。如果领导提出要修改一些组件的样式，我们能不能修改一下Tableau或者DataV的组件。还有我们之前的技术方案都是基于websocket的。这两款产品能在多大程度上支持websocket？亦不详。2.3.2、ECharts和高德地图我们擅长H5，如果用H5来开发前端，以上的顾虑就不存在了。了解了客户的真实想法后，不知道基于我们熟悉的H5，是否能达到客户的期望呢？首先，Tableau是可以完全替代的。Tableau中的图表组件可以用js库ECharts实现。而如果客户坚持修改某个组件的样式，我们也可以为js做定制化开发。第二个是DataV。之前用过高德地图、百度地图等js库，做过基于地图的前端开发。特别是高德地图官网提供了一个名为“DataVisualizationJSAPI”的模块，可以根据不同的应用场景自定义地图的样式，也可以很酷。但客户更看重DataV的3D地图模型，这是高德无法替代的。我花时间对DataV做了一些技术研究，发现它有很大的局限性。(1)DataV自带的3D组件功能有限，选择少，根本不能满足需求。如果需要扩展，就得找阿里的合作伙伴做定制化的3D建模。(2)DataV组件基本上是只能查看的“花瓶”，不能自定义数据交互。例如，点击电梯的坐标显示电梯的详细信息将不起作用。后来我和客户约了阿里的业务员，印证了我的结论。他们之前向客户负责人展示的某沿海企业DataV示范项目，仅港区3D地图建模就投入了近千万元。最终，由于方案的整体可行性和项目实施成本，客户在前端技术的选择上同意了ECharts和高德地图，放弃了Tableau和DataV。三、竣工效果项目延期已久，距业务部承诺的开发日期仅剩一周时间。由于前期所有的技术方案都非常清晰，大家的帮助也很大，所以一周之内，我们就开发出了综合看板的PC端和移动端。在周五对客户的介绍中，客户领导也表达了他们的赞扬。
