2024年4月22日发(作者：)

电子技术与软件工程

Electronic Technology & Software Engineering

软件开发与应用

Software Development And Application

大屏展示系统的设计与实现

刘氢

（上海市国有资产监督管理委员会 上海市 200000）

摘　要：本文主要研究了大屏展示系统的设计与实现。大屏展示系统主要服务于数据的可视化工作，相比于传统的电脑端数据可视化

工作，大屏作为数据可视化的载体可以让用户以更广阔的视角一屏观所有数据。为了达到上述目的，目前市场上常用的解决方案是采用传

统的软件开发模式，研发对应的数据可视化软件，使其适配大屏的尺寸。传统方案开发周期普遍较长，不能快速响应业务需求的变化，所

以本文提出一种新的解决方案：即结合成熟的大屏可视化工具进行二次加工，快速生成满足业务需求的大屏。该方案前端采用Easyv大屏

开发软件进行基础布局；数据下钻等交互逻辑采用Harman air技术结合前端脚本实现；大屏数据管理服务用Yii2框架进行支撑。经实践，

该方案可以在不降低可视化质量的情况下快速响应业务需求，是值得同行借鉴的一种解决方案。

关键词：大屏；Easyv；Harman air；数据可视化；Yii2

随着单位信息化工作的持续开展，积累了大量需要可视化的数

据，传统的数据可视化主要在用户的电脑端进行，所以大部分的可

视化研究都是基于PC端电脑进行的，受限于PC端电脑的小屏幕，

一屏上不能展示全所有的数据。因此业界提出了大屏可视化的概念，

大屏可视化就是用富媒体的元素给用户讲故事，使受众只需要一屏

或者少屏浏览的情况下，高效的理解和认识到数据的核心价值，用

于指导后续的业务计划。

市面上传统的大屏解决方案来源于pc端数据可视化的解决方

案，采用普通的软件开发模式开发出适配大屏浏览的可视化软件，

这种解决方案开发周期较长，在快速响应业务需求方面有所欠缺，

因此本文提出一种新的解决方案，即结合成熟的大屏可视化工具进

行二次加工，该方案融合了多种工具和技术，对相关单位企业有较

高的参考价值。

1 系统架构设计与运行环境

1.1 系统架构设计

在软件开发的过程中，需求变更是很常见的业务场景，如何高

效高质量的快速响应业务需求的变更是我们需要经常思考的问题。

本文尝试从多技术结合的角度去提出对应的解决方案。在大屏展示

系统的架构设计上，前端采用了Easyv大屏开发软件进行布局，动

画及交互下钻等逻辑采用Harman air结合前端脚本实现，后端大屏

数据管理和用户确权方面采用成熟的开源框架Yii2。大屏展示系统

架构设计见图1。

EasyV是一款在线数据可视化大屏开发软件，使用者无需设计

经验或技术背景，通过简单的组件拖拽、图层、画布编辑等操作方

式即可快速创建出美观酷炫的数据大屏。平台支持多种数据源类

型接入，具备数据实时更新性强、视觉效果丰富等特点。本研究中

Easyv主要用于大屏的基础布局和设计。

Harman air在2020年之前叫做adobe air，后来adobe公司把

这个软件平台卖给Harman公司，所以现在业界统一将其改称为

Harman air，它是一个跨操作系统的多屏幕运行时，通过它可以利

用成熟的 Web 开发框架来构建丰富网络应用程序 (RIA)，并将其部

署到桌面和移动设备上。本研究中Harman air主要用于大屏的动画

设计和图表下钻等交互逻辑的实现，并完成富媒体软件的整体开发。

Easyv大屏开发软件也可以用于简单的动画和交互逻辑的设计，

但是动画的样式和交互逻辑的设计都依赖于该软件内置的组件，灵

图2：系统功能模块

活性有所欠缺，虽然可以基于Easyv大屏开发软件进行组件的扩展

开发，但是开发组件的工作量和普通的软件开发相比只多不少。因

此这里采用Harman air来快速并灵活的实现这部分功能。

Yii2是一个全栈开源Web开发框架，该框架使用模块化程序

设计，在满足系统功能需求的同时，大幅度地降低了开发成本，缩

短了设计与开发周期，让系统开发人员能够将主要精力放在功能

需求的实现过程中，而不必考虑具体的程序设计细节

[1]

。本研究中

Yii2主要用于管理大屏的数据源，比如api数据源，csv数据源及

图1：大屏展示系统架构设计图

43

软件开发与应用

Software Development And Application

用关系型数据库存储的数据源。

1.2 运行环境搭建

大屏展示系统服务器环境搭建在linux操作系统上。Easyv提

供了Docker镜像，所以系统上需要安装docker软件进行部署.通

过管理应用程序组件的生命周期，例如打包、分发、部署和调试，

Docker可以将用户应用程序及其操作环境“捆绑在一起，并在任何

地方运行”

[2]

。

因为大屏数据管理用到yii2框架，所以提供数据的服务器上需

要安装php运行环境以及Mariadb数据库。Mariadb数据库前身为

mysql，由于mysql被甲骨文公司收购后有闭源的风险，所以社区

