CN113051021A - 一种监控组态中的图形链接配置方法以及存储介质 - Google Patents

Abstract

本发明涉及监控技术领域，具体涉及一种监控组态中的图形链接配置方法以及存储介质，其包括：在编辑态下给组态页面配置背景图片；添加图形链接控件，并给该图形链接控件绑定监控对象的轮廓数据。本申请中采用轮廓数据代替原来与监控对象绑定的图片，当需要加载图片时，只需要加载该轮廓数据，提高了加载速度。另外，由于该图形链接控件不需要配置图片，因此配置图形链接控件不需要美工人员切图，节省了人力。同时，由于该图形链接控件不需要配置图片，因此配置人员不需要在一堆图中寻找需要的那张图片，并配置到控件里，节省了人力。

Description

一种监控组态中的图形链接配置方法以及存储介质

技术领域

本发明涉及监控技术领域，具体涉及一种监控组态中的图形链接配置方法以及存储介质。

背景技术

监控领域的组态中，组态页面往往有一张背景图，展示一个园区，一栋机楼，一个楼层或一个机房等，上面有一些监控实体的图形链接，鼠标放在上面，会有浮动提示，且监控实体能够变色显示，点击一个链接，会跳转到监控实体的组态页面，比如在楼层的组态页面中，有一些机房的图形链接，鼠标放在机房上，机房会变黄，且浮动提示机房信息，点击机房，会跳转到机房的组态页面。配置这样的链接，往往是先配置一个链接控件，给该控件配置一张图片，再绑定一个监控实体自动生成链接地址。有时需要配置大量的图形链接，比如一个机房的组态页面会有很多设备，需要配置很多设备的图形链接，这种配置方法很繁琐：首先需要美工人员切图，为每个图形链接切出一张图片，然后配置人员再给每个图形链接配置上图片，如果切出的图片很多，还要花时间找出正在配置的那个图片。配置完成后，打开这个组态页面需要加载每个图片，加载也比较慢。

发明内容

本发明主要解决的技术问题是现有的组态页面需要加载图片导致加载速度慢。

一种监控组态中的图形链接配置方法,其包括：

在编辑态下给组态页面配置背景图片；

添加图形链接控件，并给所述图形链接控件绑定监控对象的轮廓数据。

在一种实施例中，所述给所述图形链接控件绑定监控对象的轮廓数据包括：通过编辑给图形链接控件绑定监控对象的轮廓数据，该轮廓数据至少包括两组以上的坐标值。

在一种实施例中，所述图形链接控件至少包括：图形链接控件的位置信息、图形链接控件绑定的监控对象的链接信息以及监控对象的轮廓数据。

在一种实施例中，还包括：在运行态中，加载组态页面中的背景图片和图形链接控件的数据，以显示背景图片和图形链接控件。

在一种实施例中，所述加载组态页面中的背景图片和图形链接控件的数据，以显示背景图片和图形链接控件包括：

根据所述图形链接控件的位置信息确定图形链接控件在组态页面中显示的位置；根据图形链接控件绑定的监控对象的链接信息生成链接地址和浮动提示内容；根据所述监控对象的轮廓数据生成鼠标响应区域。

在一种实施例中，所述浮动提示内容至少包括图形链接控件的名称、监控对象的名称、监控对象的告警信息。

一种计算机可读存储介质，其包括程序，所述程序能够被处理器执行以实现如上所述的方法。

依据上述实施例的监控组态中的图形链接配置方法，其包括：在编辑态下给组态页面配置背景图片；添加图形链接控件，并给该图形链接控件绑定监控对象的轮廓数据。本申请中采用轮廓数据代替原来与监控对象绑定的图片，当需要加载图片时，只需要加载该轮廓数据，提高了加载速度。

附图说明

图1为本申请的监控组态中的图形链接配置方法流程图；

图2为本申请的监控组态中的图形链接配置方法操作流程图；

图3为本申请的组态页面运行态下的显示过程流程图。

具体实施方式

下面通过具体实施方式结合附图对本发明作进一步详细说明。其中不同实施方式中类似元件采用了相关联的类似的元件标号。在以下的实施方式中，很多细节描述是为了使得本申请能被更好的理解。然而，本领域技术人员可以毫不费力的认识到，其中部分特征在不同情况下是可以省略的，或者可以由其他元件、材料、方法所替代。在某些情况下，本申请相关的一些操作并没有在说明书中显示或者描述，这是为了避免本申请的核心部分被过多的描述所淹没，而对于本领域技术人员而言，详细描述这些相关操作并不是必要的，他们根据说明书中的描述以及本领域的一般技术知识即可完整了解相关操作。

另外，说明书中所描述的特点、操作或者特征可以以任意适当的方式结合形成各种实施方式。同时，方法描述中的各步骤或者动作也可以按照本领域技术人员所能显而易见的方式进行顺序调换或调整。因此，说明书和附图中的各种顺序只是为了清楚描述某一个实施例，并不意味着是必须的顺序，除非另有说明其中某个顺序是必须遵循的。

