WO2024022214A1 - 信息显示方法、装置、存储介质及电子设备 - Google Patents

信息显示方法、装置、存储介质及电子设备 Download PDF

Info

Publication number
WO2024022214A1
WO2024022214A1 PCT/CN2023/108362 CN2023108362W WO2024022214A1 WO 2024022214 A1 WO2024022214 A1 WO 2024022214A1 CN 2023108362 W CN2023108362 W CN 2023108362W WO 2024022214 A1 WO2024022214 A1 WO 2024022214A1
Authority
WO
WIPO (PCT)
Prior art keywords
node
level
data
current page
geographical
Prior art date
Application number
PCT/CN2023/108362
Other languages
English (en)
French (fr)
Inventor
张旻
Original Assignee
京东方科技集团股份有限公司
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 京东方科技集团股份有限公司 filed Critical 京东方科技集团股份有限公司
Publication of WO2024022214A1 publication Critical patent/WO2024022214A1/zh

Links

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/70—Information retrieval; Database structures therefor; File system structures therefor of video data
    • G06F16/74—Browsing; Visualisation therefor
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/70—Information retrieval; Database structures therefor; File system structures therefor of video data
    • G06F16/78—Retrieval characterised by using metadata, e.g. metadata not derived from the content or metadata generated manually
    • G06F16/787—Retrieval characterised by using metadata, e.g. metadata not derived from the content or metadata generated manually using geographical or spatial information, e.g. location
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input 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/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04842—Selection of displayed objects or displayed text elements

