A cloud configuration pipeline flow component implementation method, device and medium

Abstract

The application discloses a cloud configuration pipeline flow component implementation method, equipment and medium, the method comprises the following steps: receiving Internet of Things collection data, and based on the preset data rule, the corresponding style rule is configured for the pipeline flow component corresponding to the Internet of Things collection data; the style rule is used to indicate the display style and animation effect of the pipeline flow component corresponding to the data rule, and the animation effect at least includes flashing and rotating; receiving the operation instruction of the user through the visual editing window, and determining the connection point information corresponding to the operation instruction, so as to bind the connection point information to the SVG Polyline element; based on the SVG Polyline element, and according to the data rule corresponding to the Internet of Things collection data and the style rule corresponding to the data rule, the pipeline flow component is rendered in the visual page, and the dynamic rendering effect of the pipeline flow component is realized.

Description

Technical Field

[0001] This application relates to the field of data vision technology, and in particular to a method, device and medium for implementing cloud configuration pipeline flow components. Background Technology

[0002] Currently, with the rapid development of industrial automation, the Internet of Things, and remote monitoring, cloud configuration designers have become indispensable tools in these fields due to their ease of use, flexible operation, and rich component offerings. However, despite their excellent performance in many aspects, the display of their general-purpose components does not always meet user expectations when faced with specific scenarios and needs.

[0003] In previous cloud-based configuration design applications, the process of drawing pipes and pipe animations was relatively cumbersome. Designers typically needed to pre-design the pipes and animations in computer-based design software and then export them as PNG, GIF, or other formats. Next, these files were imported into the cloud configuration designer using the primitive function and rearranged. This disjointed design process increased the complexity of design and adjustments because the design of pipes and other components was separate; adjustments to scene styles, colors, angles, etc., needed to be completed in two different environments. This fragmented design process not only reduced work efficiency but also increased the probability of errors, making the overall design work more cumbersome. Summary of the Invention

[0004] To address the aforementioned issues, this application proposes a method for implementing cloud-configured pipeline flow components, including:

[0005] Receive IoT-collected data and configure corresponding style rules for pipeline components corresponding to the IoT-collected data based on preset data rules; the style rules are used to represent the display style and animation effects corresponding to pipeline components that satisfy the data rules, and the animation effects include at least flashing and rotating;

[0006] The system receives user operation commands through a visual editing window, determines the connection point information corresponding to the operation commands, and binds the connection point information to the SVG Polyline element.

[0007] Based on the SVG Polyline element, and according to the data rules corresponding to the IoT collected data and the style rules corresponding to the data rules, the pipeline flow component is rendered on the visualization page to achieve the dynamic rendering effect of the pipeline flow component.

[0008] In one implementation of this application, before receiving IoT-collected data and configuring corresponding style rules for the pipeline flow component corresponding to the IoT-collected data based on preset data rules, the method further includes:

[0009] Obtain the binding information corresponding to each pipeline flow component, and determine whether the pipeline flow component is bound to real-time device data based on the binding information corresponding to the pipeline flow component;

[0010] If so, then configure corresponding data rules for the IoT-collected data of the pipeline flow component; wherein, the data rules are used to represent the conditions met by the IoT-collected data corresponding to the pipeline flow component, and each pipeline flow component corresponds to at least one data rule.

[0011] In one implementation of this application, the step of receiving IoT-collected data and configuring corresponding style rules for the pipeline flow component corresponding to the IoT-collected data based on preset data rules specifically includes:

[0012] Receive IoT-collected data and determine the data rules that the IoT-collected data meets within a preset data rule framework;

[0013] According to the data rules and based on the preset mapping relationship, corresponding style rules are configured for the IoT collected data; the preset mapping relationship includes multiple data rules and style rules corresponding to each data rule, and the data rules and style rules correspond one-to-one.

[0014] In one implementation of this application, before rendering the pipeline component on the visualization page, the method further includes:

[0015] Real-time preview of the pipeline flow component is performed to determine the rendering effect corresponding to the pipeline flow component;

