一個展廳大屏幕的項目

一、需求

一些大企業都有本身的展廳，除了展現本身核心的產品技術，剩下的就是各個業務條線上IT信息化的爭芳鬥豔了。當有客戶或者各級領導來企業參觀時，展廳是最好表現企業風貌的場所，咱們此次面對的需求就是和展廳相關。

咱們的客戶xx電梯公司，在上海的有兩個分部據點，分別各自建造了一個展廳。昌化路的展廳正面是一面牆，24塊高清顯示屏拼接在一塊兒組成的牆。而咱們要作是能夠展現在這片牆上的前端頁面。陸陸續續蒐集到客戶的需求有：

1. 實時數據：大屏幕上的數據是實時變化的，動態更新。
2. APP鏡像控制：大屏幕的PC端是能夠交互的，爲了在接待客戶時也方便操做，指望有一個配套的移動終端，用來實時控制大屏幕的界面。
3. 前端選型：總體設計上要大氣，充滿科技感，最好依託成熟的產品。

二、技術方案

2.一、實時數據

客戶的第一個需求，要求數據是實時更新的，這個好辦。咱們開發websocket接口，前端經過websocket長鏈接來實時獲取數據。要注意的是作好心跳機制。

客戶端每30秒發送心跳數據請求服務端，服務器端作出迴應，則證實心跳鏈接正常。若是沒有收到服務端的迴應，則繼續請求，重複3次要是尚未迴應，則開始重連。

咱們將各個模塊從數據庫取數據，再經過websocket傳送數據的過程，作成一個個http接口。實際上每次調用這個http的接口，websocket才能拿到新的的數據。借用咱們以前已經給客戶開發過的一個定時調度平臺，業務部門能夠本身配置實時刷新數據的頻率。

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.三、前端選型

顯而易見，這個項目側重於前端的用戶體驗，按照客戶的原話來講，「怎麼酷炫怎麼搞」。

2.3.一、Tableau和DataV

早些年客戶上對於前端體驗並不重視，咱們在項目上一直是在作ADF開發，也是到了今年，項目上才正式引入前端開發人員。客戶平時接觸過較爲炫酷的頁面就是tableau，因此客戶一開始就提出，前端直接用tableau來展現。

客戶最近準備上雲，在接觸了不少阿里雲的供應商以後，無心中看到阿里用於作前端展現的產品- DataV。不得不認可，DataV作出的報表絕對帶給人震撼，它自帶的組件包含不少酷炫的3D效果，用於大屏幕展現絕對沒問題。客戶負責人直接充了五千塊錢，讓我調研DataV，用在本次大屏幕的項目裏面。

在和客戶幾回溝通後瞭解到，客戶看中Tableau，是由於它有豐富並且美觀的圖表組件；而看中DataV，則是看中了它酷炫的3D地圖模型。

而我在評估方案的風險時，擔心的是這類第三方產品的客製化拓展能力，萬一領導提出要修改一些組件的樣式風格，咱們能不能對Tableau或DataV的組件作出修改。還有咱們以前的技術方案都是基於websocket，這兩個產品在websocket上的支持能到什麼程度？也尚不可知。

2.3.二、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。

三、完成效果

這個項目拖了好久，一直到離承諾給業務部門的日期，只剩一週了，纔開始着手開發。因爲前期全部的技術方案都很明確，你們也很給力，一週的時間內，咱們就開發完了綜合看板的PC端和移動端。週五在給客戶演示的時候，客戶領導也表示了讚賞。