作者 | 羅學勇

監制 | 向日葵

原文 | 微信搜索 ‘技術記號’

前言

In大數據時代，跟隨相關技術的日新月異與成熟，在這樣的背景下，前端和后端又能玩出什么新花樣呢？在18年的雙11活動中，天貓的可視化大屏可謂玩花了技術控們的眼睛。

時過1年的今天，正好在黑馬頭條項目中玩了一把大屏，在這個過程中我發現周邊同事和我理解的大屏定義不太一樣，于是我查閱了度娘，發現度娘上全是賣LED大屏的（真是太尷尬了~）。這可怎么辦，這強迫癥一犯，愣是一夜未眠好。

經過一夜的思考，也對看板和大屏有了一些個人見解，在此記錄，以備它人所需。

正題

我們在做后臺系統時經常會聽到一些dashboard、kanban、screen、報表、統計、畫像、儀表盤等名詞，不管是否還有其它名詞，這些名詞按落地的頁面來歸類分為入口和詳情兩類。今天的主角kanban和screen都屬于入口頁這類。另要說明一下，在一些企業中也經常把kanban稱為儀表盤或者dashboard；所以依據這些信息我們可以得到下面這個公式：

dashboard（儀表盤）= kanban（看板）≠ screen（大屏）

為證明以上的等或不等式成立，下面我們從面向用戶、功能特點、技術實現等維度進行論證。

面向用戶不同

看板，面向的核心用戶是運營，其次才是其它內部員工和BOSS

在后臺管理系統中，大部分系統登錄成功之后跳轉的第一個頁面就是看板頁面，比如企業辦公軟件登錄之后看板上出現待辦事項、事項辦理進度、當月績效等數據；又比如電商后臺進入后的看板上提示今日上架、成就額趨勢、新SKU數量、PV走勢、UV走勢等圖表；這些都是常規套路，那么思考一下管理系統誰用的最多呢？大部分情況下，個人認為是運營，他們依據邊看板上的數字并查看詳情分析運營情況，并及時調整運營策略，以完成運營目標。少部分情況，技術和運維會有后臺系統的賬號，他們主要登錄查看系統監控看板監控系統。

有老鐵可能會反駁說到OA系統不是呀！內部那么多員工都有賬號，人數肯定比運營多。針對這個問題呢，我們首先要了解兩個實情，第一、企業中OA系統的運營人員實則是人事或者行政。第二、企業員工都有OA賬號，但他們不可能天天登錄OA去請假是吧！但是人事和行政會基本天天登，去導或看員工數據。所以還是核心用戶還是系統的運營者人事或行政。

那么有沒有系統看板不是面向運營的呢？個人相信是有的，只是還沒碰到，等碰到了在來補充，老鐵們沒遇見了也可以留言告訴我。

大屏，面向的核心用戶是系統客戶、其次是內部員工、BOSS

想一想大屏出現的地方在哪里？在公司前臺、走廊、辦公區，亦或在公司食堂，還有就是發布會直播現場對吧！在這些區域設置大屏的目的就是給客戶一種專業、高大尚的比格、如果客戶是互聯網用戶，那么就開直播發布會，總之得讓客戶感受到公司的專業與強大。除了這個目的，還有一層意思就是，讓內部員工看見自己努力經營的成功而獲得成就感！

BOSS就不用多說了，看板和大屏他都看！

功能特點不同

看板，功能特點是支持頁面定制、頁面多圖表、可交互查看（點擊查看詳情等）、圖表數據手動刷新

比如：以下看板示例，統一個系統不同用戶可以有不同的圖表項，每項圖表可點擊查看詳細數據和搜索。

大屏，功能特點是頁面展示的是數字（TOP 項）、不可交互、自動刷新、視覺特效強、成就展示

比如：以黑馬頭條的大屏Demo舉例，大屏是單頁展示的模式（雙11的大屏是多頁展示模式更具視覺效果），當某個數字指標達到一個設定閾值時，呈現成就特效頁，以體現成就的儀式感。

技術實現不同

看板，后端大數據統計計算，前端通過Echarts進行展示

從近幾年的看板技術來看，如拋開后端的大數據統計計算，其它技術還是比較常規，大部分看板還是由http、vue、echarts核心三件套組成。由于是手動刷新，所以只需要提供http接口獲取數據即可；圖表頁使用開源的Vue+Echarts即可滿足大部分需求。這種模式在開發過程中也較容易實現，處理的細節不多。當然也有一些企業產品化融入了高級玩法，提供了自動刷新、圖表定制功能。

大屏，后端大數據統計計算、數據實時計算；前端內容特效定制開發

以黑馬頭條的大屏技術為例（拋開大數據統計技術），kafkastream、websocket、http、vue、d3、jquery、svg、echarts。

先說后端，大屏要求后端支持多協議連接，常見的是ws、http協議，在一個協議不可用的情況下，自動切換另外一個協議，保證前端可實時獲取到后端數據。后端通過kafkastream實時對系統總線上的消息進行監聽和過濾處理，并轉換成前端所需的消息格式，通過WebSocket發送給前端實時刷新。對于后端ws協議需提供WebSocket服務，實現連接權限的管理。同時還要求后端提供http數據獲取接口，可用獲取實時計算的數據。如下數據流圖：

再說前端，大屏的前端視覺效果都要求特別高。除此之外，大屏實現的困難點還體現在以下兩點點：

算法難度：如tmall雙11的大屏效果，其中展示的特效是現有前端框架都沒現成的，所以需要自我實現。而在實現特效的過程中會涉及各種算法，如下圖品牌LOGO都圍繞地址旋轉，會涉及3D 球面坐標的算法；

數據溢出：大屏實時獲取后端數據，大屏一般不會關閉，那么前端必然會接收到超量的數據，如處理不好會引起大屏特效卡頓、大屏卡死等問題；

彩蛋

本想總結一下看板和大屏的區別，但是到了吃小面的時間了，彩蛋一發就各回各家吧~

看板常見分類

運營看板：（面向運營人員，包含系統各業務指標內容）

運維看板：（面向運維人員，包含系統硬件、容器、軟件等內容）

監控看板：（面向技術人員，包括系統自身運行情況、異常情況、KPI指標項）

敏捷看板：（面向技術團隊，包括工作任務、工作方案、資源/進度等內容）

BOSS看板：（面向BOSS，包含BOSS關注的運營、運維、KPI等指標項）

大屏常見分類

單頁大屏：（小成本小制作）單頁展示所有的數字項和成就特效

多頁大屏：（大成本大制作）每頁展示獨立的數字項及其成就特效

————————————————
版權聲明：本文為CSDN博主「miukoo」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/luoxueyong/article/details/99335922

總結

以上是生活随笔為你收集整理的【转】外行杂谈论—聊聊看板 vs 大屏的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。