[0016] Obtain the expected page effect corresponding to the pipeline component to determine the deviation between the rendering effect and the expected page effect;

[0017] Based on the deviation, the corresponding path to be updated in the connection point information or the style to be adjusted in the style rules is determined, so as to optimize the path to be updated or the style to be adjusted, and obtain the optimized connection point information and style rules.

[0018] In one implementation of this application, after rendering the pipeline component on the visualization page based on the SVG Polyline element and according to the data rules corresponding to the IoT collected data and the style rules corresponding to the data rules, the method further includes:

[0019] Based on the user interaction interface, the system receives interactive editing operations from the user on the pipeline component and determines the operation instructions corresponding to the interactive editing operations; wherein, the interactive editing operations include at least: adding a new pipeline segment, deleting an existing pipeline segment, moving or changing connection points, and modifying styles or animation effects;

[0020] Based on the operation instructions, the connection point information or style rules corresponding to the pipeline flow component are updated, and the pipeline flow component is rendered based on the updated style rules or the updated connection point information, so as to display the edited pipeline flow component in real time on the visualization page.

[0021] In one implementation of this application, the step of receiving user operation instructions through a visual editing window and determining the connection point information corresponding to the operation instructions, so as to bind the connection point information to the SVG Polyline element, specifically includes:

[0022] The system receives user operation commands through a visual editing window and drags the corresponding pipeline flow components onto the visual canvas according to the operation commands to determine the corresponding connection point information.

[0023] The connection point information is converted into the data format corresponding to the SVG Polyline element, and the converted connection point information is bound to the SVG Polyline element.

[0024] In one implementation of this application, the step of rendering the pipeline component on a visualization page based on the SVG Polyline element and according to the data rules corresponding to the IoT collected data and the style rules corresponding to the data rules, to achieve a dynamic rendering effect of the pipeline component, specifically includes:

[0025] Based on the data rules corresponding to the pipeline flow component, a solid color fill path is drawn based on the SVG Polyline element, and the path position corresponding to the solid color fill path is determined.

[0026] Draw the corresponding target path on the solid color fill path so that the target path covers the solid color fill path to form a corresponding pipe; wherein, the target path has the stroke-dasharray attribute;

[0027] Based on CSS keyframe animation technology and according to the style rules corresponding to the pipeline flow component, the animation effect corresponding to the pipeline flow component is rendered, and based on the SVG animate element, the flow effect corresponding to the pipeline flow component is rendered.

[0028] In one implementation of this application, after rendering the pipeline component on the visualization page based on the SVG Polyline element and according to the data rules corresponding to the IoT collected data and the style rules corresponding to the data rules, the method further includes:

[0029] The IoT-collected data is acquired and updated in real time, and it is determined whether the updated IoT-collected data meets the new data rules.

[0030] If so, then determine the style rule corresponding to the new data rule, and adjust the display style and animation effect of the pipeline flow component according to the style rule to realize the implementation display and response of the data.

[0031] This application embodiment also provides a cloud configuration pipeline flow component implementation device, the device comprising:

[0032] At least one processor;

[0033] And, a memory communicatively connected to the at least one processor;

[0034] The memory stores instructions that can be executed by the at least one processor, which are executed by the at least one processor to enable the at least one processor to execute a cloud configuration pipeline component implementation method as described above.

[0035] This application also provides a non-volatile computer storage medium storing computer-executable instructions, which, when executed, implement a cloud configuration pipeline flow component implementation method as described above.

[0036] This application provides a method, device, and medium for implementing cloud-configured pipeline flow components, which has at least the following beneficial effects:

[0037] By receiving data collected from the Internet of Things (IoT) and dynamically configuring corresponding style rules for this data according to preset data rules, the display style and animation effects of the pipeline component can be updated in real time when IoT data changes, allowing users to intuitively understand the changes in the data. Through a visual editing window, users can easily operate and issue commands, accurately capturing the connection point information corresponding to these commands and binding them to SVG Polyline elements, greatly improving the convenience and accuracy of user operations. Utilizing SVG Polyline elements, combined with the data rules and style rules corresponding to the IoT data collected, the dynamic rendering effect of the pipeline component can be achieved in the visual page, not only enhancing the activity and attractiveness of the user interface but also more intuitively displaying the dynamic changes in the data. Attached Figure Description

