一种web应用界面可视化实现方法、系统、设备及应用与流程

1.本发明属于物联网应用技术领域，涉及一种web应用界面可视化实现方法、系统、设备及应用。尤其涉及到web项目中物联网设备界面可视化显示的前后端实现方法及系统。


背景技术：

2.随着计算机物联网技术的发展，bs(browser/server，浏览器/服务器模式)架构和web应用的广泛使用。越来越多的设备连接上了服务器，用户习惯了随时随地通过浏览器页面进入web系统对设备进行管理；通过客户端对设备进行远程操控。随着设备数量及种类的不断增加，如何让管理员更好，更轻松的在客户端管理这些各式各样的设备，是对当下互联网技术人提出的一个更高的要求。
3.现在主流的物联网应用系统中，联网的设备在管理页面中主要是以列表的方式展示。而且不管bs(browser/server)还是cs(client/server)架构，很多设备管理系统是一类设备对应一个独立系统。如梯控设备对应梯控系统，人脸机设备对应人脸机系统，门禁锁对应锁系统，摄像机又是单独的摄像机管理系统。
4.对于一个综合性的应用场景，过多的系统不管是对用户管理设备，还是运维人员对系统的维护来说，都是难以接受的。况且各个系统展示的信息不集中，无法对设备进行统筹管理，展示的信息不够直观，设备相关信息展示没有主次之分，无法突出重点信息。管理员对设备信息查询比较繁琐，对设备管理费时费力，对系统的运维成本更是居高不下。
5.通过上述分析，现有技术存在的问题及缺陷为：
6.(1)现有综合性的应用场景的各个系统展示的信息不集中，无法对设备进行统筹管理，展示的信息不够直观，设备相关信息展示没有主次之分，无法突出重点信息。
7.(2)管理员对设备信息查询比较繁琐，对设备管理费时费力，对系统的运维成本很高。
8.解决以上问题及缺陷的难度为：不同种类的设备与服务器通信有不同的通信协议。后台服务器需要兼容各类设备的通信协议，与各种型号不同协议的设备进行对接，接收采集其数据，并能向不同种类设备发送不同控制命令。而且每一类设备属性不同，服务器接收信息后需要做复杂的业务处理，并将信息整合返回前端页面呈现给用户。
9.解决以上问题及缺陷的意义为：将不同种类设备有机统一管理起来，并以可视化的方式将各种类设备相关信息呈现出来。极大的方便了用户对设备的信息的获取，有效的提升用户对设备的管理效率，可随时随地对设备进行管控，显著降低运维成本。


技术实现要素：

