CN114780188A - 网页3d模型顶牌展示方法、系统、终端及存储介质 - Google Patents
网页3d模型顶牌展示方法、系统、终端及存储介质 Download PDFInfo
- Publication number
- CN114780188A CN114780188A CN202210382796.6A CN202210382796A CN114780188A CN 114780188 A CN114780188 A CN 114780188A CN 202210382796 A CN202210382796 A CN 202210382796A CN 114780188 A CN114780188 A CN 114780188A
- Authority
- CN
- China
- Prior art keywords
- model
- equipment
- terminal
- perception
- webpage
- 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
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T17/00—Three dimensional [3D] modelling, e.g. data description of 3D objects
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T19/00—Manipulating 3D models or images for computer graphics
- G06T19/20—Editing of 3D images, e.g. changing shapes or colours, aligning objects or positioning parts
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02P—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN THE PRODUCTION OR PROCESSING OF GOODS
- Y02P90/00—Enabling technologies with a potential contribution to greenhouse gas [GHG] emissions mitigation
- Y02P90/30—Computing systems specially adapted for manufacturing
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- Computer Graphics (AREA)
- Human Computer Interaction (AREA)
- Geometry (AREA)
- Architecture (AREA)
- Computer Hardware Design (AREA)
- Processing Or Creating Images (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明提供了一种网页3D模型顶牌展示方法及系统,包括:根据项目实际部署中设备和感知终端的关系引入各自的自定义属性,构建具有对应关系的设备和感知终端模型,并制定顶牌;对设备和感知终端模型进行台账配置;根据配置的台账,将感知终端监测数据、设备模型和感知终端模型进行绑定,将顶牌与感知终端模型进行绑定;在HTML结构上引入设备和感知终端模型,并获取自定义属性;根据设定的规则初始化系列参数,通过台账绑定的数据源,动态刷新顶牌的数据,完成对设备的网页3D模型顶牌展示。本发明提高了顶牌的灵活性、增加了可视化的生动性和顶牌的多变性、增加了便利性,可以灵活应用到不同设备不同站点不同检测数据的展示中。
Description
技术领域
本发明涉及大数据可视化技术领域,具体地,涉及一种网页3D模型顶牌展示方法、系统、终端及存储介质。
背景技术
在大数据可视化的展示中,常常为了可以更有效更直观地展示设备的数据和状态,通常会采用3D数字模型来进行数据状态的展示和交互,例如,在电力设备监测中,通过电力设备3D模型来映射现实世界的物体。
电力设备是电力系统中的各类输电、变电、配电设备,感知终端是采集监测电力设备的各类传感器。在物联网数字化大建设的背景下,网页端通过电力设备3D模型来映射现实世界的物体,并把感知终端采集的数据用可视化的效果关联和展示在界面上。其中,监测数据定制化的显示载体称之为顶牌,顶牌再通过连接线来关联到3D模型上。
现有的引擎技术,只支持常规固定式展示顶牌,顶牌一般支持固定坐标、物体跟随两种模式。顶牌样式采用的是HTML与CSS来进行定制。
现有的将顶牌关联到3D模型的方法,通常采用thingjs(物联网3D可视化开发平台)中的UIAnchor组件实现。但是改内置界面的样式过于死板,不能在项目中进行灵活应用以及多样化配置。另外,如果一个3D模型配置了多个顶牌时,一般就会采用固定坐标模式,此时顶牌就出现了相互遮盖的情况,并且随着模型的缩放旋转等交互操作;如果不选择固定坐标模式,则会导致顶牌位置随意漂移的现象发生,顶牌因为引擎自身缺陷而偏离既定位置;基于以上问题,进而导致其显示效果较差,严重影响到用户的体验效果。
发明内容
本发明针对现有技术中存在的上述不足,提供了一种网页3D模型顶牌展示方法、系统、终端及存储介质。
根据本发明的一个方面,提供了一种网页3D模型顶牌展示方法,包括:
搭建3D模型场景,根据项目实际部署中设备和感知终端的关系引入各自的自定义属性,构建得到具有对应关系的设备模型和感知终端模型,并制定与所述感知终端模型连接的顶牌;
对所述设备模型和所述感知终端模型进行台账配置,使得所述台账的配置信息与所述自定义属性一一关联;根据配置的台账,将感知终端监测数据、所述设备模型和所述感知终端模型进行绑定,将所述顶牌与所述感知终端模型进行绑定;
在HTML结构上引入所述设备模型和所述感知终端模型,并获取所述设备模型和所述感知终端模型的自定义属性;根据设定的规则初始化配置的所有属性,通过台账绑定的数据源,动态刷新所述顶牌的感知终端监测数据,完成对设备的网页3D模型顶牌展示。
优选地,所述根据项目实际部署中设备和感知终端的关系引入各自的自定义属性,包括:
对于设备和感知终端,设置UserID属性;其中:
所述UserID属性,作为设备和感知终端的唯一标识,用于后期台账配置以及感知终端parent自定义属性的捆绑;
对于感知终端,增加parent和type两个自定义属性;其中:
所述parent属性,其值为感知终端监测对象的UserID,用于定义感知终端监测对象;
所述type属性,其值为sensor,用于指定该感知终端模型的传感器类型;
对于感知终端,还设置mark-angle和mark-length两个自定义属性;其中:
所述mark-angle属性,用于设置顶牌与感知终端模型之间的连接线长度;
所述mark-length属性,用于设置连接线的角度;
对后端传来的感知终端监测数据进行格式化封装,并使用HTML和CSS根据项目实际需求对顶牌整体形式进行制定。
优选地,所述感知终端模型配置于所述设备模型的内部。
优选地,所述顶牌的数量与所述感知终端模型的数量一致;当所述顶牌为多个时,多个顶牌连接于位于所述设备模型内部不同位置上的感知终端模型上,并根据自定义属性可视化配置每一个所述顶牌与所述感知终端模型之间的连接线长度以及观察角度。
优选地,所述顶牌与所述设备模型之间通过连接线连接,并由所述顶牌的底部边角处引出;所述连接线与所述顶牌底部之间呈135°夹角设置。优选地,所述对所述3D模型场景进行台账配置,使得所述台账的配置信息与所述自定义属性一一关联,包括:
对于所述设备模型台账,绑定所述设备模型的UserID属性,并以坐标的形式设置3D观察点;
对于所述感知终端模型台账,绑定所述感知终端模型上的UserID属性;
根据绑定的UserID属性,实现所述台账的配置信息与其他自定义属性一一关联。
优选地,所述3D观察点,包括:俯视角度、右视角度和半径倍数角度。
优选地,所述在HTML结构上引入所述设备模型和所述感知终端模型,并获取所述设备模型和所述感知终端模型的自定义属性,包括:
在HTML结构上采用iframe标签引入所述设备模型和所述感知终端模型,使得所述设备模型和所述感知终端模型能够在web页面上进行展示;
对所述设备模型和所述感知终端模型的自定义属性UserID进行读取;
所述通过台账绑定的数据源,动态刷新所述顶牌的感知终端监测数据,包括:
所述顶牌采用遍历的方式轮巡所述台账绑定的数据源,继而对所述顶牌的数据进行动态刷新。
根据本发明的另一个方面,提供了一种网页3D模型顶牌展示系统,包括:
模型搭建模块,该模块搭建3D模型场景,根据项目实际部署中设备和感知终端的关系引入各自的自定义属性,构建得到具有对应关系的设备模型和感知终端模型,并制定与所述感知终端模型连接的顶牌;
台账配置模块,该模块对所述设备模型和所述感知终端模型进行台账配置,使得所述台账的配置信息与所述自定义属性一一关联;根据配置的台账,将感知终端监测数据、所述设备模型和所述感知终端模型进行绑定,将所述顶牌与所述感知终端模型进行绑定;
界面展示模块,该模块在HTML结构上引入所述设备模型和所述感知终端模型,并获取所述设备模型和所述感知终端模型的自定义属性;根据设定的规则初始化配置的所有属性,通过台账绑定的数据源,动态刷新所述顶牌的感知终端监测数据,完成对设备的网页3D模型顶牌展示。
根据本发明的第三个方面,提供了一种终端,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,所述处理器执行所述程序时可用于执行上述任一项所述的方法,或,运行上述的系统。
根据本发明的第四个方面,提供了一种计算机可读存储介质,其上存储有计算机程序,该程序被处理器执行时可用于执行上述任一项所述的方法,或,运行上述的系统。
由于采用了上述技术方案,本发明与现有技术相比,具有如下至少一项的有益效果:
本发明提供的网页3D模型顶牌展示方法、系统、终端及存储介质,为了使操作人员可以更直接更高效的观察到电力设备上的检测数据,在数据的展示上可以更加灵活的适用于每一个设备上面,而外观样式也一并做了修改,如果被检测的电力设备名称过长时,将会对电力设备的名称进行滚动处理,这样就可以清晰的看到被检测对象的设备名称,如此提升了用户的体验感。
本发明提供的网页3D模型顶牌展示方法、系统、终端及存储介质,可以保证3D模型在具有多个顶牌时,伴随模型的各交互操作如拖拽,缩放,旋转过程中,其顶牌依然能够跟随模型而运动,且不会出现随意丢失位置或者互相遮挡的现象。
本发明提供的网页3D模型顶牌展示方法、系统、终端及存储介质,在复杂场景下,顶牌的位置可以进行可视化配置,提高了顶牌的灵活性。
本发明提供的网页3D模型顶牌展示方法、系统、终端及存储介质,顶牌的连接线长度以及观察角度也可进行可视化配置,这样就增加了可视化的生动性。
本发明提供的网页3D模型顶牌展示方法、系统、终端及存储介质,当一个设备出现多个顶牌时,顶牌可以跟随模型进行运动,整个过程不会出现相互遮挡或丢失位置的情况,顶牌位置会始终保持与模型一致的相对位置。
本发明提供的网页3D模型顶牌展示方法、系统、终端及存储介质,可以根据用户的需求及业务展示要求来进行专属的定制,增加了顶牌的多变性。
本发明提供的网页3D模型顶牌展示方法、系统、终端及存储介质,对于项目来说更方便部署、方便维护、方便开发,增加了便利性。
本发明提供的网页3D模型顶牌展示方法、系统、终端及存储介质,可以灵活的运用到其他应用中,进行不同设备不同站点不同检测数据的展示。尤其适用于电力设备监测中。
附图说明
通过阅读参照以下附图对非限制性实施例所作的详细描述,本发明的其它特征、目的和优点将会变得更明显:
图1为本发明一实施例中网页3D模型顶牌展示方法的工作流程图。
图2为本发明一实施例中网页3D模型顶牌展示系统的组成结构示意图。
具体实施方式
下面对本发明的实施例作详细说明:本实施例在以本发明技术方案为前提下进行实施,给出了详细的实施方式和具体的操作过程。应当指出的是,对本领域的普通技术人员来说,在不脱离本发明构思的前提下,还可以做出若干变形和改进,这些都属于本发明的保护范围。
图1为本发明一实施例提供的网页3D模型顶牌展示方法的工作流程图。
如图1所示,该实施例提供的网页3D模型顶牌展示方法,可以包括如下步骤:
S100,搭建3D模型场景,根据项目实际部署中设备和感知终端的关系引入各自的自定义属性,构建得到具有对应关系的设备模型和感知终端模型,并制定与感知终端模型连接的顶牌;
S200,对设备模型和感知终端模型进行台账配置,使得台账的配置信息与自定义属性一一关联;根据配置的台账,将感知终端监测数据、设备模型和感知终端模型进行绑定,将顶牌与感知终端模型进行绑定;
S300,在HTML结构上引入设备模型和感知终端模型,并获取设备模型和感知终端模型的自定义属性;根据设定的规则初始化配置的所有属性(系列参数),通过台账绑定的数据源,动态刷新顶牌的感知终端监测数据,完成对设备的网页3D模型顶牌展示。
在该实施例的S100中,作为一优选实施例,根据项目实际部署中设备和感知终端的关系引入各自的自定义属性,可以包括:
对于设备和感知终端,设置UserID属性;其中:
UserID属性,作为设备和感知终端的唯一标识,用于后期台账配置以及感知终端parent自定义属性的捆绑;
对于感知终端,增加parent和type两个自定义属性;其中:
parent属性,其值为感知终端监测对象的UserID,用于定义感知终端监测对象;
type属性,其值为sensor,用于指定该感知终端模型的传感器类型;
对于感知终端,还设置mark-angle和mark-length两个自定义属性;其中:
mark-angle属性,用于设置顶牌与感知终端模型之间的连接线长度;
mark-length属性,用于设置连接线的角度;
对后端传来的感知终端监测数据进行格式化封装,并使用HTML和CSS根据项目实际需求对顶牌整体形式进行制定。
在该实施例的S100中,作为一优选实施例,感知终端模型配置于设备模型的内部。
在该实施例的S100中,作为一优选实施例,顶牌的数量与感知终端模型的数量一致;当顶牌为多个时,多个顶牌连接于位于设备模型内部不同位置上的感知终端模型上,并根据自定义属性可视化配置每一个顶牌与感知终端模型之间的连接线长度以及观察角度。
进一步地,作为一优选实施例,顶牌与设备模型之间通过连接线连接,并由顶牌的底部边角处引出;连接线与顶牌底部之间呈135°夹角设置。在该实施例的S200中,作为一优选实施例,对3D模型场景进行台账配置,使得台账的配置信息与自定义属性一一关联,可以包括如下步骤:
S201,对于设备模型台账,绑定设备模型的UserID属性,并以坐标的形式设置3D观察点;
S202,对于感知终端模型台账,绑定感知终端模型上的UserID属性;
S203,根据绑定的UserID属性,实现台账的配置信息与其他自定义属性一一关联。
在该实施例的S201中,作为一优选实施例,3D观察点,包括:俯视角度、右视角度和半径倍数角度。
在该实施例的S300中,作为一优选实施例,在HTML结构上引入设备模型和感知终端模型,并获取设备模型和感知终端模型的自定义属性,可以包括如下步骤:
S301,在HTML结构上采用iframe标签引入设备模型和感知终端模型,使得设备模型和感知终端模型能够在web页面上进行展示;
S302,对设备模型和感知终端模型的自定义属性UserID进行读取。
在该实施例的S300中,作为一优选实施例,通过台账绑定的数据源,动态刷新顶牌的感知终端监测数据,可以包括如下步骤:
顶牌采用遍历的方式轮巡台账绑定的数据源,继而对顶牌的数据进行动态刷新。
本发明上述实施例提供的网页3D模型顶牌展示方法,基于模型搭建、台账配置、界面展示三个步骤相互配合实现。在模型搭建中采用自定义属性的配置,根据设定的规则与要求来对电力设备和感知终端进行自定义属性的命名,在台账配置中将配置信息要和模型中的自定义属性进行一一关联,而在界面展示中先进行自定义属性的读取,再根据约定的规则去初始化系列参数,通过遍历的方式去轮巡台账所绑定的数据源,对顶牌的数据进行动态的刷新。
在一具体应用实例中,设定的规则可以为:
设备UserID是由设备名称(设备名称拼音首字母组成,全小写)+分隔符“-”+编号三部分组成,例如:第一组开关柜(kgg-01);感知终端UserID是由固定头dev+分隔符“-”+传感器终端型号名称(全小写)+分隔符“-”+测点编号四部分组成,例如:传感器st10(dev-st10-01)。
在配置台账中,编辑设备时填写3D图形ID信息对应的就是设备的UserID属性,编辑终端时填写的被监测设备3D图形ID信息就是感知终端的UserID属性。配置完成后,进行3D大屏页面中,点击哪个设备就会跳转到对应的3D模型上,实现台账配置中将配置信息与模型中的自定义属性进行一一关联。
本发明上述实施例提供的网页3D模型顶牌展示方法,为了可以更直接更高效的向用户展示设备的各项数据和状态信息,在每个3D设备模型对应的感知终端模型上配置专属的顶牌来进行集中的分类展示,并且该顶牌可以在3D设备模型与用户交互(如拖拽、缩放、旋转)时跟随3D设备模型运动。
下面结合一具体应用实例,对本发明上述实施例提供的网页3D模型顶牌展示方法进一步详细说明。
该具体应用实例中,设备采用电力设备,通过本发明上述实施例提供的展示方法,对电力设备模型顶牌进行网页展示,进而能够实现对电力设备的监测。
在模型搭建中,根据项目实际引入电力设备和感知终端的自定义属性,并根据实际部署中电力设备和感知终端的实际关系去录入各自的自定义属性。
在台账配置中,根据自定义台账,绑定感知终端监测数据和电力设备以及感知终端模型。
在界面展示中,首先要去读取场景搭建中电力设备模型和感知终端模型的自定义属性,再根据约定的规则初始化系列参数,顶牌会通过台账绑定的数据源,而动态的去刷新顶牌的数据。
进一步地:
该具体应用实例所采用的方法,主要由模型的搭建和配置、台账的配置管理、模型和数据的展示三部分组成。
在模型的搭建中根据实际部署中电力设备和感知终端的实际关系去录入各自的自定义属性。对于电力设备要遵循命名规范去设置UserID,对于感知终端要遵循规范去增加parent和type两个自定义属性。对后端传来的数据进行格式化封装,并使用HTML和CSS根据项目需求可以对顶牌整体的样式作出专属的定制,完成数据的对接与绑定。
在台账的配置中,电力设备的信息中要绑定3D图形ID即园区中电力设备模型上的UserID属性,并以坐标的形式(俯视角度、右视角度、半径的倍数)去设置3D观察点,感知终端的信息要绑定被检测设备3D图形ID即园区中感知终端模型上的UserID属性。台账配置成功后,每个模型上就会出现对应的顶牌,顶牌上的检测数据会5秒钟自动刷新一次,当要去查看某一个电力设备信息时,这个设备上如果挂载了多个感知终端,此时顶牌可配置成绑定于感知终端模型上,而感知终端和电力设备因为前述配置的parent关系,会自动管理显示模型,此时可以在场景搭建中根据需要,把感知终端置于电力设备模型内部,因此从视觉效果上来看,设备模型上将会出现多个顶牌,而每个顶牌绑定于模型不同部位,都能够跟随模型而运动,且不会出现随意丢失位置或者互相遮挡的情况。
在界面的渲染中,HTML结构上会使用iframe标签用来引入3D场景,使其可以在web页面上进行展示,然后会对场景搭建中电力设备模型和感知终端模型的自定义属性UserID进行读取,再根据约定的规则去初始化系列参数,而顶牌则会通过遍历的方式去轮巡台账所绑定的数据源,继而对顶牌的数据进行动态的刷新。
所有操作都完成后,在电力设备检测系统中每个设备模型上将会展示出一个或多个顶牌,由于进行了台账的配置,由于感知终端模型设置于设备模型内部,所以与感知终端模型连接的每个顶牌与设备模型之间都展现出一一对应的关系,就算一个设备上有多个顶牌的出现,这些顶牌也并不会因为模型进行拖拽、缩放、旋转等的交互操作而出现相互遮挡或丢失位置的情况,它会跟随设备模型而进行运动,这样就会有效的提高用户的体验效果,便于用户可以更加直观且快捷的了解到相关模型对应设备的重要检测信息情况,并且顶牌还可以根据用户要求或实际情况去进行专属的定制,这样就提高了顶牌的复用率与可变性。
该具体应用实例能够在电力设备检测系统中去帮助用户实时地观察被检测设备的检测数据,可以更高效且直接地对电力设备的各项数据和状态信息进行及时了解和查看,可以快速的分析出当前各个电力设备的运行状态。
该具体应用实例中,在网页端按照设备的台账信息,来展示3D模型以及顶牌,模型支持如拖拽、缩放和旋转的交互操作,而顶牌则可以随着模型的运动而运动,在整个运动的过程中顶牌通过连接线与模型保持着稳定的相对关系。当顶牌中的设备名称过长时就会自动滚动显示。
在本发明一具体应用实例中,设备模型的顶牌展示可以如下所述:
顶牌中右上角圆点表示采样数据分析的结果,可以设定通过不同颜色的标识显示正常和异常状态。
顶牌中包括设备名称,在达到预置长度后可以滚动显示。
顶牌中还可以包括测点采样数据,按实际内容进行分行key-value的形式显示。
顶牌位置与设备模型连接线的方向、长度以及与水平方向夹角可在模型搭建中按照自定义属性进行配置,在页面渲染时自动显示。默认参数下,连接线由顶牌底部边角处引出,并与顶牌底部呈135°夹角连接到设备模型上。在这种默认参数下对顶牌整体形式进行统一,可以在多个顶牌同时显示时有效避免重叠问题。
需要说明的是,本发明上述实施例提供的,不限于应用于电力设备监测,还可以灵活的运用到其他应用中,进行不同设备、不同站点、不同检测数据的展示。
图2为本发明一实施例提供的网页3D模型顶牌展示系统的组成结构示意图。
如图2所示,该实施例提供的网页3D模型顶牌展示系统,可以包括如下模块:
模型搭建模块,该模块搭建3D模型场景,根据项目实际部署中设备和感知终端的关系引入各自的自定义属性,构建得到具有对应关系的设备模型和感知终端模型,并制定与感知终端模型连接的顶牌;
台账配置模块,该模块对设备模型和感知终端模型进行台账配置,使得台账的配置信息与自定义属性一一关联;根据配置的台账,将感知终端监测数据、设备模型和感知终端模型进行绑定,将顶牌与感知终端模型进行绑定;
界面展示模块,该模块在HTML结构上引入设备模型和感知终端模型,并获取设备模型和感知终端模型的自定义属性;根据设定的规则初始化配置的所有属性,通过台账绑定的数据源,动态刷新顶牌的感知终端监测数据,完成对设备的网页3D模型顶牌展示。
需要说明的是,本发明提供的方法中的步骤,可以利用系统中对应的模块、装置、单元等予以实现,本领域技术人员可以参照方法的技术方案实现系统的组成,即,方法中的实施例可理解为构建系统的优选例,在此不予赘述。
本发明一实施例提供了一种终端,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,处理器执行程序时可用于执行本发明上述实施例中任一项的方法,或,运行本发明上述实施例中任一项的系统。
本发明一实施例还提供了一种计算机可读存储介质,其上存储有计算机程序,该程序被处理器执行时可用于执行本发明上述实施例中任一项的方法,或,运行本发明上述实施例中任一项的系统。
可选地,存储器,用于存储程序;存储器,可以包括易失性存储器(英文:volatilememory),例如随机存取存储器(英文:random-access memory,缩写:RAM),如静态随机存取存储器(英文:static random-access memory,缩写:SRAM),双倍数据率同步动态随机存取存储器(英文:Double Data Rate Synchronous Dynamic Random Access Memory,缩写:DDR SDRAM)等;存储器也可以包括非易失性存储器(英文:non-volatile memory),例如快闪存储器(英文:flash memory)。存储器用于存储计算机程序(如实现上述方法的应用程序、功能模块等)、计算机指令等,上述的计算机程序、计算机指令等可以分区存储在一个或多个存储器中。并且上述的计算机程序、计算机指令、数据等可以被处理器调用。
上述的计算机程序、计算机指令等可以分区存储在一个或多个存储器中。并且上述的计算机程序、计算机指令、数据等可以被处理器调用。
处理器,用于执行存储器存储的计算机程序,以实现上述实施例涉及的方法中的各个步骤。具体可以参见前面方法实施例中的相关描述。
处理器和存储器可以是独立结构,也可以是集成在一起的集成结构。当处理器和存储器是独立结构时,存储器、处理器可以通过总线耦合连接。
本发明上述实施例提供的网页3D模型顶牌展示方法、系统、终端及存储介质,在复杂场景下,顶牌的位置可以进行可视化配置,提高了顶牌的灵活性;顶牌的连接线长度以及观察角度也可进行可视化配置,这样就增加了可视化的生动性;当一个设备出现多个顶牌时,顶牌可以跟随模型进行运动,整个过程不会出现相互遮挡或丢失位置的情况,顶牌位置会始终保持与模型一致的相对位置;可以根据用户的需求及业务展示要求来进行专属的定制,增加了顶牌的多变性;对于项目来说更方便部署、方便维护、方便开发,增加了便利性。
本领域技术人员知道,除了以纯计算机可读程序代码方式实现本发明提供的系统及其各个装置以外,完全可以通过将方法步骤进行逻辑编程来使得本发明提供的系统及其各个装置以逻辑门、开关、专用集成电路、可编程逻辑控制器以及嵌入式微控制器等的形式来实现相同功能。所以,本发明提供的系统及其各项装置可以被认为是一种硬件部件,而对其内包括的用于实现各种功能的装置也可以视为硬件部件内的结构;也可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。
本发明上述实施例中未尽事宜均为本领域公知技术。
以上对本发明的具体实施例进行了描述。需要理解的是,本发明并不局限于上述特定实施方式,本领域技术人员可以在权利要求的范围内做出各种变形或修改,这并不影响本发明的实质内容。
Claims (10)
1.一种网页3D模型顶牌展示方法,其特征在于,包括:
搭建3D模型场景,根据项目实际部署中设备和感知终端的关系引入各自的自定义属性,构建得到具有对应关系的设备模型和感知终端模型,并制定与所述感知终端模型连接的顶牌;
对所述设备模型和所述感知终端模型进行台账配置,使得所述台账的配置信息与所述自定义属性一一关联;根据配置的台账,将感知终端监测数据、所述设备模型和所述感知终端模型进行绑定,将所述顶牌与所述感知终端模型进行绑定;
在HTML结构上引入所述设备模型和所述感知终端模型,并获取所述设备模型和所述感知终端模型的自定义属性;根据设定的规则初始化配置的所有属性,通过台账绑定的数据源,动态刷新所述顶牌的感知终端监测数据,完成对设备的网页3D模型顶牌展示。
2.根据权利要求1所述的网页3D模型顶牌展示方法,其特征在于,所述根据项目实际部署中设备和感知终端的关系引入各自的自定义属性,包括:
对于设备和感知终端,设置UserID属性;其中:
所述UserID属性,作为设备和感知终端的唯一标识,用于后期台账配置以及感知终端parent自定义属性的捆绑;
对于感知终端,增加parent和type两个自定义属性;其中:
所述parent属性,其值为感知终端监测对象的UserID,用于定义感知终端监测对象;
所述type属性,其值为sensor,用于指定该感知终端模型的传感器类型;
对于感知终端,还设置mark-angle和mark-length两个自定义属性;其中:
所述mark-angle属性,用于设置顶牌与感知终端模型之间的连接线长度;
所述mark-length属性,用于设置连接线的角度;
对后端传来的感知终端监测数据进行格式化封装,并使用HTML和CSS根据项目实际需求对顶牌整体形式进行制定。
3.根据权利要求1所述的网页3D模型顶牌展示方法,其特征在于,所述感知终端模型配置于所述设备模型的内部。
4.根据权利要求3所述的网页3D模型顶牌展示方法,其特征在于,所述顶牌的数量与所述感知终端模型的数量一致;当所述顶牌为多个时,多个顶牌连接于位于所述设备模型内部不同位置上的感知终端模型上,并根据自定义属性可视化配置每一个所述顶牌与所述感知终端模型之间的连接线长度以及观察角度。
5.根据权利要求1所述的网页3D模型顶牌展示方法,其特征在于,所述对所述3D模型场景进行台账配置,使得所述台账的配置信息与所述自定义属性一一关联,包括:
对于所述设备模型台账,绑定所述设备模型的UserID属性,并以坐标的形式设置3D观察点;
对于所述感知终端模型台账,绑定所述感知终端模型上的UserID属性;
根据绑定的UserID属性,实现所述台账的配置信息与其他自定义属性一一关联。
6.根据权利要求5所述的网页3D模型顶牌展示方法,其特征在于,所述3D观察点,包括:俯视角度、右视角度和半径倍数角度。
7.根据权利要求1所述的网页3D模型顶牌展示方法,其特征在于,所述在HTML结构上引入所述设备模型和所述感知终端模型,并获取所述设备模型和所述感知终端模型的自定义属性,包括:
在HTML结构上采用iframe标签引入所述设备模型和所述感知终端模型,使得所述设备模型和所述感知终端模型能够在web页面上进行展示;
对所述设备模型和所述感知终端模型的自定义属性UserID进行读取;
所述通过台账绑定的数据源,动态刷新所述顶牌的感知终端监测数据,包括:
所述顶牌采用遍历的方式轮巡所述台账绑定的数据源,继而对所述顶牌的数据进行动态刷新。
8.一种网页3D模型顶牌展示系统,其特征在于,包括:
模型搭建模块,该模块搭建3D模型场景,根据项目实际部署中设备和感知终端的关系引入各自的自定义属性,构建得到具有对应关系的设备模型和感知终端模型,并制定与所述感知终端模型连接的顶牌;
台账配置模块,该模块对所述设备模型和所述感知终端模型进行台账配置,使得所述台账的配置信息与所述自定义属性一一关联;根据配置的台账,将感知终端监测数据、所述设备模型和所述感知终端模型进行绑定,将所述顶牌与所述感知终端模型进行绑定;
界面展示模块,该模块在HTML结构上引入所述设备模型和所述感知终端模型,并获取所述设备模型和所述感知终端模型的自定义属性;根据设定的规则初始化配置的所有属性,通过台账绑定的数据源,动态刷新所述顶牌的感知终端监测数据,完成对设备的网页3D模型顶牌展示。
9.一种终端,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,其特征在于,所述处理器执行所述程序时可用于执行权利要求1-7中任一项所述的方法,或,运行权利要求8所述的系统。
10.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,该程序被处理器执行时可用于执行权利要求1-7中任一项所述的方法,或,运行权利要求8所述的系统。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202210382796.6A CN114780188B (zh) | 2022-04-08 | 2022-04-08 | 网页3d模型顶牌展示方法、系统、终端及存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202210382796.6A CN114780188B (zh) | 2022-04-08 | 2022-04-08 | 网页3d模型顶牌展示方法、系统、终端及存储介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN114780188A true CN114780188A (zh) | 2022-07-22 |
CN114780188B CN114780188B (zh) | 2023-09-01 |
Family
ID=82428320
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202210382796.6A Active CN114780188B (zh) | 2022-04-08 | 2022-04-08 | 网页3d模型顶牌展示方法、系统、终端及存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN114780188B (zh) |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2024051273A1 (zh) * | 2022-09-08 | 2024-03-14 | 华为云计算技术有限公司 | 基于云技术的物联网设备信息展示方法及云管理平台 |
Citations (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
JP2001331813A (ja) * | 2000-05-22 | 2001-11-30 | Wall:Kk | 三次元都市における看板画像生成装置及び方法 |
US20080231630A1 (en) * | 2005-07-20 | 2008-09-25 | Victor Shenkar | Web Enabled Three-Dimensional Visualization |
US20100185928A1 (en) * | 2009-01-21 | 2010-07-22 | Microsoft Corporation | Extensibility for web based diagram visualization |
CN103617646A (zh) * | 2013-10-23 | 2014-03-05 | 山东康威通信技术股份有限公司 | 一种电力隧道环境的三维模型库建立方法 |
US20160224718A1 (en) * | 2013-09-03 | 2016-08-04 | Koh Young Technology Inc. | Graphic user interface for a three dimensional board inspection apparatus |
CN113569098A (zh) * | 2021-07-02 | 2021-10-29 | 浙江浙大中控信息技术有限公司 | 一种设备三维模型的动态实现方法 |
CN113806425A (zh) * | 2021-09-24 | 2021-12-17 | 广东博华超高清创新中心有限公司 | 一种web应用界面可视化实现方法、系统、设备及应用 |
CN114219891A (zh) * | 2021-12-02 | 2022-03-22 | 天津健康医疗大数据有限公司 | 一种二维元素实现三维可视化效果的方法及装置 |
-
2022
- 2022-04-08 CN CN202210382796.6A patent/CN114780188B/zh active Active
Patent Citations (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
JP2001331813A (ja) * | 2000-05-22 | 2001-11-30 | Wall:Kk | 三次元都市における看板画像生成装置及び方法 |
US20080231630A1 (en) * | 2005-07-20 | 2008-09-25 | Victor Shenkar | Web Enabled Three-Dimensional Visualization |
US20100185928A1 (en) * | 2009-01-21 | 2010-07-22 | Microsoft Corporation | Extensibility for web based diagram visualization |
US20160224718A1 (en) * | 2013-09-03 | 2016-08-04 | Koh Young Technology Inc. | Graphic user interface for a three dimensional board inspection apparatus |
CN103617646A (zh) * | 2013-10-23 | 2014-03-05 | 山东康威通信技术股份有限公司 | 一种电力隧道环境的三维模型库建立方法 |
CN113569098A (zh) * | 2021-07-02 | 2021-10-29 | 浙江浙大中控信息技术有限公司 | 一种设备三维模型的动态实现方法 |
CN113806425A (zh) * | 2021-09-24 | 2021-12-17 | 广东博华超高清创新中心有限公司 | 一种web应用界面可视化实现方法、系统、设备及应用 |
CN114219891A (zh) * | 2021-12-02 | 2022-03-22 | 天津健康医疗大数据有限公司 | 一种二维元素实现三维可视化效果的方法及装置 |
Non-Patent Citations (2)
Title |
---|
THINGJS: "3D场景顶牌模型化开发ThingJs", pages 1 - 4, Retrieved from the Internet <URL:https://zhuanlan.zhihu.com/p/352804693> * |
风之化身呀: "ThingJS使用", pages 1 - 7, Retrieved from the Internet <URL:https://www.jianshu.com/p/112c107fc50b> * |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2024051273A1 (zh) * | 2022-09-08 | 2024-03-14 | 华为云计算技术有限公司 | 基于云技术的物联网设备信息展示方法及云管理平台 |
Also Published As
Publication number | Publication date |
---|---|
CN114780188B (zh) | 2023-09-01 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN102955854A (zh) | 一种基于html5协议的网页展现方法及装置 | |
CN109658325B (zh) | 一种三维动画渲染方法及装置 | |
CN111400899A (zh) | 一种用于电缆敷设建模的处理方法、系统和存储介质 | |
CN102509485A (zh) | 一种虚拟实验信息表示模型的构建方法 | |
CN106055462A (zh) | 一种时长获取方法和装置 | |
CN103077067B (zh) | 虚拟机系统时间确定方法、装置及设备 | |
CN108563579A (zh) | 白盒测试方法、装置、系统及存储介质 | |
CN114780188A (zh) | 网页3d模型顶牌展示方法、系统、终端及存储介质 | |
CN109361948A (zh) | 界面管理方法、智能终端及可读存储介质 | |
CN109344066A (zh) | 一种浏览器页面的测试方法、系统及终端 | |
CN106126021A (zh) | 一种界面显示方法及装置 | |
CN106846431B (zh) | 一种支持多表现形式的统一Web图形绘制系统 | |
CN109544703B (zh) | 一种易于实现交互的数据中心Web3D模型加载方法 | |
CN104461603B (zh) | 一种信息处理方法及电子设备 | |
CN107967689A (zh) | 一种图像边界检测方法及设备 | |
CN111290904A (zh) | 显示屏调试方法、装置、系统和计算机可读介质 | |
CN112015401A (zh) | 信息获取方法、装置、电子设备及可读存储介质 | |
CN111078518B (zh) | 数据采集方法、终端设备和计算机可读存储介质 | |
CN109086108B (zh) | 一种界面布局合理性检测的方法及系统 | |
CN106484083A (zh) | 一种呈现智能终端系统状态的方法、装置及其智能终端 | |
CN112306838A (zh) | 页面布局兼容性测试方法、装置、设备及可读存储介质 | |
CN108629131A (zh) | 交叉互联结构图的智能生成方法及装置 | |
CN112764750B (zh) | 界面生成方法、装置、电子设备以及可读存储介质 | |
CN116451637B (zh) | 一种电路图融合加载方法及装置、设备、存储介质 | |
CN118037918A (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 |