开发了mysql的开源分支名字叫Mariadb。本研究用到的php版本

为8.0.3，mariadb数据库版本号为10.4.18。

大屏展示系统的前端展现层载体是一个富媒体RIA的应用，所

以需要在客户端安装RIA运行时环境。该RIA运行时的版本号为

33。

2 系统总体设计

如图2所示，大屏展示系统的主要功能模块包括：用户确权模

块，数据源管理模块，动画管理模块，页面加载模块。其中，用户

确权模块主要是实现用户身份辨识，确保不同权限的用户看到不同

的数据；数据源管理模块包括api的生成管理，csv的路径管理及

mysql的jdbc连接管理；动画管理模块包括大屏场景切换的动效管

理，组件切换的动画管理；页面加载模块主要是Harmanair里面的

html5页面加载器的管理。各模块之间相互联系，共同构成了大屏

展示系统。

2.1 用户确权模块

大屏展示系统的用户确权功能通过在web单页的url上传递不

同的token来实现。不同的用户访问同一个web单页的情况下，通

过不同的token来区分用户的身份，token和用户的对应关系存储在

mariadb中。Yii2框架通过开源的yii2-admin插件可以用视化的方

式来分配用户的角色，并给不同的角色赋予不同的权限。用户，角

色和权限的对应关系也存储在mariadb中。角色表，用户表，权限表，

token表通过用户id进行关联，这样就完成了用户的确权。

2.2 数据源管理模块

大屏展示系统的数据源主要包括api，csv和关系型数据库。

csv的数据源管理相对简单，csv数据文件可以通过excel生成，然

后上传到easyv设计平台即可展示出对应的图表组件。关系型数据

库，可以通过导入csv数据文件的形式生成，然后在easyv上填入

jdbc的连接信息即可。

比较复杂的是api的数据源生成及管理，这里api的数据源有

两种类型，一种是静态类型的数据，一种是动态类型的数据。静态

类型的数据有两种方式渲染在大屏上，一种是直接在easyv平台上

写入，这种方式不够灵活，所以我采用第二种方式，即通过服务器

端脚本输出，这样可以在服务端控制静态类型的数据展示。动态类

型的数据需要从数据库里面读取，必须通过服务器端的脚本进行输

出，这部分功能在yii2框架里面实现。

所有数据源的增删改查都通过yii2的脚手架功能实现。

44

电子技术与软件工程

Electronic Technology & Software Engineering

2.3 动画管理模块

动画管理模块包括动画特效的生成，修改和移除。动画管理通

过Harman air来实现，Harman air可以利用Animate CC进行方便

的快速的灵活的动画制作。Animate CC的前身是著名的动画设计

软件adobe flash，adobe flash因为安全和性能等原因逐渐退出历史

舞台，Adobe顺应历史趋势推出了AnimateCC软件，该软件向下兼

容所有的Adobe flash功能，在修复安全和性能相关问题的同时也

新增了很多动画功能。结合Harman air平台，Animate cc可以开发

出带炫酷动态特效的富媒体软件RIA。

2.4 页面加载模块

页面加载模块主要用于加载easyv大屏设计工具在前端生

成的html5格式的组件。该模块的功能通过Harman air平台的

WebViewANE本机扩展实现。WebViewANE是一个开源项目，由

github上的开源软件作者tuarua开发，该项目创建于2019年6月1

号，并持续更新到现在。利用WebViewANE结合Harman air平台，

可以创建出功能强大的富媒体应用程序。该开源项目兼容多个平台，

目前其最新版本支持macOS 10.10+, Windows Desktop, iOS 9.0+和

Android19+

[3]

。

3 结语

根据实际工作需要，设计与实现了大屏展示系统，在不降低可

视化产品质量的前提下，利用多种技术融合的方式提升开发效率，

高效响应业务需求。

前端采用Harman air平台完成动画效果的创建和Easyv组件的

加载，后端用户确权和数据管理部分利用yii2完成。这种技术组合

方案可以充分发挥各个技术栈的特色。Harman air的优势在于动画

设计的灵活性，Easyv的优势在于大屏设计的方便和快捷性，yii2

的优势在于后台系统搭建的高效性。因此借用各个技术的优势进行

组合即可满足工作需求。

这种技术组合方案也有劣势，比如会遇到后期各个技术软件

的升级版本不兼容导致需要大量的反工和大面积修改组合接口的代

码，反而降低开发效率的情况，这就需要研发同事根据具体的业务

场景进行判断，再决定采用哪种方案。

综上所诉，在服务端和客户端的软件比较稳定的情况下，这种

多技术组合方案可以较好的满足高效开发和快速响应业务的需求。

参考文献

[1]张亮,李正卫,韩毅.基于YII2框架的高校毕业设计质量管

理系统设计[J].计算机测量与控制,2019．

[2]文博,刘莎莎,龚雨菲.Docker技术在企业系统软件快速部署

方面的应用[J].江苏科技信息,2021．

[3]. WebViewANE.[2021-05-03]./

tuarua/WebViewANE.2.18.0

作者简介

刘氢（1984-），女，广东省深圳市人。研究生学历，计算机高级

工程师。研究方向为计算机科学与技术，软件工程。