10.针对现有技术存在的问题，本发明提供了一种web应用界面可视化实现方法、系统、设备及应用。
11.本发明是这样实现的，一种web应用界面可视化实现方法，所述web应用界面可视化实现方法基于html网页，根据用户自定义配置设备展示的属性，前端通过ajax/axios动
态请求后台云端数据库，查询各类设备相关的数据并封装，以json格式返回给前端展示。
12.进一步，所述web应用界面可视化实现方法具体包括：
13.第一步，web应用系统将用户配置需要显示的设备信息保存到云端数据库；将设备相关信息保存到数据库，待设备与服务器建立通信后，可实时接收设备信息保存更新。
14.第二步，web应用系统后台根据用户自定义配置读取云端数据库中设备信息返回给前端页面；后台服务器根据用户查询条件将数据库保存的实时设备相关信息数据读取后，做一些相关业务处理，最后一json格式返回前端。
15.第三步，前端页面接收服务器后端返回的设备数据以地图坐标化方式展示设备相关信息。前端页面接收后台服务器返回的设备信息数据，以地图可视化的方式渲染呈现出来，直观的展示设备相关信息。
16.进一步，所述web应用界面可视化实现方法的前端页面通过后端业务逻辑层返回的设备数据以地图组件的方式进行显示；具体设备信息包括：设备是否在线，设备是否存在故障，设备地点坐标，设备运行时长及设备名称，ip，mac地址基础信息；前端界面根据用户自定义需要显示的设备信息进行显示；地图组件为apache echarts地理坐标或其他地图组件，在地图上根据设备类型和坐标在不同的位置以对应的设备图标显示。
17.进一步，所述web应用界面可视化实现方法的web应用系统后台经过业务逻辑处理，向云端数据库按需求存取数据，并且按需要的数据格式处理封装数据，返回给前端，供前端页面显示；
18.服务器还需要与各类设备建立连接，并与各类设备按不同的通信协议保持通信，实时接收各设备上传的数据并保存到云端数据库；服务器根据用户在页面的操作对各个设备发出相关的指令；后台接收到状态变化或刷脸记录，同步保存到云端数据库；前端页面刷新实时获取最新的数据并通过页面渲染呈现给用户；用户第一时间感知设备状态，信息变化及异常告警。
19.进一步，所述web应用界面可视化实现方法的云端数据库通过数据表和字段的形式，保存各设备的相关信息；web应用系统后台通过sql语句和条件表达式存取云端数据库中需要的数据；通过业务逻辑处理返回给前端页面显示。
20.进一步，所述web应用界面可视化实现方法的设备以地图为基础的页面可视化显示方法，包括：
21.(1)用户在web系统添加设备，配置设备相关属性；
22.(2)设备联网工作后，设备与后台系统建立通信连接；
23.(3)设备实时向后台服务器上传自身状态信息及设备获取到的数据；
24.(4)后台服务器接收到设备上传数据并保存到云端数据库对应设备表中；
25.(5)用户在页面自定义设备显示是信息，并向web应用系统后台发出请求；后台接收到请求后查询云端数据库，并按格式要求处理封装数据返回给前端；
26.(6)前端接收设备数据并解析，以地图方式渲染呈现给用户。
27.本发明的另一目的在于提供一种计算机设备，所述计算机设备包括存储器和处理器，所述存储器存储有计算机程序，所述计算机程序被所述处理器执行时，使得所述处理器执行所述web应用界面可视化实现方法的步骤。
28.本发明的另一目的在于提供一种实施所述web应用界面可视化实现方法的web应
用界面可视化实现系统，所述web应用界面可视化实现系统包括：
29.web应用系统，用于配置各类型设备信息；将各类设备信息保存到云端数据库；将用户配置需要显示的设备信息保存到云端数据库；
30.设备，包括摄像头，人脸机，梯控，与web应用系统建立连接并上传设备数据；
31.云端数据库，用于存储类设备信息和用户配置需要显示的设备信息；
32.web应用系统后台，根据用户自定义配置访问云端数据库读取设备数据，处理封装后返回前端页面并解析渲染。
33.进一步，所述web应用界面可视化实现系统的架构包括：
34.web显示层，是指移动端，pc端，小程序前端显示页面，前端页面通过后端业务逻辑层返回的设备数据以地图组件的方式进行显示；
35.业务层返回前端的设备信息数据为json格式数据；
36.业务逻辑层，是指后台服务端，是整个web系统的中枢，接收前端向后台发出的请求数据，后台经过业务逻辑处理，向云端数据库按需求存取数据，并且按需要的数据格式处理封装数据，返回给前端，供前端页面显示；服务端还需要与各类设备建立连接，并与各类设备按不同的通信协议保持通信，实时接收各设备上传的数据并保存到云端数据库；服务端根据用户在页面的操作对各个设备发出相关的指令；
37.数据访问层，为云端数据库，包括mysql，orecle，mongdb，sqlserver云端数据库类型；云端数据库通过数据表和字段的形式，保存各设备的相关信息；后台通过sql语句和条件表达式存取云端数据库中需要的数据；通过业务逻辑处理返回给前端页面显示；
38.设备层，指各类需要接入web系统管控的设备；包括监控摄像头，大屏显示器，播放器，人脸机，门禁锁，梯控设备，ic卡设备，风速测量仪，温度测量仪，湿度测量仪，颗粒物测量仪；各设备根据各自的通信协议与web后台系统建立通信，将自身获取的数据实时上传后台系统。
39.本发明的另一目的在于提供一种所述web应用界面可视化实现方法在web项目中物联网设备界面可视化显示的前后端实现中的应用。
40.结合上述的所有技术方案，本发明所具备的优点及积极效果为：本发明的web应用系统前端通过图形化组件以可视化的方式动态立体的展示各类设备相关信息，更直观将信息展示给用户。用户可以轻松获取各类设备的地理位置，运行状态，告警信息等，有效提升用户对设备信息的感知和设备的管控能力。
附图说明
41.图1是本发明实施例提供的web应用界面可视化实现方法的流程图。
42.图2是本发明实施例提供的web应用界面可视化实现系统的架构示意图；
43.图2中：101：web显示层；102：业务逻辑层；103：数据访问层；104：设备层。
44.图3是本发明实施例提供的设备以地图为基础的页面可视化显示方法的流程图。
具体实施方式
45.为了使本发明的目的、技术方案及优点更加清楚明白，以下结合实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于
限定本发明。
46.针对现有技术存在的问题，本发明提供了一种web应用界面可视化实现方法、系统、设备及应用，下面结合附图对本发明作详细的描述。
47.如图1所示，本发明提供的web应用界面可视化实现方法包括以下步骤：
48.s101：web应用系统将用户配置需要显示的设备信息保存到云端数据库；
49.s102：web应用系统后台根据用户自定义配置读取云端数据库中设备信息返回给前端页面；
50.s103：前端页面接收服务器后端返回的设备数据以地图坐标化方式展示设备相关信息。
51.本发明提供的web应用界面可视化实现方法业内的普通技术人员还可以采用其他的步骤实施，图1的本发明提供的web应用界面可视化实现方法仅仅是一个具体实施例而已。
52.本发明提供的web应用界面可视化实现系统包括：
53.web应用系统，用于配置各类型设备信息；将各类设备信息保存到云端数据库；将用户配置需要显示的设备信息保存到云端数据库；
54.设备，包括摄像头，人脸机，梯控等，与web应用系统建立连接并上传设备数据；
55.云端数据库，用于存储类设备信息和用户配置需要显示的设备信息；
56.web应用系统后台，根据用户自定义配置访问云端数据库读取设备数据，处理封装后返回前端页面并解析渲染。
57.下面结合附图对本发明的技术方案作进一步的描述。
58.本发明在基于html网页的基础上，根据用户自定义配置设备展示的属性，前端通过ajax/axios动态请求后台云端数据库，查询各类设备相关的数据并封装，以json格式返回给前端展示。
59.如图2所示，本发明实施例的web系统的架构示意图，web应用系统100包括：web显示层101，业务逻辑层102，数据访问层103，设备层104。
60.web显示层101是指移动端，pc端，小程序等前端显示页面，前端页面通过后端业务逻辑层返回的设备数据以地图组件的方式进行显示。具体设备信息包括：设备是否在线，设备是否存在故障，设备地点坐标，设备运行时长及设备名称，ip，mac地址等基础信息。前端界面根据用户自定义需要显示的设备信息进行显示。地图组件为apacheecharts地理坐标或其他地图组件，在地图上根据设备类型和坐标在不同的位置以对应的设备图标显示。业务层返回前端的设备信息数据为json格式数据，如下格式：
61.{
62."id":"1"，
63."machinename":"camera1"，
64."macaddress":"08:00:20:0a:8c:6d"，
65."ip":"192.168.30.123"，
66."devicetype":"1"，//1摄像头2大屏3人脸机...
67."online":"1"，//1在线0离线
68."map
‑
x":"116.3538"，
69."map
‑
y":"56.9236"
70.}。
71.业务逻辑层102是指后台服务端，它是整个web系统的中枢，其主要功能是接收前端向后台发出的请求数据，后台经过业务逻辑处理，向云端数据库按需求存取数据，并且按需要的数据格式处理封装数据，返回给前端，供前端页面显示。服务端还需要与各类设备建立连接，
72.并与各类设备按不同的通信协议保持通信，实时接收各设备上传的数据并保存到云端数据库。服务端可根据用户在页面的操作对各个设备发出相关的指令。如人脸机设备，人脸机与后台服务器通过tcp/http协议建立连接，前端可通过页面按钮下发人员照片及权限，人脸机接收到照片后保存到本地，供用户刷脸比对校验使用。后台实时接收人脸机向后台上传的状态及刷脸记录等信息。如果人脸机出现异常，立即上传异常信息给后台。如果人脸机因网络或其他原因长时间未向后台发送状态信息，后台自动将设备状态更新为离线状态。后台接收到状态变化或刷脸记录，同步保存到云端数据库。前端页面刷新实时获取最新的数据并通过页面渲染呈现给用户。用户可以第一时间感知设备状态，信息变化及异常告警等。其他设备，如摄像头，梯控，ic卡设备，门禁锁，继电器等也是根据自身的通信协议与后台建立通信，并实时上传状态信息。
73.数据访问层103指云端数据库，包括但不限于mysql，orecle，mongdb，sqlserver等云端数据库类型。云端数据库通过数据表和字段的形式，保存各设备的相关信息。后台通过sql语句和条件表达式存取云端数据库中需要的数据。通过业务逻辑处理返回给前端页面显示。
74.设备层104是指各类需要接入web系统管控的设备。包括但不限于监控摄像头，大屏显示器，播放器，人脸机，门禁锁，梯控设备，ic卡设备，风速测量仪，温度测量仪，湿度测量仪，颗粒物测量仪等。各设备根据各自的通信协议与web后台系统建立通信，将自身获取的数据实时上传后台系统。
75.如图3所示，本发明还提供设备以地图为基础的页面可视化显示方法，包括：
76.s201：用户在web系统添加设备，配置设备相关属性。
77.s202：设备联网工作后，设备与后台系统建立通信连接。
78.s203：设备实时向后台服务器上传自身状态信息及设备获取到的数据。
79.s204：后台服务器接收到设备上传数据并保存到云端数据库对应设备表中。
80.s205：用户在页面自定义设备显示是信息，并向后台发出请求。后台接收到请求后查询云端数据库，并按格式要求处理封装数据返回给前端。
81.s206：前端接收设备数据并解析，以地图方式渲染呈现给用户。
82.下面结合具体实施例对本发明的技术方案作进一步的描述。
83.2021年2月，央视春晚8k超高清信号在9个城市30多块8k大屏顺利落地(包括深圳福田cocopark和宝安海滨广场的两块大屏)，本方案作为技术支持方对深圳两块大屏进行了远程连接管控，同时接入播放器，摄像头设备进行统一管理。后台系统实时显示接入设备的运行状态，故障信息及地理位置。播放器播放节目由后台系统编排下发，摄像头可实时监控大屏播放内容。
84.根据以上实施例的技术方案，用户可以在页面上看到各类设备以地图坐标化的方
式展现。不同类型的设备以不同的图标展示，如摄像头是摄像头的图标，门禁锁是锁的图标，大屏是屏幕的图标。用户可以直观的看到各类设备的位置，在线状态，是否出现异常等信息。页面具有直观统计功能，可以统计各类在线设备数，离线设备数，故障设备数或其他需要呈现的数据。用户只要点击地图上的设备图标，可显示设备基本信息，点击进入看设备的详细信息，并且可以对设备进行相关操作。如摄像头，点击详情可以显示实时监控画面，也可进行回看，下载监控视频等操作。如播放器，点击可查看播放内容，也可对播放器进行控制，如暂停，亮度调节，声音调节，节目播放变更等。用户可以简单的在页面对各个设备进行查看，控制，维护等操作。显著降低了用户对设备管理的复杂度，特别是种类多样的设备管理维护成本。
85.此外，本发明的实施例需借助通用硬件平台来实现。该计算机软件产品可以存储在计算机可读存储介质中，如rom/ram等。上述指令用以计算机执行实施例中部分所述方法。应当注意，本发明的实施方式可以通过硬件、软件或者软件和硬件的结合来实现。硬件部分可以利用专用逻辑来实现；软件部分可以存储在存储器中，由适当的指令执行系统，例如微处理器或者专用设计硬件来执行。本领域的普通技术人员可以理解上述的设备和方法可以使用计算机可执行指令和/或包含在处理器控制代码中来实现，例如在诸如磁盘、cd或dvd
‑
rom的载体介质、诸如只读存储器(固件)的可编程的存储器或者诸如光学或电子信号载体的数据载体上提供了这样的代码。本发明的设备及其模块可以由诸如超大规模集成电路或门阵列、诸如逻辑芯片、晶体管等的半导体、或者诸如现场可编程门阵列、可编程逻辑设备等的可编程硬件设备的硬件电路实现，也可以用由各种类型的处理器执行的软件实现，也可以由上述硬件电路和软件的结合例如固件来实现。
86.以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，都应涵盖在本发明的保护范围之内。