[0038] The accompanying drawings, which are included to provide a further understanding of this application and form part of this application, illustrate exemplary embodiments and are used to explain this application, but do not constitute an undue limitation of this application. In the drawings:

[0039] Figure 1 A flowchart illustrating a cloud configuration pipeline flow component implementation method provided in this application embodiment;

[0040] Figure 2 This is a schematic diagram of the internal structure of a cloud configuration pipeline flow component implementation device provided in an embodiment of this application. Detailed Implementation

[0041] To make the objectives, technical solutions, and advantages of this application clearer, the technical solutions of this application will be clearly and completely described below in conjunction with specific embodiments and corresponding drawings. Obviously, the described embodiments are only a part of the embodiments of this application, and not all of them. Based on the embodiments in this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0042] This application provides a cloud-configured pipeline component implementation method, device, and medium. By receiving data collected from the Internet of Things (IoT) and dynamically configuring corresponding style rules for this data according to preset data rules, the display style and animation effects of the pipeline component can be updated in real time when IoT data changes, allowing users to intuitively understand the data changes. The user can easily operate and issue commands through a visual editing window, accurately capturing the connection point information corresponding to these commands and binding them to SVG Polyline elements, greatly improving the convenience and accuracy of user operation. Using SVG Polyline elements, combined with the data rules and style rules corresponding to the IoT collected data, the dynamic rendering effect of the pipeline component can be realized in the visual page, not only improving the activity and attractiveness of the user interface but also more intuitively displaying the dynamic changes of the data.

[0043] The technical solutions provided by the various embodiments of this application are described in detail below with reference to the accompanying drawings.

[0044] Figure 1 This is a flowchart illustrating a method for implementing a cloud configuration pipeline flow component, as provided in an embodiment of this application.

[0045] The analysis method involved in the embodiments of this application can be implemented by a terminal device or a server, and this application does not impose any special limitations on it. For ease of understanding and description, the following embodiments are all described in detail using a server as an example.

[0046] It should be noted that the server can be a single device or a system composed of multiple devices, i.e., a distributed server. This application does not make any specific limitations on this.

[0047] like Figure 1 As shown in the embodiment of this application, a cloud configuration pipeline flow component implementation method is provided, including:

[0048] 101. Receive IoT data and configure corresponding style rules for the pipeline components corresponding to the IoT data based on preset data rules.

[0049] It should be noted that the style rules in this embodiment are used to represent the display style and animation effects corresponding to pipeline components that satisfy the data rules. The animation effects include at least blinking and rotation. The data rules are set on the pipeline components and are customized according to the actual situation.

[0050] Specifically, the server receives IoT-collected data and determines the data rules that the IoT-collected data meets within a preset data rule framework. Based on the data rules and a preset mapping relationship, the server configures corresponding style rules for the IoT-collected data. It should be noted that the preset mapping relationship in this embodiment includes multiple data rules and corresponding style rules for each data rule; the data rules and style rules correspond one-to-one.

[0051] In one embodiment, the system first receives real-time data collected from IoT devices. This data may include various types of sensor readings such as temperature, pressure, and flow rate, which are transmitted to the system for processing via the IoT network.

[0052] Upon receiving IoT-collected data, the system immediately matches it against pre-defined data rules to determine which rules the data meets. Data rules are a predefined set of conditions used to determine specific states or ranges of IoT-collected data. For example, a data rule might define a trigger when temperature data exceeds a certain threshold.

[0053] Once the data rules that the IoT-collected data must meet are determined, the system will configure corresponding style rules for these data based on these rules and through a pre-defined mapping relationship. This mapping relationship is pre-established and includes multiple data rules and the corresponding style rules for each data rule. This mapping ensures a one-to-one correspondence between data rules and style rules.

[0054] Style rules define the display style and animation effects of the pipe flow component on the visualization interface. For example, when temperature data exceeds a set threshold, the corresponding style rule might cause the pipe flow component to display red and flash to attract the user's attention. In this way, the system can dynamically adjust the display style and animation effects of the pipe flow component in real time based on changes in IoT-collected data. This not only improves the user's intuitive perception of the data but also enhances the system's interactivity and user experience.

[0055] In one embodiment of this application, before receiving IoT-collected data and configuring corresponding style rules for the pipeline components corresponding to the IoT-collected data based on preset data rules, the server obtains the binding information corresponding to each pipeline component and determines whether the pipeline component is bound to real-time device data based on the binding information. If so, the server configures the corresponding data rules for the IoT-collected data of the pipeline component. It should be noted that the data rules in this embodiment of the application are used to represent the conditions met by the IoT-collected data corresponding to the pipeline component, and each pipeline component corresponds to at least one data rule.

[0056] In one embodiment, the system first obtains the binding information corresponding to each pipeline flow component to help understand whether each pipeline flow component is associated with real-time data from a specific device. This binding information can be preset during system initialization or set by the user through the user interface during use.

[0057] Next, based on the obtained binding information, the system will determine whether each pipeline component has been bound to real-time device data. If a pipeline component has been bound to real-time device data, it means that this component needs to display real-time IoT data, and therefore, corresponding data rules need to be configured for it.

[0058] Then, for pipeline components that have already been bound to real-time device data, the system will configure corresponding data rules for their IoT-collected data. Data rules are used to describe the conditions or standards that IoT-collected data needs to meet, such as the data range, format, and rate of change. These rules can be set according to specific application scenarios and requirements to ensure that pipeline components can correctly display and process IoT-collected data.

[0059] Each pipeline component corresponds to at least one data rule, but multiple rules can also be set as needed to meet more complex data processing requirements. For example, it can be set that when the collected data exceeds a certain threshold, the pipeline component displays a specific style or animation effect, thereby intuitively reflecting the data anomalies.

[0060] In this way, this application enables precise processing and visualization of IoT-collected data, improving the efficiency and accuracy of data monitoring. Furthermore, because the data rules are flexibly configurable, this application also possesses good adaptability and scalability, making it widely applicable to various IoT application scenarios.

[0061] 102. Receive user operation instructions through the visual editing window and determine the connection point information corresponding to the operation instructions, so as to bind the connection point information to the SVG Polyline element.

[0062] Specifically, in one embodiment of this application, the server receives user operation instructions based on a visual editing window, and drags the corresponding pipeline component to the visual canvas according to the operation instructions to determine the corresponding connection point information; the connection point information is converted into the data format corresponding to the SVG Polyline element, and the converted connection point information is bound to the SVG Polyline element.

[0063] In one embodiment, the system first provides a visual editing window that allows users to interact with the system through an intuitive interface. In this window, users can see various available pipeline components and drag and drop them onto the visual canvas.

[0064] When a user drags a pipeline component onto the visualization canvas, the system receives this instruction and determines the corresponding connection point information. Connection point information refers to the pipeline component's position and size on the canvas, as well as its connections to other components. This information is crucial data for constructing the pipeline graph.

[0065] Next, the system converts the connection point information into a data format that the SVG Polyline element can recognize. SVG (Scalable Vector Graphics) is an XML-based vector graphics description language that supports various graphical operations on the user interface, including drawing paths, shapes, and text. In this step, the system converts the connection point information into coordinate points, paths, and other parameters required by the SVG Polyline element.

[0066] Finally, the system binds the transformed connection point information to the SVG Polyline element. This means that the SVG Polyline element will draw the corresponding pipeline diagram on the visualization canvas based on this connection point information. The binding process is achieved by associating the connection point information with the attributes of the SVG Polyline element, ensuring consistency between the graphical display and the data.

[0067] 103. Based on the SVG Polyline element and according to the data rules and style rules corresponding to the IoT collected data, the pipeline flow component is rendered in the visualization page to achieve the dynamic rendering effect of the pipeline flow component.