Definitions

  • the present disclosure relates to the field of computer technology, and specifically, to an information display method, an information display device, a computer-readable storage medium, and an electronic device.
  • the present disclosure provides an information display method, an information display device, a computer-readable storage medium, and an electronic device.
  • the present disclosure provides an information display method, including:
  • first-level nodes include at least one of first-level geographic nodes and first-level device nodes;
  • the second-level node When receiving the user's trigger operation on the first-level target geographical node, display the second-level node in the current page, and the second-level node includes at least one of a second-level geographical node and a second-level device node. ;
  • the third-level device node When receiving the user's triggering operation on the second-level target geographical node, the third-level device node is displayed on the current page.
  • the basic data required by the device display component includes at least geographic node data, subtree data corresponding to the geographic node data, and device node data;
  • the geographical node data includes the first-level geographical node data and the second-level geographical node data
  • the sub-tree data is the second-level geographical node data and the second-level equipment node data;
  • the subtree data is the third-level equipment node data
  • the device node data includes the first-level device node data, the second-level device node data, and the third-level device node data.
  • displaying first-level nodes on the current page according to the basic data includes:
  • the method further includes:
  • the current page is rendered according to the target device node data to display a device node list composed of target device nodes in the current page.
  • the method further includes:
  • the third-level target device node data is passed into the first execution function of the device display component, and the third-level target device node data at least includes The unique identifier of the third-level target device node;
  • the current page is rendered according to the third-level target device node data to set the third-level target device node in the current page to a selected state.
  • the method further includes:
  • the third-level target device node in the current page is set to a playing state.
  • the method further includes:
  • the third-level target device node data is passed into the second execution function of the device display component, and the third-level target device node data at least includes The unique identifier and current check status of the third-level target device node;
  • the third-level target device node in the current page is set to a checked state according to the assigned checked device identification set.
  • the current page includes multiple data display interfaces, and the data display interface is used to display video stream data corresponding to device nodes at each level; displayed in the current page After the third level device node, the method also includes:
  • the device display component renders the current page according to the parameter value in the node selection parameter set to set the target device node in the current page to a selected state.
  • the method further includes:
  • the device display component renders the current page according to the parameter value in the node play parameter set to set the target device node in the current page to a play state.
  • the method further includes:
  • the device display component renders the current page according to the parameter value in the node check parameter set to set the target device node in the current page to a checked state.
  • the present disclosure provides an information display device, including:
  • the first information display module is used to obtain the basic data required by the device display component, and display first-level nodes on the current page based on the basic data.
  • the first-level nodes include first-level geographical nodes and first-level devices. At least one of the nodes;
  • the second information display module is configured to display a second-level node in the current page when receiving a user's triggering operation on a first-level target geographical node.
  • the second-level node includes a second-level geographical node and a second-level geographical node. At least one of the hierarchical device nodes;
  • the third information display module is configured to display the third-level device node in the current page when receiving the user's triggering operation on the second-level target geographical node.
  • the present disclosure provides a computer-readable storage medium on which a computer program is stored.
  • a computer program is stored on which a computer program is stored.
  • the computer program is executed by a processor, any one of the methods described above is implemented.
  • the present disclosure provides an electronic device, including: a processor; and a memory for storing executable instructions of the processor; wherein the processor is configured to perform any of the above by executing the executable instructions. method described.
  • Figure 1 shows a schematic diagram of an exemplary system architecture to which the information display method and device according to embodiments of the present disclosure can be applied;
  • Figure 2 schematically shows a flow chart of an information display method according to an embodiment of the present disclosure
  • Figure 3 schematically shows a schematic diagram of a page according to an embodiment of the present disclosure
  • Figure 4 schematically shows another page schematic diagram according to an embodiment of the present disclosure
  • Figure 5 schematically shows another page schematic diagram according to an embodiment of the present disclosure
  • Figure 6 schematically shows a page schematic diagram according to a specific embodiment of the present disclosure
  • Figure 7 schematically shows a schematic diagram of a page for implementing a search function according to a specific embodiment of the present disclosure
  • Figure 8 schematically shows a flow chart for a device node to implement a selection function according to an embodiment of the present disclosure
  • Figure 9 schematically shows a schematic page diagram of a device node implementing a selection function according to a specific embodiment of the present disclosure
  • Figure 10 schematically shows a schematic page diagram of another device node implementing the selection function according to a specific embodiment of the present disclosure
  • Figure 11 schematically shows a schematic page diagram of a device node implementing the play state function according to a specific embodiment of the present disclosure
  • Figure 12 schematically shows a schematic page diagram of another device node implementing the play state function according to a specific embodiment of the present disclosure
  • Figure 13 schematically shows a flow chart for a device node to implement a check function according to an embodiment of the present disclosure
  • Figure 14 schematically shows a schematic page diagram of a device node implementing a check function according to a specific embodiment of the present disclosure
  • Figure 15 schematically shows a schematic diagram of a page for implementing a check function on another device node according to a specific embodiment of the present disclosure
  • Figure 16 schematically shows a block diagram of an information display device according to one embodiment of the present disclosure
  • FIG. 17 schematically shows a structural diagram of a computer system suitable for implementing an electronic device according to an embodiment of the present disclosure.
  • Example embodiments will now be described more fully with reference to the accompanying drawings.
  • Example embodiments may, however, be embodied in various forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the concepts of the example embodiments.
  • the described features, structures or characteristics may be combined in any suitable manner in one or more embodiments.
  • numerous specific details are provided to provide a thorough understanding of embodiments of the disclosure.
  • those skilled in the art will appreciate that the technical solutions of the present disclosure may be practiced without one or more of the specific details described, or other methods, components, devices, steps, etc. may be adopted.
  • well-known technical solutions have not been shown or described in detail to avoid obscuring aspects of the disclosure.
  • FIG. 1 shows a schematic diagram of the system architecture of an exemplary application environment in which an information display method and device according to embodiments of the present disclosure can be applied.
  • the system architecture 100 may include one or more of terminal devices 101, 102, 103, a network 104 and a server 105.
  • the network 104 is a medium used to provide communication links between the terminal devices 101, 102, 103 and the server 105.
  • Network 104 may include various connection types, such as wired, wireless communication links, or fiber optic cables, among others.
  • the terminal devices 101, 102, and 103 can be various electronic devices, including but not limited to desktop computers, portable computers, smart phones, tablets, etc., and are used to provide user interfaces for page display.
  • a client such as a browser
  • the page can be browsed through the browser client.
  • the browser on the terminal device can be used to: obtain the basic data required by the device display component, and display the first-level node on the current page based on the basic data; receive the user's trigger operation on the first-level target geographical node When the user triggers the second-level target geographic node, the third-level device node is displayed on the current page.
  • the number of terminal devices, networks and servers in Figure 1 is only illustrative. Depending on implementation needs, there can be any number of end devices, networks, and servers.
  • the server 105 may be one server, a server cluster composed of multiple servers, or a cloud computing platform or virtualization center.
  • the server 105 can be used to provide background services for page components that support page display, etc.
  • the information display method provided by the embodiment of the present disclosure can be executed by one or more of the terminal devices 101, 102, and 103.
  • the information display device can be provided in the terminal devices 101, 102, and 103, for example, by the terminal device After execution, the first-level geographical node, the first-level equipment node, the second-level geographical node, the second-level equipment node and the third-level equipment node can be displayed on the display screen of the terminal device.
  • No special restrictions are made.
  • the scenario of park management is taken as an example for explanation.
  • staff cannot view all monitoring images at once, and they cannot directly obtain the geographical information of monitoring devices and monitoring images, making it inconvenient for staff to view monitoring images at specific locations.
  • the information display method may include steps S210 to S230:
  • Step S210 Obtain the basic data required by the device display component, and display first-level nodes on the current page based on the basic data.
  • the first-level nodes include at least one of first-level geographical nodes and first-level device nodes. kind;
  • Step S220 When receiving the user's triggering operation on the first-level target geographical node, display the second-level node in the current page.
  • the second-level node includes the second-level geographical node and the second-level device node. at least one;
  • Step S230 When receiving the user's triggering operation on the second-level target geographical node, display the third-level device node in the current page.
  • first-level nodes are displayed on the current page based on the basic data.
  • the first-level nodes include first-level geographical nodes and third-level geographical nodes. At least one of the first-level device nodes; when receiving the user's trigger operation on the first-level target geographical node, display the second-level node in the current page, and the second-level node includes the second-level geographical node and the second-level device At least one of the nodes; when receiving the user's trigger operation on the second-level target geographical node, display the third-level device node in the current page.
  • the present disclosure can realize multi-level node display with geographical information, facilitate business personnel to view target devices according to geographical levels, improve device query efficiency, and thereby improve user experience.
  • step S210 obtain basic data required by the device display component, and display first-level nodes on the current page based on the basic data.
  • the first-level nodes include first-level geographical nodes and first-level device nodes. At least one.
  • this disclosure obtains a device display component with geographical information based on the tree component in the Element page component library.
  • This device display component multiple levels of nodes can be displayed.
  • the nodes at each level can include geographical information.
  • Nodes and device nodes can also include only geographical nodes or only device nodes.
  • the display of nodes at each level depends on the geographical structure of the park and the distribution of all monitoring devices in the park, which is not specifically limited in this disclosure. Among them, the level to which each node belongs corresponds to the level of the park's geographical structure. For example, the level of the geographical structure of a certain park is from high to low: park, area and building.
  • the nodes at the park level do not need to be displayed on the current page. data, and combine all the data in the park
  • the area serves as the first-level node
  • the buildings in each area serve as the second-level node
  • the monitoring equipment directly attached to all floors and rooms in each building serves as the third-level node. It can be seen that regions and buildings are geographical nodes, and monitoring devices are equipment nodes.
  • monitoring equipment can directly belong to any level of geographical structure.
  • the monitoring equipment belongs to area B, but the monitoring equipment does not belong to any building under area B.
  • the equipment node corresponding to monitoring device A and the geographical node corresponding to the building under area B belong to the same level, and both are second-level nodes.
  • the first-level equipment nodes directly belong to the geographical nodes corresponding to the campus selected by the staff
  • the second-level equipment nodes directly belong to the geographical nodes corresponding to the area where the equipment is located
  • the third-level equipment nodes directly belong to the monitoring equipment of the building where the equipment is located.
  • This disclosure can display all monitoring devices configured with geographical locations in the park by laying out multi-level device nodes.
  • the basic data required by the device display component can be obtained from the backend server through the background interface.
  • the basic data required by the device display component may include at least geographic node data, subtree data corresponding to the geographic node data, and device node data.
  • the geographical node data includes first-level geographical node data and second-level geographical node data.
  • the corresponding subtree data is second-level geographical node data and second-level equipment.
  • Node data when the geographical node data is the second-level geographical node data, the corresponding subtree data is the third-level equipment node data.
  • the device node data includes first-level device node data, second-level device node data and third-level device node data.
  • each geographic node data may at least include display text content, that is, a label field
  • the subtree data corresponding to each geographic node data is the underlying data of each geographic node, that is, a children field.
  • the lower-level data of a regional node is the building node data in the area and the equipment node data directly belonging to the area.
  • the regional node can be called the parent node, and the building nodes and equipment nodes in the lower-level data are called children.
  • node For example, for area node "1", the label field in the node data of this node is area name: 1, and the subtree data corresponding to this area node is the building nodes and equipment nodes directly belonging to this area.
  • the label field in the node data is the building name: 1.1
  • the subtree data corresponding to the building node is all the equipment nodes directly belonging to the building.
  • the label in the node data is the device name: 1.1.1
  • the device node has no corresponding subtree data.
  • the present disclosure can use lazy loading to render the current page based on the first-level geographical node data and the first-level equipment node data in the basic data, so as to display the first-level geographical node and the first-level equipment node on the current page.
  • the first-layer geographical node may be a regional node
  • the first-layer device node may be a device node directly belonging to the campus.
  • Figure 3 a schematic diagram of the current page is given. This page includes a device search box for querying monitoring devices based on device names.
  • the page also includes multiple areas within the park selected by the staff, such as Area 1, Area 2, and Area 3, as well as areas directly belonging to the park. Multiple monitoring devices, such as device 1 and device 2.
  • each device node includes two parts of icons.
  • Icon 1 is a dot. When the dot is displayed in different colors, it represents different states.
  • Icon 2 is a geographical location icon. For example, when the dot on the left side of device 1 is green, it means that device 1 is Previously, it was in the online state. When the dot is gray, it means that device 1 is currently offline. It can be understood that the icon 1 can be set to other shapes and other colors to represent the online/offline status of the device according to the actual needs of the user, and icons of other styles can also be obtained from the background interface as icon 2 to represent the geographical location. There is no specific limit on this.
  • step S220 when receiving the user's trigger operation on the first-level target geographical node, the second-level node is displayed on the current page.
  • the second-level node includes a second-level geographical node and a second-level device node. at least one of them.
  • the page includes multiple regional nodes and device nodes.
  • the first-level target geographical node can be a certain regional node in Figure 3
  • the triggering operation can be the user's click operation on the current page.
  • the current page can be rendered based on the second-level geographical node data and second-level equipment node data directly belonging to the area in the basic data to display on the current page.
  • Second-level geographical nodes and second-level equipment nodes may be building nodes, and the second-level equipment nodes may be equipment nodes directly belonging to the region.
  • the current page is converted to the page diagram shown in Figure 4.
  • This page includes a device search box, multiple areas in the park selected by the staff (area 1, area 2, and area 3), multiple monitoring devices directly belonging to the park (device 1, device 2), and multiple monitoring devices directly belonging to area 1. Multiple buildings (Building 1, Building 2 and Building 3) and multiple monitoring devices (Device 3, Device 4) directly belonging to area 1.
  • the icons on the left side of each device node are the same as Figure 3, and will not be described in detail here.
  • step S230 when the user's triggering operation on the second-level target geographical node is received, the third-level device node is displayed on the current page.
  • the page When the current page is as shown in Figure 4, the page includes multiple area nodes, building nodes, and equipment nodes.
  • the second-level target geographical node can be a certain building node in Figure 4, and the triggering operation can be the user's click operation on the current page.
  • the current page can be rendered based on the third-level equipment node data directly belonging to the building in the basic data to display at least one third-level device in the current page.
  • Device node In the exemplary embodiment of the present disclosure, the third-layer device nodes may be device nodes directly belonging to the building, and device nodes directly belonging to all floors and rooms in the building.
  • the current page is converted to the page diagram shown in Figure 5.
  • This page includes a device search box, the first-level data for multiple areas in the park selected by staff (area 1, area 2, and area 3), and multiple monitoring devices (device 1, device 2) directly belonging to the park.
  • the second layer of data includes multiple buildings directly belonging to area 1 (building 1, building 2 and building 3) and multiple monitoring devices (device 3, device 4) directly belonging to area 1.
  • the third layer of data They are multiple monitoring devices (device 5, device 6 and device 7) directly belonging to building 2 and/or directly belonging to all floors and rooms in building 2.
  • the icons on the left side of each device node are the same as Figure 3, and will not be described in detail here.
  • FIG. 6 a schematic diagram of the page in a specific scenario is given.
  • the park selected by the staff is "New Park".
  • the page includes a device search box, multiple regional nodes (east side of the new park, west side of the new park, and south side of the new park), and multiple devices directly under the park.
  • Nodes park gate, live broadcast base camera
  • multiple building nodes directly under the east side of the new park A office building, B hotel and C apartment
  • multiple equipment nodes directly under C apartment B2 floor garage north passage, B1 1st floor driveway and 3rd floor north side stairs).
  • This disclosure implements multi-level node display with geographical information, and the device name of each device node is the geographical location of the monitoring device, which facilitates business personnel to view target devices according to the geographical level, improves device query efficiency, and thereby improves user experience.
  • geographical node data and device node data come from different background interfaces, so different types of node data have different data formats. Before displaying each node on the current page, the data format of each type of node data needs to be unified.
  • the isLeaf field can be added to the node data of each geographical node, so that each geographical node has an expand/collapse function, and the effect of the expand/fold function As shown in Figure 5 expand button.
  • the value of the isLeaf field is true, it indicates that the node is a device node, and there is no need to expand/collapse the function; when the value of the isLeaf field is false, it indicates that the node is a geographical node, and the expand/collapse function can be added to the node. It is understandable that the isLeaf field will take effect when the node is initialized. If the geographical node does not contain a subtree, after expanding the node, the Element tree component will automatically hide the expand/collapse button of the node, even if the isLeaf field in the node data has a value. is false.
  • the function of selecting and checking equipment nodes can be provided, and this function cannot select and check geographical nodes.
  • a disabeled field can be added to the node data of each node. When the value of the disabeld field is true, it indicates that the node cannot be selected or checked. When the value of the disabeld field is false, it indicates that the node can be selected or checked.
  • the disabeld field supports function configuration, and the return value of the configuration function must be true or false.
  • the effect of the selection function of the device node is shown in Figure 9 and Figure 10, and the effect of the check function of the device node is shown in Figure 14 and Figure 15.
  • the origin field can be designed for the node data of each node. This field is used to save the complete data of all device nodes returned by the background interface.
  • each device node When displaying each device node through the device display component, it can also provide the function of marking the online/offline status of the device. For example, an online field can be added to the node data of each device node. When the value of the online field is true, it means that the node is online. When the value of the online field is false, it means that the node is offline. Furthermore, in order to display the device icon corresponding to the device's online/offline status, you can add an icon dictionary to the device node and save the icon data. The effect of displaying the online/offline status of the device is the icon 1 in Figure 3.
  • an online field can be added to the node data of each device node.
  • the processing shown in Table 1 can be performed to unify the data formats of each type of node data, and the rendering result is as shown in Figure 6 Show the current page.
  • Table 1 shows three node types, namely regional nodes, building nodes and equipment nodes. Since both regional nodes and building nodes are geographical nodes, the data formats of the two can be processed in the same way.
  • the original data of the area node includes the areaName field (such as the east side of the new campus), the areaNo field (such as 418909909) and other data.
  • the original data of the area node can be unified into the label field (the east side of the new campus). , children field, isLeaf field (false), disabled field (true), zoneNo field (such as 7) and areaNo field (418909909).
  • the original data of the building node includes the upper node information of the building node, such as zoneNo field and areaNo field.
  • the original data of the device node includes the deviceName field (such as the north passage of the B2 garage), onlilne field (true/false), icon image data and other data, etc.
  • the original data of the device node can be unified
  • isLeaf field true
  • disabled field fralse/configuration function return value
  • onlilne field true/false
  • icon picture data and origin field other data of the device node can be Contains upper-layer node information of the device node, such as zoneNo field, areaNo field, buildingNo field, etc.
  • each type of node By unifying the data formats of different types of node data, each type of node has a unified data structure, and then when displaying various types of nodes on the page, each type of node has a specific display form and function, so staff can intuitively Obtain the geographical information of each node and understand the functions of each node. The entire page is beautiful. You can view the target device by performing simple operations based on this page, which improves the user experience.
  • the present disclosure can display hierarchical geographical levels through the device display component, and the last layer is the monitoring equipment installed in each geographical location.
  • the device display component can meet the needs of searching for monitoring equipment, selecting monitoring equipment to play video streams, and checking monitoring equipment for configuration.
  • the target device node data related to the input data in the basic data can be obtained, and Render the current page according to the target device node data to display a device node list consisting of the target device nodes in the current page.
  • the search function implemented in this example does not require clicking a search button, but instead requests search results in real time based on data entered by the user. In order to avoid users entering text too quickly and generating a large number of useless requests, which will affect system performance and user experience, you can search based on the user's input data within a preset time period.
  • the preset time period may refer to a specific time period after the user stops typing text. For example, search results can be requested 800 milliseconds after the user stops typing text.
  • the current page is as shown in Figure 5
  • multiple third-level device nodes are displayed on the page.
  • the target device node data related to the text T in the basic data can be obtained, and a device node list is displayed on the current page.
  • Each monitoring device in the list contains the text T in its device name.
  • the target device can be directly searched for through the device search box.
  • the target device can be searched for through the device search box.
  • This disclosure does not limit this.
  • a schematic diagram of a page containing a device node list is given.
  • the device node list is displayed on the page, and the device node list of each monitoring device is displayed on the page.
  • the device names all contain the text "1", such as device 1, device 10, device 11, etc.
  • the search scope of the device search function is monitoring devices in all geographical locations.
  • Each monitoring device in the device node list obtained by searching for the target device can also be called a device node, and the icon and text style of the device node are the same as Device nodes displayed through the device display component have the same icon and text styles.
  • the equipment node list does not have a hierarchical structure and does not include geographical nodes, such as area nodes and building nodes.
  • the device display component of the present disclosure can also be used in pages such as video monitoring and video playback. That is, the device display component is referenced in the page code. Correspondingly, the page using the device display component can be called the parent, and the device display group can be called the parent. The items are called children.
  • the usual business requirement of the video surveillance page is: when a certain surveillance device is selected, the real-time monitoring screen of the surveillance device is played. Among them, the device display component needs to transfer the data of the monitoring device to the video monitoring page, and the video monitoring page obtains and plays the video stream of the monitoring device. It is understandable that only one device node can be selected at the same time through the device display component, that is, only one device node can be set to the selected state at the same time.
  • the device node selection function can be implemented according to steps S810 to S840.
  • Step S810 When receiving the user's selection operation on the third-level target device node, transfer the third-level target device node data to the first execution function of the device display component.
  • the third-level target device node The data at least includes the unique identification of the third-level target device node.
  • the device display component in this disclosure needs to have variables that store the data of the selected device node, so as to realize the display status of the selected device node.
  • the device display component needs to be able to receive parent data and set the selection effect of the corresponding device node. For example, as shown in Table 2, when the parent page controls the device display component to implement the device node selection function, the selectedNode parameter and selectedKey parameter can be passed into the device display component, and the device display component is used internally to save the selected device node data.
  • the variable is the device selected variable deviceSelected.
  • the first execution function of the device display component is the handleNodeClick function. This function can be executed when the user clicks on the device node.
  • the third-level target device node is "device 5" shown in Figure 5, and when the user clicks on the device node, the node data of the device node is passed into the handleNodeClick function.
  • Step S820 Use the first execution function to assign the device selection variable of the device display component to the third-level target device node data.
  • the handleNodeClick function can be used to set the value of the device selection variable deviceSelected to the node data of the device node in the point. For example, you can set the value of the device selected variable deviceSelected to the node data of "device 5".
  • Step S830 Compare the unique identifier of each device node in the current page with the unique identifier of the device selected variable, respectively, to determine all the unique identifiers in the current page that are the same as the unique identifier of the device selected variable. Describe the third-level target device node.
  • the unique identifier of the device selected variable deviceSelected becomes the unique identifier of "device 5". Then, the unique identifiers of all device nodes shown in Figure 5 can be compared with the unique identifier of the device selected variable deviceSelected, respectively, to determine the target device node whose unique identifier is the same as the unique identifier of the device selected variable in the current page.
  • the value of the unique identifier is determined by the selectedKey parameter, and the default value of the selectedKey parameter is 'id'. Therefore, the id field value of all device nodes can be compared with the id field value of the device selected variable deviceSelected. If the value of the selectedKey parameter is 'deviceId', the deviceId field value of all device nodes can be compared with the deviceId field value of the device selected variable deviceSelected.
  • Step S840 Render the current page according to the third-level target device node data to set the third-level target device node in the current page to a selected state.
  • the data of the device node can be passed to the parent page, so that the parent page can adjust the page display based on the data of the device node.
  • the current page can also be rendered based on the data of the device node to set the device node to the selected state. For example, the selected device node can be highlighted, bolded, etc. to indicate that the device node is currently selected. Referring to Figure 9, a schematic diagram of the page for setting "Device 5" to the selected state is given.
  • the selection function of each device node in the device node list shown in Figure 7 can also be implemented. For example, when the user clicks "Device 10" in the device node list, the node data of the device node can be passed into the handleNodeClick function, and "Device 10" is set to the selected state based on this function.
  • the specific processing process and step S810 Step S840 is similar and will not be described in detail here. Referring to Figure 10, a schematic diagram of the page for setting "device 10" to the selected state is given.
  • This disclosure can realize the selection function of monitoring equipment by configuring different parameters according to business needs.
  • the current page may also include multiple data display interfaces, and each data display interface is used to display video stream data corresponding to the device node.
  • the current page is a video monitoring page.
  • the video monitoring page includes a data display page for displaying video stream data corresponding to device nodes.
  • the data display page has video screen 1 and 5 screens that need to be configured as shown in Figure 11.
  • the node selection parameter set corresponding to the target data display interface can be passed to the device display component, and the device display component will be based on the node selection parameters.
  • the parameter values in the collection render the current page to set the target device node in the current page to the selected state.
  • the node selection parameter set may include selectedKey variables and selectedNode parameters.
  • the target data display interface may be video screen 1.
  • the node selection reference set corresponding to video screen 1 may be passed to the device display component.
  • the parent page only needs to pass the selectedNode parameter to the device display component, selectedNode The parameter contains a variable named 'id'.
  • the default value of the selectedKey variable is not 'id', that is, the selected device data owned by the parent page does not contain the id field, the parent page needs to first pass the selectedKey parameter to the device display component to specify the unique identifier of the device. The variable name. Secondly, the selectedNode parameter needs to be passed.
  • the selectedNode can contain a variable V, and the name of V is the selectedKey variable value. For example, if the value of the selectedKey variable is 'deviceId', the selectedNode parameter must contain the value of 'deviceId', in the form: ⁇ deviceId:1 ⁇ .
  • this disclosure can meet the business requirements of the click-to-select monitoring device on the video surveillance page.
  • the third-level target device node data can be transferred to the current page, and the third-level target device node data can be transferred to the current page.
  • the hierarchical target device node data may include at least a unique identification of the third hierarchical target device node. If the current page can obtain the corresponding video stream data based on the third-level target device node data, it can receive the unique identifier of the third-level target device node sent by the current page. Finally, when the unique identifier of the third-level target device node exists in the playback device identification set of the device display component, the third-level target device node in the current page can be set to the playback state.
  • the node data of the device node can be passed to the parent page, and the parent page can obtain the video stream of the device node and play it. Therefore, the data of the playback device can be The parent page is saved.
  • Table 3 when the parent page controls the device display component to implement the playback function of the device node, the device display component only needs to provide the function of receiving the data of the playback device and marking the corresponding device node as a playback state. For example, you can pass the playingIds parameter and the playingKey parameter into the device display component.
  • the playingIds parameter is a set of unique identifiers of the playing device, such as [1, 2, 3], where 1, 2, and 3 are the corresponding unique identifiers of the playing device. Uniquely identifies.
  • the playingKey parameter is the basis for determining the device during playback. When the value of the playingKey parameter exists in the playingIds parameter set, the device node corresponding to the value can be set to the playing state.
  • the third-level target device node is "Device 5", and when the user clicks on the device node, the node data of the device node can be transferred to the current page.
  • the node data of the device node It may include at least the unique identifier of the device node (such as id: 5), the device name of the device node (such as device 5), and the node type of the device node (such as monitoring device).
  • the current page also includes multiple data display interfaces, such as video screen 1 and 5 screens that need to be configured.
  • the video stream of the device node can be obtained based on the node data of the device node. If the current page can obtain the video stream of the device node, the unique identifier of the device node can be The information is sent to the device display component. Finally, when the unique identifier of the device node exists in the playingIds parameter, the third-level target device node in the current page can be set to the playing state. Among them, the value of the unique identifier is determined by the playingKey parameter.
  • each device node in the device node list shown in Figure 7 has a corresponding video stream
  • each device node can also be set to the playback state. For example, when the user clicks "Device 10" in the device node list, the node data of the device node can be sent to the current page to obtain the video stream of the device node. If the current page can obtain the video stream of the device node, the unique identifier of the device node can be sent to the device display component to mark "device 10" as playing state through the device display component. Referring to Figure 12, a schematic diagram of the page for setting "device 10" to the playing state is given.
  • the node playback parameter set corresponding to the target data display interface can be passed to the device display component, The device display component renders the current page according to the parameter values in the node playback parameter collection to set the target device node in the current page to the playback state.
  • the node play parameter set may include the playingKey parameter and the playingKey parameter. For example, when the value of the playingKey parameter exists in the playingIds parameter set, the device node corresponding to the value can be set to the playing state.
  • This disclosure can realize the playback state setting function of the monitoring device by configuring different parameters according to business needs. It can also be configured to meet the requirement of setting the playing monitoring device to the playing state on the video monitoring page.
  • the device display component of the present disclosure can also be used in the recording plan configuration page and the polling page. Taking the polling page as an example, the user needs to check the device node. Correspondingly, the device display component needs to transmit the data of the selected device. to the parent page. In addition, the device display component also needs to set the check status of the corresponding device node based on the data passed in from the parent page.
  • the check function of the device node can be implemented according to steps S1310 to S1340.
  • Step S1310 When receiving the user's selection operation on the third-level target device node, transfer the third-level target device node data to the second execution function of the device display component.
  • the third-level target device node The data at least includes the unique identification and current check status of the third-level target device node.
  • the device display component needs to provide an input parameter, and the parent page uses this input parameter to control whether the device display component has the function of checking device nodes; 2) the device display component needs to provide a configuration function to set a specific device Whether the node is optional, the function returns true or false. Returning true means that the device node cannot be checked, and returning false means that the device node can be checked; 3) There needs to be a variable inside the device display component that saves the data of the checked device node; 4) In order to set the corresponding device node to the checked state based on the device check data of the parent page, the device display component needs to be able to receive the parent data and set the corresponding check effect.
  • the checkable parameter, checkableFunc parameter, checkedIds parameter, checkedNodes parameter and checkedKey parameter can be passed into the device display component.
  • the variable inside the display component used to save the data of the checked device node is the device checked variable deviceChecked.
  • the second execution function of the device display component is the handleCheckChange function. This function can be executed when the user clicks on the device node.
  • the third-level target device node is "device 6" shown in Figure 5, and when the user clicks on the device node, the node data of the device node is passed into the handleCheckChange function.
  • the node data checkedNode of the device node may at least include the unique identifier of the device node (such as id: 6) and the current check status checked of the device node.
  • Step S1320 When the current check status is to be checked, use the second execution function to add the third-level target device node data to the device check variable of the device display component.
  • the value of the checked status checked can be true/false.
  • the checked status checked is true, it means that the current checked status of the node is to be checked, that is, when the user clicks on the device node, the device node can be set It is a checked state; when the checked state is false, it means that when the user clicks on the device node, the checked state of the device node can be cancelled.
  • the second execution function handleCheckChange function can be used to add the node data checkedNode of the device node to the device check variable deviceChecked of the device display component, Otherwise, the node data checkedNode of the device node can be deleted from the device check variable deviceChecked of the device display component.
  • Step S1330 Assign a value to the set of checked device identifiers of the device display component according to the unique identifier of the third-level target device node in the device checked variable.
  • Figure 5 shows multi-level nodes.
  • "device 6" can be obtained from the device check variable deviceChecked.
  • the unique identifier The specific value of the unique identifier is determined by the checkedKey parameter. After determining the unique identifier of "device 6", you can add the unique identifier of "device 6" to the checked device identifier set deviceCheckedIds.
  • Step S1340 Set the third-level target device node in the current page to a checked state according to the assigned checked device identification set.
  • the data of the device node can be passed to the parent page, so that the parent page can adjust the page display based on the data of the device node.
  • the current page can also be rendered based on the data of the device node to set the device node to the checked state. Referring to Figure 14, a schematic diagram of the page for setting "Device 6" to the checked state is given.
  • the check function of each device node in the device node list shown in Figure 7 can also be implemented. For example, when the user clicks "Device 10" in the device node list, the node data of the device node can be passed into the handleCheckDevice function, and "Device 10" is set to the checked state based on this function.
  • the specific processing process and steps S1310 to step S1340 are similar and will not be described in detail here. Referring to Figure 15, a schematic diagram of the page for setting "Device 10" to the checked state is given.
  • step S1330 the value of the checked device identification set deviceCheckedIds is synchronized in real time with the checked status of the device node in the device node list. This step ensures that when switching from a multi-level node to the device node list, the check results of the multi-level nodes can be synchronized. Moreover, when the device node list is displayed, the value of the checked device identification set deviceCheckedIds is the latest checked node data. When switching from the device node list to a multi-level node, you only need to synchronize the device node list according to the checked device identification set deviceCheckedIds. The check result.
  • This disclosure can realize the checking function of the monitoring device by configuring different parameters according to business needs.
  • the node check parameter set corresponding to the target data display interface when receiving the user's selection operation on the target data display interface, can be passed to the device display component, and the device display component can pass the node check parameter set according to the node check parameter set. Render the current page with the parameter value to set the target device node in the current page to the checked state.
  • the node check reference set may include checkedIds parameters, checkedKey parameters, checkedNodes parameters, checked parameters, etc.
  • the target data display interface may be video screen 1 as shown in Figure 11.
  • the device node data corresponding to video screen 1 may be transferred to the device display component.
  • the value of the checked device identification set deviceCheckedIds can be set as the checkedIds parameter.
  • the value of the device check variable deviceChecked can be generated based on the values of the checkedIds parameter and the checkedKey parameter.
  • the data structure of a single checked device node is: ⁇ checkedKey value: unique identification value of the device ⁇ .
  • the device can be The node is set to checked state.
  • the value of the device check variable deviceChecked can be set to the value of the checkedNodes parameter, and then, based on the values of the checkedNodes parameter and the checkedKey parameter, the checked device identification set deviceCheckedIds is generated. value, that is, take the unique identification value of the device node in the checkedNodes parameter to generate the checked device identification set deviceCheckedIds, save the unique identification variable named checkedKey, and set the corresponding device node to the checked state.
  • the checked device identification set deviceCheckedIds saves the unique identifiers of all checked device nodes and can be used to set the checked status of device nodes in multi-level node and device node lists.
  • the value of the device check variable deviceChecked is set so that when the user continues to check or uncheck the device node, the device check variable deviceChecked can be updated based on the existing checked device node data to report to the parent page. Pass the latest checked device node data collection.
  • this disclosure can meet the needs of monitoring equipment selection on the recording plan configuration page and polling page.
  • the device display component in the exemplary embodiment of the present disclosure may provide a monitoring device display function by geographical level.
  • the first execution function (handleNodeClick), the second execution function (handleCheckChange), the device selection variable (deviceSelected), the device check variable (deviceChecked), etc. can be encapsulated as executable in advance. file and stored in the browser to execute the executable when a trigger action is received on a geographic node in the current page.
  • the source code can be encapsulated according to the actual needs of the user and the executable file required by the user can be obtained. This disclosure does not specifically limit this.
  • the folder form is stored in the server.
  • the user can make a data request to the server to request the first execution function handleNodeClick, the second execution function handleCheckChange, the device selection variable deviceSelected and the device check involved in this disclosure.
  • Variable deviceChecked and other related source codes Preferably, when the user visits the current page for the first time, the pre-packaged executable files can be co-deployed to the local browser, which can avoid frequent data requests to the server.
  • the information display method provided by the exemplary embodiments of the present disclosure has clear logic, simple architecture, lightweight and easy implementation, and does not occupy too much memory. It can be understood that this information display method refers to data processing on the browser side.
  • first-level nodes are displayed on the current page based on the basic data.
  • the first-level nodes include first-level geographical nodes and third-level geographical nodes. At least one of the first-level device nodes; when receiving the user's trigger operation on the first-level target geographical node, display the second-level node in the current page, and the second-level node includes the second-level geographical node and the second-level device At least one of the nodes; when receiving the user's trigger operation on the second-level target geographical node, display the third-level device node in the current page.
  • the present disclosure can realize multi-level node display with geographical information, facilitate business personnel to view target devices according to geographical levels, improve device query efficiency, and thereby improve user experience.
  • an information display device is also provided.
  • the device can be applied to a terminal device or a server.
  • the information display device 1600 may include a first information display module 1610, The second information display module 1620 and the third information display module 1630, wherein:
  • the first information display module 1610 is used to obtain the basic data required by the device display component, and display first-level nodes on the current page according to the basic data.
  • the first-level nodes include first-level geographical nodes and first-level nodes. At least one of the device nodes;
  • the second information display module 1620 is configured to display a second-level node in the current page when receiving a user's triggering operation on a first-level target geographical node.
  • the second-level node includes a second-level geographical node and a third-level geographical node. At least one of the second-level device nodes;
  • the third information display module 1630 is configured to display a third-level device node in the current page when receiving the user's triggering operation on the second-level target geographical node.
  • the basic data required by the device display component in the information display device 1600 includes at least geographic node data, subtree data corresponding to the geographic node data, and device node data;
  • the geographical node data includes the first-level geographical node data and the second-level geographical node data
  • the sub-tree data is the second-level geographical node data and the second-level equipment node data;
  • the subtree data is the third-level equipment node data
  • the device node data includes the first-level device node data, the second-level device node data, and the third-level device node data.
  • the first information display module 1610 is configured to render the current page according to the first-level geographical node data and the first-level device node data in the basic data. , to display the first-level geographical node and the first-level device node on the current page.
  • the information display device 1600 further includes:
  • a search data input module configured to obtain the target device node data related to the input data in the basic data when receiving the user's data input operation within a preset time period;
  • a device node list display module is configured to render the current page according to the target device node data, so as to display a device node list composed of target device nodes in the current page.
  • the information display device 1600 further includes:
  • the first parameter transfer module is used to transfer the third-level target device node data to the first execution function of the device display component when receiving the user's selection operation on the third-level target device node.
  • the three-level target device node data at least includes the unique identifier of the third-level target device node;
  • a first data assignment module configured to use the first execution function to assign the device selection variable of the device display component to the third-level target device node data
  • the selected node determination module is used to compare the unique identifier of each device node in the current page with the unique identifier of the device selected variable, to determine the unique identifier in the current page and the unique identifier of the device selected variable. Identify the third-level target device node with the same identifier;
  • a selected node setting module is configured to render the current page according to the third-level target device node data, so as to set the third-level target device node in the current page to a selected state.
  • the information display device 1600 further includes:
  • the node data transfer module is configured to transfer the third-level target device node data to the current page when receiving the user's selection operation on the third-level target device node.
  • the third-level target device node data at least includes The unique identifier of the third-level target device node;
  • Node data receiving module configured to receive the unique identification of the third-level target device node sent by the current page when the current page obtains the corresponding video stream data according to the third-level target device node data.
  • a playback state setting module configured to set the third-level target device node in the current page when the unique identifier of the third-level target device node exists in the playback device identification set of the device display component. is in playback state.
  • the information display device 1600 further includes:
  • the first parameter transfer module is used to transfer the third-level target device node data to the second execution function of the device display component when receiving the user's selection operation on the third-level target device node.
  • the three-level target device node data at least includes the unique identification and current check status of the third-level target device node;
  • a node data adding module configured to use the second execution function to add the third-level target device node data to the device check variable of the device display component when the current check status is to be checked;
  • a second data assignment module configured to assign a value to the set of checked device identifiers of the device display component according to the unique identifier of the third-level target device node in the device checked variable;
  • a check status setting module is configured to set the third-level target device node in the current page to a check status according to the assigned check device identification set.
  • the current page includes multiple data display interfaces, and the data display interfaces are used to display video stream data corresponding to device nodes at each level; the information display device 1600 also includes:
  • a first parameter transfer module configured to transfer the node selection parameter set corresponding to the target data display interface to the device display component when receiving the user's selection operation on the target data display interface
  • the selected state setting module is used for the device display component to render the current page according to the parameter value in the node selection parameter set, so as to set the target device node in the current page to the selected state.
  • the information display device 1600 further includes:
  • a node data acquisition module configured to pass the node playback parameter set corresponding to the target data display interface to the device display component when receiving the user's selection operation on the target data display interface;
  • a playback state setting module is used for the device display component to render the current page according to the parameter value in the node playback parameter set, so as to set the target device node in the current page to the playback state.
  • the information display device 1600 further includes:
  • a node data acquisition module configured to obtain the user's selection operation on the target data display interface when receiving the selection operation.
  • the node selection parameter set corresponding to the target data display interface is passed to the device display component;
  • a check status setting module is used for the device display component to render the current page according to the parameter value in the node check parameter set, so as to set the target device node in the current page to a check status.
  • Each module in the above device can be a general-purpose processor, including a central processing unit, a network processor, etc.; it can also be a digital signal processor, an application-specific integrated circuit, a field programmable gate array or other programmable logic devices, discrete gates or transistors Logic devices, discrete hardware components. Each module can also be implemented by software, firmware, etc. Each processor in the above device can be an independent processor or can be integrated together.
  • Exemplary embodiments of the present disclosure also provide a computer-readable storage medium on which a program product capable of implementing the method described above in this specification is stored.
  • various aspects of the present disclosure can also be implemented in the form of a program product, which includes program code.
  • the program product When the program product is run on an electronic device, the program code is used to cause the electronic device to execute the above-mentioned instructions in this specification.
  • the steps according to various exemplary embodiments of the present disclosure are described in the "Exemplary Methods" section.
  • the program product may take the form of a portable compact disk read-only memory (CD-ROM) and include the program code, and may be run on an electronic device, such as a personal computer.
  • CD-ROM portable compact disk read-only memory
  • the program product of the present disclosure is not limited thereto.
  • a readable storage medium may be any tangible medium containing or storing a program that may be used by or in conjunction with an instruction execution system, apparatus, or device.
  • the Program Product may take the form of one or more readable media in any combination.
  • the readable medium may be a readable signal medium or a readable storage medium.
  • the readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination thereof. More specific examples (non-exhaustive list) of readable storage media include: electrical connection with one or more conductors, portable disk, hard disk, random access memory (RAM), read only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination of the above.
  • a computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave carrying readable program code therein. Such propagated data signals may take many forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above.
  • a readable signal medium may also be any readable medium other than a readable storage medium that can send, propagate, or transport the program for use by or in connection with an instruction execution system, apparatus, or device.
  • Program code embodied on a readable medium may be transmitted using any suitable medium, including but not limited to wireless, wireline, optical cable, RF, etc., or any suitable combination of the foregoing.
  • Program code for performing the operations of the present disclosure may be written in any combination of one or more programming languages, including object-oriented programming languages such as Java, C++, etc., as well as conventional procedural programming. Language—such as "C” or a similar programming language.
  • the program code may execute entirely on the user's computing device, partly on the user's device, as a stand-alone software package, partly on the user's computing device and partly on a remote computing device, or entirely on the remote computing device or server execute on.
  • the remote computing device may be connected to the user computing device through any kind of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computing device (such as an Internet service provider through the Internet). connect).
  • LAN local area network
  • WAN wide area network
  • an external computing device such as an Internet service provider through the Internet. connect
  • Exemplary embodiments of the present disclosure also provide an electronic device capable of implementing the above method.
  • An electronic device 1700 according to such an exemplary embodiment of the present disclosure is described below with reference to FIG. 17 .
  • the electronic device 1700 shown in FIG. 17 is only an example and should not bring any limitations to the functions and usage scope of the embodiments of the present disclosure.
  • electronic device 1700 may take the form of a general computing device.
  • the components of the electronic device 1700 may include, but are not limited to: at least one processing unit 1710, at least one storage unit 1720, a bus 1730 connecting different system components (including the storage unit 1720 and the processing unit 1710), and a display unit 1740.
  • the storage unit 1720 stores program code, which can be executed by the processing unit 1710, so that the processing unit 1710 performs the steps according to various exemplary embodiments of the present disclosure described in the "Example Method" section above.
  • the processing unit 1710 may perform any one or more method steps in FIG. 2, FIG. 8, and FIG. 13.
  • the storage unit 1720 may include a readable medium in the form of a volatile storage unit, such as a random access storage unit (RAM) 1721 and/or a cache storage unit 1722, and may further include a read-only storage unit (ROM) 1723.
  • RAM random access storage unit
  • ROM read-only storage unit
  • Storage unit 1720 may also include a program/utility 1724 having a set of (at least one) program modules 1725 including, but not limited to: an operating system, one or more application programs, other program modules, and program data, Each of these examples, or some combination, may include the implementation of a network environment.
  • program/utility 1724 having a set of (at least one) program modules 1725 including, but not limited to: an operating system, one or more application programs, other program modules, and program data, Each of these examples, or some combination, may include the implementation of a network environment.
  • Bus 1730 may be a local area representing one or more of several types of bus structures, including a memory unit bus or memory unit controller, a peripheral bus, a graphics acceleration port, a processing unit, or using any of a variety of bus structures. bus.
  • Electronic device 1700 may also communicate with one or more external devices 1800 (e.g., keyboard, pointing device, Bluetooth device, etc.), may also communicate with one or more devices that enable a user to interact with electronic device 1700, and/or with Any device (eg, router, modem, etc.) that enables the electronic device 1700 to communicate with one or more other computing devices. This communication may occur through input/output (I/O) interface 1750.
  • the electronic device 1700 may also communicate with one or more networks (eg, a local area network (LAN), a wide area network (WAN), and/or a public network, such as the Internet) through a network adapter 1760. As shown, network adapter 1760 communicates with other modules of electronic device 1700 via bus 1730.
  • networks eg, a local area network (LAN), a wide area network (WAN), and/or a public network, such as the Internet
  • electronic device 1700 may be used in conjunction with electronic device 1700, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives And data backup storage system, etc.
  • the example embodiments described here can be implemented by software, or can be implemented by software combined with necessary hardware. Therefore, the technical solution according to the embodiment of the present disclosure can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (which can be a CD-ROM, U disk, mobile hard disk, etc.) or on the network , including several instructions to cause a computing device (which may be a personal computer, a server, a terminal device, a network device, etc.) to execute a method according to an exemplary embodiment of the present disclosure.
  • a computing device which may be a personal computer, a server, a terminal device, a network device, etc.

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Multimedia (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • Databases & Information Systems (AREA)
  • Library & Information Science (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本公开提供一种信息显示方法、装置、存储介质及电子设备；涉及计算机技术领域。所述方法包括：获取设备显示组件所需的基础数据，并根据基础数据在当前页面显示第一层级节点，第一层级节点包括第一层级地理节点和第一层级设备节点中的至少一种；接收到用户对第一层级目标地理节点的触发操作时，在当前页面中显示第二层级节点，第二层级节点包括第二层级地理节点和第二层级设备节点中的至少一种；接收到用户对第二层级目标地理节点的触发操作时，在当前页面中显示第三层级设备节点。本公开可以实现带有地理信息的多层级节点显示，便于业务人员根据地理层级查看目标设备，提高了设备查询效率，进而提升了用户体验。

Description

信息显示方法、装置、存储介质及电子设备
交叉引用
本申请要求于2022年07月29日提交的申请号为202210908146.0、名称为“信息显示方法、装置、存储介质及电子设备”的中国专利申请的优先权，该中国专利申请的全部内容通过引用全部并入全文。
技术领域
本公开涉及计算机技术领域，具体而言，涉及一种信息显示方法、信息显示装置、计算机可读存储介质以及电子设备。
背景技术
随着视频监控的应用越来越广，很多机构、企业都部署了自己的视频监控网络，并需要工作人员实时查看各地点的监控视频。当视频监控网络的规模较大、监控设备数量较多时，工作人员无法一次性查看所有的监控画面，而且也无法直接获取监控设备及其监控画面的地理信息。
需要说明的是，在上述背景技术部分公开的信息仅用于加强对本公开的背景的理解，因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。
发明内容
本公开提供一种信息显示方法、信息显示装置、计算机可读存储介质以及电子设备。
本公开提供一种信息显示方法，包括：
获取设备显示组件所需的基础数据，并根据所述基础数据在当前页面显示第一层级节点，所述第一层级节点包括第一层级地理节点和第一层级设备节点中的至少一种；
接收到用户对第一层级目标地理节点的触发操作时，在所述当前页面中显示第二层级节点，所述第二层级节点包括第二层级地理节点和第二层级设备节点中的至少一种；
接收到所述用户对第二层级目标地理节点的触发操作时，在所述当前页面中显示第三层级设备节点。
在本公开的一种示例性实施例中，所述设备显示组件所需的基础数据至少包括地理节点数据、与所述地理节点数据对应的子树数据和设备节点数据；
其中，所述地理节点数据包括所述第一层级地理节点数据和所述第二层级地理节点数据；
所述地理节点数据为第一层级地理节点数据时，所述子树数据为所述第二层级地理节点数据和所述第二层级设备节点数据；
所述地理节点数据为第二层级地理节点数据时，所述子树数据为所述第三层级设备节点数据；
所述设备节点数据包括所述第一层级设备节点数据、第二层级设备节点数据和所述第三层级设备节点数据。
在本公开的一种示例性实施例中，所述根据所述基础数据在当前页面显示第一层级节点，包括：
根据所述基础数据中的所述第一层级地理节点数据和所述第一层级设备节点数据渲染所述当前页面，以在所述当前页面显示所述第一层级地理节点和所述第一层级设备节点。
在本公开的一种示例性实施例中，在所述当前页面中显示第三层级设备节点后，所述方法还包括：
接收到所述用户在预设时间段内的数据输入操作时，获取所述基础数据中与输入数据相关的目标设备节点数据；
根据所述目标设备节点数据渲染所述当前页面，以在所述当前页面中显示由目标设备节点组成的设备节点列表。
在本公开的一种示例性实施例中，在所述当前页面中显示第三层级设备节点后，所述方法还包括：
接收到所述用户对第三层级目标设备节点的选择操作时，将第三层级目标设备节点数据传入所述设备显示组件的第一执行函数中，所述第三层级目标设备节点数据至少包括所述第三层级目标设备节点的唯一标识；
利用所述第一执行函数将所述设备显示组件的设备选中变量赋值为所述第三层级目标设备节点数据；
将所述当前页面中各设备节点的唯一标识与所述设备选中变量的唯一标识分别进行比较，以确定所述当前页面中唯一标识与所述设备选中变量的唯一标识相同的所述第三层级目标设备节点；
根据所述第三层级目标设备节点数据渲染所述当前页面，以将所述当前页面中的所述第三层级目标设备节点设置为选中状态。
在本公开的一种示例性实施例中，在所述当前页面中显示第三层级设备节点后，所述方法还包括：
接收到所述用户对第三层级目标设备节点的选择操作时，将第三层目标设备节点数据传递至所述当前页面，所述第三层级目标设备节点数据至少包括所述第三层级目标设备节点的唯一标识；
当所述当前页面根据所述第三层目标设备节点数据获取到对应的视频流数据时，接收由所述当前页面发送的所述第三层级目标设备节点的唯一标识；
当所述第三层级目标设备节点的唯一标识存在于所述设备显示组件的播放设备标识集合中时，将所述当前页面中的所述第三层级目标设备节点设置为播放状态。
在本公开的一种示例性实施例中，在所述当前页面中显示第三层级设备节点后，所述方法还包括：
接收到所述用户对第三层级目标设备节点的选择操作时，将第三层级目标设备节点数据传入所述设备显示组件的第二执行函数中，所述第三层级目标设备节点数据至少包括所述第三层级目标设备节点的唯一标识和当前勾选状态；
当所述当前勾选状态为待勾选时，利用所述第二执行函数将所述第三层级目标设备节点数据加入所述设备显示组件的设备勾选变量中；
根据所述设备勾选变量中所述第三层级目标设备节点的唯一标识对所述设备显示组件的勾选设备标识集合进行赋值；
根据赋值后的所述勾选设备标识集合将所述当前页面中的所述第三层级目标设备节点设置为勾选状态。
在本公开的一种示例性实施例中，所述当前页面中包括多个数据展示界面，所述数据展示界面用于展示与各层级设备节点对应的视频流数据；在所述当前页面中显示第三层级设备节点后，所述方法还包括：
接收到所述用户对目标数据展示界面的选择操作时，将所述目标数据展示界面对应的节点选中参数集合传递至所述设备显示组件；
所述设备显示组件根据所述节点选中参数集合中的参数值渲染所述当前页面，以将所述当前页面中的目标设备节点设置为选中状态。
在本公开的一种示例性实施例中，在所述当前页面中显示第三层级设备节点后，所述方法还包括：
接收到所述用户对目标数据展示界面的选择操作时，将所述目标数据展示界面对应的节点播放参数集合传递至所述设备显示组件；
所述设备显示组件根据所述节点播放参数集合中的参数值渲染所述当前页面，以将所述当前页面中的目标设备节点设置为播放状态。
在本公开的一种示例性实施例中，在所述当前页面中显示第三层级设备节点后，所述方法还包括：
接收到所述用户对目标数据展示界面的选择操作时，将所述目标数据展示界面对应的节点勾选参数集合传递至所述设备显示组件；
所述设备显示组件根据所述节点勾选参数集合中的参数值渲染所述当前页面，以将所述当前页面中的目标设备节点设置为勾选状态。
本公开提供一种信息显示装置，包括：
第一信息显示模块，用于获取设备显示组件所需的基础数据，并根据所述基础数据在当前页面显示第一层级节点，所述第一层级节点包括第一层级地理节点和第一层级设备节点中的至少一种；
第二信息显示模块，用于接收到用户对第一层级目标地理节点的触发操作时，在所述当前页面中显示第二层级节点，所述第二层级节点包括第二层级地理节点和第二层级设备节点中的至少一种；
第三信息显示模块，用于接收到所述用户对第二层级目标地理节点的触发操作时，在所述当前页面中显示第三层级设备节点。
本公开提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述任意一项所述的方法。
本公开提供一种电子设备，包括：处理器；以及存储器，用于存储所述处理器的可执行指令；其中，所述处理器配置为经由执行所述可执行指令来执行上述任意一项所述的方法。
应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。
图1示出了可以应用本公开实施例的信息显示方法及装置的示例性系统架构的示意图；
图2示意性示出了根据本公开实施例中一种信息显示方法的流程图；
图3示意性示出了根据本公开实施例中的一种页面示意图；
图4示意性示出了根据本公开实施例中的另一种页面示意图；
图5示意性示出了根据本公开实施例中的又一种页面示意图；
图6示意性示出了根据本公开具体实施例中的一种页面示意图；
图7示意性示出了根据本公开具体实施例中一种实现搜索功能的页面示意图；
图8示意性示出了根据本公开实施例中设备节点实现选中功能的流程图；
图9示意性示出了根据本公开具体实施例中一种设备节点实现选中功能的页面示意图；
图10示意性示出了根据本公开具体实施例中另一种设备节点实现选中功能的页面示意图；
图11示意性示出了根据本公开具体实施例中一种设备节点实现播放态功能的页面示意图；
图12示意性示出了根据本公开具体实施例中另一种设备节点实现播放态功能的页面示意图；
图13示意性示出了根据本公开实施例中设备节点实现勾选功能的流程图；
图14示意性示出了根据本公开具体实施例中一种设备节点实现勾选功能的页面示意图；
图15示意性示出了根据本公开具体实施例中另一种设备节点实现勾选功能的页面示意图；
图16示意性示出了根据本公开的一个实施例的信息显示装置的框图；
图17示意性示出了适于用来实现本公开实施例的电子设备的计算机系统的结构示意图。
具体实施方式
现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本公开将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施方式中。在下面的描述中，提供许多具体细节从而给出对本公开的实施方式的充分理解。然而，本领域技术人员将意识到，可以实践本公开的技术方案而省略所述特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知技术方案以避免喧宾夺主而使得本公开的各方面变得模糊。
此外，附图仅为本公开的示意性图解，并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。附图中所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。
图1示出了可以应用本公开实施例的一种信息显示方法及装置的示例性应用环境的系统架构的示意图。
如图1所示，系统架构100可以包括终端设备101、102、103中的一个或多个，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。终端设备101、102、103可以是各种电子设备，包括但不限于台式计算机、便携式计算机、智能手机和平板电脑等，用于提供用户界面进行页面显示。例如，终端设备上安装有客户端(如浏览器)，通过浏览器客户端可以浏览页面。具体地，终端设备上的浏览器可以用于执行：获取设备显示组件所需的基础数据，并根据基础数据在当前页面显示第一层级节点；接收到用户对第一层级目标地理节点的触发操作时，在当前页面中显示第二层级节点；接收到用户对第二层级目标地理节点的触发操作时，在当前页面中显示第三层级设备节点。
应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。例如，服务器105可以是一个服务器，也可以是多个服务器组成的服务器集群，还可以是云计算平台或者虚拟化中心。另外，服务器105可以用于为支持页面显示的页面组件等提供后台服务。
本公开实施例所提供的信息显示方法可以由终端设备101、102、103中的一个或多个执行，相应的，信息显示装置可以设置于终端设备101、102、103中，例如，由终端设备 执行后可以将第一层级地理节点、第一层级设备节点、第二层级地理节点、第二层级设备节点和第三层级设备节点显示在终端设备的显示屏上，本示例性实施例中对此不做特殊限定。
以下对本公开实施例的技术方案进行详细阐述：
本公开示例实施方式中，以园区管理的场景为例进行说明。对于规模较大、监控设备数量较多的园区，工作人员无法一次性查看所有的监控画面，而且也无法直接获取监控设备及其监控画面的地理信息，不便于工作人员查看特定地点的监控画面。
基于上述一个或多个问题，本示例实施方式提供了一种信息显示方法。参考图2所示，该信息显示方法可以包括步骤S210至步骤S230：
步骤S210.获取设备显示组件所需的基础数据，并根据所述基础数据在当前页面显示第一层级节点，所述第一层级节点包括第一层级地理节点和第一层级设备节点中的至少一种；
步骤S220.接收到用户对第一层级目标地理节点的触发操作时，在所述当前页面中显示第二层级节点，所述第二层级节点包括第二层级地理节点和第二层级设备节点中的至少一种；
步骤S230.接收到所述用户对第二层级目标地理节点的触发操作时，在所述当前页面中显示第三层级设备节点。
在本公开示例实施方式所提供的信息显示方法中，通过获取设备显示组件所需的基础数据，并根据基础数据在当前页面显示第一层级节点，第一层级节点包括第一层级地理节点和第一层级设备节点中的至少一种；接收到用户对第一层级目标地理节点的触发操作时，在当前页面中显示第二层级节点，第二层级节点包括第二层级地理节点和第二层级设备节点中的至少一种；接收到用户对第二层级目标地理节点的触发操作时，在当前页面中显示第三层级设备节点。本公开可以实现带有地理信息的多层级节点显示，便于业务人员根据地理层级查看目标设备，提高了设备查询效率，进而提升了用户体验。
下面，对于本示例实施方式的上述步骤进行更加详细的说明。
在步骤S210中，获取设备显示组件所需的基础数据，并根据所述基础数据在当前页面显示第一层级节点，所述第一层级节点包括第一层级地理节点和第一层级设备节点中的至少一种。
为了便于园区工作人员查看监控设备，本公开基于Element页面组件库中的树组件得到带有地理信息的设备显示组件，通过该设备显示组件可以展示多个层级的节点，各层级的节点可以包括地理节点和设备节点，也可以仅包括地理节点，还可以仅包括设备节点。各层级节点的显示取决于园区的地理结构，以及园区中所有监控设备的分布，本公开对此不做具体限定。其中，各节点所属的层级与园区地理结构的层级对应。例如，某一园区地理结构的层级从高到低依次为：园区、区域和楼栋，由于当前页面是在工作人员选择具体园区后显示的页面，因此，当前页面中可以不显示园区层级的节点数据，并将园区内的各 区域作为第一层级节点，各区域内的楼栋作为第二层级节点，各楼栋内的所有楼层和房间直属的监控设备作为第三层级节点。可以看出，区域和楼栋为地理节点，监控设备为设备节点。
另外，需要说明的是，监控设备可以直属于任意层级的地理结构。举例而言，对于监控设备A，该监控设备属于区域B，但该监控设备不属于区域B下的任一楼栋。也就是说，监控设备A对应的设备节点与区域B下的楼栋对应的地理节点属于同一层级，均为第二层级节点。类似的，第一层级设备节点直属于工作人员选择的园区对应的地理节点，第二层级设备节点直属于设备所在区域对应的地理节点，第三层级设备节点对应直属于设备所在楼栋的监控设备、以及各楼栋内的所有楼层和房间直属的监控设备。本公开通过布局多层级设备节点可以展示园区内所有配置地理位置的监控设备。
当园区内的监控设备数量较多时，通过该设备显示组件展示所有层级的全部节点可能会消耗较长时间，而工作人员通常只需查看特定节点。示例性，可以从后端服务器通过后台接口获取设备显示组件所需的基础数据。其中，设备显示组件所需的基础数据可以至少包括地理节点数据、与地理节点数据对应的子树数据和设备节点数据。其中，地理节点数据包括第一层级地理节点数据和第二层级地理节点数据，当地理节点数据为第一层级地理节点数据时，对应的子树数据为第二层级地理节点数据和第二层级设备节点数据；当地理节点数据为第二层级地理节点数据时，对应的子树数据为第三层级设备节点数据。设备节点数据包括第一层级设备节点数据、第二层级设备节点数据和第三层级设备节点数据。
具体地，每个地理节点数据可以至少包括展示文本内容，即label字段，与每个地理节点数据对应的子树数据为每个地理节点的下层数据，即children字段。例如，区域节点的下层数据为该区域内的楼栋节点数据和直属该区域的设备节点数据，对应的，可以将区域节点称作父节点，下层数据中的楼栋节点和设备节点称作子节点。举例而言，对于区域节点“1”，该节点的节点数据中的label字段为区域名称：1，该区域节点对应的子树数据为直属于该区域的楼栋节点和设备节点。对于楼栋节点“1.1”，该节点的节点数据中的label字段为楼栋名称：1.1，该楼栋节点对应的子树数据为直属于该楼栋的所有设备节点。对于设备节点“1.1.1”，该节点的节点数据中的label为设备名称：1.1.1，设备节点没有对应的子树数据。
本公开可以使用懒加载的方式根据基础数据中的第一层级地理节点数据和第一层级设备节点数据渲染当前页面，以在当前页面显示第一层级地理节点和第一层级设备节点。本公开示例实施方式中，第一层地理节点可以为区域节点，第一层设备节点可以为直属于园区的设备节点。参考图3所示，给出了当前页面的一种示意图。该页面中包括设备搜索框，用于根据设备名称对监控设备进行查询，该页面中还包括工作人员选择的园区内的多个区域，如区域1、区域2和区域3，以及直属于该园区的多个监控设备，如设备1和设备2。各设备节点的左侧包括两部分图标，图标①为一圆点，该圆点显示为不同的颜色时代表不同的状态，图标②为地理位置图标。例如，当设备1左侧的圆点为绿色时，表示设备1当 前为在线状态，当该圆点为灰色时，表示设备1当前为离线状态。可以理解的是，可以根据用户的实际需求将图标①设置为其它形状和其它颜色来表示设备的在线/离线状态，也可以从后台接口获取其它样式的图标作为图标②来表示地理位置，本公开对此不做具体限定。
该示例中，页面初始化时只展示工作人员选中园区下的区域信息和直属监控设备，无需展示选中园区中的所有监控设备，提高了页面初始化效率。后续工作人员可以根据地理层级查看指定地点的监控设备，也就是通过对各层级的地理节点进行操作，整个设备查看过程耗时较短，查看设备效率较高。
在步骤S220中，接收到用户对第一层级目标地理节点的触发操作时，在所述当前页面中显示第二层级节点，所述第二层级节点包括第二层级地理节点和第二层级设备节点中的至少一种。
当前页面为如图3所示的页面时，该页面中包括多个区域节点和设备节点。对应的，第一层级目标地理节点可以为图3中的某一区域节点，触发操作可以为用户作用于当前页面的点击操作。示例性的，当用户点击当前页面中的某一区域节点时，可以根据基础数据中直属于该区域的第二层级地理节点数据和第二层级设备节点数据渲染当前页面，以在当前页面中显示第二层级地理节点和第二层级设备节点。本公开示例实施方式中，第二层地理节点可以为楼栋节点，第二层设备节点可以为直属于区域的设备节点。
举例而言，当用户点击图3所示页面中的“区域1”时，当前页面转换为如图4所示的页面示意图。该页面中包括设备搜索框、工作人员选择的园区内的多个区域(区域1、区域2和区域3)、直属于该园区的多个监控设备(设备1、设备2)、直属于区域1的多个楼栋(楼栋1、楼栋2和楼栋3)以及直属于区域1的多个监控设备(设备3、设备4)。各设备节点左侧的图标与图3相同，此处不再详细赘述。
在步骤S230中，接收到所述用户对第二层级目标地理节点的触发操作时，在所述当前页面中显示第三层级设备节点。
当前页面为如图4所示的页面时，该页面中包括多个区域节点、楼栋节点和设备节点。对应的，第二层级目标地理节点可以为图4中的某一楼栋节点，触发操作可以为用户作用于当前页面的点击操作。示例性的，当用户点击当前页面中的某一楼栋节点时，可以根据基础数据中直属于该楼栋的第三层级设备节点数据渲染当前页面，以在当前页面中显示至少一个第三层级设备节点。本公开示例实施方式中，第三层设备节点可以为直属于楼栋的设备节点，以及直属于楼栋内所有楼层和房间的设备节点。
举例而言，当用户点击图4所示页面中的“楼栋2”时，当前页面转换为如图5所示的页面示意图。该页面中包括设备搜索框、第一层数据为工作人员选择的园区内的多个区域(区域1、区域2和区域3)和直属于该园区的多个监控设备(设备1、设备2)，第二层数据为直属于区域1的多个楼栋(楼栋1、楼栋2和楼栋3)和直属于区域1的多个监控设备(设备3、设备4)，第三层数据为直属于楼栋2和/或直属于楼栋2内所有楼层和房间的多个监控设备(设备5、设备6和设备7)。各设备节点左侧的图标与图3相同，此处不再详细赘述。
参考图6所示，给出了一种具体场景中的页面示意图。工作人员选择的园区为“新园区”，对应的，该页面中包括设备搜索框、多个区域节点(新园区东侧、新园区西侧和新园区南侧)、直属该园区的多个设备节点(园区大门、直播基地球机)、直属新园区东侧的多个楼栋节点(A工作楼、B酒店和C公寓)、直属C公寓的多个设备节点(B2层车库北通道、B1层车道1号和3层北侧楼梯)。
本公开实现了带有地理信息的多层级节点显示，且各设备节点的设备名称为监控设备所在的地理位置，便于业务人员根据地理层级查看目标设备，可以提高设备查询效率，进而提升用户体验。
另外，需要说明的是，地理节点数据和设备节点数据来源于不同的后台接口，因此不同类型的节点数据具有不同的数据格式。在当前页面展示各节点前，需要将各类型节点数据的数据格式进行统一。
示例性的，可以通过以下三点实现各类型节点数据的数据格式的统一：
1)通过该设备显示组件展示各地理节点，且各地理节点含有子树时，可以在各地理节点的节点数据中加入isLeaf字段，使各地理节点具备展开/折叠功能，展开/折叠功能的效果如图5中的展开按钮。当isLeaf字段的取值为true时，表明节点是设备节点，无需展开/折叠功能；当isLeaf字段的取值为false时，表明节点是地理节点，可以为该节点添加展开/折叠功能。可以理解的是，isLeaf字段会在节点初始化时生效，若地理节点不包含子树，展开该节点后，Element树组件会自动隐藏该节点的展开/折叠按钮，即使节点数据中的isLeaf字段取值为false。
2)通过该设备显示组件展示各设备节点时，可以提供选中和勾选设备节点的功能，且该功能不能选中和勾选地理节点。示例性的，可以在各节点的节点数据中增加disabeld字段。当disabeld字段的取值为true时，表明该节点不可选中和勾选，当disabeld字段的取值为false时，表明该节点可以选中或勾选。同时，disabeld字段支持使用函数配置，使用的配置函数的返回值必须是true或者false。设备节点的选中功能效果如图9和图10，设备节点的勾选功能效果如图14和图15。另外，工作人员有选中或勾选多个设备的需求时，需要将选中或勾选的设备节点数据传递给使用该设备显示组件的当前页面。因此，可以为各节点的节点数据设计origin字段，该字段用于保存后台接口返回的所有设备节点的完整数据。
3)通过该设备显示组件展示各设备节点时，还可以提供标记设备在线/离线状态的功能。示例性的，可以在各设备节点的节点数据中增加online字段。当online字段的取值为true时，表示该节点在线，当online字段的取值为false时，表示该节点离线。进一步的，为了展示设备在线/离线状态相应的设备图标，可以为设备节点增加icon字典，并保存图标数据。显示设备在线/离线状态的效果如图3中的图标①。
举例而言，对于后台接口返回的区域节点数据、楼栋节点数据和设备节点数据，可以进行如表1所示的处理，以将各类型节点数据的数据格式进行统一，渲染得到如图6所示 的当前页面。
表1
表1中，示出了三种节点类型，依次为区域节点、楼栋节点和设备节点，由于区域节点和楼栋节点均为地理节点，可以对二者的数据格式做相同处理。以区域节点为例，区域节点的原数据包括areaName字段(如新园区东侧)、areaNo字段(如418909909)和其它数据等，可以将区域节点的原数据统一为label字段(新园区东侧)、children字段、isLeaf字段(false)、disabled字段(true)、zoneNo字段(如7)和areaNo字段(418909909)。与区域节点不同的是，将楼栋节点的原数据进行处理后，还包括楼栋节点的上层节点信息，如zoneNo字段和areaNo字段。对于设备节点，设备节点的原数据包括deviceName字段(如B2层车库北通道)、onlilne字段(true/false)、icon图片数据和其它数据等，可以将设备节点的原数据统一 为label字段(B2层车库北通道)、isLeaf字段(true)、disabled字段(false/配置函数返回值)、onlilne字段(true/false)、icon图片数据和origin字段，设备节点的其它数据中可以包含设备节点的上层节点信息，如zoneNo字段、areaNo字段和buildingNo字段等。
通过对不同类型的节点数据进行数据格式的统一，使各类型节点具有统一的数据结构，进而在页面展示各类型节点时，每种类型的节点具有特定的显示形式和功能，工作人员可以直观地获取各节点的地理信息，以及了解各节点的功能。整个页面较美观，基于该页面进行简单的操作即可查看目标设备，提高了用户的使用体验。
本公开可以通过设备显示组件显示分级的地理层级，最后一层为各地理位置下安装的监控设备。同时，该设备显示组件能够满足搜索监控设备、选中监控设备播放视频流、勾选监控设备进行配置等需求。
一种示例实施方式中，在当前页面中显示第三层级设备节点后，接收到用户在预设时间段内的数据输入操作时，可以获取基础数据中与输入数据相关的目标设备节点数据，并根据目标设备节点数据渲染当前页面，以在当前页面中显示由目标设备节点组成的设备节点列表。本示例中实现的搜索功能无需点击搜索按钮，而是根据用户输入的数据实时请求搜索结果。为了避免用户输入文本过快而产生大量无用请求，进而影响系统性能和用户体验，可以根据用户在预设时间段内的输入数据进行搜索。其中，预设时间段可以是指用户停止键入文本后的特定时间段。例如，可以在用户停止键入文本800毫秒后请求搜索结果。
举例而言，当前页面为如图5所示的页面时，页面中显示有多个第三层级设备节点。当用户通过设备搜索框输入文本T，以搜索设备名称中包含文本T的监控设备时，可以获取基础数据中与文本T相关的目标设备节点数据，并在当前页面中显示一个设备节点列表，该列表中各个监控设备的设备名称中均包含文本T。再例如，也可以在当前页面中显示多个第一层级节点后，也就是当前页面为如图3所示的页面时，直接通过设备搜索框搜索目标设备。再例如，还可以在当前页面中显示多个第二层级节点后，也就是当前页面为如图4所示的页面时，通过设备搜索框搜索目标设备，本公开对此不做限定。参考图7所示，给出了包含设备节点列表的页面示意图。其中，当用户在设备搜索框中输入文本“1”时，通过请求设备名称中包含文本“1”的设备节点数据，在页面中展示了一个设备节点列表，该设备节点列表中各个监控设备的设备名称中均包含文本“1”，如设备1、设备10、设备11等。
需要说明的是，设备搜索功能的搜索范围是所有地理位置下的监控设备，搜索目标设备得到的设备节点列表中每个监控设备也可以称作一个设备节点，且设备节点的图标和文本样式与通过设备显示组件显示的设备节点的图标和文本样式相同。与通过设备显示组件显示的多层级节点不同的是，设备节点列表不具有层级结构，不包含地理节点，如区域节点和楼栋节点。
本公开的设备显示组件也可以用于视频监控、视频回放等页面，也就是在页面代码中引用该设备显示组件，对应的，可以将使用设备显示组件的页面称作父级，将设备显示组 件称作子级。以视频监控页面为例，通常视频监控页面的业务需求是：选中某一监控设备时，播放该监控设备的实时监控画面。其中，设备显示组件需要将该监控设备的数据传入视频监控页面，由视频监控页面进行监控设备视频流的获取和播放。可以理解的是，通过设备显示组件在同一时刻仅能选中一个设备节点，也就是在同一时刻仅能将一个设备节点设置为选中状态。
一种示例实施方式中，在当前页面中显示第三层级设备节点后，参考图8所示，可以根据步骤S810至步骤S840实现设备节点的选中功能。
步骤S810.接收到所述用户对第三层级目标设备节点的选择操作时，将第三层级目标设备节点数据传入所述设备显示组件的第一执行函数中，所述第三层级目标设备节点数据至少包括所述第三层级目标设备节点的唯一标识。
本公开中的设备显示组件内部需要有保存选中设备节点数据的变量，以实现选中设备节点的展示状态。另外，为了实现由父级页面控制设备显示组件选中某个设备节点，需要设备显示组件能够接收父级数据并设置相应设备节点的选中效果。示例性的，如表2所示，由父级页面控制设备显示组件实现设备节点的选中功能时，可以将selectedNode参数和selectedKey参数传入设备显示组件，设备显示组件内部用于保存选中设备节点数据的变量为设备选中变量deviceSelected，设备显示组件的第一执行函数为handleNodeClick函数，当用户点击设备节点可以执行该函数。
表2
举例而言，第三层级目标设备节点为图5中所示的“设备5”，且当用户点击该设备节点时，将该设备节点的节点数据传入handleNodeClick函数中。该设备节点的节点数据可以至少包含设备节点的唯一标识(如deviceSelected.id＝5)、设备节点的设备名称(如设备5)和设备节点的节点类型(如监控设备)等。
步骤S820.利用所述第一执行函数将所述设备显示组件的设备选中变量赋值为所述第三层级目标设备节点数据。
将用户点中设备节点的节点数据传入handleNodeClick函数后，可以利用handleNodeClick函数将设备选中变量deviceSelected的值设置为点中设备节点的节点数据。例如，可以将设备选中变量deviceSelected的值设置为“设备5”的节点数据。
步骤S830.将所述当前页面中各设备节点的唯一标识与所述设备选中变量的唯一标识分别进行比较，以确定所述当前页面中唯一标识与所述设备选中变量的唯一标识相同的所 述第三层级目标设备节点。
示例性的，将设备选中变量deviceSelected的值设置为“设备5”的节点数据后，设备选中变量deviceSelected的唯一标识变为“设备5”的唯一标识。然后，可以将图5中所展示的所有设备节点的唯一标识与设备选中变量deviceSelected的唯一标识分别进行比较，以确定当前页面中唯一标识与设备选中变量的唯一标识相同的目标设备节点。
具体地，唯一标识的取值由selectedKey参数确定，且selectedKey参数的默认取值为'id'。因此，可以将所有设备节点的id字段值与设备选中变量deviceSelected的id字段值进行比较。若selectedKey参数的取值为'deviceId'，则可以将所有设备节点的deviceId字段值与设备选中变量deviceSelected的deviceId字段值进行比较。对应的，设备节点是否选中的判断条件为：设备节点数据[selectedKey]＝deviceSelected[selectedKey]。该示例中有：设备节点数据.id＝deviceSelected.id＝5，表明用户选中的设备节点为“设备5”。
步骤S840.根据所述第三层级目标设备节点数据渲染所述当前页面，以将所述当前页面中的所述第三层级目标设备节点设置为选中状态。
确定“设备5”为用户选中的设备节点后，可以将该设备节点的数据传递给父级页面，以使父级页面根据该设备节点的数据进行页面显示调整。同时，也可以根据该设备节点的数据渲染当前页面，以将该设备节点设置为选中状态。例如，可以将选中设备节点进行高亮显示、加粗显示等，以表示该设备节点当前为选中状态。参考图9所示，给出了将“设备5”设置为选中状态的页面示意图。
另一种示例实施方式中，也可以实现图7所示设备节点列表中各设备节点的选中功能。例如，当用户点击设备节点列表中的“设备10”时，可以将该设备节点的节点数据传入handleNodeClick函数中，基于该函数将“设备10”设置为选中状态，具体的处理过程与步骤S810至步骤S840类似，此处不再详细赘述。参考图10所示，给出了将“设备10”设置为选中状态的页面示意图。
本公开可以根据业务需求，通过配置不同参数实现监控设备的选中功能。
又一种示例实施方式中，当前页面中还可以包括多个数据展示界面，每个数据展示界面用于展示与设备节点对应的视频流数据。例如，当前页面为视频监控页面，视频监控页面中包括用于展示与设备节点对应的视频流数据的数据展示页面，数据展示页面如图11中的视频画面1和5个需要配置的画面。在当前页面中显示第三层级设备节点后，接收到用户对目标数据展示界面的选择操作时，可以将目标数据展示界面对应的节点选中参数集合传递至设备显示组件，设备显示组件根据节点选中参数集合中的参数值渲染当前页面，以将当前页面中的目标设备节点设置为选中状态。其中，节点选中参数集合可以包括selectedKey变量和selectedNode参数。
示例性的，目标数据展示界面可以是视频画面1，当用户点击视频画面1时，可以将与视频画面1对应的节点选中参合集合传递至设备显示组件中。例如，当selectedKey变量的默认取值为'id'时，父级页面只需向设备展示组件传递selectedNode参数，selectedNode 参数中包含名为'id'的变量。再例如，当selectedKey变量的默认取值不是'id'时，即父级页面拥有的选中设备数据中不含id字段，则父级页面需先向设备展示组件传递selectedKey参数，以指定设备唯一标识的变量名称，其次，还需传递selectedNode参数，selectedNode中可以包含一个变量V，V的名称为selectedKey变量值。举例而言，selectedKey变量值为‘deviceId’，则selectedNode参数需包含‘deviceId’的取值，形如：{deviceId:1}。
本公开通过配置，可以满足视频监控页面点选监控设备的业务需求。
在视频监控页面中，用户有播放监控设备的实时监控画面的需求，对应的，需要在设备显示组件中标记所有播放中的设备节点，并在该设备节点的设备名称后添加“正在播放”的文本，也就是将该设备节点设置为播放状态。
一种示例实施方式中，在当前页面中显示第三层级设备节点后，接收到用户对第三层级目标设备节点的选择操作时，可以将第三层目标设备节点数据传递至当前页面，第三层级目标设备节点数据可以至少包括第三层级目标设备节点的唯一标识。若当前页面可以根据第三层目标设备节点数据获取到对应的视频流数据，可以接收由当前页面发送的第三层级目标设备节点的唯一标识。最后，当第三层级目标设备节点的唯一标识存在于设备显示组件的播放设备标识集合中时，可以将当前页面中的第三层级目标设备节点设置为播放状态。
示例性的，当用户点击某个设备节点后，可以将该设备节点的节点数据传递给父级页面，由父级页面获取该设备节点的视频流并进行播放，因此，播放设备的数据可以由父级页面保存。如表3所示，由父级页面控制设备显示组件实现设备节点的播放功能时，设备显示组件只需提供接收播放设备的数据并标记相应设备节点为播放态的功能。例如，可以将playingIds参数和playingKey参数传入设备显示组件，playingIds参数为播放中设备的唯一标识集合，如为[1，2，3]，其中1、2和3分别为对应的播放中设备的唯一标识。playingKey参数为播放中设备的判定依据，当playingKey参数的取值存在于playingIds参数集合中时，可以将该取值对应的设备节点设置为播放状态。
表3
举例而言，参考图11所示，第三层级目标设备节点为“设备5”，且当用户点击该设备节点时，可以将该设备节点的节点数据传递至当前页面，该设备节点的节点数据可以至少包含设备节点的唯一标识(如id：5)、设备节点的设备名称(如设备5)和设备节点的节点类型(如监控设备)等。当前页面中还包括多个数据展示界面，如视频画面1和5个需要配置的画面。
当前页面接收到设备节点的节点数据后，可以根据该设备节点的节点数据获取该设备节点的视频流。若当前页面可以获取该设备节点的视频流，则可以将该设备节点的唯一标 识发送至设备显示组件。最后，当该设备节点的唯一标识存在于playingIds参数中时，可以将当前页面中的第三层级目标设备节点设置为播放状态。其中，唯一标识的取值由playingKey参数确定，例如，若设备节点的节点数据为device，设备节点是否为播放状态的判断条件为：playingIds参数中存在值X，满足X＝device[playingKey]。该示例中有：playingIds参数为[5，6，7]，满足X＝device.id＝5，即该集合中包括5，表明播放中的设备节点为“设备5”。若当前页面无法获取该设备节点的视频流，则不需要将该设备节点设置为播放状态。可以理解的是，将“设备5”标记为正在播放中的同时，可以在对应的数据展示界面如视频画面1中播放相应地点的监控视频。
类似的，若图7所示设备节点列表中各设备节点均有对应的视频流，也可以将各设备节点设置为播放态。例如，当用户点击设备节点列表中的“设备10”时，可以将该设备节点的节点数据发送至当前页面，以获取该设备节点的视频流。若当前页面可以获取该设备节点的视频流，则可以将该设备节点的唯一标识发送至设备显示组件，以通过设备显示组件将“设备10”标记为播放态。参考图12所示，给出了将“设备10”设置为播放态的页面示意图。
又一示例实施方式中，在当前页面中显示第三层级设备节点后，接收到用户对目标数据展示界面的选择操作时，可以将目标数据展示界面对应的节点播放参数集合传递至设备显示组件，设备显示组件根据节点播放参数集合中的参数值渲染当前页面，以将当前页面中的目标设备节点设置为播放状态。其中，节点播放参数集合可以包括playingKey参数和playingKey参数。例如，当playingKey参数的取值存在于playingIds参数集合中时，可以将该取值对应的设备节点设置为播放状态。
本公开可以根据业务需求，通过配置不同参数实现监控设备的播放态设置功能。也可以通过配置，满足视频监控页面将播放中的监控设备设置成播放态的需求。
本公开的设备显示组件还可以用于录像计划配置页面和轮询页面中，以轮询页面为例，用户有勾选设备节点的需求，对应的，需要设备显示组件将勾选设备的数据传递到父级页面。另外，也需要设备显示组件根据父级页面传入的数据，将相应的设备节点设置勾选状态。
一种示例实施方式中，在当前页面中显示第三层级设备节点后，参考图13所示，可以根据步骤S1310至步骤S1340实现设备节点的勾选功能。
步骤S1310.接收到所述用户对第三层级目标设备节点的选择操作时，将第三层级目标设备节点数据传入所述设备显示组件的第二执行函数中，所述第三层级目标设备节点数据至少包括所述第三层级目标设备节点的唯一标识和当前勾选状态。
本公开示例实施方式中，1)设备显示组件需要提供一个入参，父级页面通过该入参控制设备显示组件是否具备勾选设备节点的功能；2)设备显示组件需要提供配置函数设置特定设备节点是否可选，函数返回true或false，返回true表示设备节点不可勾选，返回false表示设备节点可勾选；3)设备显示组件内部需要有保存勾选设备节点数据的变量；4)为 了实现根据父级页面的设备勾选数据将相应的设备节点设置为勾选状态，需要设备显示组件能够接收父级数据并设置相应的勾选效果。示例性的，如表4所示，由父级页面控制设备显示组件实现设备节点的勾选功能时，可以将checkable参数、checkableFunc参数、checkedIds参数、checkedNodes参数和checkedKey参数传入设备显示组件，设备显示组件内部用于保存勾选设备节点数据的变量为设备勾选变量deviceChecked，设备显示组件的第二执行函数为handleCheckChange函数，当用户点击设备节点可以执行该函数。
表4
举例而言，第三层级目标设备节点为图5中所示的“设备6”，且当用户点击该设备节点时，将该设备节点的节点数据传入handleCheckChange函数中。该设备节点的节点数据checkedNode可以至少包含设备节点的唯一标识(如id：6)和设备节点的当前勾选状态checked等。
步骤S1320.当所述当前勾选状态为待勾选时，利用所述第二执行函数将所述第三层级目标设备节点数据加入所述设备显示组件的设备勾选变量中。
其中，勾选状态checked取值可以为true/false，当勾选状态checked为true时，表示该节点的当前勾选状态为待勾选，即用户点击该设备节点时，可以将该设备节点设置为勾选状态；当勾选状态checked为false时，表示用户点击该设备节点时，可以取消该设备节点的勾选状态。
示例性的，当“设备6”的当前勾选状态为待勾选时，可以利用所述第二执行函数handleCheckChange函数将该设备节点的节点数据checkedNode加入设备显示组件的设备勾选变量deviceChecked中，否则，可以将该设备节点的节点数据checkedNode从设备显示组件的设备勾选变量deviceChecked中删除。
步骤S1330.根据所述设备勾选变量中所述第三层级目标设备节点的唯一标识对所述设备显示组件的勾选设备标识集合进行赋值。
图5中展示了多层级节点，例如，可以从设备勾选变量deviceChecked中获取“设备6” 的唯一标识，唯一标识的具体取值由checkedKey参数确定。确定“设备6”的唯一标识后，可以将勾选设备标识集合deviceCheckedIds中加入“设备6”的唯一标识。
步骤S1340.根据赋值后的所述勾选设备标识集合将所述当前页面中的所述第三层级目标设备节点设置为勾选状态。
确定“设备6”为用户勾选的设备节点后，可以将该设备节点的数据传递给父级页面，以使父级页面根据该设备节点的数据进行页面显示调整。同时，也可以根据该设备节点的数据渲染当前页面，以将该设备节点设置为勾选状态。参考图14所示，给出了将“设备6”设置为勾选状态的页面示意图。
另一种示例实施方式中，也可以实现图7所示设备节点列表中各设备节点的勾选功能。例如，当用户点击设备节点列表中的“设备10”时，可以将该设备节点的节点数据传入handleCheckDevice函数中，基于该函数将“设备10”设置为勾选状态，具体的处理过程与步骤S1310至步骤S1340类似，此处不再详细赘述。参考图15所示，给出了将“设备10”设置为勾选状态的页面示意图。
需要说明的是，在步骤S1330中，勾选设备标识集合deviceCheckedIds的值与设备节点列表中设备节点的勾选状态实时同步。该步骤可以保证从多层级节点切换到设备节点列表时，可以同步多层级节点的勾选结果。而且，当展示设备节点列表时，勾选设备标识集合deviceCheckedIds的值为最新的勾选节点数据，从设备节点列表切换到多层级节点时只需根据勾选设备标识集合deviceCheckedIds即可同步设备节点列表的勾选结果。
本公开可以根据业务需求，通过配置不同参数实现监控设备的勾选功能。
另一种示例实施方式中，接收到用户对目标数据展示界面的选择操作时，可以将目标数据展示界面对应的节点勾选参数集合传递至设备显示组件，设备显示组件根据节点勾选参数集合中的参数值渲染当前页面，以将当前页面中的目标设备节点设置为勾选状态。其中，节点勾选参合集合可以包括checkedIds参数、checkedKey参数、checkedNodes参数和checked参数等。
示例性的，目标数据展示界面可以是如图11中的视频画面1，当用户点击视频画面1时，可以将与视频画面1对应的设备节点数据传递至设备显示组件中。例如，当传入的设备节点数据为checkedIds参数时，可以将勾选设备标识集合deviceCheckedIds的值设置为checkedIds参数。然后，可以根据checkedIds参数和checkedKey参数的值，生成设备勾选变量deviceChecked的值，生成单个勾选的设备节点的数据结构为：{checkedKey的值：设备唯一标识值}，最后，可以将该设备节点设置为勾选状态。再例如，当传入的设备节点数据为checkedNodes参数时，可以将设备勾选变量deviceChecked的值设置为checkedNodes参数的值，然后，根据checkedNodes参数和checkedKey参数的值，生成勾选设备标识集合deviceCheckedIds的值，即取checkedNodes参数中设备节点的唯一标识值生成勾选设备标识集合deviceCheckedIds，保存唯一标识的变量名为checkedKey，并将相应设备节点设置为勾选状态。
上述两种情况中，勾选设备标识集合deviceCheckedIds保存了所有勾选设备节点的唯一标识，可以用于在多层级节点和设备节点列表中设置设备节点的勾选状态。而设置设备勾选变量deviceChecked的值是为了当用户继续勾选设备节点或取消勾选设备节点时，可以在已有勾选设备节点数据的基础上更新设备勾选变量deviceChecked，以向父级页面传递最新的勾选设备节点数据集合。
本公开通过配置，可以满足录像计划配置页面和轮询页面勾选监控设备的需求。
本公开示例实施方式中的设备显示组件可以提供按地理层级的监控设备展示功能。另外，还可以根据业务需求，通过配置不同参数实现监控设备的选中功能、播放态设置功能以及勾选功能，进而满足园区管理系统不同页面的业务需求。
还需说明的是，本公开示例实施方式中可以预先将第一执行函数(handleNodeClick)、第二执行函数(handleCheckChange)、设备选中变量(deviceSelected)和设备勾选变量(deviceChecked)等封装为可执行文件并存储至浏览器中，以在接收到对当前页面中地理节点的触发操作时执行该可执行文件。可以理解的是，可以根据用户的实际需求进行源码封装并得到用户所需的可执行文件，本公开对此不做具体限定。示例性的，可以在Vue框架下使用webpack(一种模块打包器)将当前页面源码、第一执行函数、第二执行函数、设备选中变量和设备勾选变量等相关源码进行打包，并以文件夹形式存储于服务器中，用户在本地浏览器进行使用时可以向服务器进行数据请求，以请求诸如本公开涉及到的第一执行函数handleNodeClick、第二执行函数handleCheckChange、设备选中变量deviceSelected和设备勾选变量deviceChecked等相关源码。优选的，在用户首次进行当前页面访问时，即可将预先打包好的可执行文件共同部署至本地浏览器，可以避免频繁的向服务器进行数据请求。本公开所示例实施方式所提供的信息显示方法逻辑清晰、架构简单、轻量化、易实现，且不会占用过多内存。可以理解的是，该信息显示方法指在浏览器端进行数据处理。
在本公开示例实施方式所提供的信息显示方法中，通过获取设备显示组件所需的基础数据，并根据基础数据在当前页面显示第一层级节点，第一层级节点包括第一层级地理节点和第一层级设备节点中的至少一种；接收到用户对第一层级目标地理节点的触发操作时，在当前页面中显示第二层级节点，第二层级节点包括第二层级地理节点和第二层级设备节点中的至少一种；接收到用户对第二层级目标地理节点的触发操作时，在当前页面中显示第三层级设备节点。本公开可以实现带有地理信息的多层级节点显示，便于业务人员根据地理层级查看目标设备，提高了设备查询效率，进而提升了用户体验。
应当注意，尽管在附图中以特定顺序描述了本公开中方法的各个步骤，但是，这并非要求或者暗示必须按照该特定顺序来执行这些步骤，或是必须执行全部所示的步骤才能实现期望的结果。附加的或备选的，可以省略某些步骤，将多个步骤合并为一个步骤执行，以及/或者将一个步骤分解为多个步骤执行等。
进一步的，本示例实施方式中，还提供了一种信息显示装置。该装置可以应用于一终端设备或服务器。参考图16所示，该信息显示装置1600可以包括第一信息显示模块1610、 第二信息显示模块1620和第三信息显示模块1630，其中：
第一信息显示模块1610，用于获取设备显示组件所需的基础数据，并根据所述基础数据在当前页面显示第一层级节点，所述第一层级节点包括第一层级地理节点和第一层级设备节点中的至少一种；
第二信息显示模块1620，用于接收到用户对第一层级目标地理节点的触发操作时，在所述当前页面中显示第二层级节点，所述第二层级节点包括第二层级地理节点和第二层级设备节点中的至少一种；
第三信息显示模块1630，用于接收到所述用户对第二层级目标地理节点的触发操作时，在所述当前页面中显示第三层级设备节点。
在一种可选的实施方式中，信息显示装置1600中所述设备显示组件所需的基础数据至少包括地理节点数据、与所述地理节点数据对应的子树数据和设备节点数据；
其中，所述地理节点数据包括所述第一层级地理节点数据和所述第二层级地理节点数据；
所述地理节点数据为第一层级地理节点数据时，所述子树数据为所述第二层级地理节点数据和所述第二层级设备节点数据；
所述地理节点数据为第二层级地理节点数据时，所述子树数据为所述第三层级设备节点数据；
所述设备节点数据包括所述第一层级设备节点数据、第二层级设备节点数据和所述第三层级设备节点数据。
在一种可选的实施方式中，第一信息显示模块1610被配置为用于根据所述基础数据中的所述第一层级地理节点数据和所述第一层级设备节点数据渲染所述当前页面，以在所述当前页面显示所述第一层级地理节点和所述第一层级设备节点。
在一种可选的实施方式中，该信息显示装置1600还包括：
搜索数据输入模块，用于接收到所述用户在预设时间段内的数据输入操作时，获取所述基础数据中与输入数据相关的目标设备节点数据；
设备节点列表显示模块，用于根据所述目标设备节点数据渲染所述当前页面，以在所述当前页面中显示由目标设备节点组成的设备节点列表。
在一种可选的实施方式中，该信息显示装置1600还包括：
第一传参模块，用于接收到所述用户对第三层级目标设备节点的选择操作时，将第三层级目标设备节点数据传入所述设备显示组件的第一执行函数中，所述第三层级目标设备节点数据至少包括所述第三层级目标设备节点的唯一标识；
第一数据赋值模块，用于利用所述第一执行函数将所述设备显示组件的设备选中变量赋值为所述第三层级目标设备节点数据；
选中节点确定模块，用于将所述当前页面中各设备节点的唯一标识与所述设备选中变量的唯一标识分别进行比较，以确定所述当前页面中唯一标识与所述设备选中变量的唯一 标识相同的所述第三层级目标设备节点；
选中节点设置模块，用于根据所述第三层级目标设备节点数据渲染所述当前页面，以将所述当前页面中的所述第三层级目标设备节点设置为选中状态。
在一种可选的实施方式中，该信息显示装置1600还包括：
节点数据传递模块，用于接收到所述用户对第三层级目标设备节点的选择操作时，将第三层目标设备节点数据传递至所述当前页面，所述第三层级目标设备节点数据至少包括所述第三层级目标设备节点的唯一标识；
节点数据接收模块，用于当所述当前页面根据所述第三层目标设备节点数据获取到对应的视频流数据时，接收由所述当前页面发送的所述第三层级目标设备节点的唯一标识；
播放状态设置模块，用于当所述第三层级目标设备节点的唯一标识存在于所述设备显示组件的播放设备标识集合中时，将所述当前页面中的所述第三层级目标设备节点设置为播放状态。
在一种可选的实施方式中，该信息显示装置1600还包括：
第一传参模块，用于接收到所述用户对第三层级目标设备节点的选择操作时，将第三层级目标设备节点数据传入所述设备显示组件的第二执行函数中，所述第三层级目标设备节点数据至少包括所述第三层级目标设备节点的唯一标识和当前勾选状态；
节点数据添加模块，用于当所述当前勾选状态为待勾选时，利用所述第二执行函数将所述第三层级目标设备节点数据加入所述设备显示组件的设备勾选变量中；
第二数据赋值模块，用于根据所述设备勾选变量中所述第三层级目标设备节点的唯一标识对所述设备显示组件的勾选设备标识集合进行赋值；
勾选状态设置模块，用于根据赋值后的所述勾选设备标识集合将所述当前页面中的所述第三层级目标设备节点设置为勾选状态。
在一种可选的实施方式中，所述当前页面中包括多个数据展示界面，所述数据展示界面用于展示与各层级设备节点对应的视频流数据；该信息显示装置1600还包括：
第一传参模块，用于接收到所述用户对目标数据展示界面的选择操作时，将所述目标数据展示界面对应的节点选中参数集合传递至所述设备显示组件；
选中状态设置模块，用于所述设备显示组件根据所述节点选中参数集合中的参数值渲染所述当前页面，以将所述当前页面中的目标设备节点设置为选中状态。
在一种可选的实施方式中，该信息显示装置1600还包括：
节点数据获取模块，用于接收到所述用户对目标数据展示界面的选择操作时，将所述目标数据展示界面对应的节点播放参数集合传递至所述设备显示组件；
播放状态设置模块，用于所述设备显示组件根据所述节点播放参数集合中的参数值渲染所述当前页面，以将所述当前页面中的目标设备节点设置为播放状态。
在一种可选的实施方式中，该信息显示装置1600还包括：
节点数据获取模块，用于接收到所述用户对目标数据展示界面的选择操作时，将所述 目标数据展示界面对应的节点勾选参数集合传递至所述设备显示组件；
勾选状态设置模块，用于所述设备显示组件根据所述节点勾选参数集合中的参数值渲染所述当前页面，以将所述当前页面中的目标设备节点设置为勾选状态。
上述信息显示装置中各模块的具体细节已经在对应的信息显示方法中进行了详细的描述，因此此处不再赘述。
上述装置中各模块可以是通用处理器，包括：中央处理器、网络处理器等；还可以是数字信号处理器、专用集成电路、现场可编程门阵列或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。各模块也可以由软件、固件等形式来实现。上述装置中的各处理器可以是独立的处理器，也可以集成在一起。
本公开的示例性实施方式还提供了一种计算机可读存储介质，其上存储有能够实现本说明书上述方法的程序产品。在一些可能的实施方式中，本公开的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当程序产品在电子设备上运行时，程序代码用于使电子设备执行本说明书上述“示例性方法”部分中描述的根据本公开各种示例性实施方式的步骤。该程序产品可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在电子设备，例如个人电脑上运行。然而，本公开的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。
程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。
计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读信号介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。
可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。
可以以一种或多种程序设计语言的任意组合来编写用于执行本公开操作的程序代码，程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算 设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。
本公开的示例性实施方式还提供了一种能够实现上述方法的电子设备。下面参照图17来描述根据本公开的这种示例性实施方式的电子设备1700。图17显示的电子设备1700仅仅是一个示例，不应对本公开实施方式的功能和使用范围带来任何限制。
如图17所示，电子设备1700可以以通用计算设备的形式表现。电子设备1700的组件可以包括但不限于：至少一个处理单元1710、至少一个存储单元1720、连接不同系统组件(包括存储单元1720和处理单元1710)的总线1730和显示单元1740。
存储单元1720存储有程序代码，程序代码可以被处理单元1710执行，使得处理单元1710执行本说明书上述“示例性方法”部分中描述的根据本公开各种示例性实施方式的步骤。例如，处理单元1710可以执行图2、图8和图13中任意一个或多个方法步骤。
存储单元1720可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)1721和/或高速缓存存储单元1722，还可以进一步包括只读存储单元(ROM)1723。
存储单元1720还可以包括具有一组(至少一个)程序模块1725的程序/实用工具1724，这样的程序模块1725包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。
总线1730可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。
电子设备1700也可以与一个或多个外部设备1800(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与该电子设备1700交互的设备通信，和/或与使得该电子设备1700能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口1750进行。并且，电子设备1700还可以通过网络适配器1760与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器1760通过总线1730与电子设备1700的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备1700使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。
通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、终端装置、或者网络设备等)执行根据本公开示例性实施方式的方法。
此外，上述附图仅是根据本公开示例性实施方式的方法所包括的处理的示意性说明，而不是限制目的。易于理解，上述附图所示的处理并不表明或限制这些处理的时间顺序。另外，也易于理解，这些处理可以是例如在多个模块中同步或异步执行的。
应当注意，尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本公开的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (13)

  1. 一种信息显示方法，其特征在于，包括：
    获取设备显示组件所需的基础数据，并根据所述基础数据在当前页面显示第一层级节点，所述第一层级节点包括第一层级地理节点和第一层级设备节点中的至少一种；
    接收到用户对第一层级目标地理节点的触发操作时，在所述当前页面中显示第二层级节点，所述第二层级节点包括第二层级地理节点和第二层级设备节点中的至少一种；
    接收到所述用户对第二层级目标地理节点的触发操作时，在所述当前页面中显示第三层级设备节点。
  2. 根据权利要求1所述的信息显示方法，其特征在于，所述设备显示组件所需的基础数据至少包括地理节点数据、与所述地理节点数据对应的子树数据和设备节点数据；
    其中，所述地理节点数据包括所述第一层级地理节点数据和所述第二层级地理节点数据；
    所述地理节点数据为第一层级地理节点数据时，所述子树数据为所述第二层级地理节点数据和所述第二层级设备节点数据；
    所述地理节点数据为第二层级地理节点数据时，所述子树数据为所述第三层级设备节点数据；
    所述设备节点数据包括所述第一层级设备节点数据、第二层级设备节点数据和所述第三层级设备节点数据。
  3. 根据权利要求2所述的信息显示方法，其特征在于，所述根据所述基础数据在当前页面显示第一层级节点，包括：
    根据所述基础数据中的所述第一层级地理节点数据和所述第一层级设备节点数据渲染所述当前页面，以在所述当前页面显示所述第一层级地理节点和所述第一层级设备节点。
  4. 根据权利要求1所述的信息显示方法，其特征在于，在所述当前页面中显示第三层级设备节点后，所述方法还包括：
    接收到所述用户在预设时间段内的数据输入操作时，获取所述基础数据中与输入数据相关的目标设备节点数据；
    根据所述目标设备节点数据渲染所述当前页面，以在所述当前页面中显示由目标设备节点组成的设备节点列表。
  5. 根据权利要求1所述的信息显示方法，其特征在于，在所述当前页面中显示第三层级设备节点后，所述方法还包括：
    接收到所述用户对第三层级目标设备节点的选择操作时，将第三层级目标 设备节点数据传入所述设备显示组件的第一执行函数中，所述第三层级目标设备节点数据至少包括所述第三层级目标设备节点的唯一标识；
    利用所述第一执行函数将所述设备显示组件的设备选中变量赋值为所述第三层级目标设备节点数据；
    将所述当前页面中各设备节点的唯一标识与所述设备选中变量的唯一标识分别进行比较，以确定所述当前页面中唯一标识与所述设备选中变量的唯一标识相同的所述第三层级目标设备节点；
    根据所述第三层级目标设备节点数据渲染所述当前页面，以将所述当前页面中的所述第三层级目标设备节点设置为选中状态。
  6. 根据权利要求1所述的信息显示方法，其特征在于，在所述当前页面中显示第三层级设备节点后，所述方法还包括：
    接收到所述用户对第三层级目标设备节点的选择操作时，将第三层目标设备节点数据传递至所述当前页面，所述第三层级目标设备节点数据至少包括所述第三层级目标设备节点的唯一标识；
    当所述当前页面根据所述第三层目标设备节点数据获取到对应的视频流数据时，接收由所述当前页面发送的所述第三层级目标设备节点的唯一标识；
    当所述第三层级目标设备节点的唯一标识存在于所述设备显示组件的播放设备标识集合中时，将所述当前页面中的所述第三层级目标设备节点设置为播放状态。
  7. 根据权利要求1所述的信息显示方法，其特征在于，在所述当前页面中显示第三层级设备节点后，所述方法还包括：
    接收到所述用户对第三层级目标设备节点的选择操作时，将第三层级目标设备节点数据传入所述设备显示组件的第二执行函数中，所述第三层级目标设备节点数据至少包括所述第三层级目标设备节点的唯一标识和当前勾选状态；
    当所述当前勾选状态为待勾选时，利用所述第二执行函数将所述第三层级目标设备节点数据加入所述设备显示组件的设备勾选变量中；
    根据所述设备勾选变量中所述第三层级目标设备节点的唯一标识对所述设备显示组件的勾选设备标识集合进行赋值；
    根据赋值后的所述勾选设备标识集合将所述当前页面中的所述第三层级目标设备节点设置为勾选状态。
  8. 根据权利要求1所述的信息显示方法，其特征在于，所述当前页面中包括多个数据展示界面，所述数据展示界面用于展示与各层级设备节点对应的视频流数据；在所述当前页面中显示第三层级设备节点后，所述方法还包括：
    接收到所述用户对目标数据展示界面的选择操作时，将所述目标数据展示界面对应的节点选中参数集合传递至所述设备显示组件；
    所述设备显示组件根据所述节点选中参数集合中的参数值渲染所述当前页面，以将所述当前页面中的目标设备节点设置为选中状态。
  9. 根据权利要求8所述的信息显示方法，其特征在于，在所述当前页面中显示第三层级设备节点后，所述方法还包括：
    接收到所述用户对目标数据展示界面的选择操作时，将所述目标数据展示界面对应的节点播放参数集合传递至所述设备显示组件；
    所述设备显示组件根据所述节点播放参数集合中的参数值渲染所述当前页面，以将所述当前页面中的目标设备节点设置为播放状态。
  10. 根据权利要求8所述的信息显示方法，其特征在于，在所述当前页面中显示第三层级设备节点后，所述方法还包括：
    接收到所述用户对目标数据展示界面的选择操作时，将所述目标数据展示界面对应的节点勾选参数集合传递至所述设备显示组件；
    所述设备显示组件根据所述节点勾选参数集合中的参数值渲染所述当前页面，以将所述当前页面中的目标设备节点设置为勾选状态。
  11. 一种信息显示装置，其特征在于，包括：
    第一信息显示模块，用于获取设备显示组件所需的基础数据，并根据所述基础数据在当前页面显示第一层级节点，所述第一层级节点包括第一层级地理节点和第一层级设备节点中的至少一种；
    第二信息显示模块，用于接收到用户对第一层级目标地理节点的触发操作时，在所述当前页面中显示第二层级节点，所述第二层级节点包括第二层级地理节点和第二层级设备节点中的至少一种；
    第三信息显示模块，用于接收到所述用户对第二层级目标地理节点的触发操作时，在所述当前页面中显示第三层级设备节点。
  12. 一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1-10任一项所述方法。
  13. 一种电子设备，其特征在于，包括：
    处理器；以及
    存储器，用于存储所述处理器的可执行指令；
    其中，所述处理器配置为经由执行所述可执行指令来执行权利要求1-10任一项所述的方法。
