system: [SYSTEM]

user: 3. Axure中数据可视化大屏的设计与实现 3.1. 系统分析与设计 大屏数据可视化系统一般基于企业需求，能够针对性的展现企业经营环节、生产环节、运营环节等一个或多个环节中产生的数据。本文所设计的智能蚕房大屏数据可视化系统针对蚕桑企业生产环节产生的数据，不仅需要满足用户对美的多样性需求，还要对企业生产环节的客观数据进行呈现，同时提供工作安排的展示功能，从而更好的服务于生产环节相关员工的工作进程。此外，在大屏可视化设计阶段的排版布局、图标选用等应服务于业务 [ 11 ]，根据客户的需求增加新颖的图形、图表供客户选择。 经调研分析后了解到，如果从蚕桑角度解释生产环节内容，大规模的蚕桑养殖一般将养殖过程分为小蚕房、中蚕房、大蚕房三个种类，各个规模的房间数量不一，且各个房间具有各自的实时温湿度、设定温湿度、设定误差值等多个数据信息。因此，蚕桑领域的智能化大屏数据可视化系统开发需要综合蚕桑养殖环节产生的多种数据信息，应以房间为单位，在系统中应当注重不同房间之间的独立性、明确房间与房间自身数据的对应关系。然而从人员角度解释对生产环节工作进行分析时，相关养殖人员的工作内容则不再以房间为单位，而是基于规模。例如，小蚕房一般多个房间位于同一建筑，因此该建筑内的所有小蚕房房间的工作内容安排一致；而大蚕房由于规模大，一般一个大蚕房为一整栋建筑，因此多间大蚕房对应多个工作安排。因此，如图2所示，在系统设计时应当将大屏数据可视化分为房间温湿度数据展示功能模块与工作安排展示功能模块两部分，针对各自的数据特点实现数据展示与定时轮播。 图2. 智能蚕房大屏数据可视化的系统架构 本系统采用动态大屏数据可视化进行展示，能更好的帮助用户理解数据信息内容、观察数据的对比性。另外，为提高大屏的可观赏性，将数据信息按照类别、时间、位置等层级进行合理组织，并且采用数字、文字、形状、图表等多种数据表现形式来呈现数据，从而使用户有能够在恰当的时间间隔中获取复杂数据信息。 3.2. 系统开发与实现 针对大屏数据可视化所需要表现出的艺术性与观赏性，在软件开发开始前需要对大屏数据可视化的界面进行设计。与传统的原型法软件开发模式相同，首先需要借助原型设计软件针对业务需要对大屏的可视化元素进行形状图案、色彩风格以及整体布局的设计。 本文所投放的大屏类型为LED无缝隙大屏，因此采用和电脑显示器一致的分辨率，即1920*1080。如前文所述，原型设计最重要的特点在于重视用户的参与度，因此在与用户不断的沟通协商、明确用户对界面的需求后，完成大屏的初步设计并交予用户确认。本文使用常用的原型设计软件Axure完成原型的设计，根据系统功能和用户需求设计的界面布局线框图如图3所示。 图3. 界面布局线框图 大屏数据可视化的界面设计完成后需要在Axure中实现基础交互功能。Axure提供用于定义结构和逻辑的接口，在设计交互功能时能够消除对原型进行编码的需要。Axure中交互功能的实现以事件为单位进行。不同事件存在不同的触发条件，每个事件可以包含多个场景，同时一个场景可以执行多个动作。利用Axure提供的可视化工作环境能够简单快速的以鼠标方式在线框图上定义连接和高级交互，从而实现页面的动态展示效果。 基于系统分析与设计环节的流程架构，针对蚕桑养殖过程的特点，首先应在大屏数据可视化系统中设计多个房间，为每个房间的实时数据进行展示。基于动态数据可视化设计的理论，在可视化展示时应当突破静态屏幕、连续时间的观念，遵循“注意力捕捉”的视觉模态认知概念规则，使时间轴运动起来 [ 2 ]。使用Axure的Panel面板控件，在面板中为每一个房间制作一个面板页，从而保证系统中不同房间的独立性。以实时温度这一数据为例，大屏中需要呈现的实时温度数据的数量显然是基于房间数量的，本文开发的大屏数据可视化系统需要呈现8个房间，因此每次只需要了解到8个实时数据信息，使用大小为8的数组以数组形式存储不同房间对应的实时数据，同时引入一个全局变量对当前大屏所展示的房间进行下标的记录，就能保证房间与房间自身数据的对应关系。 使用Axure的PANELSTATECHANGED事件实现蚕房房间轮播效果，房间跳转时显示数据根据房间切换内容的流程思路如图4所示。面板固定频率自动切换到下一个房间所在的面板，每次切换房间时获取一次当前房间名，从而确定一个唯一的current_room值。针对智能蚕房系统的不同房间，每个房间对应有自己的实时温湿度、设定温湿度以及设定的温湿度误差值，每次切换面板时都会将current_room作为下标值，从对应网页全局变量中获得指定下标位置的数字，并更新控件内容，实现每个房间温湿度数据的展示。 图4. PANELSTATECHANGED事件调用流程图 类似的，工作安排展示部分也采用轮播形式。由于工作内容不再根据房间而是基于蚕房规模，设计小蚕房、中蚕房和大蚕房三类，每个部分都包含各自的任务时间数组、任务内容数组以及工作人员数组。这三个数组相同下标位置的内容都是一一对应的，存在映射关系。 上述运行流程仅仅完成了静态网页的开发，还需要在Axure中使用动态网页技术，在后台与服务器进行数据交换，才能真正满足大屏数据可视化的使用需求。由于各个控件都是基于全局变量实现数据展示的，因此考虑通过修改全局变量来实现数据实时更新的功能。同时，大屏数据可视化一般只需要呈现在LED大屏上作为展示，很少需要用户点击或鼠标交互，因此采用Ajax技术，在不更新整个页面的前提下维护数据比较合适。Ajax技术打破页面重复加载的惯例，通过异步操作获取服务器数据，同时它的代码执行和数据处理都在后端进行，能够减轻前端的负担，能够为用户创建和实现更动态、更丰富的软件界面 [ 12 ]，这正与大屏数据可视化技术的开发需要相吻合。本文设计的系统在页面加载事件中执行Link to external URL类型的Open Link动作，在该动作中可以使用Ajax来与后端进行数据获取。 图5. 页面加载事件中使用Ajax技术的流程图 如图5所示，在页面加载事件中执行Ajax代码向后端发起POST请求，使用后端返回的数据修改全局变量。同时，页面加载事件中经过三秒的等待时间后会进行自刷新，这意味着每三秒就由WEB服务器提交一次POST请求，实时修改全局变量的值。如前文所述，网页中控件显示的数据是基于全局变量的，每次执行Ajax代码先后台请求数据并更新全局变量的值后，就能使前端网页在不重新加载页面的基础上将控件上显示的数据进行修改，从而实现数据展示的实时性。 在Axure中写入的Ajax代码格式与传统前端开发方式中使用的JQuery提供的Ajax方法类似，可以指定method为POST或GET等方法，在url中指定所需要请求的后端服务器地址，使用Ajax特定的事件处理函数如success方法、error方法对执行终止时的事件方法进行设计。在Axure的事件中使用Link to external URL类型的Open Link动作需要输入的代码格式如下： 本文采用Ajax中与success方法有类似功效的done方法，当Ajax事件成功处理后执行该方法，利用Axure中提供的setGlobalVariable()方法将Ajax请求后台获得的返回数据写入全局变量。采用Ajax技术框架能够提高网页的加载速度、保证程序的简单性，同时方便用户处理HTML [ 13 ]，这在本文需要搭建的高并发前后端数据交换环境中对运行效率有很大提高。 本文设计的系统在后端开发环节采用SpringBoot框架，选取SQLServer数据库。使用上述流程生成的网页中已经通过Ajax技术实现了向后端的数据请求，且请求频率为每五秒一次。后端接收到网页客户端发起的POST请求后根据请求信息查询数据库，将查询到的数据以符合前端数据接口要求的格式存入request，由服务器转发回网页客户端。采用本文提出的大屏数据可视化方法对后端代码的逻辑要求极低，后台使用的框架技术对前端来说具有透明性，即只要后台返回的数据格式与前端所需要的严格一致即可。本文提出的改进方案保留前后端分离开发模式的优势，前后端之间只需要进行数据传输 [ 14 ]，后端开发人员不需要考虑前端页面代码组织，提高了后台开发人员工作的易操作性。 Table 1 Part of the global variable information in Axure tabl Variable Name Variable Value Meaning temperature [“26.2“， “25.7“， “25.2“， “24.7“， “26.1“， “25.5“， “28.1“， “24.9“] Real-time temperature tpPrest [“26.0“， “25.0“， “24.5“， “24.0“， “25.5“， “24.0“， “26.0“， “26.0“] temperature setpoint tpErrot [“1.0“， “2.0“， “3.0“， “4.0“， “1.0“， “2.0“， “3.0“， “2.0“] temperature error plan [“喂食 “， “消毒 “， “清扫 “， “喂食 “] job content time [“06000900“， “11001200“， “16001700“， “17301830“] working time worker [“张三“， “王五“， “李四“， “王五“] staff 表1. Axure中部分全局变量信息表 必须要注意的是，由于Axure对数组的操作存在局限性，采用下标对全局变量进行获取时必须严格控制数据格式，必须确保后端返回的数组中每个下标的字符串长度符合各个控件所需要获取的下标位置，才能保证最后大屏呈现出的数据正确。因此，文本所提出的基于Axure的大屏数据可视化方法在开发环节要求前后端所使用的数据接口严格统一。同时，考虑到后端返回的数据内容的特点，Axure中的变量值中应当添加方括号。其次，为方便后端控制数据长度，将所有的数据类型统一为字符串类型，在设计变量值时应考虑到字符串类型的数据和数值型数据在计算机中的表示格式的区别，数组中的每个变量都需要以双引号括起。以本文实现的大屏数据可视化系统为例，在Axure中所使用的全局变量中部分变量信息如表1所列。 以temperature为例，语法格式为substr(2+(current_room-1)*7，4)，其中第一个参数表示从字符串的哪个位置开始，第二个参数表示需要获取的字符串长度，可见对应控件从该变量中取值的范围依赖于下标。当下标current_room值为1时，从第2个字符开始获取，这是考虑了方括号和双引号在字符串中的影响；在temperature中每一个数组成员都有4位有效数据信息、2个双引号以及1个逗号数组分隔符，因此需要以7为倍数；有效数据长度为4，因此第二个参数大小设置为4。基于上述分析，采用本文提出的大屏数据可视化方法时，前后端应当对数据格式进行多次确认和交流。使用Axure开发前端的工作人员设计的全局变量格式时，应当考虑到后端返回的数据会是何种格式，后端也应当严格按照前端提供的数据接口实现请求响应，并且在返回数据前对每个下标的数据长度进行校验，才能防止网页中出现数据错位的问题。