[0068] Specifically, the server draws a solid-color filled path based on the SVG Polyline element according to the data rules corresponding to the pipeline component, and determines the path position corresponding to the solid-color filled path; then, it draws the corresponding target path on the solid-color filled path so that the target path covers the solid-color filled path, forming the corresponding pipeline. It should be noted that the target path in this embodiment has a stroke-dasharray attribute.

[0069] Based on CSS keyframe animation technology and according to the style rules of the pipeline component, the animation effect of the pipeline component is rendered, and based on the SVG animate element, the flow effect of the pipeline component is rendered.

[0070] In one embodiment, the first step is to draw a solid-color filled path based on the SVGPolyline element, according to the data rules corresponding to the pipeline component. This solid-color filled path constitutes the basic shape of the pipeline component, and its color and position are determined according to the data and style rules. The system calculates the path position corresponding to this solid-color filled path to ensure that it is accurately displayed on the visualization page.

[0071] The second step involves the system drawing a target path on top of the solid color fill path. This target path completely overlaps the solid color fill path, creating a layered and three-dimensional pipe effect. This target path has a special property—stroke-dasharray—which allows the creation of dashed paths and is key to achieving the dynamic flow effect.

[0072] The third step utilizes CSS keyframe animation technology. The system renders the animation effects based on the style rules corresponding to the pipeline component. CSS keyframe animation allows defining the state of the animation at different points in time, thereby achieving complex animation effects. In this step, the system dynamically adjusts the pipeline's color, shape, and position properties based on data changes and style rule requirements, resulting in rich dynamic effects.

[0073] Fourthly, to further enhance the dynamic effects, the system will utilize the SVG's `animate` element to render the flow effect of the pipe flow component. The SVG's `animate` element allows for the animation of certain attributes of the SVG graphic, such as the path's length, width, and position. In this step, the system will use the `animate` element to simulate the flow effect of fluid within the pipe, according to the requirements of the data and style rules, making the entire pipe flow component more vivid and realistic.

[0074] In one embodiment of this application, before rendering the pipeline component in the visualization page, the server performs a real-time preview of the pipeline component to determine the rendering effect corresponding to the pipeline component; obtains the expected page effect corresponding to the pipeline component to determine the deviation between the rendering effect and the expected page effect; based on the deviation, determines the path to be updated in the connection point information or the style to be adjusted in the style rules, so as to optimize the path to be updated or the style to be adjusted, and obtain the optimized connection point information and style rules.

[0075] In one embodiment, before the pipeline component is finally rendered on the visualization page, the system provides a real-time preview function, allowing users or developers to preview the rendering effect of the pipeline component, thereby discovering and correcting potential problems or unintended designs at an early stage.

[0076] The real-time preview feature is achieved by simulating the final rendering process. It displays the appearance and animation effects of the pipeline components on the visualization page, based on the current connection point information and style rules. This allows users or developers to gain an intuitive understanding of whether the current settings have achieved the intended design goals.

[0077] Next, the system retrieves the expected page designation set by the user or developer for the pipeline components. This is typically achieved by inputting, selecting, or uploading reference images, design sketches, or detailed parameters. The expected page designation represents the final result that the user or developer hopes to see on the visualization page.

[0078] The system then compares the rendered effect of the real-time preview with the expected page effect to determine the discrepancies. These discrepancies may include inconsistencies in color, size, position, animation smoothness, etc. Once the discrepancies are identified, the system analyzes their causes and determines whether they stem from path settings in the join point information or inappropriate style selections in the style rules. Based on this analysis, the system identifies the corresponding path to be updated in the join point information, or the style parameters in the style rules that need adjustment.

[0079] Finally, the system will optimize the connection point information or style rules based on the analysis results. This may include adjusting the coordinates of the path, modifying color values, changing animation speed or effects, etc. The optimization process may require multiple iterations until the deviation between the rendered effect in the real-time preview and the expected effect on the page is minimized or eliminated.