PCT/CN2023/108362 2022-07-29 2023-07-20 信息显示方法、装置、存储介质及电子设备 WO2024022214A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202210908146.0A CN115269916A (zh) 2022-07-29 2022-07-29 信息显示方法、装置、存储介质及电子设备
CN202210908146.0 2022-07-29

Publications (1)

Publication Number Publication Date
WO2024022214A1 true WO2024022214A1 (zh) 2024-02-01

Family

ID=83770220

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2023/108362 WO2024022214A1 (zh) 2022-07-29 2023-07-20 信息显示方法、装置、存储介质及电子设备

Country Status (2)

Country Link
CN (1) CN115269916A (zh)
WO (1) WO2024022214A1 (zh)

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115269916A (zh) * 2022-07-29 2022-11-01 京东方科技集团股份有限公司 信息显示方法、装置、存储介质及电子设备
CN115687366A (zh) * 2022-12-08 2023-02-03 深圳市智多兴投控科技有限公司 一种物流主通道的构建方法及相关设备
CN115618082B (zh) * 2022-12-19 2024-04-26 中国人民解放军国防科技大学 基于节点中心性的大规模网络空间视图展示方法与系统

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2017157165A (ja) * 2016-03-04 2017-09-07 株式会社東芝 監視制御装置、監視制御装置に適用される情報表示方法、情報表示モジュール、および情報表示プログラム、ならびに情報表示テーブル
CN111124212A (zh) * 2018-10-31 2020-05-08 北京国双科技有限公司 数据的显示方法及装置、存储介质及处理器
CN111580912A (zh) * 2020-05-09 2020-08-25 北京飞讯数码科技有限公司 一种多层次结构资源组的展示方法及存储介质
CN112464039A (zh) * 2020-11-11 2021-03-09 新奥数能科技有限公司 树形结构的数据显示方法、装置、电子设备和介质
CN113590907A (zh) * 2021-07-23 2021-11-02 深圳市商汤科技有限公司 相机管理方法及装置、电子设备和存储介质
CN115269916A (zh) * 2022-07-29 2022-11-01 京东方科技集团股份有限公司 信息显示方法、装置、存储介质及电子设备

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2017157165A (ja) * 2016-03-04 2017-09-07 株式会社東芝 監視制御装置、監視制御装置に適用される情報表示方法、情報表示モジュール、および情報表示プログラム、ならびに情報表示テーブル
CN111124212A (zh) * 2018-10-31 2020-05-08 北京国双科技有限公司 数据的显示方法及装置、存储介质及处理器
CN111580912A (zh) * 2020-05-09 2020-08-25 北京飞讯数码科技有限公司 一种多层次结构资源组的展示方法及存储介质
CN112464039A (zh) * 2020-11-11 2021-03-09 新奥数能科技有限公司 树形结构的数据显示方法、装置、电子设备和介质
CN113590907A (zh) * 2021-07-23 2021-11-02 深圳市商汤科技有限公司 相机管理方法及装置、电子设备和存储介质
CN115269916A (zh) * 2022-07-29 2022-11-01 京东方科技集团股份有限公司 信息显示方法、装置、存储介质及电子设备

