作者 | 罗学勇
监制 | 向日葵
原文 | 微信搜索 ‘技术记号’
前言
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