[0080] In one embodiment of this application, after rendering the pipeline component on the visualization page based on SVG Polyline elements and according to the data rules corresponding to the IoT collected data and the style rules corresponding to the data rules, the server receives the user's interactive editing operations on the pipeline component based on the user interaction interface, and determines the operation instructions corresponding to the interactive editing operations. It should be noted that the interactive editing operations in this embodiment of the application include at least: adding new pipeline segments, deleting existing pipeline segments, moving or changing connection points, and modifying styles or animation effects.

[0081] Based on the operation instructions, the connection point information or style rules corresponding to the pipeline flow component are updated, and the pipeline flow component is rendered based on the updated style rules or updated connection point information, so as to display the edited pipeline flow component in real time on the visualization page.

[0082] In one embodiment, after a user views the pipeline component on the visualization page, they may need to edit or adjust it according to actual needs. Therefore, the system provides a user interface, which can be a graphical user interface that allows users to interactively edit the pipeline component through mouse clicks, drags, or other gestures.

[0083] Users can perform various editing operations through this interactive interface, including but not limited to adding new pipe segments, deleting existing pipe segments, moving or changing the position of connection points, and modifying the style or animation effects of pipe flow components. These operations are designed to meet specific user display or analysis needs. When a user performs interactive editing operations, the system captures these operations and determines their corresponding operation instructions. For example, if a user clicks a button to add a new pipe segment, the system will generate an operation instruction to add a pipe segment.

[0084] Next, the system will update the connection point information or style rules of the pipeline flow component according to these operation instructions. If it refers to adding or deleting pipeline segments, the system may update the coordinate points or path data in the connection point information; if it refers to modifying styles or animation effects, the system will update the corresponding style rules.

[0085] Finally, based on the updated style rules or join point information, the system will re-render the pipeline components to ensure that the edited effects are displayed in real time on the visualization page. This allows users to immediately see the changes brought about by their editing operations, enabling them to make further adjustments or confirm their changes.

[0086] In one embodiment of this application, after rendering the pipeline component on the visualization page based on the SVG Polyline element and according to the data rules and style rules corresponding to the IoT collected data, the server obtains and updates the IoT collected data in real time, and determines whether the updated IoT collected data meets the new data rules; if so, it determines the style rules corresponding to the new data rules, so as to adjust the display style and animation effects of the pipeline component according to the style rules, thereby realizing the real-time display and response of the data.

[0087] In one embodiment, the system first acquires the latest data in real time from IoT devices or other data sources. This data may include various industrial parameters such as temperature, pressure, and flow rate, which are crucial for the display and animation effects of pipeline flow components.

[0088] Upon acquiring new IoT-collected data, the system immediately analyzes and processes this data to determine whether it meets new data rules. Data rules are a set of predefined conditions used to determine whether data is within a normal range or in a specific state. For example, a data rule might stipulate that when the temperature exceeds a certain threshold, the pipe flow component should be displayed with specific colors and animation effects.

[0089] If new IoT-collected data meets the new data rules, the system will further determine the corresponding style rules. Style rules define the display style and animation effects of the pipeline component under different data states. For example, when the temperature is too high, the style rule might specify that the pipeline component turns red and flashes to attract the user's attention.

[0090] Once the new style rules are established, the system immediately adjusts the display style and animation effects of the pipeline components accordingly. This may include changing colors, shapes, sizes, or adding specific animation effects such as blinking or flowing. These adjustments are designed to visually reflect the latest status of IoT-collected data, helping users quickly understand and respond.

[0091] In one embodiment, the configuration information from the two parts above is displayed graphically, and the pipeline is formed by manipulating the mouse in the current pipeline component's editing area. The specific drawing process is as follows: Double-click the current pipeline component to make it editable, then move the mouse to a suitable position in the editing area, click the left mouse button and release it. At this time, a connection point is generated in the editing area, and the connection point information is recorded for subsequent operations. It should be noted that the connection point information includes coordinate axis information, etc. Continue to move the mouse to a suitable position and click the left mouse button to generate another connection point. According to the basic principle of mathematics—"two points determine a straight line"—the line segment between the two points is the pipeline to be implemented. Then, the saved connection point information is processed into an "xy" form to form a path, which is dynamically bound to the SVG-Polyline element. Then, the rendering engine traverses the rendering tree in sequence and calls the graphics library to draw each node onto the screen, thus forming a small pipeline segment. Furthermore, the same logic can be used to draw continuously to ultimately achieve the desired pipeline display form. Furthermore, animation techniques and event handling mechanisms can be combined, such as listening for mouse events, to further enable dynamic path updates and real-time interactive editing, such as dragging connection points to change the path shape and deleting line segments. To exit editing mode, simply press the ESC key on the keyboard or click outside the editing area.

[0092] The above are embodiments of the method proposed in this application. Based on the same inventive concept, embodiments of this application also provide a cloud configuration pipeline flow component implementation device, the structure of which is as follows: Figure 2 As shown.

[0093] Figure 2 This is a schematic diagram of the internal structure of a cloud-configured pipeline flow component implementation device provided in an embodiment of this application. Figure 2 As shown, the device includes:

[0094] At least one processor;

[0095] And, a memory that is communicatively connected to at least one processor;

[0096] The memory stores instructions that can be executed by at least one processor, and the instructions, when executed by at least one processor, enable at least one processor to:

[0097] Receive IoT collected data and configure corresponding style rules for the pipeline components corresponding to the IoT collected data based on preset data rules; style rules are used to represent the display style and animation effects of pipeline components that meet the data rules, and the animation effects include at least blinking and rotating;

[0098] The system receives user commands through a visual editing window and determines the connection point information corresponding to the commands in order to bind the connection point information to the SVG Polyline element.

[0099] Based on the SVG Polyline element and according to the data rules and style rules corresponding to the IoT collected data, the pipeline flow component is rendered in the visualization page to achieve the dynamic rendering effect of the pipeline flow component.

[0100] This application also provides a non-volatile computer storage medium storing computer-executable instructions, which, when executed, can:

[0101] Receive IoT collected data and configure corresponding style rules for the pipeline components corresponding to the IoT collected data based on preset data rules; style rules are used to represent the display style and animation effects of pipeline components that meet the data rules, and the animation effects include at least blinking and rotating;

[0102] The system receives user commands through a visual editing window and determines the connection point information corresponding to the commands in order to bind the connection point information to the SVG Polyline element.

[0103] Based on the SVG Polyline element and according to the data rules and style rules corresponding to the IoT collected data, the pipeline flow component is rendered in the visualization page to achieve the dynamic rendering effect of the pipeline flow component.

[0104] The various embodiments in this application are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, the device and medium embodiments are basically similar to the method embodiments, so the description is relatively simple; relevant parts can be referred to the description of the method embodiments.

[0105] The foregoing has described specific embodiments of this application. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recited in the claims may be performed in a different order than that shown in the embodiments and may still achieve the desired results. Furthermore, the processes depicted in the drawings do not necessarily require the specific or sequential order shown to achieve the desired results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0106] The devices and media provided in this application are one-to-one with the methods. Therefore, the devices and media also have similar beneficial technical effects as their corresponding methods. Since the beneficial technical effects of the methods have been described in detail above, the beneficial technical effects of the devices and media will not be repeated here.

[0107] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0108] This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this application. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart... Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0109] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0110] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0111] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0112] Memory may include non-persistent storage in computer-readable media, such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM. Memory is an example of computer-readable media.

[0113] Computer-readable media includes both permanent and non-permanent, removable and non-removable media that can store information using any method or technology. Information can be computer-readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase-change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other non-transferable medium that can be used to store information accessible by a computing device. As defined herein, computer-readable media does not include transient computer-readable media, such as modulated data signals and carrier waves.

[0114] It should also be noted that the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0115] The above description is merely an embodiment of this application and is not intended to limit the scope of this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the scope of the claims of this application.

Claims

