CN113806425A - Web application interface visualization implementation method, system, equipment and application - Google Patents
Web application interface visualization implementation method, system, equipment and application Download PDFInfo
- Publication number
- CN113806425A CN113806425A CN202111122592.0A CN202111122592A CN113806425A CN 113806425 A CN113806425 A CN 113806425A CN 202111122592 A CN202111122592 A CN 202111122592A CN 113806425 A CN113806425 A CN 113806425A
- Authority
- CN
- China
- Prior art keywords
- equipment
- data
- web application
- cloud database
- information
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 51
- 238000012800 visualization Methods 0.000 title claims abstract description 42
- 230000000007 visual effect Effects 0.000 claims abstract description 15
- 238000004891 communication Methods 0.000 claims description 22
- 238000012545 processing Methods 0.000 claims description 15
- 230000008859 change Effects 0.000 claims description 10
- 230000001680 brushing effect Effects 0.000 claims description 7
- 230000008569 process Effects 0.000 claims description 7
- 230000002159 abnormal effect Effects 0.000 claims description 6
- 238000012544 monitoring process Methods 0.000 claims description 6
- 238000004806 packaging method and process Methods 0.000 claims description 4
- 238000004590 computer program Methods 0.000 claims description 2
- 239000002245 particle Substances 0.000 claims description 2
- 238000009877 rendering Methods 0.000 claims description 2
- 230000008447 perception Effects 0.000 abstract description 2
- 238000012423 maintenance Methods 0.000 description 6
- 230000007547 defect Effects 0.000 description 3
- 238000003491 array Methods 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 238000004458 analytical method Methods 0.000 description 1
- 238000009529 body temperature measurement Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 210000001503 joint Anatomy 0.000 description 1
- 238000005259 measurement Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 239000013618 particulate matter Substances 0.000 description 1
- 230000008092 positive effect Effects 0.000 description 1
- 238000012552 review Methods 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 238000012795 verification Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/24—Querying
- G06F16/248—Presentation of query results
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/25—Integrating or interfacing systems involving database management systems
- G06F16/252—Integrating or interfacing systems involving database management systems between a Database Management System and a front-end application
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/28—Databases characterised by their database models, e.g. relational or object models
- G06F16/284—Relational databases
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/29—Geographical information databases
-
- G—PHYSICS
- G16—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR SPECIFIC APPLICATION FIELDS
- G16Y—INFORMATION AND COMMUNICATION TECHNOLOGY SPECIALLY ADAPTED FOR THE INTERNET OF THINGS [IoT]
- G16Y20/00—Information sensed or collected by the things
-
- G—PHYSICS
- G16—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR SPECIFIC APPLICATION FIELDS
- G16Y—INFORMATION AND COMMUNICATION TECHNOLOGY SPECIALLY ADAPTED FOR THE INTERNET OF THINGS [IoT]
- G16Y20/00—Information sensed or collected by the things
- G16Y20/10—Information sensed or collected by the things relating to the environment, e.g. temperature; relating to location
-
- G—PHYSICS
- G16—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR SPECIFIC APPLICATION FIELDS
- G16Y—INFORMATION AND COMMUNICATION TECHNOLOGY SPECIALLY ADAPTED FOR THE INTERNET OF THINGS [IoT]
- G16Y20/00—Information sensed or collected by the things
- G16Y20/20—Information sensed or collected by the things relating to the thing itself
-
- G—PHYSICS
- G16—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR SPECIFIC APPLICATION FIELDS
- G16Y—INFORMATION AND COMMUNICATION TECHNOLOGY SPECIALLY ADAPTED FOR THE INTERNET OF THINGS [IoT]
- G16Y20/00—Information sensed or collected by the things
- G16Y20/40—Information sensed or collected by the things relating to personal data, e.g. biometric data, records or preferences
-
- G—PHYSICS
- G16—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR SPECIFIC APPLICATION FIELDS
- G16Y—INFORMATION AND COMMUNICATION TECHNOLOGY SPECIALLY ADAPTED FOR THE INTERNET OF THINGS [IoT]
- G16Y30/00—IoT infrastructure
-
- G—PHYSICS
- G16—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR SPECIFIC APPLICATION FIELDS
- G16Y—INFORMATION AND COMMUNICATION TECHNOLOGY SPECIALLY ADAPTED FOR THE INTERNET OF THINGS [IoT]
- G16Y40/00—IoT characterised by the purpose of the information processing
- G16Y40/10—Detection; Monitoring
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Computing Systems (AREA)
- General Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Computational Linguistics (AREA)
- Remote Sensing (AREA)
- Health & Medical Sciences (AREA)
- Environmental & Geological Engineering (AREA)
- General Health & Medical Sciences (AREA)
- Toxicology (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention belongs to the technical field of application of the Internet of things, and discloses a method, a system, equipment and application for realizing visualization of a web application interface. The web application interface visualization implementation system comprises: a web application system; equipment; a cloud database; web application system background. The front end of the web application system dynamically and stereoscopically displays the related information of various devices in a visual mode through the graphical component, and more intuitively displays the information to a user. The user can easily acquire the geographic position, the running state, the alarm information and the like of various devices, and the perception of the user on the device information and the control capability of the device are effectively improved.
Description
Technical Field
The invention belongs to the technical field of application of the Internet of things, and relates to a method, a system, equipment and application for realizing visualization of a web application interface. In particular to a front-end and back-end realization method and a system for visual display of an Internet of things equipment interface in a web project.
Background
With the development of computer internet of things technology, BS (Browser/Server) architecture and web applications are widely used. More and more devices are connected with the server, and users are used to enter a web system through browser pages to manage the devices anytime and anywhere; and remotely controlling the equipment through the client. With the increasing number and kinds of devices, how to make the administrator manage these various devices on the client side better and easier is a higher requirement for current internet technicians.
In the mainstream internet of things application system, networked devices are mainly displayed in a list mode in a management page. And many device management systems are one type of device corresponding to one independent system, regardless of BS (Browser/Server) or CS (Client/Server) architecture. If the elevator control equipment corresponds to an elevator control system, the human face machine equipment corresponds to a human face machine system, the access lock corresponds to a lock system, and the camera is an independent camera management system.
For a comprehensive application scenario, too many systems, whether for user management equipment or for maintenance of the system by operation and maintenance personnel, are unacceptable. Moreover, the information displayed by each system is not centralized, the equipment cannot be managed comprehensively, the displayed information is not visual enough, the related information of the equipment is not displayed in primary and secondary points, and key information cannot be highlighted. The administrator is more complicated to inquire the equipment information, wastes time and labor for equipment management, and is higher in operation and maintenance cost of the system.
Through the above analysis, the problems and defects of the prior art are as follows:
(1) the information displayed by each system of the existing comprehensive application scene is not concentrated, the equipment cannot be managed comprehensively, the displayed information is not visual enough, the relevant information of the equipment is not displayed primarily or secondarily, and key information cannot be highlighted.
(2) The administrator is complicated to inquire the equipment information, wastes time and labor for equipment management, and has high operation and maintenance cost for the system.
The difficulty in solving the above problems and defects is: different kinds of devices communicate with the server with different communication protocols. The background server needs to be compatible with communication protocols of various devices, is in butt joint with devices of various types and different protocols, receives and collects data of the devices, and can send different control commands to different types of devices. And each kind of equipment has different attributes, and the server needs to perform complex business processing after receiving the information and integrates the information back to the front-end page to be presented to the user.
The significance of solving the problems and the defects is as follows: different kinds of equipment are organically and uniformly managed, and relevant information of the various kinds of equipment is presented in a visual mode. The user can obtain the information of the equipment conveniently, the management efficiency of the user to the equipment is effectively improved, the equipment can be managed and controlled anytime and anywhere, and the operation and maintenance cost is remarkably reduced.
Disclosure of Invention
Aiming at the problems in the prior art, the invention provides a method, a system, equipment and an application for realizing visualization of a web application interface.
The invention is realized in such a way that the web application interface visualization implementation method is based on an html webpage, the attribute of equipment display is configured according to user definition, the front end dynamically requests a background cloud database through ajax/axios, data related to various equipment is inquired and packaged, and the data is returned to the front end for display in a json format.
Further, the web application interface visualization implementation method specifically includes:
the method comprises the steps that firstly, a web application system stores equipment information which needs to be displayed and is configured by a user to a cloud database; and storing the relevant information of the equipment in a database, and receiving the information of the equipment in real time for storage and updating after the equipment establishes communication with the server.
Secondly, the web application system background reads the equipment information in the cloud database according to user-defined configuration and returns the equipment information to the front-end page; and the background server reads the relevant information data of the real-time equipment stored in the database according to the query condition of the user, performs some relevant business processing, and returns the data to the front end in a json format.
And thirdly, the front-end page receives equipment data returned by the back end of the server and displays relevant information of the equipment in a map coordinated mode. And the front-end page receives the equipment information data returned by the background server, and renders and presents the equipment information data in a map visualization mode, so that the relevant information of the equipment is visually displayed.
Further, the front-end page of the web application interface visualization implementation method is displayed in a map component mode through equipment data returned by the back-end service logic layer; the specific device information includes: whether the equipment is on line or not, whether the equipment has a fault or not, the coordinates of the location of the equipment, the running time of the equipment, the name of the equipment, and basic information of IP and mac addresses; the front-end interface displays the equipment information which needs to be displayed by user definition; the map component is Apache ECharts geographic coordinates or other map components, and is displayed on the map in different positions by corresponding device icons according to the device types and coordinates.
Further, a web application system background of the web application interface visualization implementation method accesses data to a cloud database as required through service logic processing, processes the encapsulated data according to a required data format, and returns the encapsulated data to a front end for front-end page display;
the server also needs to establish connection with various devices, keep communication with the various devices according to different communication protocols, receive data uploaded by the various devices in real time and store the data in a cloud database; the server sends out related instructions to each device according to the operation of the user on the page; the background receives the state change or the face brushing record and synchronously stores the state change or the face brushing record into a cloud database; the front-end page refreshes to obtain the latest data in real time and presents the latest data to the user through page rendering; the user can sense the state of the equipment, information change and abnormal alarm at the first time.
Further, a cloud database of the web application interface visualization implementation method stores relevant information of each device in the form of a data table and a field; the web application system background accesses the required data in the cloud database through the sql statement and the conditional expression; and returning to the front-end page display through business logic processing.
Further, the device of the web application interface visualization implementation method is a page visualization display method based on a map, and the method comprises the following steps:
(1) adding equipment in a web system by a user, and configuring relevant attributes of the equipment;
(2) after the equipment is networked, the equipment is in communication connection with a background system;
(3) the equipment uploads self state information and data acquired by the equipment to a background server in real time;
(4) the background server receives the device uploading data and stores the device uploading data in a corresponding device table of the cloud database;
(5) the user displays the information on the page self-defining equipment and sends a request to the background of the web application system; the background queries a cloud database after receiving the request, processes the encapsulated data according to format requirements and returns the encapsulated data to the front end;
(6) the front end receives and analyzes the device data, and renders the device data in a map manner for presentation to a user.
It is a further object of the invention to provide a computer device comprising a memory and a processor, the memory storing a computer program which, when executed by the processor, causes the processor to perform the steps of the web application interface visualization implementation method.
Another object of the present invention is to provide a web application interface visualization implementation system for implementing the web application interface visualization implementation method, the web application interface visualization implementation system including:
the web application system is used for configuring information of various types of equipment; storing various equipment information to a cloud database; storing the device information which needs to be displayed and configured by a user in a cloud database;
the equipment comprises a camera, a human face machine and a ladder controller, is connected with the web application system and uploads equipment data;
the cloud database is used for storing the class equipment information and the equipment information required to be displayed by user configuration;
and the web application system background accesses the cloud database to read equipment data according to user-defined configuration, and returns a front-end page after processing and packaging, and analyzes and renders.
Further, the architecture of the web application interface visualization implementation system comprises:
the web display layer is a mobile terminal, a pc terminal and an applet front-end display page, and the front-end page is displayed in a map component mode through equipment data returned by the back-end service logic layer;
the equipment information data returned by the service layer is json format data;
the business logic layer is a background server, is a central pivot of the whole web system, receives request data sent by the front end to the background, accesses the data to the cloud database as required by the background through business logic processing, processes the encapsulated data according to the required data format, and returns the encapsulated data to the front end for the front end page display; the server also needs to establish connection with various devices, keep communication with the various devices according to different communication protocols, receive data uploaded by the various devices in real time and store the data in a cloud database; the server side sends out related instructions to each device according to the operation of the user on the page;
the data access layer is a cloud database and comprises cloud database types of Mysql, Orecle, Mongdb and SqlServer; the cloud database stores relevant information of each device in the form of a data table and a field; the background accesses the required data in the cloud database through the sql statement and the conditional expression; returning to the front-end page for display through service logic processing;
the device layer refers to various devices needing to be accessed to the web system for control; the intelligent monitoring system comprises a monitoring camera, a large screen display, a player, a human face machine, an access lock, ladder control equipment, IC card equipment, a wind speed measuring instrument, a temperature measuring instrument, a humidity measuring instrument and a particle measuring instrument; and each device establishes communication with the web background system according to respective communication protocols and uploads the data acquired by the device to the background system in real time.
The invention also aims to provide application of the web application interface visualization implementation method in front-end and back-end implementation of the visualization display of the internet of things equipment interface in the web project.
By combining all the technical schemes, the invention has the advantages and positive effects that: the front end of the web application system dynamically and stereoscopically displays the related information of various devices in a visual mode through the graphical component, and more intuitively displays the information to a user. The user can easily acquire the geographic position, the running state, the alarm information and the like of various devices, and the perception of the user on the device information and the control capability of the device are effectively improved.
Drawings
Fig. 1 is a flowchart of a web application interface visualization implementation method provided by an embodiment of the present invention.
FIG. 2 is a schematic diagram of an architecture of a web application interface visualization implementation system provided by an embodiment of the present invention;
in fig. 2: 101: a web display layer; 102: a service logic layer; 103: a data access layer; 104: and (4) a device layer.
Fig. 3 is a flowchart of a map-based page visualization display method of an apparatus according to an embodiment of the present invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention more apparent, the present invention is further described in detail with reference to the following embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.
Aiming at the problems in the prior art, the invention provides a method, a system, equipment and an application for realizing visualization of a web application interface, and the invention is described in detail with reference to the accompanying drawings.
As shown in fig. 1, the web application interface visualization implementation method provided by the present invention includes the following steps:
s101: the web application system stores the device information which needs to be displayed by user configuration to a cloud database;
s102: the web application system background reads the equipment information in the cloud database according to the user-defined configuration and returns the equipment information to the front-end page;
s103: and the front-end page receives equipment data returned by the back end of the server and displays relevant information of the equipment in a map coordinated mode.
Persons of ordinary skill in the art may also use other steps to implement the web application interface visualization implementation method provided by the present invention, and the web application interface visualization implementation method provided by the present invention in fig. 1 is only one specific embodiment.
The invention provides a web application interface visualization implementation system, which comprises:
the web application system is used for configuring information of various types of equipment; storing various equipment information to a cloud database; storing the device information which needs to be displayed and configured by a user in a cloud database;
the equipment comprises a camera, a human face machine, a ladder controller and the like, establishes connection with the web application system and uploads equipment data;
the cloud database is used for storing the class equipment information and the equipment information required to be displayed by user configuration;
and the web application system background accesses the cloud database to read equipment data according to user-defined configuration, and returns a front-end page after processing and packaging, and analyzes and renders.
The technical solution of the present invention is further described below with reference to the accompanying drawings.
On the basis of html webpage, the attribute of equipment display is configured according to user definition, the front end dynamically requests a background cloud database through ajax/axios, inquires and encapsulates data related to various equipment, and returns the data to the front end for display in a json format.
As shown in fig. 2, an architecture diagram of a web system according to an embodiment of the present invention, a web application system 100 includes: a web display layer 101, a business logic layer 102, a data access layer 103 and a device layer 104.
The web display layer 101 refers to a front-end display page such as a mobile terminal, a pc terminal, an applet, and the like, and the front-end page is displayed in a map component manner through device data returned by the back-end service logic layer. The specific device information includes: whether the equipment is on line or not, whether the equipment has faults or not, the coordinates of the location of the equipment, the running time of the equipment, the name of the equipment, the IP address, the mac address and other basic information. And the front-end interface displays the equipment information which needs to be displayed by user definition. The map component is Apache ECharts geographic coordinates or other map components, and is displayed on the map in different positions by corresponding device icons according to the device types and coordinates. The equipment information data returned by the service layer to the front end is json format data, and the format is as follows:
{
"id":"1"，
"machineName":"camera1"，
"macAddress":"08:00:20:0A:8C:6D"，
"ip":"192.168.30.123"，
"deviceType": 1",// 1 camera 2 large screen 3 face machine.
"online": 1",// 1 online 0 offline
"map-x":"116.3538"，
"map-y":"56.9236"
}。
The business logic layer 102 is a background server, which is a central hub of the whole web system and mainly has the functions of receiving request data sent by a front end to a background, accessing the data from the background to a cloud database as required through business logic processing, processing and packaging the data according to a required data format, and returning the data to the front end for the front end to display on a page. The server needs to establish connection with various devices,
and the system is communicated with various devices according to different communication protocols, receives data uploaded by the devices in real time and stores the data in a cloud database. The server can send out related instructions to each device according to the operation of the user on the page. For example, the face machine is connected with the background server through a tcp/http protocol, the front end can issue a person photo and authority through a page button, and the face machine receives the photo and stores the photo locally for a user to swipe a face for comparison and verification. And the background receives the state uploaded to the background by the human face machine, the face brushing record and other information in real time. And if the human face machine is abnormal, immediately uploading abnormal information to the background. If the human face machine does not send state information to the background for a long time due to network or other reasons, the background automatically updates the equipment state to an offline state. And the background receives the state change or the face brushing record and synchronously stores the state change or the face brushing record into the cloud database. And the front-end page refreshes to acquire the latest data in real time and renders the latest data to the user through the page. The user can sense the state of the equipment, information change, abnormal alarm and the like at the first time. Other devices such as a camera, elevator control, IC card equipment, an access lock, a relay and the like are also communicated with the background according to own communication protocols and upload state information in real time.
The data access layer 103 refers to a cloud database, and includes, but is not limited to, cloud database types such as Mysql, Orecle, Mongdb, sqlServer, and the like. And the cloud database stores the relevant information of each device in the form of a data table and a field. And the background accesses the required data in the cloud database through the sql statement and the conditional expression. And returning to the front-end page display through business logic processing.
The device layer 104 refers to various devices that need to access the management and control of the web system. Including but not limited to surveillance camera head, big screen display show ware, the player, face machine, entrance guard's lock, terraced accuse equipment, IC-card equipment, anemometry appearance, temperature measurement appearance, humidity measurement appearance, particulate matter measuring apparatu etc.. And each device establishes communication with the web background system according to respective communication protocols and uploads the data acquired by the device to the background system in real time.
As shown in fig. 3, the present invention further provides a method for displaying a map-based page visually, including:
s201: and adding equipment in the web system by the user, and configuring the relevant attributes of the equipment.
S202: after the equipment is networked, the equipment is in communication connection with the background system.
S203: and the equipment uploads self state information and the data acquired by the equipment to a background server in real time.
S204: and the background server receives the equipment uploading data and stores the equipment uploading data in the corresponding equipment table of the cloud database.
S205: the user displays the information on the page self-defining equipment and sends a request to the background. And the background queries the cloud database after receiving the request, processes the encapsulated data according to the format requirement and returns the encapsulated data to the front end.
S206: the front end receives and analyzes the device data, and renders the device data in a map manner for presentation to a user.
The technical solution of the present invention is further described with reference to the following specific examples.
In the 2 nd 2021 year, the clear signal of 8K superelevation in the mother spring of 8K falls to the ground smoothly at the big screen of 30 polylith 8K in 9 cities (including two big screens in Shenzhen Futian Cocopark and Baoan beach square), and this scheme has carried out the remote connection management and control as technical support to two big screens in Shenzhen, inserts the player simultaneously, and the camera equipment carries out unified management. And the background system displays the running state, the fault information and the geographic position of the access equipment in real time. The playing programs of the player are arranged and issued by the background system, and the camera can monitor the large-screen playing content in real time.
According to the technical scheme of the embodiment, the user can see various devices on the page to display in a map coordinated mode. Different types of equipment are displayed by different icons, for example, the camera is the icon of the camera, the access lock is the icon of the lock, and the large screen is the icon of the screen. The user can visually see the positions, the online states, the abnormal information and the like of various devices. The page has a visual counting function, and can count the number of various online devices, offline devices, failure devices or other data to be presented. The user can display basic information of the device by clicking the device icon on the map, click to see detailed information of the device and perform related operation on the device. For example, the camera can display a real-time monitoring picture according to the click details, and can also perform operations such as review, monitoring video downloading and the like. For example, the player can be clicked to view the playing content, and can also be controlled, such as pause, brightness adjustment, sound adjustment, program playing change, and the like. The user can simply check, control, maintain and other operations on each device on the page. The complexity of the user to the equipment management is obviously reduced, and particularly the various equipment management and maintenance costs are reduced.
In addition, the embodiment of the invention is realized by means of a general hardware platform. The computer software product may be stored in a computer readable storage medium, such as ROM/RAM or the like. The above instructions are used for a computer to perform some of the methods described in the embodiments. It should be noted that the embodiments of the present invention can be realized by hardware, software, or a combination of software and hardware. The hardware portion may be implemented using dedicated logic; the software portions may be stored in a memory and executed by a suitable instruction execution system, such as a microprocessor or specially designed hardware. Those skilled in the art will appreciate that the apparatus and methods described above may be implemented using computer executable instructions and/or embodied in processor control code, such code being provided on a carrier medium such as a disk, CD-or DVD-ROM, programmable memory such as read only memory (firmware), or a data carrier such as an optical or electronic signal carrier, for example. The apparatus and its modules of the present invention may be implemented by hardware circuits such as very large scale integrated circuits or gate arrays, semiconductors such as logic chips, transistors, or programmable hardware devices such as field programmable gate arrays, programmable logic devices, etc., or by software executed by various types of processors, or by a combination of hardware circuits and software, e.g., firmware.
The above description is only for the purpose of illustrating the present invention and the appended claims are not to be construed as limiting the scope of the invention, which is intended to cover all modifications, equivalents and improvements that are within the spirit and scope of the invention as defined by the appended claims.
Claims (10)
1. A visual realization method of a web application interface is characterized in that the visual realization method of the web application interface is based on an html webpage, the attribute of equipment display is configured according to user definition, a front end dynamically requests a background cloud database through ajax/axios, data related to various equipment are inquired and packaged, and the data are returned to the front end for display in a json format.
2. The web application interface visualization implementation method of claim 1, wherein the web application interface visualization implementation method specifically comprises:
the method comprises the steps that firstly, a web application system stores equipment information which needs to be displayed and is configured by a user to a cloud database;
secondly, the web application system background reads the equipment information in the cloud database according to user-defined configuration and returns the equipment information to the front-end page;
and thirdly, the front-end page receives equipment data returned by the back end of the server and displays relevant information of the equipment in a map coordinated mode.
3. The web application interface visualization implementation method of claim 1, wherein the front-end page of the web application interface visualization implementation method is displayed in a map component manner through device data returned by the back-end business logic layer; the specific device information includes: whether the equipment is on line or not, whether the equipment has a fault or not, the coordinates of the location of the equipment, the running time of the equipment, the name of the equipment, and basic information of IP and mac addresses; the front-end interface displays the equipment information which needs to be displayed by user definition; the map component is Apache ECharts geographic coordinates or other map components, and is displayed on the map in different positions by corresponding device icons according to the device types and coordinates.
4. The visual realization method of the web application interface as claimed in claim 1, wherein the web application system background of the visual realization method of the web application interface is processed by the business logic, accesses data to the cloud database as required, processes the encapsulated data according to the required data format, and returns the encapsulated data to the front end for the front end page display;
the server also needs to establish connection with various devices, keep communication with the various devices according to different communication protocols, receive data uploaded by the various devices in real time and store the data in a cloud database; the server sends out related instructions to each device according to the operation of the user on the page; the background receives the state change or the face brushing record and synchronously stores the state change or the face brushing record into a cloud database; the front-end page refreshes to obtain the latest data in real time and presents the latest data to the user through page rendering; the user can sense the state of the equipment, information change and abnormal alarm at the first time.
5. The visual realization method of web application interface as claimed in claim 1, wherein the cloud database of the visual realization method of web application interface stores the relevant information of each device in the form of data table and field; the web application system background accesses the required data in the cloud database through the sql statement and the conditional expression; and returning to the front-end page display through business logic processing.
6. The web application interface visualization implementation method of claim 1, wherein the device of the web application interface visualization implementation method is a map-based page visualization display method, comprising:
(1) adding equipment in a web system by a user, and configuring relevant attributes of the equipment;
(2) after the equipment is networked, the equipment is in communication connection with a background system;
(3) the equipment uploads self state information and data acquired by the equipment to a background server in real time;
(4) the background server receives the device uploading data and stores the device uploading data in a corresponding device table of the cloud database;
(5) the user displays the information on the page self-defining equipment and sends a request to the background of the web application system; the background queries a cloud database after receiving the request, processes the encapsulated data according to format requirements and returns the encapsulated data to the front end;
(6) the front end receives and analyzes the device data, and renders the device data in a map manner for presentation to a user.
7. A computer device, characterized in that the computer device comprises a memory and a processor, the memory storing a computer program which, when executed by the processor, causes the processor to carry out the steps of the web application interface visualization implementing method of claim 1.
8. A web application interface visualization implementation system for implementing the web application interface visualization implementation method according to any one of claims 1 to 6, wherein the web application interface visualization implementation system comprises:
the web application system is used for configuring information of various types of equipment; storing various equipment information to a cloud database; storing the device information which needs to be displayed and configured by a user in a cloud database;
the equipment comprises a camera, a human face machine and a ladder controller, is connected with the web application system and uploads equipment data;
the cloud database is used for storing the class equipment information and the equipment information required to be displayed by user configuration;
and the web application system background accesses the cloud database to read equipment data according to user-defined configuration, and returns a front-end page after processing and packaging, and analyzes and renders.
9. The web application interface visualization implementation system of claim 1 wherein the architecture of the web application interface visualization implementation system comprises:
the web display layer is a mobile terminal, a pc terminal and an applet front-end display page, and the front-end page is displayed in a map component mode through equipment data returned by the back-end service logic layer;
the equipment information data returned by the service layer is json format data;
the business logic layer is a background server, is a central pivot of the whole web system, receives request data sent by the front end to the background, accesses the data to the cloud database as required by the background through business logic processing, processes the encapsulated data according to the required data format, and returns the encapsulated data to the front end for the front end page display; the server also needs to establish connection with various devices, keep communication with the various devices according to different communication protocols, receive data uploaded by the various devices in real time and store the data in a cloud database; the server side sends out related instructions to each device according to the operation of the user on the page;
the data access layer is a cloud database and comprises cloud database types of Mysql, Orecle, Mongdb and SqlServer; the cloud database stores relevant information of each device in the form of a data table and a field; the background accesses the required data in the cloud database through the sql statement and the conditional expression; returning to the front-end page for display through service logic processing;
the device layer refers to various devices needing to be accessed to the web system for control; the intelligent monitoring system comprises a monitoring camera, a large screen display, a player, a human face machine, an access lock, ladder control equipment, IC card equipment, a wind speed measuring instrument, a temperature measuring instrument, a humidity measuring instrument and a particle measuring instrument; and each device establishes communication with the web background system according to respective communication protocols and uploads the data acquired by the device to the background system in real time.
10. The application of the visual realization method of the web application interface as claimed in any one of claims 1 to 6 in the front-end realization and the back-end realization of the visual display of the equipment interface of the internet of things in the web project.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111122592.0A CN113806425A (en) | 2021-09-24 | 2021-09-24 | Web application interface visualization implementation method, system, equipment and application |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111122592.0A CN113806425A (en) | 2021-09-24 | 2021-09-24 | Web application interface visualization implementation method, system, equipment and application |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113806425A true CN113806425A (en) | 2021-12-17 |
Family
ID=78940394
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111122592.0A Pending CN113806425A (en) | 2021-09-24 | 2021-09-24 | Web application interface visualization implementation method, system, equipment and application |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113806425A (en) |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114666367A (en) * | 2022-03-21 | 2022-06-24 | 浙江大学 | General Internet of things system based on product equipment mode |
| CN114726747A (en) * | 2022-06-07 | 2022-07-08 | 武汉慧联无限科技有限公司 | Internet of things equipment management method and device, Internet of things platform and storage medium |
| CN114780188A (en) * | 2022-04-08 | 2022-07-22 | 上海迈内能源科技有限公司 | Webpage 3D model top board display method, system, terminal and storage medium |
| CN115334064A (en) * | 2022-07-26 | 2022-11-11 | 广州通则康威智能科技有限公司 | Configuration system generation method and device |
| CN115905400A (en) * | 2023-01-09 | 2023-04-04 | 东方合智数据科技(广东)有限责任公司 | Equipment data display method, device, equipment and storage medium |
| WO2023115278A1 (en) * | 2021-12-20 | 2023-06-29 | 深圳晶泰科技有限公司 | Task data processing method, system and apparatus |
| CN116366472A (en) * | 2023-04-11 | 2023-06-30 | 广东保伦电子股份有限公司 | Front-end control and server forwarding method for reducing server forwarding pressure |
| CN117234656A (en) * | 2023-11-15 | 2023-12-15 | 苏州元脑智能科技有限公司 | Method, system, equipment and storage medium for visual display of application |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106294822A (en) * | 2016-08-17 | 2017-01-04 | 国网上海市电力公司 | A kind of electric power data visualization system |
| CN106647586A (en) * | 2017-01-20 | 2017-05-10 | 重庆邮电大学 | Virtual machine room visualization monitoring management system based on B/S architecture and realization method |
| CN108200123A (en) * | 2017-12-11 | 2018-06-22 | 深圳市日联科技有限公司 | A kind of Internet of Things industry cloud monitoring system based on Security Inspection Equipments |
| CN109218416A (en) * | 2018-08-30 | 2019-01-15 | 北京赛佰特科技有限公司 | Internet of things system based on cloud platform |
| CN109471629A (en) * | 2018-10-31 | 2019-03-15 | 国网河南省电力公司焦作供电公司 | A kind of front end system and design method based on Internet of Things cloud platform |
| CN110609681A (en) * | 2018-06-14 | 2019-12-24 | 北京京东尚科信息技术有限公司 | System, method, device and medium for visually configuring and generating WEB application |
| CN111831293A (en) * | 2020-07-06 | 2020-10-27 | 统一通信（苏州）有限公司 | Internet of things supporting software cloud rapid deployment method |
-
2021
- 2021-09-24 CN CN202111122592.0A patent/CN113806425A/en active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106294822A (en) * | 2016-08-17 | 2017-01-04 | 国网上海市电力公司 | A kind of electric power data visualization system |
| CN106647586A (en) * | 2017-01-20 | 2017-05-10 | 重庆邮电大学 | Virtual machine room visualization monitoring management system based on B/S architecture and realization method |
| CN108200123A (en) * | 2017-12-11 | 2018-06-22 | 深圳市日联科技有限公司 | A kind of Internet of Things industry cloud monitoring system based on Security Inspection Equipments |
| CN110609681A (en) * | 2018-06-14 | 2019-12-24 | 北京京东尚科信息技术有限公司 | System, method, device and medium for visually configuring and generating WEB application |
| CN109218416A (en) * | 2018-08-30 | 2019-01-15 | 北京赛佰特科技有限公司 | Internet of things system based on cloud platform |
| CN109471629A (en) * | 2018-10-31 | 2019-03-15 | 国网河南省电力公司焦作供电公司 | A kind of front end system and design method based on Internet of Things cloud platform |
| CN111831293A (en) * | 2020-07-06 | 2020-10-27 | 统一通信（苏州）有限公司 | Internet of things supporting software cloud rapid deployment method |
Cited By (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2023115278A1 (en) * | 2021-12-20 | 2023-06-29 | 深圳晶泰科技有限公司 | Task data processing method, system and apparatus |
| CN114666367A (en) * | 2022-03-21 | 2022-06-24 | 浙江大学 | General Internet of things system based on product equipment mode |
| CN114780188A (en) * | 2022-04-08 | 2022-07-22 | 上海迈内能源科技有限公司 | Webpage 3D model top board display method, system, terminal and storage medium |
| CN114780188B (en) * | 2022-04-08 | 2023-09-01 | 上海迈内能源科技有限公司 | Webpage 3D model top display method, system, terminal and storage medium |
| CN114726747A (en) * | 2022-06-07 | 2022-07-08 | 武汉慧联无限科技有限公司 | Internet of things equipment management method and device, Internet of things platform and storage medium |
| CN115334064A (en) * | 2022-07-26 | 2022-11-11 | 广州通则康威智能科技有限公司 | Configuration system generation method and device |
| CN115905400A (en) * | 2023-01-09 | 2023-04-04 | 东方合智数据科技(广东)有限责任公司 | Equipment data display method, device, equipment and storage medium |
| CN116366472A (en) * | 2023-04-11 | 2023-06-30 | 广东保伦电子股份有限公司 | Front-end control and server forwarding method for reducing server forwarding pressure |
| CN116366472B (en) * | 2023-04-11 | 2023-10-13 | 广东保伦电子股份有限公司 | Front-end control and server forwarding method for reducing server forwarding pressure |
| CN117234656A (en) * | 2023-11-15 | 2023-12-15 | 苏州元脑智能科技有限公司 | Method, system, equipment and storage medium for visual display of application |
| CN117234656B (en) * | 2023-11-15 | 2024-02-20 | 苏州元脑智能科技有限公司 | Method, system, equipment and storage medium for visual display of application |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113806425A (en) | Web application interface visualization implementation method, system, equipment and application | |
| CN106647586B (en) | A kind of virtual computer room visual control management system and method based on B/S framework | |
| CN110795148B (en) | Method and device for generating layout file and electronic equipment | |
| CN110771098B (en) | Structured architecture for temporal graph storage and retrieval | |
| CN107295064B (en) | Web-based configuration type remote monitoring method, electronic equipment and storage medium | |
| CN108255127B (en) | Industrial field remote monitoring management system and method based on industrial human-computer interface | |
| US8321806B2 (en) | Visualization of process control data | |
| CA3009354C (en) | Event stream processing cluster manager | |
| CN104797992B (en) | System for monitoring multiple building automation systems | |
| US9661064B2 (en) | Systems and methods for deploying legacy software in the cloud | |
| CN112929602B (en) | Data monitoring method and device based on image processing and related equipment | |
| US9628578B2 (en) | System and method for sharing data stored in a database | |
| CN114787875A (en) | System and method for using virtual or augmented reality with data center operations or cloud infrastructure | |
| CN112073474A (en) | Js-based intelligent data center management method and system | |
| CN104125279A (en) | LED (light-emitting diode) display terminal monitoring system | |
| CN109582405A (en) | Use the safety survey of tabulating equipment frame | |
| KR20230085389A (en) | Apparatus and method for providing digital twin service using computer graphics | |
| Atsali et al. | A mixed reality 3D system for the integration of X3DoM graphics with real-time IoT data | |
| US20140351408A1 (en) | Utilizing augmented reality for locating computer hardware associated to a reported incident | |
| JP6015881B2 (en) | Device that displays trends related to process variables | |
| CN117687546A (en) | GIS-based application management method for Internet of things | |
| CN103595796A (en) | Dynamic monitoring method and system based on network | |
| CN114390093B (en) | Virtual gateway simulation system | |
| CN115546435A (en) | Communication resource monitoring and early warning system and method based on three-dimensional model, electronic device and storage medium | |
| CN103997542A (en) | Multi-sensor and multi-device monitoring system based on cloud storage |
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 | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20211217 |