[发明专利]一种web应用界面可视化实现方法、系统、设备及应用

权利要求书

1.一种web应用界面可视化实现方法，其特征在于，所述web应用界面可视化实现方法基于html网页，根据用户自定义配置设备展示的属性，前端通过ajax/axios动态请求后台云端数据库，查询各类设备相关的数据并封装，以json格式返回给前端展示。

2.如权利要求1所述的web应用界面可视化实现方法，其特征在于，所述web应用界面可视化实现方法具体包括：

第一步，web应用系统将用户配置需要显示的设备信息保存到云端数据库；

第二步，web应用系统后台根据用户自定义配置读取云端数据库中设备信息返回给前端页面；

第三步，前端页面接收服务器后端返回的设备数据以地图坐标化方式展示设备相关信息。

3.如权利要求1所述的web应用界面可视化实现方法，其特征在于，所述web应用界面可视化实现方法的前端页面通过后端业务逻辑层返回的设备数据以地图组件的方式进行显示；具体设备信息包括：设备是否在线，设备是否存在故障，设备地点坐标，设备运行时长及设备名称，IP，mac地址基础信息；前端界面根据用户自定义需要显示的设备信息进行显示；地图组件为Apache ECharts地理坐标或其他地图组件，在地图上根据设备类型和坐标在不同的位置以对应的设备图标显示。

4.如权利要求1所述的web应用界面可视化实现方法，其特征在于，所述web应用界面可视化实现方法的web应用系统后台经过业务逻辑处理，向云端数据库按需求存取数据，并且按需要的数据格式处理封装数据，返回给前端，供前端页面显示；

服务器还需要与各类设备建立连接，并与各类设备按不同的通信协议保持通信，实时接收各设备上传的数据并保存到云端数据库；服务器根据用户在页面的操作对各个设备发出相关的指令；后台接收到状态变化或刷脸记录，同步保存到云端数据库；前端页面刷新实时获取最新的数据并通过页面渲染呈现给用户；用户第一时间感知设备状态，信息变化及异常告警。

5.如权利要求1所述的web应用界面可视化实现方法，其特征在于，所述web应用界面可视化实现方法的云端数据库通过数据表和字段的形式，保存各设备的相关信息；web应用系统后台通过sql语句和条件表达式存取云端数据库中需要的数据；通过业务逻辑处理返回给前端页面显示。

6.如权利要求1所述的web应用界面可视化实现方法，其特征在于，所述web应用界面可视化实现方法的设备以地图为基础的页面可视化显示方法，包括：

(1)用户在web系统添加设备，配置设备相关属性；

(2)设备联网工作后，设备与后台系统建立通信连接；

(3)设备实时向后台服务器上传自身状态信息及设备获取到的数据；

(4)后台服务器接收到设备上传数据并保存到云端数据库对应设备表中；

(5)用户在页面自定义设备显示是信息，并向web应用系统后台发出请求；后台接收到请求后查询云端数据库，并按格式要求处理封装数据返回给前端；

(6)前端接收设备数据并解析，以地图方式渲染呈现给用户。

7.一种计算机设备，其特征在于，所述计算机设备包括存储器和处理器，所述存储器存储有计算机程序，所述计算机程序被所述处理器执行时，使得所述处理器执行权利要求1所述web应用界面可视化实现方法的步骤。

8.一种实施权利要求1～6任意一项所述web应用界面可视化实现方法的web应用界面可视化实现系统，其特征在于，所述web应用界面可视化实现系统包括：

web应用系统，用于配置各类型设备信息；将各类设备信息保存到云端数据库；将用户配置需要显示的设备信息保存到云端数据库；

设备，包括摄像头，人脸机，梯控，与web应用系统建立连接并上传设备数据；

云端数据库，用于存储类设备信息和用户配置需要显示的设备信息；

web应用系统后台，根据用户自定义配置访问云端数据库读取设备数据，处理封装后返回前端页面并解析渲染。