1. A cloud configuration pipeline flow component implementation method, characterized in that, The method includes: Receive IoT-collected data and configure corresponding style rules for pipeline components corresponding to the IoT-collected data based on preset data rules; the style rules are used to represent the display style and animation effects corresponding to pipeline components that satisfy the data rules, and the animation effects include at least flashing and rotating; The system receives user operation commands through a visual editing window, determines the connection point information corresponding to the operation commands, and binds the connection point information to the SVG Polyline element. Based on the SVG Polyline element, and according to the data rules corresponding to the IoT collected data and the style rules corresponding to the data rules, the pipeline flow component is rendered in the visualization page to achieve the dynamic rendering effect of the pipeline flow component. Obtain the binding information corresponding to each pipeline flow component, and determine whether the pipeline flow component is bound to real-time device data based on the binding information corresponding to the pipeline flow component; If so, then configure corresponding data rules for the IoT-collected data of the pipeline flow component; wherein, the data rules are used to represent the conditions met by the IoT-collected data corresponding to the pipeline flow component, and each pipeline flow component corresponds to at least one data rule; Receive IoT-collected data and determine the data rules that the IoT-collected data meets within a preset data rule framework; According to the data rules and based on the preset mapping relationship, the corresponding style rules are configured for the IoT collected data; the preset mapping relationship includes multiple data rules and style rules corresponding to each data rule, and the data rules and style rules correspond one-to-one. The system receives user operation commands through a visual editing window and drags the corresponding pipeline flow components onto the visual canvas according to the operation commands to determine the corresponding connection point information. The connection point information is converted into the data format corresponding to the SVG Polyline element, and the converted connection point information is bound to the SVG Polyline element; Based on the data rules corresponding to the pipeline flow component, a solid color fill path is drawn based on the SVG Polyline element, and the path position corresponding to the solid color fill path is determined. Draw the corresponding target path on the solid color fill path so that the target path covers the solid color fill path to form a corresponding pipe; wherein, the target path has the stroke-dasharray attribute; Based on CSS keyframe animation technology and according to the style rules corresponding to the pipeline flow component, the animation effect corresponding to the pipeline flow component is rendered, and based on the SVG animate element, the flow effect corresponding to the pipeline flow component is rendered. The IoT-collected data is acquired and updated in real time, and it is determined whether the updated IoT-collected data meets the new data rules. If yes, a style rule corresponding to the new data rule is determined to adjust a display style and an animation effect corresponding to the pipeline flow component according to the style rule, so as to realize the implementation display and response of data.

2. The cloud configuration pipeline flow component implementation method of claim 1, wherein, Before rendering the pipeline flow component in the visualization page, the method further comprises: Real-time previewing the pipeline flow component to determine a rendering effect corresponding to the pipeline flow component; Obtaining a page expected effect corresponding to the pipeline flow component to determine a deviation between the rendering effect and the page expected effect; Based on the deviation, determining a to-be-updated path in the connection point information or a to-be-adjusted style in the style rule to optimize the to-be-updated path or the to-be-adjusted style, and obtaining optimized connection point information and style rules.

3. The cloud configuration pipeline flow component implementation method of claim 1, wherein, After rendering the pipeline flow component in the visualization page based on the SVG Polyline element and according to the data rule corresponding to the Internet of Things collection data and the style rule corresponding to the data rule, the method further comprises: Based on a user interaction interface, receiving an interactive editing operation of a user on the pipeline flow component and determining an operation instruction corresponding to the interactive editing operation; wherein the interactive editing operation at least includes adding a new pipeline segment, deleting an existing pipeline segment, moving or changing a connection point, modifying a style or an animation effect; Based on the operation instruction, updating connection point information or a style rule corresponding to the pipeline flow component, and rendering the pipeline flow component based on the updated style rule or the updated connection point information to display the edited pipeline flow component in the visualization page in real time.

4. A cloud configuration pipeline flow component implementation device, comprising: The device comprises: at least one processor; and a memory connected in communication with the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform a cloud configuration pipeline flow component implementation method according to any one of claims 1-3.

5. A non-volatile computer storage medium storing computer-executable instructions, characterized in that, The computer executable instructions, when executed, implement a cloud configuration pipeline flow component implementation method according to any one of claims 1-3. The computer executable instructions, when executed, implement a cloud configuration pipeline flow component implementation method according to any one of claims 1-3.

Images