CN110413161A - 组件配置方法、装置以及电子设备 - Google Patents

组件配置方法、装置以及电子设备 Download PDF

Info

Publication number
CN110413161A
CN110413161A CN201910517523.6A CN201910517523A CN110413161A CN 110413161 A CN110413161 A CN 110413161A CN 201910517523 A CN201910517523 A CN 201910517523A CN 110413161 A CN110413161 A CN 110413161A
Authority
CN
China
Prior art keywords
data
component
interface
type
show styles
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN201910517523.6A
Other languages
English (en)
Other versions
CN110413161B (zh
Inventor
郑楚国
余刚
李越
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shenzhen Aitken Stone Technology Co Ltd
Original Assignee
Shenzhen Aitken Stone Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shenzhen Aitken Stone Technology Co Ltd filed Critical Shenzhen Aitken Stone Technology Co Ltd
Priority to CN201910517523.6A priority Critical patent/CN110413161B/zh
Publication of CN110413161A publication Critical patent/CN110413161A/zh
Application granted granted Critical
Publication of CN110413161B publication Critical patent/CN110413161B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请实施例公开了一种组件配置方法、装置以及电子设备。所述方法包括:从多个待选的组件类型中获取确定的组件类型;基于预先配置的所述组件类型对应的显示样式数据,在指定的工作区域生成与所述组件类型对应的组件;从多个待选的数据接口中获取确定的数据接口,将所述数据接口配置给所述组件,以便根据通过所述数据接口所获取的数据对所述组件的显示样式进行改变。本方法因为该多个待选的组件类型的组件均支持该多个待选的数据接口,那么在涉及到改变某个数据接口的展示形式改变时,只需要将该需要该改变展示形式的数据接口配置给另一种组件即可实现,进而通过接口配置的改变就可以实现展现形式的改变,而不用再重新进行展示程序的开发。

Description

组件配置方法、装置以及电子设备
技术领域
本申请涉及计算机技术领域,更具体地,涉及一种组件配置方法、装置以及电子设备。
背景技术
通常在各个行业都会有数据展示的需求,而为了便于直观的展示一些数据,通常是可以通过利用一些数据展示组件来进行数据的展示。而随着数据的多样化,并且不同的数据的展示需求会有所差别,那么为了可以展示多样化的数据,需要单独根据一些数据的需求再重新进行展示程序的开发,这样不仅浪费了大量的时间,也浪费了大量的资源去做重复的工作。
发明内容
鉴于上述问题,本申请提出了一种组件配置方法、装置以及电子设备,以改善上述问题。
第一方面,本申请提供了一种组件配置方法,所述方法包括:从多个待选的组件类型中获取确定的组件类型;基于预先配置的所述组件类型对应的显示样式数据,在指定的工作区域生成与所述组件类型对应的组件;从多个待选的数据接口中获取确定的数据接口,将所述数据接口配置给所述组件,以便根据通过所述数据接口所获取的数据对所述组件的显示样式进行改变,其中,所述多个待选的数据接口的类型为所述多个待选的组件类型的组件均支持的类型。
第二方面,本申请提供了一种组件配置装置,所述装置包括:组件类型确定单元,用于从多个待选的组件类型中获取确定的组件类型;组件生成单元,用于基于预先配置的所述组件类型对应的显示样式数据,在指定的工作区域生成与所述组件类型对应的组件;组件配置单元,用于从多个待选的数据接口中获取确定的数据接口,将所述数据接口配置给所述组件,以便根据通过所述数据接口所获取的数据对所述组件的显示样式进行改变,其中,所述多个待选的数据接口的类型为所述多个待选的组件类型的组件均支持的类型。
第三方面,本申请提供了一种服务器,其特征在于,包括一个或多个处理器以及存储器;一个或多个程序,其中所述一个或多个程序被存储在所述存储器中并被配置为由所述一个或多个处理器执行,所述一个或多个程序配置用于执行上述的方法。
第四方面,本申请提供了一种计算机可读存储介质,所述计算机可读存储介质中存储有程序代码,其中,在所述程序代码运行时执行上述的方法。
本申请实施例中,通过先从多个待选的组件类型中获取确定的组件类型,然后基于预先配置的所述组件类型对应的显示样式数据,在指定的工作区域生成与所述组件类型对应的组件,再从多个待选的数据接口中获取确定的数据接口,将所述数据接口配置给所述组件,从而使得在通过配置给组件的数据接口获取到数据后,可以基于所获取的数据对组件的显示样式进行改变,进而实现通过组件的显示样式的变化来体现数据的变化,并且,因为该多个待选的组件类型的组件均支持该多个待选的数据接口,那么在涉及到改变某个数据接口的展示形式改变时,只需要将该需要该改变展示形式的数据接口配置给另一种组件即可实现,进而通过接口配置的改变就可以实现展现形式的改变,而不用再重新进行展示程序的开发。
附图说明
为了更清楚地说明本申请实施例中的技术方案,下面将对实施例描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本申请的一些实施例,对于本领域技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1示出了本申请实施例提供的一种物联网系统的结构示意图;
图2示出了本申请一实施例提出的一种组件配置方法的流程图;
图3示出了本申请一实施例提出的一种组件配置方法中配置界面的示意图;
图4示出了本申请一实施例提出的一种组件配置方法中配置界面中控件移动的示意图;
图5示出了本申请一实施例提出的一种组件配置方法中配置界面中一种确定组件类型的示意图;
图6示出了本申请一实施例提出的一种组件配置方法中配置界面中一种缩放组件尺寸的示意图;
图7示出了本申请另一实施例提出的一种组件配置方法的流程图;
图8示出了本申请再一实施例提出的一种组件配置方法的流程图;
图9示出了本申请一实施例提出的一种组件配置装置的结构框图;
图10示出了本申请另一实施例提出的一种组件配置装置的结构框图;、
图11示出了本申请再一实施例提出的一种组件配置装置的结构框图;
图12示出了本申请实施例提出的一种电子设备的结构框图。
具体实施方式
下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本申请一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本申请保护的范围。
随着互联网技术的逐步发展,以往较为落后互联网的技术被逐步的取代了,另一方面,随着企业的高速发展,不同的管理监控平台大量涌出,为了利用先进的互联网技术解决各种行业的定制化需求,于是乎SaaS平台出现了,以致力于解决各行各业对管理监控平台的不同需求。
对于在模块化的数据展示方面,一种需求是通过程序代码开发的模块对实时数据或者静态文本数据进行可视化的展示。例如,在一种相关的方式中,在物联网系统中,会有各种各样的物联网设备将采集的数据或者基于采集的数据进行计算以后的计算数据上传给电子设备,然后电子设备可以将接收到的采集数据或者计算数据传输给指定的电子设备,然后该电子设备就可以将接收到的采集数据或者计算数据进行可视化展示。
例如,在如图1所示的系统200中,包括有电子设备210、用户终端220、路由器230、网关240以及物联网设备250。物联网设备250可以将采集的数据或者计算的数据依次经过网关240、路由器230以及网络260传输到电子设备210进行存储,那么用户终端220就可以按照设定的频率从电子设备210中读取采集的数据或者计算的数据,以可视化的方式对数据进行展示。
而发明人在研究中发现,不同的物理网设备所采集的数据或者所计算的数据的展示需求可能有所区别,而即使是对于同一种物联网设备,不同的用户也会有各自不同的展示需求。而在相关的方式中,通常都是针对新的物联网设备或者新的需求重新单独开发展示程序进行数据可视化的展示。这样不仅浪费了大量的时间,也浪费了大量的资源去做重复的工作。
因此,发明人提出了本申请实施例提供的一种组件配置方法、装置以及电子设备,本申请实施例实现通过组件的显示样式的变化来体现数据的变化,并且,因为该多个待选的组件类型的组件均支持该多个待选的数据接口,那么在涉及到改变某个数据接口的展示形式改变时,只需要将该需要该改变展示形式的数据接口配置给另一种组件即可实现,进而通过接口配置的改变就可以实现展现形式的改变,而不用再重新进行展示程序的开发,降低了开发成本。
下面基于上述介绍的内容,再结合附图具体描述本申请的各实施例。
请参阅图2,本申请实施例提供的一种组件配置方法,所述方法包括:
步骤S110:从多个待选的组件类型中获取确定的组件类型。
其中,可以预先配置多种的组件类型以供用户进行选择。当检测到用户从中选择了一种组件后将用户选择的组件类型作为确定的组件类型。
需要说明的是,本申请实施例提供的组件配置方法可以运行于专门用于组件配置的应用程序中,也可以运行于浏览器客户端中。而不论是通过专门用于组件配置的应用程序还是通过浏览器客户端来进行组件配置,都可以提供一个配置界面供用户进行可视化的组件配置。
例如,如图3所示的配置界面99,在该配置界面99中包括有组件待选区域98以及编辑区域97。在组件待选区域中98中有多个待选控件(图中仅示出3个),每个待选控件中的每一个控件对应一种组件类型。那么在这种方式下,若检测到所述被选中的控件被移动到所述指定位置,将所述被选中的控件对应的组件类型作为确定的组件类型。
而其中的指定位置可以有多种方式。作为一种方式,当检测到被选中的控件被移动到编辑区域97后,就确定所述被选中的控件被移动到所述指定位置。例如,如图4所示,其中的一个待选控件96被从组件待选区域98中的原位移动到编辑区域97中的位置后,将所述被选中的控件96对应的组件类型作为确定的组件类型。作为另外一种方式,如图5所示,当被选中的控件96移动到组件待选区域98中中的组件添加位置95处,就确定所述被选中的控件被移动到所述指定位置,进而将所述被选中的控件对应的组件类型作为确定的组件类型。当然,除了上述通过检测被选择的待选控件的移动位置来获取确定的组件类型外,还可以直接将被触控的待选控件直接作为确定的组件类型。
其中,可以通过坐标检测的方式来实现检测被选择控件的移动位置。具体的,作为一种方式,当本实施例中是在通过鼠标控制计算机设备中运行时,待选控件可以通过鼠标进行拖拽移动,其中拖拽动作中涉及的事件有:鼠标按下onmousedown、鼠标移动onmousemove、鼠标松开onmouseup。进而拖拽是通过获取鼠标移动的距离来实现的,即计算移动前的位置的坐标(x,y)与移动中的位置的坐标(x,y)差值。当鼠标按下或鼠标移动时,都可以获取到当前鼠标的位置,即移动前的位置与移动中的位置。那么鼠标移动后的x坐标=鼠标移动后的x坐标-鼠标按下的x坐标+被选择控件的初始x坐标;鼠标移动后的y坐标-鼠标按下的y坐标+被选择初始y坐标,当鼠标松开后,即可以计算出最后拖拽对象的位置坐标。
需要说明的是,本申请实施例除了可以通过鼠标控制的计算机设备外,还可以在智能手机、平板电脑等设备上运行,那么在控件的移动过程中,待选控件可以通过用户手指或者其它可以触控显示屏的设备触控拖拽移动的,而对于被选择的控件的移动位置计算与前述的鼠标控制是类似的,此处不再赘述。
步骤S120:基于预先配置的所述组件类型对应的显示样式数据,在指定的工作区域生成与所述组件类型对应的组件。
可以理解的是,对于每一个组件都有各自的样式特点。例如,饼状图可以体现多个数据的占比,而折线图可以很直接的体现数据的变化趋势。那么,对于每一种组件都可以预先配置好显示样式数据,然后将显示样式数据与对应的组件类型进行对应的存储。进而在获取确定的组件类型后,就可以获取到与组件类型对应的显示样式数据,然后在指定的工作区域生成与所述组件类型对应的组件。其中,若本申请实施例中运行于浏览器客户端,那么当获取到所述组件类型对应的显示样式数据后,可以基于浏览器的图像渲染方式,渲染得到用户可视的组件。
其中,作为一种方式,当在组件生成后,用户还可以继续对生成的组件的显示样式进行编辑。例如,如图6所示,若确定的组件类型为折线图类型,而初始生成的显示尺寸为图中虚线所示的样式,那么通过用户的拖拽可以将生成的折线图类型的组件的尺寸拖拽到实线所示的尺寸。
需要说明的是,再通过前述鼠标控制的示例对组件的显示样式编辑进行说明书。其中,通过鼠标对组件实现的编辑包括尺寸大小改变以及显示位置的改版,其中缩放动作中涉及的事件有:鼠标按下onmousedown、鼠标移动onmousemove、鼠标松开onmouseup。缩放是通过鼠标移动松开后距离的大小,并根据鼠标位于图形的方位,一共八个方位,实现不同的算法,从而重置图形的坐标值和宽高。此外,除了可以移动组件的位置外,还可以对组件进行旋转。
其中旋转动作中涉及的事件有:鼠标按下onmousedown、鼠标移动onmousemove、鼠标松开onmouseup。旋转是通过先计算出生成的组件的中心点center(x,y),并记下鼠标按下(x0,y0)到鼠标松开(x2,y2)之后与中心点形成的夹角,利用transform中的rotate设置角度,并将角度限制在360°内。
步骤S130:从多个待选的数据接口中获取确定的数据接口,将所述数据接口配置给所述组件,以便根据通过所述数据接口所获取的数据对所述组件的显示样式进行改变,其中,所述多个待选的数据接口的类型为所述多个待选的组件类型的组件均支持的类型。
可以理解的是,本申请中生成的组件是用于进行可视化的数据展示。那么在组件生成后,可以进一步的对组件的数据接口进行配置。下面先对本申请实施例所涉及的数据接口的类型进行介绍。在本申请实施例中,数据接口包括数据监控项对应的数据接口、API接口类型、静态数据类型的数据接口。在配置数据接口的类型过程中,用户可以从上述的数据接口类型中选择一种配置给已经生成的组件。
本申请实施例中提供的一种组件配置方法,通过先从多个待选的组件类型中获取确定的组件类型,然后基于预先配置的所述组件类型对应的显示样式数据,在指定的工作区域生成与所述组件类型对应的组件,再从多个待选的数据接口中获取确定的数据接口,将所述数据接口配置给所述组件,从而使得在通过配置给组件的数据接口获取到数据后,可以基于所获取的数据对组件的显示样式进行改变,进而实现通过组件的显示样式的变化来体现数据的变化,并且,因为该多个待选的组件类型的组件均支持该多个待选的数据接口,那么在涉及到改变某个数据接口的展示形式改变时,只需要将该需要该改变展示形式的数据接口配置给另一种组件即可实现,进而通过接口配置的改变就可以实现展现形式的改变,而不用再重新进行展示程序的开发。
请参阅图7,本申请另一实施例提供的一种组件配置方法,所述方法包括:
步骤S210:从多个待选的组件类型中获取确定的组件类型。
步骤S220:获取与所述组件类型对应的图形适配器。
其中,图形适配器可以理解为一个软件程序单元,该软件程序单元具备根据确定的组件类型生成后续用户可视组件的功能。
步骤S230:基于所述图形适配器生成与所述组件类型对应的第一元素实例,所述第一元素实例配置有表征所述组件的显示样式的显示样式数据。
如前述的内容,对于每一种组件类型都对应存储有预先设置好的显示样式数据。那么在基于所述图形适配器生成与所述组件类型对应的第一元素实例的过程中,可以理解为获取预先存储的与确定的组件类型对应的显示样式数据。
需要说明的是,对于生成与所述组件类型对应的第一元素实例还可以已经对应配置有对应的ID用于唯一标最终生成的组件,并还可以同时在生成第一元素实例时配置最终显示的组件具有可编辑的功能。其中,可编辑的功能包括可以摆拖拽移动位置以及改变形状的尺寸。而对于第一元素实例所对应的显示样式的显示样式数据可以直接从本地预先建立的库中读取,也可以通过API接口从网络中读取,例如,可以通过API接口读取百度的echarts开源图表库,从而获取到与所述组件类型对应的第一元素实例对应的示样式数据。
步骤S240:基于所述图形适配器以及所述第一元素实例生成第二元素实例,所述第二元素实例对应有基于所述显示样式数据转换得到的指定的工作区域可识别格式的数据。
可以理解的是,在生成每种组件类型对应的显示样式数据后,为了便于存储,可以对显示样式数据进行格式的转换。而如果直接给予进行存储时所配置的格式的数据生成组件,那么就可能会造成数据错误。例如,以在浏览器客户端中运行为例,可以理解的是,浏览器客户端通常是及与HTML语言进行的渲染。而在组件配置的过程中,HTML语言代码是不利于存储的,那么作为一种方式,可以将HTML语言转换为其他格式的数据,例如,json格式的数据。那么当获取到json格式的显示样式数据后,需要先转换为原本的浏览器客户端可以识别的格式,以便进行渲染。
步骤S250:基于所述可识别格式的数据将所述第二元素实例渲染为与所述组件类型对应的组件。
步骤S260:从多个待选的数据接口中获取确定的数据接口,将所述数据接口配置给所述组件,以便根据通过所述数据接口所获取的数据对所述组件的显示样式进行改变,其中,所述多个待选的数据接口的类型为所述多个待选的组件类型的组件均支持的类型。
需要说明的是,每一种组件在进行数据展示的时候,都是对应有对应的数据维度的。例如,对于饼状图,饼状图通常用于展示多个数据占总数据的占比。那么当确定的组件的类型为饼状图后,对于需要展示的多个数据,可以需要获取多个数据各自的标识信息字段以及数据字段即可,其中标识信息字段用于唯一标识数据的所属,而数据字段用于标识数据的具体值。例如,当通过饼状图来展示每个省的物联网设备的接入时间占比时,需要获取每个省的物联网设备的接入时间以及每个省的名称标识即可通过饼状图进行后续的时间占比的展示。再例如,对于图标类型的组件,可能包括有三个维度的参数,例如{x,y,z}这三个参数维度,其中,x表示x点的坐标值,y表示y点的坐标值,s表示系列值。
那么对于组件的每个参数维度,都会对应配置有字段名称,进而通过从数据接口获取的数据时,可以通过读取对应字段的值来获取需要展示的数据。例如,对于前述的饼状图对应的数据字段为data以及标识信息字段为ID,那么在通过配置的数据接口读取数据后,就可以直接从通过数据接口获取的数据中读取字段data以及字段ID对应的值,再通过饼状图进行展示。那么可以理解的是,若需要后面组件能够正常的进行数据展示,对于所生成的组件对应的字段以及后续通过数据接口所获取的数据中的字段名称需要匹配。
例如,以饼状图为例,对应配置有字段data以及字段ID,那么可以确定的是,生成的饼状图类型的组件对应的字段名称为data以及id。那么若通过配置的数据接口获取的数据中,存在有字段名称为data以及id的数据,那么就识别所生成的组件对应的字段以及后续通过数据接口所获取的数据中的字段名称匹配,但是若通过配置的数据接口获取的数据中,没有字段名称为data以及id的数据,或者仅有字段名称为data以及id的数据中的一个字段,那么就识别所生成的组件对应的字段以及后续通过数据接口所获取的数据中的字段名称不匹配。
进一步的,为了避免后续的数据展示过程出现错误,可以在基于所述从所述确定的数据接口所获取的数据,对所述组件的显示样式进行改变的步骤之前
先识别所述从所述确定的数据接口所获取的数据的数据格式是否与所述组件所支持的数据格式匹配。若匹配,则执行所述基于所述从所述数据接口所获取的数据,对所述组件的显示样式进行改变。若识别所生成的组件对应的字段以及后续通过数据接口所获取的数据中的字段名称不匹配,就可以判定所述确定的数据接口所获取的数据的数据格式与所述组件所支持的数据格式不匹配。
为了进一步提升后续数据展示的成功率,提升数据展示的可靠性,可以在基于数据接口获取的数据进行组件样式的改变之前,先检测基于数据接口获取的数据中是否存在与生成的组件对应的字段匹配的字段,若不存在,可以进行字段的映射,进而建立基于数据接口获取的数据中的某个字段与生成的组件对应的字段的映射关系,进而将基于数据接口获取的数据中配置有该映射关系的字段作为具备映射关系的目标字段。例如,生成的组件对应的有字段data以及字段id,而基于数据接口获取的数据中有字段datum以及字段id。那么就可以将该字段datum与生成的组件对应的字段data之间建立映射关系。
那么基于上述方式,在所述从所述确定的数据接口所获取的数据的数据格式与所述组件所支持的数据格式不匹配后,可以进一步的识别所述数据接口的类型是否为API接口,若是API接口,识别从所述数据接口所获取的数据对应的字段名称是否配置有具备映射关系的目标字段,若有具备映射关系的目标字段,检测所述目标字段是否与所述组件所支持的数据数据格式中的字段名称匹配,若所述字段名称匹配,执行所述基于所述从所述数据接口所获取的数据,对所述组件的显示样式进行改变。
例如,所配置的组件对应有字段data以及字段id,而若已经在正式的通过配置的数据接口读取数据,以对组件进行显示样式改变之前,已经对通过配置的数据接口获取的数据中的datum字段配置与组件对应的字段data之间的映射关系,并将该映射关系存储在数据库中后。
在获取从所述确定的数据接口所获取的数据后,可以基于查表的方式检测从该数据接口获取的数据中的某个字段名称是否存在于该数据表中,若存在,则判定从所述数据接口所获取的数据对应的字段名称配置有具备映射关系的目标字段,即判断字段datum配置有具备映射关系的目标字段,与该字段datum对应的目标字段即为前述的字段data,而在获取到目标字段后,又可以进一步的将该目标字段与生成的组件对应的字段进行匹配,即将目标字段data与组件对应的字段data和字段id进行逐一比对,可以理解的是,目标字段data与组件对应的字段data是存在匹配的,那么就可以执行基于所述从所述数据接口所获取的数据,对所述组件的显示样式进行改变。
可以理解的是,在这种情况下,就是将字段datum的值赋值给组件对应的字段data,进而来对所述组件的显示样式进行改变。例如,若生成的组件类型为饼状图类型,而生成的饼状图类型的组件中的字段data是用于体现在饼状图中所占的百分比,那么在建立字段datum与字段data之间的映射关系的情况下,就是通过字段datum的值来体现在饼状图中所占的百分比。
本申请实施例中提供的一种组件配置方法,通过对确定的组件类型对应的显示样式数据进行解析得到指定的工作区域可识别格式的数据后,在指定的工作区域基于所述可识别格式的数据将所述第二元素实例渲染为与所述组件类型对应的组件,再实现通过组件的显示样式的变化来体现数据的变化,并且,因为该多个待选的组件类型的组件均支持该多个待选的数据接口,那么在涉及到改变某个数据接口的展示形式改变时,只需要将该需要该改变展示形式的数据接口配置给另一种组件即可实现,进而通过接口配置的改变就可以实现展现形式的改变,而不用再重新进行展示程序的开发。
请参阅图8,本申请再一实施例提供的一种组件配置方法,所述方法包括:
步骤S310:从多个待选的组件类型中获取确定的组件类型。
步骤S320:基于预先配置的所述组件类型对应的显示样式数据,在指定的工作区域生成与所述组件类型对应的组件。
步骤S330:从多个待选的数据接口中获取确定的数据接口,将所述数据接口配置给所述组件。
步骤S340:获取从所述确定的数据接口所获取的数据。
步骤S350:基于所述从所述确定的数据接口所获取的数据,对所述组件的显示样式进行改变。
作为一种方式,所述基于预先配置的所述组件类型对应的显示样式数据,在指定的工作区域生成与所述组件类型对应的组件之后还包括:响应于作用于所述组件的手动操作,改变所述组件的显示样式。那么在这种方式下,可以基于所述从所述数据接口所获取的数据,以所述手动操作后的显示样式为基础进行显示样式的改变,从而可以实现用户实时的对组件的显示样式进行控制,以便可以更适配用户的视觉习惯。
例如,若生成的组件的类型为柱状图,而其中的柱装形状用于体现数据的多少,那么当由于数据的值过大造成柱装形状超过显示区域后,可能会影响显示效果,那么用户可以即时的将整体的柱状图的尺寸缩小,进而避免数据的值过大造成柱装形状超过显示区域。再例如,若生成的组件的类型为饼状图,而饼状图中的某一块的面积用于体现数值的占比,那么当某一块对应的数值过小,会使得其对应的面积也会较小,进而会造成面积过小而影响显示效果的情况下,用户可以通过放大整体的饼状图的尺寸,进而避免造成面积过小而影响显示效果。
需要说明的是,有的数据接口所获取的数据是实时采集而来的,并且还可以配置一定的采集频率,以便可以依据该采集频率通过配置的数据接口去获取数据。例如,若配置的数据请求频率为10秒1次,那么每间隔10秒就会通过配置的数据接口去读取一次数据。可以理解的是,这里通过数据接口所述读取的数据为数据源最新上报的且还未通过组件进行展示的数据。可以理解的是,在手动操作过程中,可能会改变组件的形状或者尺寸,那么在这种方式下,可能会造成组件无法有效的展示数据的变化规律。
例如,以通过组件的尺寸大小来展示数据值的大小为例,数据值越大,对应的图形尺寸也就越大。在这种模式下,当次通过数据接口所获取的数据比上一次通过数据接口所获取的数据的值大的情况下,那么对应的图形尺寸应该对应增大,但是,若在这个过程中,用户通过手动操作缩小了组件的尺寸,那么就会造成组件的尺寸形状无法体现当次通过数据接口所获取的数据比上一次通过数据接口所获取的数据的值大。那么为了上述的问题,当检测到用户在对组件进行手动操作的过程中,会暂停通过数据接口请求数据,当检测到手动操作结束后,再恢复数据请求,或者对于已经从数据接口获取而还未通过组件展示的数据会先在本地进行缓存,当检测到手动操作结束后,再基于组件进行展示。
本申请实施例中提供的一种组件配置方法,通过组件的显示样式的变化来体现数据的变化,并且,因为该多个待选的组件类型的组件均支持该多个待选的数据接口,那么在涉及到改变某个数据接口的展示形式改变时,只需要将该需要该改变展示形式的数据接口配置给另一种组件即可实现,进而通过接口配置的改变就可以实现展现形式的改变,而不用再重新进行展示程序的开发。
请参阅图9,本申请实施例提供的一种组件配置装置400,所述装置400包括:
组件类型确定单元410,用于从多个待选的组件类型中获取确定的组件类型。
作为一种方式,组件类型确定单元410,具体用于若检测到组件待选区域的多个待选控件中有控件被选中后,检测所述被选中的控件的位置,其中,所述多个待选控件中的每一个控件对应一种组件类型;若检测到所述被选中的控件被移动到所述指定位置,将所述被选中的控件对应的组件类型作为确定的组件类型。
组件生成单元420,用于基于预先配置的所述组件类型对应的显示样式数据,在指定的工作区域生成与所述组件类型对应的组件。
组件配置单元430,用于从多个待选的数据接口中获取确定的数据接口,将所述数据接口配置给所述组件,以便根据通过所述数据接口所获取的数据对所述组件的显示样式进行改变,其中,所述多个待选的数据接口的类型为所述多个待选的组件类型的组件均支持的类型。
作为一种方式,组件生成单元420,具体用于获取与所述组件类型对应的图形适配器;基于所述图形适配器生成与所述组件类型对应的第一元素实例,所述第一元素实例配置有表征所述组件的显示样式的显示样式数据;基于所述图形适配器以及所述第一元素实例生成第二元素实例,所述第二元素实例对应有基于所述显示样式数据转换得到的指定的工作区域可识别格式的数据;基于所述可识别格式的数据将所述第二元素实例渲染为与所述组件类型对应的组件。
作为一种方式,如图10所示,所述装置400,还包括:
组件控制单元440,用于获取从所述确定的数据接口所获取的数据;基于所述从所述确定的数据接口所获取的数据,对所述组件的显示样式进行改变。
可选的,组件控制单元440,具体用于识别所述从所述确定的数据接口所获取的数据的数据格式是否与所述组件所支持的数据格式匹配;若匹配,执行所述基于所述从所述数据接口所获取的数据,对所述组件的显示样式进行改变。
可选的,组件控制单元440,还具体用于若不匹配,识别所述数据接口的类型是否为API接口;若是API接口,识别从所述数据接口所获取的数据对应的字段名称是否配置有具备映射关系的目标字段;若有具备映射关系的目标字段,检测所述目标字段是否与所述组件所支持的数据数据格式中的字段名称匹配;若所述字段名称匹配,执行所述基于所述从所述数据接口所获取的数据,对所述组件的显示样式进行改变。
再者,组件控制单元440,还具体用于以配置的请求频率向所述数据接口所指向的位置获取数据,其中,在检测到当次所请求的数据被返回后,允许发送下一次的数据请求。
作为一种方式,如图11所示,所述装置400,还包括:
组件编辑单元450,用于响应于作用于所述组件的手动操作,改变所述组件的显示样式。在这种方式下,所述组件控制单元440,具体用于基于所述从所述数据接口所获取的数据,以所述手动操作后的显示样式为基础进行显示样式的改变。
本申请实施例中提供的一种组件配置装置,通过组件的显示样式的变化来体现数据的变化,并且,因为该多个待选的组件类型的组件均支持该多个待选的数据接口,那么在涉及到改变某个数据接口的展示形式改变时,只需要将该需要该改变展示形式的数据接口配置给另一种组件即可实现,进而通过接口配置的改变就可以实现展现形式的改变,而不用再重新进行展示程序的开发。
本发明实施例提供的组件配置装置能够实现图2到图8的方法实施例所实现的各个过程,为避免重复,对于其中的详细内容这里不再赘述,对应的详细内容可以参见前述的方法实施例。
需要说明的是,本申请的前述实施例所提供的组件配置方法、装置可以单独运行在一个服务器中,例如直接接收设备上报数据的电子设备。也可以运行在一个配置有多个服务器的服务器集群中。例如,前述的装置400中所包括的所有的单元均可以运行在一个服务器中。此外,装置400中的不同单元各自运行在不同的服务器中,且该不同的服务器可以相互进行数据通信。
本发明实施例提供了一种电子设备,该电子设备包括处理器和存储器,该存储器中存储有至少一条指令、至少一段程序、代码集或指令集,该至少一条指令、该至少一段程序、该代码集或指令集由该处理器加载并执行以实现如上述方法实施例所提供的组件配置方法。
存储器可用于存储软件程序以及模块,处理器通过运行存储在存储器的软件程序以及模块,从而执行各种功能应用以及数据处理。存储器可主要包括存储程序区和存储数据区,其中,存储程序区可存储操作系统、功能所需的应用程序等;存储数据区可存储根据所述设备的使用所创建的数据等。此外,存储器可以包括高速随机存取存储器,还可以包括非易失性存储器,例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地,存储器还可以包括存储器控制器,以提供处理器对存储器的访问。
图12是本发明实施例提供的一种可以实施上述组件配置方法的服务器的硬件结构框图。如图12所示,该服务器1100可因配置或性能不同而产生比较大的差异,可以包括一个或一个以上处理器(ProcessingUnits,CPU)1110(处理器1110可以包括但不限于微处理器MCU或可编程逻辑器件FPGA等的处理装置)、用于存储数据的存储器1130,一个或一个以上存储应用程序1123或数据1122的存储介质1120(例如一个或一个以上海量存储设备)。其中,存储器1130和存储介质1120可以是短暂存储或持久存储。存储在存储介质1120的程序可以包括一个或一个以上模块,每个模块可以包括对服务器中的一系列指令操作。更进一步地,处理器1110可以设置为与存储介质1120通信,在服务器1100上执行存储介质1120中的一系列指令操作。服务器1100还可以包括一个或一个以上电源1160,一个或一个以上有线或无线网络接口1150,一个或一个以上输入输出接口1140,和/或,一个或一个以上操作系统1121,例如WindowsServerTM,MacOSXTM,UnixTM,LinuxTM,FreeBSDTM等等。
输入输出接口1140可以用于经由一个网络接收或者发送数据。上述的网络具体实例可包括服务器1100的通信供应商提供的无线网络。在一个实例中,输入输出接口1140包括一个网络适配器(NetworkInterfaceController,NIC),其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中,输入输出接口1140可以为射频(RadioFrequency,RF)模块,其用于通过无线方式与互联网进行通讯。
本领域普通技术人员可以理解,图12所示的结构仅为示意,其并不对上述电子设备的结构造成限定。例如,服务器1100还可包括比图12中所示更多或者更少的组件,或者具有与图12所示不同的配置。
本申请实施例中提供的一种电子设备,通过组件的显示样式的变化来体现数据的变化,并且,因为该多个待选的组件类型的组件均支持该多个待选的数据接口,那么在涉及到改变某个数据接口的展示形式改变时,只需要将该需要该改变展示形式的数据接口配置给另一种组件即可实现,进而通过接口配置的改变就可以实现展现形式的改变,而不用再重新进行展示程序的开发。
本发明实施例还提供一种计算机可读存储介质,计算机可读存储介质上存储有计算机程序,该计算机程序被处理器执行时实现上述组件配置方法实施例的各个过程,且能达到相同的技术效果,为避免重复,这里不再赘述。其中,所述的计算机可读存储介质,如只读存储器(Read-OnlyMemory,简称ROM)、随机存取存储器(RandomAccessMemory,简称RAM)、磁碟或者光盘等。
需要说明的是,在本文中,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。
通过以上的实施方式的描述,本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现,当然也可以通过硬件,但很多情况下前者是更佳的实施方式。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中,包括若干指令用以使得一台终端(可以是手机,计算机,服务器,空调器,或者网络设备等)执行本发明各个实施例所述的方法。
上面结合附图对本发明的实施例进行了描述,但是本发明并不局限于上述的具体实施方式,上述的具体实施方式仅仅是示意性的,而不是限制性的,本领域的普通技术人员在本发明的启示下,在不脱离本发明宗旨和权利要求所保护的范围情况下,还可做出很多形式,均属于本发明的保护之内。

Claims (11)

1.一种组件配置方法,其特征在于,所述方法包括:
从多个待选的组件类型中获取确定的组件类型;
基于预先配置的所述组件类型对应的显示样式数据,在指定的工作区域生成与所述组件类型对应的组件;
从多个待选的数据接口中获取确定的数据接口,将所述数据接口配置给所述组件,以便根据通过所述数据接口所获取的数据对所述组件的显示样式进行改变,其中,所述多个待选的数据接口的类型为所述多个待选的组件类型的组件均支持的类型。
2.根据权利要求1所述的方法,其特征在于,所述基于预先配置的所述组件类型对应的显示样式数据,在指定的工作区域生成与所述组件类型对应的组件的步骤包括:
获取与所述组件类型对应的图形适配器;
基于所述图形适配器生成与所述组件类型对应的第一元素实例,所述第一元素实例配置有表征所述组件的显示样式的显示样式数据;
基于所述图形适配器以及所述第一元素实例生成第二元素实例,所述第二元素实例对应有基于所述显示样式数据转换得到的指定的工作区域可识别格式的数据;
基于所述可识别格式的数据将所述第二元素实例渲染为与所述组件类型对应的组件。
3.根据权利要求1所述的方法,其特征在于,所述从多个待选的数据接口中获取确定的数据接口,将所述数据接口配置给所述组件的步骤之后还包括:
获取从所述确定的数据接口所获取的数据;
基于所述从所述确定的数据接口所获取的数据,对所述组件的显示样式进行改变。
4.根据权利要求3所述的方法,其特征在于,所述基于预先配置的所述组件类型对应的显示样式数据,在指定的工作区域生成与所述组件类型对应的组件之后还包括:
响应于作用于所述组件的手动操作,改变所述组件的显示样式。
所述基于所述从所述数据接口所获取的数据,对所述组件的显示样式进行改变的步骤包括:
基于所述从所述数据接口所获取的数据,以所述手动操作后的显示样式为基础进行显示样式的改变。
5.根据权利要求3所述的方法,其特征在于,所述基于所述从所述确定的数据接口所获取的数据,对所述组件的显示样式进行改变的步骤之前还包括:
识别所述从所述确定的数据接口所获取的数据的数据格式是否与所述组件所支持的数据格式匹配;
若匹配,执行所述基于所述从所述数据接口所获取的数据,对所述组件的显示样式进行改变。
6.根据权利要求5所述的方法,其特征在于,所述方法还包括:
若不匹配,识别所述数据接口的类型是否为API接口;
若是API接口,识别从所述数据接口所获取的数据对应的字段名称是否配置有具备映射关系的目标字段;
若有具备映射关系的目标字段,检测所述目标字段是否与所述组件所支持的数据数据格式中的字段名称匹配;
若所述字段名称匹配,执行所述基于所述从所述数据接口所获取的数据,对所述组件的显示样式进行改变。
7.根据权利要求3所述的方法,其特征在于,所述方法还包括:
以配置的请求频率向所述数据接口所指向的位置获取数据,其中,在检测到当次所请求的数据被返回后,允许发送下一次的数据请求。
8.根据权利要求1-7任一所述的方法,其特征在于,所述从多个待选的组件类型中获取确定的组件类型的步骤包括:
若检测到组件待选区域的多个待选控件中有控件被选中后,检测所述被选中的控件的位置,其中,所述多个待选控件中的每一个控件对应一种组件类型;
若检测到所述被选中的控件被移动到所述指定位置,将所述被选中的控件对应的组件类型作为确定的组件类型。
9.一种组件配置装置,其特征在于,所述装置包括:
组件类型确定单元,用于从多个待选的组件类型中获取确定的组件类型;
组件生成单元,用于基于预先配置的所述组件类型对应的显示样式数据,在指定的工作区域生成与所述组件类型对应的组件;
组件配置单元,用于从多个待选的数据接口中获取确定的数据接口,将所述数据接口配置给所述组件,以便根据通过所述数据接口所获取的数据对所述组件的显示样式进行改变,其中,所述多个待选的数据接口的类型为所述多个待选的组件类型的组件均支持的类型。
10.一种电子设备,其特征在于,包括一个或多个处理器以及存储器;
一个或多个程序被存储在所述存储器中并被配置为由所述一个或多个处理器执行,所述一个或多个程序配置用于执行权利要求1-8任一所述的方法。
11.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质中存储有程序代码,其中,在所述程序代码运行时执行权利要求1-8任一所述的方法。
CN201910517523.6A 2019-06-14 2019-06-14 组件配置方法、装置以及电子设备 Active CN110413161B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910517523.6A CN110413161B (zh) 2019-06-14 2019-06-14 组件配置方法、装置以及电子设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910517523.6A CN110413161B (zh) 2019-06-14 2019-06-14 组件配置方法、装置以及电子设备

Publications (2)

Publication Number Publication Date
CN110413161A true CN110413161A (zh) 2019-11-05
CN110413161B CN110413161B (zh) 2021-08-31

Family

ID=68359150

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910517523.6A Active CN110413161B (zh) 2019-06-14 2019-06-14 组件配置方法、装置以及电子设备

Country Status (1)

Country Link
CN (1) CN110413161B (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111736836A (zh) * 2020-07-22 2020-10-02 平安国际智慧城市科技股份有限公司 基于关系图的组件配置方法、装置及计算机可读存储介质
CN111949266A (zh) * 2020-07-23 2020-11-17 上海硬通网络科技有限公司 网页生成方法、装置及电子设备
CN113181657A (zh) * 2021-04-30 2021-07-30 北京读我网络技术有限公司 一种跨平台渲染方法及装置

Citations (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20020070966A1 (en) * 2000-12-13 2002-06-13 Austin Paul F. System and method for automatically configuring a graphical program to publish or subscribe to data
US20050149549A1 (en) * 2003-12-31 2005-07-07 Jos Jaspers Content management in web environments
CN101448120A (zh) * 2007-11-26 2009-06-03 新奥特(北京)视频技术有限公司 一种图表视频的动态生成系统
CN104750810A (zh) * 2015-03-30 2015-07-01 浪潮集团有限公司 一种基于配置的数据查询处理方法
CN104978114A (zh) * 2014-04-01 2015-10-14 珠海金山办公软件有限公司 一种图表的显示方法、装置
CN106293649A (zh) * 2015-05-15 2017-01-04 北京国双科技有限公司 渲染图表的方法及装置
CN107688664A (zh) * 2017-09-25 2018-02-13 平安科技(深圳)有限公司 图表生成方法、装置、计算机设备和存储介质
CN108269120A (zh) * 2017-11-29 2018-07-10 广东神马搜索科技有限公司 广告样式元数据配置方法及装置
CN109002334A (zh) * 2017-06-05 2018-12-14 阿里巴巴集团控股有限公司 一种运维平台及其数据处理方法
CN109471626A (zh) * 2018-10-11 2019-03-15 深圳市金证科技股份有限公司 页面逻辑结构、页面生成方法、页面数据处理方法及装置

Patent Citations (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20020070966A1 (en) * 2000-12-13 2002-06-13 Austin Paul F. System and method for automatically configuring a graphical program to publish or subscribe to data
US20050149549A1 (en) * 2003-12-31 2005-07-07 Jos Jaspers Content management in web environments
CN101448120A (zh) * 2007-11-26 2009-06-03 新奥特(北京)视频技术有限公司 一种图表视频的动态生成系统
CN104978114A (zh) * 2014-04-01 2015-10-14 珠海金山办公软件有限公司 一种图表的显示方法、装置
CN104750810A (zh) * 2015-03-30 2015-07-01 浪潮集团有限公司 一种基于配置的数据查询处理方法
CN106293649A (zh) * 2015-05-15 2017-01-04 北京国双科技有限公司 渲染图表的方法及装置
CN109002334A (zh) * 2017-06-05 2018-12-14 阿里巴巴集团控股有限公司 一种运维平台及其数据处理方法
CN107688664A (zh) * 2017-09-25 2018-02-13 平安科技(深圳)有限公司 图表生成方法、装置、计算机设备和存储介质
CN108269120A (zh) * 2017-11-29 2018-07-10 广东神马搜索科技有限公司 广告样式元数据配置方法及装置
CN109471626A (zh) * 2018-10-11 2019-03-15 深圳市金证科技股份有限公司 页面逻辑结构、页面生成方法、页面数据处理方法及装置

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111736836A (zh) * 2020-07-22 2020-10-02 平安国际智慧城市科技股份有限公司 基于关系图的组件配置方法、装置及计算机可读存储介质
CN111736836B (zh) * 2020-07-22 2020-11-17 平安国际智慧城市科技股份有限公司 基于关系图的组件配置方法、装置及计算机可读存储介质
CN111949266A (zh) * 2020-07-23 2020-11-17 上海硬通网络科技有限公司 网页生成方法、装置及电子设备
CN113181657A (zh) * 2021-04-30 2021-07-30 北京读我网络技术有限公司 一种跨平台渲染方法及装置
CN113181657B (zh) * 2021-04-30 2024-04-05 北京读我网络技术有限公司 一种跨平台渲染方法及装置

Also Published As

Publication number Publication date
CN110413161B (zh) 2021-08-31

Similar Documents

Publication Publication Date Title
CN110795148B (zh) 编排文件的生成方法、装置及电子设备
US8471781B2 (en) System and method for the auto-detection and presentation of pre-set configurations for multiple monitor layout display
US11270066B2 (en) Temporary formatting and charting of selected data
CN110413161A (zh) 组件配置方法、装置以及电子设备
US20140380201A1 (en) System and Method for the Auto-Detection and Presentation of Pre-Set Configurations for Multiple Monitor Layout Display
CN107766310B (zh) 一种网格单元格编辑方法及装置
CN107908604A (zh) 报表图形生成方法、装置、计算机设备和存储介质
CN114036443A (zh) 页面生成方法及装置
US10289388B2 (en) Process visualization toolkit
CN108628648B (zh) 数据处理方法和数据处理装置
CN108345687A (zh) 一种3d网页展示方法和装置
CN113610963B (zh) 三维网络拓扑绘制方法、装置、计算设备及存储介质
WO2015009188A1 (en) Systems and methods for automated generation of graphical user interfaces
CN112486797A (zh) 接口测试方法和装置
CN116304442A (zh) 页面代码生成方法、装置、电子设备以及存储介质
CN111191174A (zh) 雪碧图集成方法、系统及装置
CN111061478A (zh) 一种页面表单修改方法、装置、设备及可读存储介质
CN112015714A (zh) 基于数据库的数据模型生成方法及装置
CN115630926A (zh) 一种车间设备管理方法、装置、设备及存储介质
CN114564268A (zh) 一种设备管理方法、装置、电子设备和存储介质
US11138364B2 (en) Electronic apparatus, information processing method, and recording medium
CN110659096B (zh) 一种网络拓扑图的展示方法、装置、系统和存储介质
CN111625379A (zh) 一种信息处理的方法、装置、电子设备和可读存储介质
CN110780852A (zh) 一种确定数据源的方法、装置、设备和介质
CN114741072B (zh) 一种页面生成方法、装置、设备及存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant