Implementation method for picture adding attribute based on Antv equipment

Abstract

The invention provides an implementation method for adding attributes based on an Antv equipment picture, which comprises the following steps of: building an environment, initializing a canvas, displaying the equipment picture on the canvas by calling an Antv X6 node adding method, and setting an attribute component for the equipment picture. Therefore, the user can better enable the equipment attribute configuration process to be more visual and convenient through the graphical interface, the learning cost and the operation difficulty of the user are reduced, the efficiency and the accuracy of equipment configuration are improved, and subsequent developers can conveniently perform reuse development on the basis; alarm positioning of equipment is facilitated, and the beneficial effects of being simple in operation, good in flexibility, convenient to customize and the like are achieved.

Description

Technical Field

[0001] The present invention relates to the technical field of image processing, and in particular, to a method for implementing adding attributes to Antv device pictures. Background Art

[0002] In the field of industrial Internet, the management and monitoring of devices have become increasingly important. Traditional methods often record device information in the form of text or tables, which is not only inefficient but also difficult to intuitively display the specific data information of the devices. With the continuous development of data visualization technology, it has become a trend to display device information through a graphical interface.

[0003] However, there are still many deficiencies in the existing graphical device management systems in the addition and display of device attributes. In particular, specific device attributes cannot be added to a certain part of the current device pictures, making it impossible for device managers to directly and efficiently view and edit device attributes on the graphical interface, resulting in problems such as complex operations, poor flexibility, and difficulty in customization. Summary of the Invention

[0004] The present invention provides a method for implementing adding attributes to Antv device pictures to solve the defects of complex operations, poor flexibility, and difficulty in customization caused by the inability to add specific device attributes to a certain part of the device pictures in the prior art.

[0005] The present invention provides a method for implementing adding attributes to Antv device pictures, including: Setting up the environment; Initializing the canvas; Displaying the device picture on the canvas by calling the method of adding nodes in Antv X6; Setting attribute components for the device picture.

[0006] According to the above method for implementing adding attributes to Antv device pictures, the setting up of the environment specifically includes: setting Antv X6 in a Vue project by using the npm package management tool or the yarn package management tool.

[0007] According to the above method for implementing adding attributes to Antv device pictures, before initializing the canvas, it includes laying out the page, and the layout of the page specifically includes: judging whether the device picture exists. If it does not exist, an upload picture component is displayed. If it exists, a canvas container, a button for replacing the device picture, and a save button are displayed.

[0008] According to the above implementation method of adding attributes based on Antv device pictures, to determine whether there is such a device picture, if not, the picture upload component is displayed, if so, the canvas container, the device picture replacement button, and the save button are displayed, which specifically includes: Determine whether there is relevant information about the device picture and the attributes of the device picture according to the data information returned by the background interface; If not, the picture upload component is displayed in the middle of the page. If so, the device picture replacement button is displayed in the upper right of the page. The canvas container in the middle of the page is used to display the device picture and the attribute information of the device picture, and the save button is displayed at the bottom of the page.

[0009] According to the above implementation method of adding attributes based on Antv device pictures, to initialize the canvas, which specifically includes: Define the label of the canvas through the document.getElementById function and the constructor; Set the container attribute of the canvas object, and set the resizing attribute of the canvas object through the enabled function; Render the nodes and edges of the canvas according to the returned data information, which specifically includes extracting the node and edge information attributes from the this.processJson object, and respectively assigning new variables to the node and edge information. Using the object containing the node and edge information as a parameter, initialize the canvas using the fromJSON method of the this.graph object. Among them, destructuring this.processJson is used to perform custom rendering on the nodes whose shape attributes in the node list are equal to html.

[0010] According to the above implementation method of adding attributes based on Antv device pictures, to display the device picture on the canvas by calling the add node method of Antv X6, which specifically includes: Judge whether the information of the device picture is configured according to the returned data information. If not, a new device picture node is added by calling the addNode function of the device picture object; Judge whether the device picture needs to be changed. If the device picture needs to be changed, obtain the new picture address through the event handling function and assign a value to the variable, and modify the picture path of the device picture node through the setAttrs function.

[0011] According to the above implementation method of adding attributes based on Antv device pictures, to set the attribute component for the device picture, which specifically includes: Define a configurable property component for the device picture. The defined property component can be rectified, and the property component can be reflected in real time on the device picture in the graphical interface.

[0012] According to the above implementation method of adding attributes to the Antv device picture, the step of defining a configurable property component for the device picture, where the defined property component can be rectified and the property component can be reflected in real time on the device picture in the graphical interface, specifically includes: Pop up a window to add the property component; Judge whether the property component needs to be rectified. If so, rectify the property component; Monitor the events of the canvas, and judge whether the event occurs on the device picture or on the blank page of the canvas. The events include at least one of click event, mouse enter / leave event and right-click event; If the event occurs on the device picture, add the property component to a specific part of the device picture. Specifically, call the function this.graph.addEdge() to add a connection line to connect the device picture and the property component. If the event occurs on the blank page of the canvas, no connection line needs to be added.

[0013] According to the above implementation method of adding attributes to the Antv device picture, the step of setting property components for the device picture further includes: Monitor the occurring events through an event monitoring function and process the monitored data in the return function; If the property component is right-clicked, pop up a window to change the information of the property component.

[0014] This application also provides an implementation system for adding attributes to an Antv device picture, including: An environment building module for building an environment; An initialization module for initializing the canvas; A display module including the canvas, which displays the device picture on the canvas by calling the method of adding a node in Antv X6; A property setting module for setting property components for the device picture.

[0015] An implementation method for adding attributes to an Antv device picture provided by the present invention. By setting up the environment and initializing the canvas, in addition, the device picture is displayed on the canvas by calling the method of adding nodes in Antv X6, and attribute components are also set for the device picture, so that users can not only make the device attribute configuration process more intuitive and convenient through the graphical interface, reduce the learning cost and operation difficulty of users, but also improve the efficiency and accuracy of device configuration, facilitate subsequent developers to reuse and develop on this basis. Since the device is associated with its specific attributes, it is convenient for device alarm positioning, achieving beneficial effects such as simple operation, good flexibility, and easy customization. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] In order to more clearly illustrate the technical solutions in the present invention or the prior art, the following will briefly introduce the drawings required for the description of the embodiments or the prior art. Obviously, the drawings in the following description are some embodiments of the present invention. For those of ordinary skill in the art, without creative efforts, other drawings can also be obtained based on these drawings.

[0017] Figure 1 is a flowchart of the implementation method for adding attributes to an Antv device picture provided by an embodiment of the present invention; Figure 2 is a schematic diagram of the user interface when a click event occurs on the device picture in the implementation method for adding attributes to an Antv device picture provided by an embodiment of the present invention; Figure 3 is a schematic diagram of the user interface when a click event occurs on the blank area of the canvas in the implementation method for adding attributes to an Antv device picture provided by an embodiment of the present invention; Figure 4 is a schematic diagram of the structure of the implementation system for adding attributes to an Antv device picture provided by an embodiment of the present invention.

[0018] REFERENCE MARKS: 1. Implementation system; 10. Environment setup module; 20. Initialization module; 30. Display module; 40. Attribute setting module; 100. Canvas; 200. Device picture; 300. Attribute component. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0019] To make the objectives, technical solutions, and advantages of the present invention clearer, the following will clearly and completely describe the technical solutions in the present invention in conjunction with the drawings in the present invention. Obviously, the described embodiments are some, but not all, of the embodiments of the present invention. All other embodiments obtained by those of ordinary skill in the art without creative efforts based on the embodiments in the present invention belong to the scope of protection of the present invention.

[0020] The present invention provides an implementation method for adding attributes to Antv device pictures, including: Setting up the environment, where setting up the environment includes installing Antv X6 in a Vue project. Specifically, the setting up of the environment includes: using the npm package management tool to install Antv X6 in the Vue project through the command npm install @antv / x6@1.35.0 --save, or using the yarn package management tool to install Antv X6 in the Vue project through the command yarn add @antv / x6@1.35.0; The implementation method for adding attributes to Antv device pictures further includes initializing the canvas, which specifically includes: Defining a div tag with the id of container through let container = document.getElementById(“container”);this.graph =new Graph; Setting the container property of the canvas object to the container element, and setting the resizing property of the canvas object to resizing:{enabled:(node)=>{return node.shape===‘image’? true : false}}; Rendering the nodes and edges of the canvas according to the returned processJson, specifically implemented through const{nodes,edges}=this.processJson;this.graph.fromJSON({nodes,edges}), where destructuring this.processJson is used to perform custom rendering on the nodes with the shape equal to html in the nodes list; The implementation method for adding attributes to Antv device pictures further includes displaying the device picture on the canvas by calling the addNode method of Antv X6; and setting an attribute component for the device picture.

[0021] Among them, before initializing the canvas, it includes laying out the page, and specifically laying out the page includes: Judging whether the device picture exists. If it does not exist, an upload picture component is displayed. If it exists, a canvas container, a replace device picture button, and a save button are displayed.

[0022] Among them, judging whether the device picture exists. If it does not exist, an upload picture component is displayed. If it exists, a canvas container, a replace device picture button, and a save button are displayed, specifically including: Judge whether there is relevant information about the device picture and the attributes of the device picture according to the data processJson returned by the background interface; If not, a component for uploading pictures is displayed in the middle of the page <a-upload>, if it exists, a button for replacing the device picture is displayed in the upper right corner of the page <a-upload>, the canvas container in the middle of the page is used to display the device picture and the attribute information of the device picture, and the lower part of the page is used to display the save button <a-button>。

[0023] Among them, displaying the device picture on the canvas by calling the addNode method of Antv X6 specifically includes: Judging whether the information of the device picture is configured according to the returned data information processJson. If not, a new device picture node is added through this.graph.addNode({ / / device picture node information}); Judging whether the device picture needs to be changed. If the device picture needs to be changed, obtain the new picture address in the onChange event and assign it to the variable imageUrl, and modify the picture path of the device picture node through setAttrs(). Specifically, it is implemented by let imgNode = this.graph.getCells().find(i => i.shape == 'image'); imgNode.setAttrs({image: {'xlink:href': imageUrl}}).

[0024] Among them, setting the attribute component for the device picture specifically includes: Defining a configurable attribute component for the device picture. The defined attribute component can be rectified, and the attribute component can be reflected on the device picture in the graphical interface in real time.

[0025] Among them, defining a configurable attribute component for the device picture. The defined attribute component can be rectified, and the attribute component can be reflected on the device picture in the graphical interface in real time specifically includes: Popping up a window for adding the attribute component; Judging whether the attribute component needs to be rectified. If so, rectify the attribute component; Listening to the events of the canvas, judging whether the event occurs on the device picture or on the blank page of the canvas. The events include at least one of click event, mouse enter and leave events, and right-click event; If the event occurs on the device picture, add the attribute component to the specific part of the device picture. Specifically, add a connection through this.graph.addEdge() to connect the device picture and the attribute component. If the event occurs on the blank page of the canvas, no connection needs to be added.

[0026] Among them, setting the attribute component for the device picture also includes: Listen to this.graph.on('node:click', () => {}) and this.graph.on('blank:click', () => {}), and process the data listened to in the returned function; If the property component is right-clicked, a pop-up window will appear for changing the information of the property component.

[0027] The present invention also provides an implementation system for adding attributes to an Antv device picture, including: An environment setup module for setting up an environment, which includes installing Antv X6 in a Vue project; An initialization module for initializing the canvas; A display module including the canvas, and the device picture is displayed on the canvas by calling the addNode method of Antv X6; An attribute setting module for setting property components for the device picture.

[0028] The implementation method for adding attributes to an Antv device picture provided by the present invention enables users to not only make the device attribute configuration process more intuitive and convenient through a graphical interface, reducing the learning cost and operation difficulty of users, but also improving the efficiency and accuracy of device configuration, facilitating subsequent developers to reuse and develop on this basis. Since the device is linked to its specific attributes, it is convenient for device alarm positioning, achieving beneficial effects such as simple operation, good flexibility, and easy customization.

