尊龙凯时：基于SVG的实时监控流程图实现技术

发布时间：2025-04-22 14:30:23 发布人：小编浏览量：

　　监控流程图实现技术一直是工业企业界和生产过程控制、企业级远程实时监控系统解决方案提供商们共同关注的问题，高效易用的实时监控流程图实现技术是当今企业信息化、可视化趋势下的一项重要关键技术。本文通过对实时监控系统中流程图应用的需求进行分析，根据流程图图元及其属性分类，将SVG技术用于实时信息系统的实时监控流程图的实现。

　　生产控制及管理系统中的实时监控流程图主要用于将生产线上的数据以一种动态图形方式在客户端显示。因此，客户端软件需要不仅实现复杂生产工艺流程的图形化直观表现，而且根据实时数据变化，能够在流程图画面中动态反映测点所对应的物理量的变化，同时实时监控流程图要求软件具备可灵活配置、可根据用户需求自定义的特点。对流程图的设计、配置过程，ZLKS.COM称为“流程图组态”，组态功能同样为实时信息系统客户端必不可少的一个部分。

　　传统的实时监控流程图实现技术通常采用将流程图图元集中存储于数据库，或者将结构化的图形文件存储于客户端计算机，然后借助于实时通信技术，在监控系统客户端软件上实现动态图元的实时刷新显示等技术方案，但这类方案的应用大多局限于CS结构的实时监控应用；基于BS结构的生产控制与远程监控系统中流程图具有易于维护、方便与其它应用集成等优点，随着Internet的普及应用、矢量图形技术的发展，基于BS结构的实时监控流程图越来越受到人们的关注。

　　矢量图形技术将图形分解为图元对象，结构化表示与存储图元，具有存储数据量小、传输高效、方便伸缩变换等特点。目前较为成熟运用的矢量图形格式有Flash、CAD、SVG等，其中SVG格式实现技术由于其标准开放性、交互性和动态图形表现能力等特点，越来越受到重视。

　　SVG是由W3C组织开发的一种基于XML的开放标准的文本式矢量图形描述语言。这种语言通过文本来描述图形，是一种文本格式描述的矢量图形。通过嵌入浏览器的SVG Viewer插件，浏览器解析SVG文件并显示其表示的图形图像。

　　SVG被广泛运用于Web图形表示、绘制等领域，将SVG应用于企业业务应用系统、实时监控流程图实现的关键技术、系统结构的研究见于相关文献报道。但SVG具体应用于实施监控流程图时，如何具体应用SVG的矢量图元实现可组态的监控流程图，尚无专门的研究与应用，这正是本文所探讨的问题。

　　运用SVG实现实时监控流程图，需要对实时监控流程图进行分析。以煤化工行业某黑水闪蒸系统实时监控流程图为例，如图1所示。

　　从图1可知，监控流程图中的图形复杂多变，但是我们还是可以根据图形特点的不同将图形划分为静态图形和动态图形。

　　静态图形指的是在监控流程图工作流程中，不需要进行更改的图形，通常用于反映生产线上设备架构、仪器设置等。如图1中的组成部分之一为常见于化工企业生产过程的各种反应釜，如图2所示。

　　动态图形是指图形要随着实时数据库中实时数据变化而变化的图形，通常用于反映生产线上即时变化的数值。如图3表示液面高度。

　　如上所述，将组成实时监控流程图的图形元素划分为静态图形和动态图形两个大类。静态图形与动态图形均通过SVG图元及图元的组合实现。

　　SVG标准提供了圆、椭圆、矩形、线、折线、多边形六种基本图元，实时监控流程图中所有复杂的图形均可通过这六种基本图元组合实现。基本图元通过一组属性来描述。给定某种基本图元的属性组一组确定的取值，即得到该种基本图元的一个实例。基本图元的组合构成复合图元。复合图元是监控流程图绘制过程中可重用的基本单元，也称“元件”；流程图组态软件中预先定义或者随着使用过程不断积累的复合图元，通常建库保存，称为“元件库”。元件库的建立将提高图元的复用性，从而极大提高流程图组态的效率。

　　布局属性和形状属性在SVG里都有相应的属性与其对应，如圆的布局属性里，位置信息可以通过cx和cy分别表示横坐标和纵坐标，大小信息可以通过r来设置；形状属性里，通过标签对／c．rcle可以表示圆型，填充颜色可以通过fill属性来设置，因此，通常可以把布局属性、形状属性存储在SVG文件中。但是实时属性涉及到和实时数据的对应关系、刷新频率等，这些并不属于SVG的规范，SVG里没有相应的属性和实时属性对应，因此实时属性的存储就需要借助于SVG文件之外的辅助存储工具，如SQL Sewer。

　　监控流程图中的图形可以通过图元来实现，图3所示某液体容器液面高度可以分解为两个图元，如图5所示。

　　其中图元1是一个灰色的矩形，图形保持不变，图元2则是一个蓝色的矩形，高度将随着实时数据变化而变化。于是得到组成该动态图形的图元的布局属性、形状属性及实时属性如下：

　　可以看到，在监控流程图中，只有动态图元含有实时属性，不能存储在SVG文件中，该类属性的取值在实时监控系统中表现为测点及其取值，通常用三元组测点id，时刻，取值表示，存放于通用数据库或者内存中的实时数据库中。通用数据库或实时数据库中数据通过Web服务器(如IIS)和Ajax引擎，向客户端推送，客户端依据所获得的数据刷新相应的图元，如图6所示。

　　其他图形则只含有布局属性和形状属性，均可在SVG文件中存储。至此我们对监控流程图实体属性分为三类，如图7所示。

　　在上述流程图实体属性分类基础上，为有效管理系统中所有流程图，将流程图、图元、属性等信息纳入数据库进行管理。数据库中相应主要表及表中主要字段如下：

　　Graphs表。主键GraphID，用来存储流程图的ID号，用户可以通过此字段来选择流程图；SVGhref，用来标识SVG的链接，通过选择的GraphID确定载入的SVG。

　　Shapes表。一个字段，即ShapeID，用来存储流程图上需要动态更新的图元和文本区ID号。

　　Attributes表。用来存储动态图元的属性，属性分为实时属性和静态属性，实时属性需要和实时数据关联，静态属性则是固定值。

　　ShapeID是图元或文本区ID号；AttributesName字段存储对应于ShapeID的那个图形的某个属性，并与ShapeID字段组成联合主键；IsDyanmic字段确定该属性是实时属性还是静态属性AttributesValue则属性的属性值，若该属性是静态属性，则此字段存储的是固定值，若实时属性，则此字段存储的是实时数据库中某实时数据的ID号。