在本发明实施例中，通过编辑图形轮廓来代替现有的配置的图片，将轮廓数据与图形链接控件绑定，用有鼠标响应的图形与背景图片结合实现图片链接的效果。由于该图形链接控件不需要配置图片，因此配置图形链接控件不需要美工人员切图，节省了人力。由于该图形链接控件不需要配置图片，因此配置人员不需要在一堆图中寻找需要的那张图片，并配置到控件里，节省了人力。当加载组态页面时，用加载轮廓数据代替加载图片，使加载速度变快。

实施例一

首先对本实施例的图形链接控件进行介绍，本实施例在组态中实现了一种图形链接控件，控件有2种状态，一种是运行态，一种是编辑态。运行态用于在运行时鼠标放在上面可以变色显示，有浮动提示，鼠标点击时，可以跳转到链接的组态页面。编辑态用于在编辑时可以编辑控件的鼠标响应区域。

该控件包含一个图形，图形即为鼠标响应区域。在编辑态中，图形是半透明的，有颜色的，显示轮廓的，可以看到控件图层下面的背景图片，可以根据背景图片编辑图形的轮廓。编辑后绑定一个监控对象生成链接地址。

在运行态中，鼠标不在控件的图形上时，图形是透明的，不显示轮廓的，可以看到控件图层下面的背景图片，当鼠标放在控件的图形上时，图形仍不显示轮廓，但会有浮动提示，且图形变成半透明，图形变色，和背景图片配合在一起看起来是一个图片链接，点击图形，能够跳转到链接的组态页面。以下对本申请的监控组态中的图形链接配置方法进行进一步的说明。

请参考图1和图2，本实施例提供一种监控组态中的图形链接配置方法,该方法包括：

步骤101：在编辑态下给组态页面配置背景图片。

步骤102：添加图形链接控件，并给该图形链接控件绑定监控对象的轮廓数据。

其中，过编辑给图形链接控件绑定监控对象的轮廓数据，该轮廓数据至少包括两组以上的坐标值。轮廓数据是一个数组，数组包含了3个以上点位，每个点位包含了x，y值，是轮廓上的点相对于控件的位置。如果轮廓上的一条边是直线，则不需要直线上的每个像素点都在数组里，只需要直线的两个端点在数组里即可。编辑完成后，保存组态页面数据。

其中，图形链接控件至少包括：图形链接控件的位置信息、图形链接控件绑定的监控对象的链接信息以及监控对象的轮廓数据。

在运行态中，加载组态页面中的背景图片和图形链接控件的数据，以显示背景图片和图形链接控件。加载组态页面中的背景图片和图形链接控件的数据，以显示背景图片和图形链接控件包括：根据图形链接控件的位置信息确定图形链接控件在组态页面中显示的位置；根据图形链接控件绑定的监控对象的链接信息生成链接地址和浮动提示内容；根据监控对象的轮廓数据生成鼠标响应区域。

其中，提示内容至少包括图形链接控件的名称、监控对象的名称、监控对象的告警信息。

其中，如图3，加载组态页面的背景图片和控件数据，会显示背景图片和控件。显示图形链接控件时，会根据控件的位置属性确定控件在页面中显示的位置，根据控件的绑定属性(即控件绑定的监控实体对象的ID)生成链接地址和浮动提示内容，链接地址位组态的url(即链接地址)+监控对象ID(即位置信息)，浮动提示内容一般包括控件的名称(即图形链接控件)，监控实体对象名称(根据ID向后台获取)，监控实体对象的告警信息(根据ID向后台获取)，根据控件的轮廓属性中的轮廓数据，生成一系列点，并用直线依次连接，形成一个多边形的图形，该图形即图形链接控件的鼠标响应区域。默认情况下，该图形是无色透明的，不显示轮廓的，可以看到控件图层下面的背景图片，当鼠标放在控件的图形上时，图形仍不显示轮廓，但会有浮动提示，且图形变成半透明，图形变色，和背景图片配合在一起看起来是一个图片链接，鼠标在图形上点击时，控件产生跳转事件，跳转到根据控件的绑定属性生成的链接地址的页面。

其中，在通过轮廓上的各个坐标点来绘制轮廓的时候，除了通过直线连接两个坐标点外，还可以通过其他类型的线(例如弧线)来连接两个轮廓上的坐标点。

实施例二：

本实施例中以配置一个机房的组态页面为例对本申请的方法进行说明，该组态页面有个背景图片，是整个机房的图片，这个图片通常是客户提供的机房的设计图或者效果图，机房里有很多设备，比如机柜，空调等，在编辑页面中为每个设备会配置一个图形链接控件，在运行页面中，鼠标移到一个设备上，该设备会变黄，并浮动提示设备名称，设备类型，设备告警信息等，点击该设备，会跳转到该设备的组态页面。