[0029] In this embodiment, please refer to Figure 1 , Figure 2 , Figure 3 and Figure 4 , which are respectively the flowchart of the implementation method for adding attributes to an Antv device picture 200 provided by an embodiment of the present invention, the schematic diagram of the user interface where a click event occurs on the device picture 200 in the implementation method for adding attributes to an Antv device picture 200 provided by an embodiment of the present invention, the schematic diagram of the user interface where a click event occurs on the blank area of the canvas in the implementation method for adding attributes to an Antv device picture 200 provided by an embodiment of the present invention, and the structural schematic diagram of the implementation system for adding attributes to an Antv device picture 200 provided by an embodiment of the present invention.

[0030] Specifically, in this embodiment, as Figure 1 shown, an implementation method for adding attributes to an Antv device picture 200 provided by an embodiment of the present invention includes: S1: Set up the environment. The environment setup includes installing Antv X6 in a Vue project. Specifically, the environment setup includes: using the npm package management tool to install Antv X6 in the Vue project through the command npm install @antv / x6@1.35.0 --save, or using the yarn package management tool to install Antv X6 in the Vue project through the command yarn add @antv / x6@1.35.0. S2: Initialize the canvas 100. Specifically, it includes: S20: Define a div tag with an id of container as the canvas container. In this embodiment, it is implemented through let container = document.getElementById("container”); this.graph = new Graph(canvas object). S21: Set the container property of the canvas object to the container element, and set the resizing property of the canvas object to resizing: {enabled: (node) => {return node.shape === ‘image’? true : false}}, that is, control that the canvas node can be resized only when it is of the image type. S22: Render the nodes and edges of the canvas 100 according to the processJson returned by the background, that is, const {nodes, edges} = this.processJson; this.graph.fromJSON({nodes, edges}). Among them, deconstructing this.processJson is to perform custom rendering on the nodes with shape equal to html in the nodes node list. S3: Display the device image 200 on the canvas 100 by calling the addNode method of Antv X6. S4: Set the property component 300 for the device image 200.

[0031] In this embodiment, before S2: Initializing the canvas 100, it includes laying out the page. Specifically, the page layout includes: Judge whether the device image 200 exists. If it does not exist, display the upload image component. If it exists, display the canvas container, the replace device image button, and the save button.

[0032] In this embodiment, to determine whether the device picture 200 exists, if not, the picture upload component is displayed, and if it exists, the canvas container, the device picture replacement button, and the save button are displayed. Specifically, it includes: Determine whether the relevant information of the device picture 200 and the attributes of the device picture 200 exist according to the data processJson returned by the background interface; If not, the component for uploading pictures is displayed in the middle of the page <a-upload>, if it exists, a button for replacing the device picture 200 is displayed in the upper right corner of the page <a-upload>, the canvas container in the middle of the page displays the device picture 200 and the attribute information of the device picture 200, and the save button is displayed at the bottom of the page <a-button>。

[0033] In this embodiment, step S3: displaying the device picture 200 on the canvas 100 by calling the addNode method of Antv X6 specifically includes: It is necessary to determine whether information such as the device picture 200 is configured jsHasJson based on the data information (processJson) returned by the background. If jsHasJson is equal to false, the canvas 100 is initialized, and a device picture node is added through this.graph.addNode({ / / device picture node information}): Determine whether the device picture 200 needs to be changed. If the device picture 200 needs to be changed, click the button to change the device picture. In the onChange event, obtain the new picture address and assign it to the variable imageUrl, and modify the picture path of the picture node through setAttrs(). Preferably, it can be achieved through the following instructions: let imgNode = this.graph.getCells().find(i => i.shape == 'image'); imgNode.setAttrs({image: {'xlink:href': imageUrl}}) to achieve.

[0034] In this embodiment, as Figure 1 、 Figure 2 and Figure 3 shown, step S4: setting the attribute component 300 for the device picture 200 specifically includes: Defining a configurable attribute component 300 for the device picture 200. The defined attribute component 300 can be rectified, and the attribute component 300 can be reflected in real time on the device picture 200 in the graphical interface.

[0035] In this embodiment, defining a configurable attribute component 300 for the device picture 200. The defined attribute component 300 can be rectified, and the attribute component 300 can be reflected in real time on the device picture 200 in the graphical interface specifically includes: By listening to the click event on the blank area of the canvas 100 (blank:click) and the click event on the node (node:click), where the attribute component 300 includes attribute node information, a pop-up box will be popped up <a-modal>Add attribute node (shape: html, convenient for custom rendering) information, including but not limited to device name, parameter configuration, etc., and the attribute node information can be rectified according to actual needs. These attributes will be dynamically reflected on the device picture node on the canvas 100; Determine whether to add a connection line between the attribute node and the device picture node. If it is in the blank area of the canvas 100, no connection line will be added. If clicked on the device picture node, a connection line will be added. Specifically: this.graph.on('blank:click', ({ e, x, y, node}) => { / / Perform specific operations such as pop-up window display and hiding, and assign this.isBlank = true}); this.graph.on('node:click', ({ e, x, y, node}) => { / / Perform specific operations such as pop-up window display and hiding}); When the pop-up window information is entered and the OK button is clicked, if this.isBlank is equal to false, first add a small red circle through this.graph.addNode({ shape: 'circle'}); if this.isBlank is equal to true, do not add a small red circle; then this.graph.addNode({ shape: 'html', html() { / / Element label, generate an attribute node, and return the element label}, data: / / Save attribute name, attribute value, etc. information}) to add an attribute node; finally, generate a connection line through this.graph.addEdge(), specifically Figure 2 and Figure 3 as shown.

[0036] The setting of the attribute component 300 for the device picture 200 further includes: listening to this.graph.on('node:click', () => {}) and this.graph.on('blank:click', () => {}), and processing the listened data in the returned function. Specifically: if the attribute component 300 is right-clicked, a pop-up window will be displayed for changing the information of the attribute component 300. If the attribute node is modified, right-click (node:contextmenu) on the node and listen to this.graph.on('node:contextmenu', ({ node}) => { / / When node.shape is equal to html, a pop-up editing window will be displayed, and the information in node.data will be echoed to the pop-up window for editing}). In addition, the deletion of the node can be specifically operated by listening to the node:mouseenter and node:mouseleave events.

[0037] In this embodiment, please refer to Figure 1 , Figure 2 and Figure 3 , the specific implementation process of adding attributes based on the Antv device picture 200 is described in detail as follows: Environment setup. First, install the AntV X6 library in the Vue project. You can use the npm or yarn package management tools and execute the following command: npm install @antv / x6@1.35.0 --save or yarn add @antv / x6@1.35.0.

[0038] Page layout. According to the data processJson returned by the background interface, judge whether there is relevant information jsHasJson about the device picture 200 and its attributes. If not, a component for uploading pictures is displayed in the center of the page <a-upload>, such as with a width and height of 400px * 400px; if so, a button for replacing the device picture 200 is displayed in the upper right corner of the page <a-upload>, a canvas graph is displayed in the middle to show the device picture 200 and its attribute information, and a save button is displayed in the middle of the lower part. <a-button>。

[0039] Initialize the canvas graph. Define a div tag with the id of "container" as the canvas container, i.e., let container = document.getElementById("container"); this.graph = new Graph(canvas object). Set the container property of the canvas object to the container element, and set the resizing property of the canvas object to resizing: {enabled: (node) => {return node.shape === 'image'? true : false}}, which means that only when the canvas node is of the image type can its size be adjusted. Other properties of the canvas object can be configured according to requirements. Finally, render the nodes and edges of the canvas 100 based on the processJson returned by the background, i.e., const {nodes, edges} = this.processJson; this.graph.fromJSON({nodes, edges}). Here, destructuring this.processJson is to perform custom rendering on the nodes in the nodes node list whose shape is equal to html.

[0040] Add, update, or delete device image nodes. According to the data information processJson returned by the background, determine whether device image 200 and other information jsHasJson are configured. If jsHasJson is equal to false, obtain the device image 200 address through the onChange event of the image upload component and assign it to the variable imageUrl, and then initialize the canvas 100; Add a new device image node, i.e., this.graph.addNode({shape: "image", x: 500, y: 80, width: 400, height: 300, imageUrl: this.imageUrl}). If you want to change the device image 200, click the "Replace Device Image" button. In the onChange event, get the new image address and assign it to the variable imageUrl, and modify the image path of the image node through setAttrs(). The specific implementation method is: let imgNode = this.graph.getCells().find(i => i.shape == 'image'); imgNode.setAttrs({image: {'xlink:href': imageUrl}}).

[0041] Add, delete, and modify the attributes of the device picture 200. By listening to the click events on the blank area of the canvas 100 (blank:click) and the click events on the nodes (node:click), a pop-up window is displayed. <a-modal>Add property node (shape: html, facilitating custom rendering) information, including but not limited to device name, parameter configuration, etc. These properties will be dynamically reflected on the device image node on the canvas 100; Determine whether to add a connection line between the property node and the device image node. If it is in the blank area of the canvas 100, no connection line will be added. If clicked on the device image node, a connection line will be added. Specifically: this.graph.on('blank:click', ({ e, x, y, node}) => { / / Perform specific operations such as pop-up window display and hiding, and assign this.isBlank = true}); this.graph.on('node:click', ({ e, x, y, node}) => { / / Perform specific operations such as pop-up window display and hiding}); When the pop-up window information is entered and the OK button is clicked, if this.isBlank is equal to false, first add a small red circle through this.graph.addNode({ shape: 'circle'}); if this.isBlank is equal to true, do not add a small red circle; then this.graph.addNode({ shape: 'html', html() { / / Element label, generate property node, and return element label}, data: / / Save property name, property value, etc. information}) to add a property node; finally, generate a connection line through this.graph.addEdge(); To modify the property node, you can right-click (node: contextmenu) on the node and listen to this.graph.on('node:contextmenu', ({ node}) => { / / When node.shape is equal to html, pop up an edit pop-up window, display the information in node.data on the pop-up window and edit it}). In addition, the deletion of the node can be specifically operated by listening to the node:mouseenter and node:mouseleave events.

[0042] In this embodiment, please refer to Figure 4 , the present invention also provides an implementation system 1 for adding properties to the Antv device image 200, including: An environment setup module 10, which is used to set up the environment. The environment setup includes installing Antv X6 in the Vue project; An initialization module 20, which is used to initialize the canvas 100; A display module 30, which includes the canvas 100, and the device image 200 is displayed on the canvas 100 by calling the addNode method of Antv X6; An attribute setting module 40, which is used to set an attribute component 300 for the device picture 200.

[0043] Since the specific functions and implementation methods of each module are similar to the method functions described above, they will not be elaborated here.

[0044] An implementation method for adding attributes to an Antv device picture 200 provided by the present invention. By building an environment, the building environment includes installing Antv X6 in a Vue project and initializing the canvas 100. In addition, the device picture 200 is displayed on the canvas 100 by calling the addNode method of Antv X6, and an attribute component 300 is set for the device picture 200, which at least brings the following effects: (1) Through the graphical interface and dynamic interaction technology, the device attribute configuration process is made more intuitive and convenient, reducing the learning cost and operation difficulty of users, and improving the efficiency and accuracy of device configuration; (2) Developed a method for picture annotation, which is convenient for subsequent developers to reuse and develop on this basis; (3) This method realizes the association between the device and its specific attributes under the part, which is convenient for device alarm positioning.

[0045] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place, or may be distributed to multiple network units. Some or all of the modules can be selected according to actual needs to achieve the purpose of the solution of this embodiment. Those of ordinary skill in the art can understand and implement it without creative labor.

[0046] Through the description of the above embodiments, those skilled in the art can clearly understand that each embodiment can be implemented by means of software plus a necessary general hardware platform, and of course, it can also be implemented by hardware. Based on this understanding, the above technical solutions, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product, which can be stored in a computer-readable storage medium, such as ROM / RAM, magnetic disk, optical disc, etc., including several instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in each embodiment or some parts of the embodiments.

[0047] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention and are not intended to limit them; although the present invention has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that they can still modify the technical solutions described in the foregoing embodiments, or perform equivalent replacements on some of the technical features; and these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the various embodiments of the present invention.

Claims

1. A method for adding attributes to an Antv device image, characterized in that: include: Set up the environment; Initialize the canvas; Display the device image on the canvas by calling the add node method of Antv X6; Set the property component for the device image.

2. The method for adding attributes to an Antv device image according to claim 1, characterized in that: The construction environment specifically includes: setting up Antv X6 in the Vue project, by using the npm package management tool or the yarn package management tool.

3. The method for adding attributes to an Antv device image according to claim 1, characterized in that: The canvas is initialized before including a layout page, and the layout page specifically includes: determining whether the device picture exists, if not, displaying an upload picture component, and if so, displaying a canvas container, a change device picture button, and a save button.

4. The method for adding attributes to an Antv device image according to claim 3, characterized in that: The determining whether the device image exists, if not, displaying the upload image component, and if so, displaying the canvas container, the change device image button and the save button, specifically includes: Determine whether there is relevant information about the device image and the attributes of the device image according to the data information returned by the background interface; If it does not exist, the component for uploading pictures is displayed in the middle of the page. If it does exist, a button to change the device picture is displayed in the upper right corner of the page. The canvas container in the middle of the page is used to display the device picture and the attribute information of the device picture, and the bottom of the page is used to display the save button.

5. The method for adding attributes to an Antv device image according to claim 1, characterized in that: Initializing the canvas specifically includes: Define the label of the canvas through document.getElementById function and constructor; Set the container property of the canvas object, and set the resizing property of the canvas object through the enabled function; Rendering the nodes and edges of the canvas according to the returned data information specifically includes extracting the node and edge information attributes from the this.processJson object, assigning new variables node and edge information respectively, taking the object containing the node and the edge information as a parameter, and using the fromJSON method of the this.graph object to initialize the canvas, wherein deconstructing this.processJson is used to perform custom rendering on the nodes whose shape attributes are equal to html in the node list.

6. The method for adding attributes to an Antv device image according to claim 1, characterized in that: The device image is displayed on the canvas by calling the add node method of Antv X6, specifically including: Determine whether there is any information about configuring the device image according to the returned data information. If not, add a device image node by calling the addNode function of the device image object; Determine whether the device picture needs to be changed. If the device picture needs to be changed, obtain the new picture address through the event processing function and assign a value to the variable, and modify the picture path of the device picture node through the setAttrs function.

7. The method for adding attributes to an Antv device image according to claim 1, characterized in that: The component of setting the property of the device image specifically includes: A configurable property component is defined for the device image, the defined property component can be modified, and the property component can be reflected in real time on the device image in the graphical interface.

8. The method for adding attributes to an Antv device image according to claim 7, characterized in that: The configurable property components are defined for the device image, the defined property components can be modified, and the property components can be reflected in real time on the device image in the graphical interface, specifically including: The pop-up window is used to add the attribute component; Determine whether the attribute component needs to be rectified, and if so, rectify the attribute component; Monitor the events of the canvas, and determine whether the event occurs on the device image or on a blank page of the canvas, wherein the event includes at least one of a click event, a mouse move-in / move-out event, and a right-click event; If the event occurs in the device image, the attribute component is added to the specific part of the device image, specifically by calling the function this.graph.addEdge() to add a line to connect the device image with the attribute component. If the event occurs on the blank page of the canvas, no line needs to be added.

9. The method for implementing adding attributes to an Antv device image according to claim 1, characterized in that: The component for setting properties for the device image also includes: Monitor the occurrence of events through the event monitoring function and process the monitored data in the return function; If you right-click the property component, a pop-up window will pop up for changing the information of the property component.

10. A system for adding attributes to pictures based on Antv equipment, characterized in that: include: An environment building module, wherein the environment building module is used to build an environment; An initialization module, wherein the initialization module is used to initialize the canvas; A display module, the display module includes the canvas, and the device image is displayed on the canvas by calling the add node method of Antv X6; A property setting module is used to set property components for the device image.

Images