Also Published As

Publication number Publication date
CN115269916A (zh) 2022-11-01

Similar Documents

Publication Publication Date Title
WO2024022214A1 (zh) 信息显示方法、装置、存储介质及电子设备
US7979067B2 (en) Context avatar
US20170177552A1 (en) Remote browsing and searching
US20120110576A1 (en) Resource sharing system and method thereof
KR20120072022A (ko) 클라우드 컴퓨팅 기반 가상 스마트홈 시스템, 서버 장치, 홈게이트웨이 및 방법
JPH10149398A (ja) マップ構築システムおよびマップ構築方法
US20150263926A1 (en) Network management system supporting customizable groups
US20100036907A1 (en) Digital living network alliance (DLNA) server that serves contents from IVL services
US20140359461A1 (en) Apparatus And Method Providing Unified Network Management
CN105307024A (zh) 一种基于视联网的图文信息界面控制方法和装置
CN101365082A (zh) 一种基于对等计算技术机顶盒在屏显示系统的实现方法
US20230334723A1 (en) Post-processing special effect production system and method, and ar special effect rendering method and apparatus
JP2015517165A (ja) ユーザーインターフェイスウェブサービス
CN112000911B (zh) 页面管理方法、装置、电子设备以及存储介质
US20090249219A1 (en) Providing a Shared Desktop Interface of Multiple Computer Terminals
JP2022533200A (ja) 地理的位置を検索する方法、装置、機器、コンピュータ記憶媒体及びコンピュータプログラム
US11689757B2 (en) Method and apparatus for providing video streams
US20190149511A1 (en) System and method for connecting using aliases
CN112558968A (zh) 一种资源树视图的生成方法、装置、设备及存储介质
US20190339936A1 (en) Smart mirror
WO2021227636A1 (zh) 微服务处理方法及装置、存储介质及电子设备
CN113569089A (zh) 信息处理方法、装置、服务器、设备、系统及存储介质
JP2021120899A (ja) ユーザ識別方法、装置、記憶媒体及び電子機器
CN112269664A (zh) 云服务器资源管理方法、装置及系统
JP2004094411A (ja) 広域ネットワーク内の透過的な作業環境を有するシン−クライアントのローミングシステムおよび方法

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 23845425

Country of ref document: EP

Kind code of ref document: A1