传统的配置方法是：配置人员为组态页面配置背景图片，同时把背景图发给美工，美工从背景图中切出每个设备的图片，把这些切好的图片发给配置人员。配置人员为每个设备配置一个图形链接控件，绑定设备，并找到对应的切好的设备图片，把图片配置到控件中，并移动控件使控件的设备图片与背景图片中的设备对齐。控件保存的内容是控件的位置数据，控件的绑定数据和控件的图片数据。

本实施例的配置方法是：配置人员为组态页面配置背景图片，并为每个设备配置一个图形链接控件，绑定设备，编辑控件的轮廓，使轮廓与背景图中的设备轮廓基本一致。控件保存的内容是控件的位置数据，控件的绑定数据和控件的轮廓数据。

传统的运行态中的显示方法是：加载组态页面的背景图片和控件数据，显示背景图片和控件。显示图形链接控件时，根据控件的位置数据确定控件的位置，根据控件的绑定数据，生成控件的链接地址和浮动提示内容，根据控件的图片数据显示控件的图片，并将图片作为鼠标响应区域。

本实施例的运行态中的显示方法是：加载组态页面的背景图片和控件数据，显示背景图片和控件。显示图形链接控件时，根据控件的位置数据确定控件的位置，根据控件的绑定数据，生成控件的链接地址和浮动提示内容，根据控件的轮廓数据生成一个多边形的图形，并将图形作为鼠标响应区域。

传统配置的图形链接控件和本实施例的配置图形链接控件在运行页面中显示效果相同，都是鼠标移到设备上时，设备会变黄，并浮动提示设备名称，设备类型，设备告警信息等。点击设备，会跳转到该设备的组态页面。但是本实施例当加载组态页面时，用加载轮廓数据代替加载图片，使加载速度变快。

实施例三：

本实施例提供一种计算机可读存储介质，其包括程序，所述程序能够被处理器执行以实现如上实施例一提供的监控组态中的图形链接配置方法。

本领域技术人员可以理解，上述实施方式中各种方法的全部或部分功能可以通过硬件的方式实现，也可以通过计算机程序的方式实现。当上述实施方式中全部或部分功能通过计算机程序的方式实现时，该程序可以存储于一计算机可读存储介质中，存储介质可以包括：只读存储器、随机存储器、磁盘、光盘、硬盘等，通过计算机执行该程序以实现上述功能。例如，将程序存储在设备的存储器中，当通过处理器执行存储器中程序，即可实现上述全部或部分功能。另外，当上述实施方式中全部或部分功能通过计算机程序的方式实现时，该程序也可以存储在服务器、另一计算机、磁盘、光盘、闪存盘或移动硬盘等存储介质中，通过下载或复制保存到本地设备的存储器中，或对本地设备的系统进行版本更新，当通过处理器执行存储器中的程序时，即可实现上述实施方式中全部或部分功能。

以上应用了具体个例对本发明进行阐述，只是用于帮助理解本发明，并不用以限制本发明。对于本发明所属技术领域的技术人员，依据本发明的思想，还可以做出若干简单推演、变形或替换。

Claims (7)

1.一种监控组态中的图形链接配置方法,其特征在于，包括：

在编辑态下给组态页面配置背景图片；

添加图形链接控件，并给所述图形链接控件绑定监控对象的轮廓数据。

2.如权利要求1所述的监控组态中的图形链接配置方法,其特征在于，所述给所述图形链接控件绑定监控对象的轮廓数据包括：通过编辑给图形链接控件绑定监控对象的轮廓数据，该轮廓数据至少包括两组以上的坐标值。

3.如权利要求2所述的监控组态中的图形链接配置方法,其特征在于，所述图形链接控件至少包括：图形链接控件的位置信息、图形链接控件绑定的监控对象的链接信息以及监控对象的轮廓数据。

4.如权利要求3所述的监控组态中的图形链接配置方法,其特征在于，还包括：在运行态中，加载组态页面中的背景图片和图形链接控件的数据，以显示背景图片和图形链接控件。

5.如权利要求4所述的监控组态中的图形链接配置方法,其特征在于，所述加载组态页面中的背景图片和图形链接控件的数据，以显示背景图片和图形链接控件包括：

根据所述图形链接控件的位置信息确定图形链接控件在组态页面中显示的位置；根据图形链接控件绑定的监控对象的链接信息生成链接地址和浮动提示内容；根据所述监控对象的轮廓数据生成鼠标响应区域。

6.如权利要求5所述的监控组态中的图形链接配置方法,其特征在于，所述浮动提示内容至少包括图形链接控件的名称、监控对象的名称、监控对象的告警信息。

7.一种计算机可读存储介质，其特征在于，包括程序，所述程序能够被处理器执行以实现如权利要求1-6中任一项所述的方法。

Images