Seismic operation process visualization and parameter dynamic editing system and method based on vue3 and medium

Abstract

The application discloses a kind of based on Vue3 Seismic Operation Process Visualization and Parameter Dynamic Editing System, method and medium, belong to electric digital data processing technical field.The application includes: operation process control module, for parsing seismic operation XML file into JSON data and rendering flowchart based on AntvG6 drawing framework;Module parameter editing module, realize parameter automatic binding and real-time editing by the ref and reactive characteristics of Vue3;Function menu module, based on ES Module realizes component extension.The application combines front-end technology with seismic operation process editing, solves the technical problems of poor cross-platform compatibility, difficult expansion, serious interaction delay when data volume is large of traditional C / S architecture seismic software, realizes cross-device use in browser, instant feedback parameter editing, component function extension, interaction delay does not linearly increase with data volume, significantly improves the efficiency and flexibility of seismic operation design.The application is suitable for efficient operation process design in seismic exploration data processing field.

Description

Technical Field

[0001] This invention relates to the field of electronic digital data processing technology, specifically to a system, method, and medium for visualizing earthquake operation workflows and dynamically editing parameters based on Vue3. Background Technology

[0002] With the rapid development of oil and gas exploration and seismic monitoring technologies, the design and parameter optimization of seismic workflows play a crucial role in improving exploration accuracy and efficiency. Traditional seismic workflow editing software typically relies on complex deployment environments and configuration files, resulting in problems such as high equipment requirements, poor system compatibility, and difficulty in expansion, making it difficult to meet the demands of increasingly sophisticated seismic exploration technologies.

[0003] When using traditional workflow editing software, users typically need to install a complex supporting software environment, and the devices and environments used for installation have specific requirements. Taking Linux as an example, although most of the commands are the same across several commonly used distributions, there are differences in certain important aspects (such as configuration file names). If deployed directly on a system that has not undergone compatibility testing, it may lead to various problems that are difficult to locate.

[0004] Taking GeoEast's GeoJobConsole as an example, it is developed based on Linux and C++, using Qt as the development framework. During deployment, GeoJobConsole strictly limits specific Linux distributions and Qt versions. Any change in version number requires a complete recompilation or even code modification, and it cannot run directly on Windows and macOS. Regarding the difficulty of expansion, because the compiled .so dynamic libraries may be used by other programs, if modifications involve header files, all related programs must be cleaned and recompiled. This is too costly for a rapidly iterating earthquake workflow editing system in terms of development and maintenance.

[0005] Existing earthquake workflow editors are typically built on compiled languages ​​such as C++. However, in non-computationally intensive software, the computational speed of the language is not a primary concern. Instead, rendering speed, smoothness of interaction, and ease of data display become crucial factors. Furthermore, existing software features highly complex data interaction functionalities, making it unsuitable for rapid development processes that require quick feature iterations.

[0006] The lack of mature frameworks for Canvas drawing in the early days led to long development cycles and high development difficulty for front-end earthquake workflow editing tools. However, in recent years, with the emergence of mature open-source workflow drawing frameworks such as AntvG6 and FlowGram, front-end developers can quickly develop drawing frameworks with deeply customized functions, providing the technical possibility of implementing complex flowchart drawing functions in a low-cost and short-cycle manner. Summary of the Invention

[0007] The purpose of this invention is to provide a Vue3-based system for visualizing earthquake operation processes and dynamically editing parameters, which aims to enable graphical interface-based process editing, real-time feedback parameter editing, component-based functional expansion, cross-platform and cross-device use, and better program robustness.

[0008] The second objective of this invention is to provide a Vue3-based method for visualizing earthquake operation workflows and dynamically editing parameters, applicable to the aforementioned Vue3-based earthquake operation workflow visualization and parameter dynamic editing system.

[0009] The third objective of this invention is to provide a computer-readable storage medium storing a computer program that, when executed by a processor, implements the steps of the aforementioned method for visualizing and dynamically editing parameters of earthquake operation processes based on Vue3.

[0010] To achieve the above objectives, the technical solution adopted by this invention is as follows:

[0011] A Vue3-based earthquake operation workflow visualization and parameter dynamic editing system includes: an operation workflow control module, which is used to parse earthquake operation XML files into JSON data, render earthquake operation workflow diagrams on a Canvas based on JSON data, and listen to interactive operations in the workflow diagram and update JSON data in real time.

[0012] The module parameter editing module is used to construct the JSON data into a parameter display structure, dynamically display the module parameters in the parameter editing interface through Vue3's data binding feature, and listen for parameter editing events to update the data synchronously.

[0013] The function menu module is used to display project information, provide project configuration control, and load various extended functions in the form of Vue3 components;

[0014] The workflow control module includes a file serializer, which is used to reverse serialize the edited JSON data into a standard earthquake operation XML file according to a structure compatible with the original XML structure, so as to achieve data compatibility with the original C / S-end earthquake operation management system; the file serializer is also used to use the earthquake operation XML file generated by reverse serialization as a persistent storage unit for reloading during subsequent workflow editing, so as to achieve closed-loop reuse of the editing process.

[0015] As a limitation, the work process control module includes: a file parser, used to parse the earthquake operation XML file into JSON data, wherein the XML structure is a WorkFlow, Step, ModuleItem, Module, Parameter, Value hierarchy, and the parsed JSON data includes node name, location coordinates, module type and parameter list.

[0016] As a further limitation, the work process control module also includes:

[0017] The interface renderer is based on the AntvG6 drawing framework and is deeply customized to realize the visualization rendering of flowcharts based on Canvas. It renders flowchart elements by parsing the position coordinates, node names, module types and parameter lists in JSON data.

[0018] The flowchart interaction listener uses the graphical interaction event interface provided by the AntvG6 framework to listen for drag-and-drop, deletion, and creation operations of nodes, and triggers callback functions to modify the underlying JSON data in real time.

[0019] As a second limitation, the module parameter editing module includes:

[0020] The data construction component is used to construct the parsed JSON data into structured data that can be read by the parameter display component;

[0021] The data display component uses tables, drop-down menus, selectors, and virtualized list components to display module parameters;

[0022] Vue 3 event listeners are used to listen for data editing, data binding, and load / save events in the parameter editing interface. Data binding includes two methods: automatic data binding and manual data binding. Automatic data binding uses Vue 3's ref and reactive features to achieve real-time synchronous rendering of page elements and data. Manual data binding uses Vue 3's watch function to achieve complex synchronization between page elements and data through conditional control. Both data binding methods are debouncing to control system overhead.

[0023] The data display component is also used to dynamically render the parameter editing interface based on the dependencies between parameters: when a parameter has a dependency condition, the UI component corresponding to the parameter is rendered only when the dependency condition is met, and the rendering status is updated in real time by listening to changes in all related parameters.

[0024] As a third limitation, the function menu module includes a project information display component, a project configuration control component, and a function menu component. Communication between components is implemented based on the Pinia state management library. Direct communication between components at any level can be achieved by writing the emit and on methods in Pinia and calling them at the required locations.

[0025] The function menu component loads various extended functions through Vue3 componentization; Vue3 componentization is based on ESModule syntax, and each component encapsulates HTML template, JS logic and CSS styles, making it an independent and reusable functional unit, which is imported to the required location through import syntax.

[0026] As a further limitation, the Vue3-based earthquake operation workflow visualization and parameter dynamic editing system also includes:

[0027] The exception handling module uses Vue3's onErrorCaptured hook function to capture component errors and sends error information through the Pinia cross-component communication tool. The top-level component handles the errors uniformly, ensuring that a single component error will not cause the entire application to crash.

[0028] As a fourth limitation, the earthquake operation process visualization and parameter dynamic editing system based on Vue3 is a browser-based web application that runs in a browser that supports the Chromium kernel, communicates with the backend server through the network, and is compatible with different operating systems and mobile devices.

[0029] This invention also discloses a method for visualizing earthquake operation workflows and dynamically editing parameters based on Vue3, applied to the aforementioned Vue3-based earthquake operation workflow visualization and parameter dynamic editing system. The method includes the following steps:

[0030] S1. Browser launch, user login verification, preloading shared resources and componentized modules;

[0031] S2. Load the earthquake operation process. If it is a new operation, directly enter the process editing. If it is an existing operation, parse the earthquake operation XML file into JSON data and render the earthquake operation process diagram on the Canvas.

[0032] S3. Respond to user interactions with flowchart elements, trigger the interaction listener, and update the underlying JSON data in real time; interaction operations include dragging, deleting, and creating nodes;

[0033] S4. In response to the user's click on the flowchart element, the corresponding module parameter editing interface pops up, and the parameters are modified in real time and the JSON data is updated synchronously through the Vue3 data binding mechanism;

[0034] S5. In response to the user's save or send job operation, the current JSON data is deserialized into an earthquake job XML file, sent to the backend and forwarded to the scheduling system, and the front-end interface displays the sending result;

[0035] S6. When the user completes the current earthquake operation editing process, the current earthquake operation process JSON data is deserialized into an earthquake operation XML file through the file serializer and persistently stored; the earthquake operation XML file serves as the input for subsequent operation process editing, allowing the user to repeatedly execute the operation process editing operations from S1 to S5.

[0036] As a limitation, the process of parsing the earthquake operation XML file into JSON data in step S2 includes:

[0037] Call the custom xmlToJsonParser function to recursively parse the XML nodes into JSON data that conforms to the internal interface specification, which includes node name, position coordinates, module type and parameter list fields;

[0038] If an error occurs during XML parsing, the ErrorHandler method sends the error information through the Pinia cross-component communication tool, which is then handled by the top-level component and the parsing process is terminated.

[0039] The present invention also discloses a computer-readable storage medium storing a computer program thereon, which, when executed by a processor, implements the above-mentioned method for visualizing earthquake operation workflow and dynamically editing parameters based on Vue3.

[0040] The present invention, by adopting the above-described technical solution, achieves the following technical advancements compared to existing technologies:

[0041] (1) Due to the characteristics of its web application, this invention runs in a browser and can be used normally as long as a browser with the Chromium kernel is used and the network connection is normal. Relevant operators can use the earthquake operation process management system directly on PCs, tablets and other devices without accessing the intranet, which greatly improves the flexibility of use.

[0042] (2) In terms of process drawing, this invention achieves more convenient interactive operation than the C / S earthquake operation management system by deeply customizing the drawing framework of AntvG6, such as batch selection of modules, automatic snapping of anchor points during drawing, and canvas dragging, which improves the alignment accuracy and efficiency when connecting modules.

[0043] (3) In terms of parameter editing, this invention adds common B / S terminal designs such as filterable selectors, virtualization components, and lazy loading. Thanks to these on-demand loading designs, the B / S terminal earthquake operation management system has greatly alleviated the problem of slow interaction response caused by the increase of data volume in the C / S terminal earthquake operation management system. According to the test, the interaction delay of this invention with virtualization components is basically fixed and basically unaffected by the amount of data, while the interaction delay of the original system is linearly related to the amount of data.

[0044] (4) Vue components are the basic units of modular design. Each component encapsulates HTML templates, JS logic and CSS styles. This invention improves the overall readability and maintainability of the code by decomposing the overall application into small functional units. Individual components can be directly loaded into any component through the import method of modern ES syntax. If an error occurs in an individual component, it will only manifest as partial failure of functions in the application, rather than the overall application crashing. This invention, together with Vue3's onErrorCaptured and other hook functions, significantly improves the robustness and maintainability of the application. In the rapid iteration cycle of functions, new functions can also be plugged and played.

[0045] (5) The XML file generated by this invention is fully compatible with the original C / S earthquake operation management system, ensuring seamless connection and data exchange with the original system.

[0046] In summary, this invention deeply integrates the Vue3 front-end framework with the seismic operation workflow editing system, constructing a cross-platform, modular, and highly responsive seismic operation visualization editing system. This not only fundamentally solves the inherent defects of traditional C / S architecture software in terms of compatibility, scalability, and interactive performance, but also significantly improves the flexibility and robustness of seismic operation design through an innovative two-way data binding mechanism and component-based anomaly handling architecture. It provides an efficient, stable, and easy-to-deploy technical solution for the field of geophysical exploration. Attached Figure Description

[0047] The accompanying drawings are provided to further illustrate the invention and form part of the specification. They are used together with the embodiments of the invention to explain the invention and do not constitute a limitation thereof.

[0048] In the attached diagram:

[0049] Figure 1 This is a schematic diagram of the overall interface design of the earthquake operation process visualization and parameter dynamic editing system based on Vue3 in Embodiment 1 of the present invention;

[0050] Figure 2 This is a schematic diagram of the original seismic operation XML file data in Embodiment 1 of the present invention;

[0051] Figure 3 This is a schematic diagram of some key JSON data after conversion in Embodiment 1 of the present invention;

[0052] Figure 4 This is a schematic diagram of the program execution flow in Embodiment 2 of the present invention;

[0053] Figure 5 This is a schematic diagram illustrating the process of parsing an earthquake operation XML file into JSON data in Embodiment 2 of the present invention;

[0054] Figure 6 This is a schematic diagram of the workflow editing process in Embodiment 2 of the present invention;

[0055] Figure 7 This is a schematic diagram of the module parameter parsing and rendering process in Embodiment 2 of the present invention. Detailed Implementation

[0056] The preferred embodiments of the present invention will now be described with reference to the accompanying drawings. It should be understood that the preferred embodiments described herein are for illustrative and explanatory purposes only and are not intended to limit the scope of the invention.

[0057] Example 1

[0058] This embodiment provides a Vue3-based system for visualizing earthquake operation workflows and dynamically editing parameters, such as... Figure 1 The diagram shows the overall system interface design. The system is deployed on a web server, and clients access it through browsers that support the Chromium kernel. The overall system architecture includes a job flow control module, a module parameter editing module, a function menu module, and an exception handling module. In this embodiment, browsers supporting the Chromium kernel include Edge, Chrome, and 360 Speed ​​Browser.

[0059] I. Workflow Control Module

[0060] The workflow control module parses earthquake operation XML files into JSON data and renders the earthquake operation flowchart on a Canvas based on the JSON data. It also listens for interactive operations within the flowchart and updates the JSON data in real time. This module includes a file parser, a UI renderer, a flowchart interaction listener, and a file serializer.

[0061] The file parser is used to parse the seismic operation XML file into JSON data. The structure of some key original seismic operation XML files is as follows: Figure 2As shown, the hierarchical relationship is as follows: WorkFlow, FlowStep, ModuleItem, JobTask, Job, Module, Parameter, and Value (referring to the value contained in this XML element, for illustrative purposes only). The file parser recursively traverses the XML nodes and converts them into structured JSON data. Some key JSON data after conversion is shown below. Figure 3 As shown, it includes fields such as node name (Name), position coordinates (ModulePosition), module type (ModuleType), and parameter list (content).

[0062] In its implementation, the file parser calls a custom `xmlToJsonParser` function, which parses the XML string based on the browser's built-in `DOMParser` API and then generates JSON data according to predefined mapping rules. If an error occurs during XML parsing, the parser throws an exception, which is then handled by the exception handling module.

[0063] The interface renderer is deeply customized based on the AntvG6 drawing framework to implement flowchart visualization functionality based on Canvas. The renderer reads JSON data generated by the file parser, parses the node coordinates, names, categories, and other parameters, and calls the AntvG6's graph.addItem method to render flowchart primitives on the Canvas.

[0064] To address the specific needs of earthquake operation processes, the interface renderer has been customized for AntvG6 as follows:

[0065] Automatic anchor snapping: When connecting modules, when dragging the connection line close to the input / output anchor point of the target module, it will automatically snap to the nearest anchor point, improving the connection accuracy;

[0066] Batch selection: Supports selecting multiple modules with the mouse to perform batch moving and deletion operations;

[0067] Canvas dragging and zooming: Supports moving the canvas view by dragging with the mouse and zooming the canvas with the scroll wheel, which is convenient for handling large-scale workflows.

[0068] The flowchart interaction listener listens for user actions on the Canvas using the graphical interaction event interface provided by the AntvG6 framework. Specifically, this includes:

[0069] Node drag event: Listen for the drag event of a node, get the new coordinates of the node after dragging, and update the position field of the corresponding node in the underlying JSON data in real time;

[0070] Node deletion event: Listen for the delete event of a node and remove the corresponding node and its associated connections from the JSON data;

[0071] Node creation event: Listen for the node's add event and write the information of the new module added by the user from the module library via drag and drop into JSON data.

[0072] After all interactive events are triggered, the listener will call the callback function to update the JSON data and trigger the UI renderer to re-render the canvas, achieving a WYSIWYG editing effect.

[0073] The file serializer is used to deserialize the edited JSON data into a standard seismic operation XML file. The serializer calls the js2xml function to recursively convert the JSON data into an XML string, following a structure fully compatible with the original XML structure. The generated seismic operation XML file can be directly recognized and used by the existing C / S-based seismic operation management system, ensuring seamless integration and data interoperability with the existing system. In this embodiment, the existing C / S-based seismic operation management system is GeoEast's GeoJobConsole.

[0074] II. Module Parameter Editing Module

[0075] The module parameter editing module is used to construct a parameter display structure from JSON data. It dynamically displays module parameters in the parameter editing interface using Vue3's data binding features and listens for parameter editing events to update the data synchronously. This module includes a data construction component, a data display component, and a Vue3 event listener.

[0076] The data construction component extracts the parameter-related parts from the JSON data generated by the file parser and constructs them into structured data that the parameter display component can read. For example, for a dropdown menu with multiple parameter value options, the construction component will generate an object containing a list of options and the currently selected value.

[0077] The data visualization component displays module parameters through various UI components, including: a table component for displaying parameter lists, supporting sorting and filtering; a dropdown menu component for selecting enumerated parameters; a filterable selector that supports keyword filtering, suitable for scenarios with many options; and a virtualized list component for displaying large amounts of data (such as seismic trace information from thousands of tracks), rendering only data items within the visible area to address rendering performance issues with large datasets. The data visualization component also dynamically renders the parameter editing interface based on the dependencies between parameters: when parameters have dependencies, the corresponding UI component is rendered only when the dependencies are met, and the rendering status is updated in real-time by monitoring changes in all related parameters.

[0078] Vue 3 event listeners are used to listen for data editing, data binding, and loading and saving events in the parameter editing interface.

[0079] Among them, data binding includes two methods: automatic binding and manual binding. Automatic data binding, by leveraging the ref and reactive features of Vue 3, achieves real-time synchronous rendering of page elements and data. For example, binding v-model of an input box to a reactive data object, when the user modifies the content of the input box, the underlying data is automatically updated. Manual data binding: By using the watch function of Vue 3, complex synchronization between page elements and data is achieved through conditional control. For example, when a certain parameter value changes, multiple other parameters need to be联动修改 (linked and modified). By using watch to monitor changes in the source data, complex联动逻辑 (linked logic) is executed in the callback function. Both data binding methods are debounced. The lodash debounce function is used to set a 300ms delay to avoid excessive system overhead caused by high-frequency editing operations.

[0080] III. Function Menu Module

[0081] The function menu module is used to display project information, provide project configuration control, and load various extended functions in the form of Vue 3 components. The function menu module includes a project information display component, a project configuration control component, and a function menu component.

[0082] The project information display component shows all relevant information of the current seismic operation, including project name, creation time, last modification time, operation status, etc. This component obtains data from the backend through the Pinia state management library and responds to data changes in real time.

[0083] The project configuration control component provides an interactive interface that allows users to change project-related configurations, such as output path, parallelism, log level, etc. Configuration items are displayed through form components, and after the user modifies them, they are immediately synchronized to the backend and persistently stored.

[0084] The function menu component loads various extended functions in the form of Vue 3 components. Vue 3 componentization is implemented based on the ESModule syntax. Each component encapsulates HTML templates, JS logic, and CSS styles, and is an independent and reusable functional unit. When expanding functions, simply use the import syntax to import new components to the required location to achieve plug-and-play.

[0085] Component communication is implemented based on the Pinia state management library. As the officially recommended state management library for Vue 3, Pinia defines emit and on methods in the store and calls them at the required locations to achieve direct communication between components at any level, solving the problem in the native API of Vue 3 that only cross-parent-child component communication is possible.

[0086] IV. Exception Handling Module

[0087] The exception handling module uses Vue 3's `onErrorCaptured` hook to capture component errors and sends error information via Pinia's cross-component communication tool for unified handling by the top-level component. The specific mechanism is as follows: The `onErrorCaptured` hook is registered in the application's root component to capture errors thrown by all child components; after capturing an error, the error information is sent to the error handling center via Piniastore; the error handling center determines the handling method based on the error type: for recoverable errors, a warning message is displayed at the top of the screen; for fatal errors, the current operation is terminated and error details are displayed, ensuring the application as a whole does not crash.

[0088] This mechanism ensures that a single component error will not cause the entire application to crash, significantly improving the robustness and maintainability of the application.

[0089] V. System Operating Environment

[0090] This system is a browser-based web application that runs in browsers supporting the Chromium engine. It communicates with the backend server via the network and is compatible with different operating systems and mobile devices, including Windows, macOS, Linux, iOS, and Android. Relevant personnel can use the earthquake operation workflow management system directly on PCs, tablets, and other devices without needing to connect to the intranet, greatly improving its flexibility.

[0091] Example 2

[0092] This embodiment provides a method for visualizing earthquake operation workflow and dynamically editing parameters based on Vue3, applied to the system described in Embodiment 1. The overall workflow is as follows: Figure 4 As shown. Steps S1 to S5 are described in detail below.

[0093] S1. Browser startup and resource preloading.

[0094] S11. The user accesses the system URL through a browser, enters their username and password to log in. After verifying the user's identity, the backend returns a JWT token for subsequent interface authentication.

[0095] S12. The front-end program carries a token to preload shared resources from the back-end, including basic data such as track start information, work area information, and existing job lists. This data is stored in the Pinia store for use by various modules.

[0096] S13. The program begins loading componentized modules. It uses Vue3's asynchronous component mechanism (defineAsyncComponent) to load the resources required for the initial module, thereby improving the speed of building the initial page.

[0097] S2. Job workflow loading and rendering.

[0098] S21. The program provides two ways to edit job workflows: users can choose to create a new default job workflow or select a job workflow file from the list of existing jobs to load.

[0099] S22. If you choose to open an existing process, the program executes the following sub-steps:

[0100] S221. Obtain the earthquake operation XML file from the backend via an HTTP request and transmit it as an encrypted string.

[0101] S222. Call the custom xmlToJsonParser function to parse the XML string into JSON data. Figure 5 The process shown illustrates how an XML string is parsed into JSON data. First, the XMLDOMParser method is used to parse the XML string.

[0102] S223. If an error occurs during XML parsing, the ErrorHandler method sends the error information through the Pinia cross-component communication tool. The top-level component handles the error and displays an error message on the interface, terminating the parsing process.

[0103] S224. After successful parsing, the UI renderer reads the JSON data and calls the AntvG6 API to render the flowchart on the Canvas. The process is as follows: Figure 6 As shown. The rendering process includes: traversing the node data in the JSON data and calling graph.addItem('node', nodeConfig) to add nodes; traversing the edge data in the JSON data and calling graph.addItem('edge', edgeConfig) to add connections; and setting the canvas scaling and viewport position according to the view configuration in the JSON data.

[0104] S23. If you choose to create a new job, the program generates an empty JSON data template and initializes a blank canvas for the user to edit.

[0105] S3. Workflow Editing.

[0106] S31. If a user needs to add a new module, they can create a new module through the module selector or the right-click shortcut menu.

[0107] S32. If a user needs to move a module, they can drag a single module with the left mouse button or select and drag multiple modules at the same time.

[0108] S33. If a user needs to delete a new module, they can remove the module from the canvas using the delete button in the upper right corner of the module.

[0109] S34. After each user completes an operation, the process JSON data will be updated synchronously through Pinia.

[0110] The user's editing operation process for flowchart elements is as follows: Figure 6 As shown, when Figure 5 Once the interface renderer completes rendering, the user can interact with the Canvas elements. All interaction events are handled by an interaction listener. Upon completion of an interaction, the JSON data stored in Pinia for drawing the Canvas elements is updated synchronously, subsequently triggering the interface renderer's refresh function to re-render the elements in the Canvas. The process described above will repeat until the earthquake operation workflow is fully edited.

[0111] S4. Parameter editing and real-time feedback.

[0112] S41. When a user clicks on a flowchart element in the Canvas, the flowchart interaction listener captures the node:click event and obtains the ID of the clicked node.

[0113] S42. Extract the corresponding parameter data from the JSON data based on the node ID and pass it to the module parameter editing module.

[0114] S43. The module parameter editing module's data construction component constructs parameter data into a structure readable by UI components. During this process, it checks if the parameter's dependencies meet certain conditions. If not, it's not rendered immediately. Only when the dependencies are met is the parameter rendered as a UI component. All parameter values ​​are monitored, and parameters containing dependencies are updated in real-time based on changes in all parameters to determine whether to render. Finally, the data display component renders the parameter editing interface in the right-hand panel. This is triggered when the user begins editing the module's parameters. Figure 7 The process is as follows: First, the data in the parameter set is checked: if the parameter is independent and unaffected by other parameter values, it is directly rendered in the front-end page. If the parameter is not independent, its dependent parameter values ​​are checked first: if they meet the requirements, it is rendered directly; otherwise, it is not rendered. After rendering, when the parameter value changes, the value is synchronized to the JSON data in the Pinia manager, and the listener re-evaluates the dependencies of the non-independent parameter values, repeating the step of checking whether the dependencies meet the requirements, until all parameters have been edited.

[0115] S44. When a user modifies a parameter value in the parameter editing interface, the Vue3 event listener captures the editing event: for simple parameters, automatic data binding is achieved through v-model, and the corresponding data in the Pinia store is updated in real time; for parameters that require complex linkage, changes in the source data are monitored through watch, and the linkage logic is executed in the callback function to update the relevant parameters.

[0116] S45. After the data is updated, the state in the Pinia store changes, triggering the UI renderer to re-render the relevant UI elements (such as the real-time display of parameter values). At the same time, the flowchart interaction listener can optionally update the appearance of the flowchart elements, such as changing the color to indicate that the parameters have been modified.

[0117] S5. Save and send jobs.

[0118] S51. After the user finishes editing, click the "Save" or "Send Job" button.

[0119] S52. The program triggers the file serializer, calling the js2xml function to deserialize the JSON data in the current Pinia store into an XML string. The deserialization process follows a structure that is fully compatible with the original XML structure, ensuring that the generated seismic operation XML file can be recognized by the original C / S system.

[0120] S53. The generated seismic job XML file is sent to the backend server via an HTTP request. If it is a save operation, it is only stored in the database; if it is a job submission operation, the backend calls the corresponding interface according to the job type to forward the job to an existing scheduling system, such as LSF or PBS.

[0121] S54. The backend returns the processing result, and the frontend interface displays success or failure information, completing the entire earthquake operation editing and sending process.

[0122] S6. Persistent storage and closed-loop reuse of job workflows.

[0123] When a user completes the current earthquake job editing process, the program calls the file serializer to deserialize the JSON data in the current Piniastore into an earthquake job XML file. This earthquake job XML file is generated according to a structure that is fully compatible with the original XML structure, and can be directly recognized by the existing C / S-based earthquake job management system. It also serves as a persistent storage unit for subsequent job editing processes.

[0124] When a user needs to continue editing the same workflow later, they can reload the seismic job XML file through step S2. The program will parse the seismic job XML file into JSON data and render the flowchart, allowing the user to continue the editing operations from S3 to S5 from the last saved state. This forms a complete closed-loop process of loading the seismic job XML file, editing the JSON data, and saving the seismic job XML file, realizing the cross-session continuous editing function of the workflow.

[0125] Example 3

[0126] This embodiment provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the Vue3-based earthquake operation process visualization and parameter dynamic editing method described in Embodiment 2.

[0127] Computer-readable storage media may take the form of any combination of one or more readable media. A readable medium may be a readable signal medium or a readable storage medium. Readable storage media include, for example, systems, apparatuses, or devices that are, but are not limited to, electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, or any combination thereof. More specific examples of readable storage media (a non-exhaustive list) include: electrical connections having one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disc read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof.

[0128] When a computer program is executed by a processor, it performs the following functions: data parsing, flowchart rendering, parameter editing, data serialization, and exception handling.

[0129] Data parsing function: Parses the seismic operation XML file into JSON data. During the parsing process, XML nodes are processed recursively to generate structured JSON data containing node names, location coordinates, module types, and parameter lists. If a parsing error occurs, an error message is sent through the Pinia cross-component communication tool and handled uniformly by the top-level component.

[0130] Flowchart rendering function: Based on the AntvG6 drawing framework, the seismic operation flowchart is rendered on the Canvas. During rendering, the node name, position coordinates, module type and parameter list in the JSON data are parsed, and interactive functions such as automatic anchor snapping, batch selection, and canvas dragging are implemented.

[0131] Parameter editing functionality: Constructs JSON data into a parameter display structure, uses Vue3's ref / reactive feature to achieve automatic parameter binding and real-time editing, uses the watch function to achieve manual binding and complex linkage logic, and uses debouncing to control editing overhead.

[0132] Data serialization function: After editing, the JSON data is reverse serialized into a standard earthquake operation XML file according to a structure compatible with the original XML structure, so as to achieve data compatibility with the original C / S earthquake operation management system.

[0133] Error handling functionality: Component errors are captured using Vue 3's onErrorCaptured hook function and handled uniformly through Pinia cross-component communication tool, ensuring that a single component error will not cause the entire application to crash.

[0134] This storage medium can be integrated into the server side of a seismic exploration data processing system or distributed as a standalone software product. Users can access the server where the program is deployed via a Chromium-enabled browser to use the complete seismic workflow visualization and dynamic parameter editing functions without installing any dedicated software locally.

Claims

1. A Vue3-based system for visualizing earthquake operation workflows and dynamically editing parameters, characterized in that, include: The workflow control module is used to parse the earthquake operation XML file into JSON data, and render the earthquake operation flowchart on the Canvas based on the JSON data. At the same time, it listens to the interactive operations in the flowchart and updates the JSON data in real time. The module parameter editing module is used to construct the JSON data into a parameter display structure, dynamically display the module parameters in the parameter editing interface through Vue3's data binding feature, and listen for parameter editing events to update the data synchronously. The function menu module is used to display project information, provide project configuration control, and load various extended functions in the form of Vue3 components; The workflow control module includes a file serializer, which is used to reverse serialize the edited JSON data into a standard earthquake operation XML file according to a structure compatible with the original XML structure, so as to achieve data compatibility with the original C / S-end earthquake operation management system; the file serializer is also used to use the earthquake operation XML file generated by reverse serialization as a persistent storage unit for reloading during subsequent workflow editing, so as to achieve closed-loop reuse of the editing process.

2. The earthquake operation workflow visualization and parameter dynamic editing system based on Vue3 according to claim 1, characterized in that, The workflow control module also includes: The file parser is used to parse the seismic operation XML file into JSON data. The XML structure is a hierarchy of WorkFlow, Step, ModuleItem, Module, Parameter, and Value. The parsed JSON data includes node names, location coordinates, module types, and parameter lists.

3. The earthquake operation workflow visualization and parameter dynamic editing system based on Vue3 according to claim 2, characterized in that, The workflow control module also includes: The interface renderer is based on the AntvG6 drawing framework and is deeply customized to realize the visualization rendering of flowcharts based on Canvas. It renders flowchart elements by parsing the position coordinates, node names, module types and parameter lists in JSON data. The flowchart interaction listener uses the graphical interaction event interface provided by the AntvG6 framework to listen for drag-and-drop, deletion, and creation operations of nodes, and triggers callback functions to modify the underlying JSON data in real time.

4. The earthquake operation workflow visualization and parameter dynamic editing system based on Vue3 according to claim 1, characterized in that, The module parameter editing module includes: The data construction component is used to construct the parsed JSON data into structured data that can be read by the parameter display component; The data display component uses tables, drop-down menus, selectors, and virtualized list components to display module parameters; Vue 3 event listeners are used to listen for data editing, data binding, and load / save events in the parameter editing interface. Data binding includes two methods: automatic data binding and manual data binding. Automatic data binding uses Vue 3's ref and reactive features to achieve real-time synchronous rendering of page elements and data. Manual data binding uses Vue 3's watch function to achieve complex synchronization between page elements and data through conditional control. Both data binding methods are debouncing to control system overhead. The data display component is also used to dynamically render the parameter editing interface based on the dependencies between parameters: when a parameter has a dependency condition, the UI component corresponding to the parameter is rendered only when the dependency condition is met, and the rendering status is updated in real time by listening to changes in all related parameters.

5. The earthquake operation workflow visualization and parameter dynamic editing system based on Vue3 according to claim 1, characterized in that, The function menu module includes a project information display component, a project configuration control component, and a function menu component. Communication between components is implemented based on the Pinia state management library. Direct communication between components at any level is achieved by writing emit and on methods in Pinia and calling them where needed. The function menu component loads various extended functions through Vue3 componentization; Vue3 componentization is based on ES Module syntax, and each component encapsulates HTML template, JS logic and CSS styles, making it an independent and reusable functional unit, which is imported to the required location through import syntax.

6. The earthquake operation workflow visualization and parameter dynamic editing system based on Vue3 according to claim 5, characterized in that, The Vue3-based earthquake operation workflow visualization and dynamic parameter editing system also includes: The exception handling module uses Vue3's onErrorCaptured hook function to capture component errors and sends error information through the Pinia cross-component communication tool. The top-level component handles the errors uniformly, ensuring that a single component error will not cause the entire application to crash.

7. The earthquake operation workflow visualization and parameter dynamic editing system based on Vue3 according to claim 1, characterized in that, The earthquake operation process visualization and parameter dynamic editing system based on Vue3 is a browser-based web application that runs in a browser that supports the Chromium kernel. It communicates with the backend server via the network and is compatible with different operating systems and mobile devices.

8. A method for visualizing earthquake operation workflows and dynamically editing parameters based on Vue3, applied to the earthquake operation workflow visualization and dynamic parameter editing system based on Vue3 as described in any one of claims 1-7, characterized in that, Includes the following steps: S1. Browser launch, user login verification, preloading shared resources and componentized modules; S2. Load the earthquake operation process. If it is a new operation, directly enter the process editing. If it is an existing operation, parse the earthquake operation XML file into JSON data and render the earthquake operation process diagram on the Canvas. S3. Respond to user interactions with flowchart elements, trigger the interaction listener, and update the underlying JSON data in real time; interaction operations include dragging, deleting, and creating nodes; S4. In response to the user's click on the flowchart element, the corresponding module parameter editing interface pops up, and the parameters are modified in real time and the JSON data is updated synchronously through the Vue3 data binding mechanism; S5. In response to the user's save or send job operation, the current JSON data is deserialized into an earthquake job XML file, sent to the backend and forwarded to the scheduling system, and the front-end interface displays the sending result; S6. When the user completes the current earthquake operation editing process, the current earthquake operation process JSON data is deserialized into an earthquake operation XML file through the file serializer and persistently stored; the earthquake operation XML file serves as the input for subsequent operation process editing, allowing the user to repeatedly execute the operation process editing operations from S1 to S5.

9. The method for visualizing earthquake operation workflow and dynamically editing parameters based on Vue3 according to claim 8, characterized in that, The process of parsing the earthquake operation XML file into JSON data in step S2 includes: Call the custom xmlToJsonParser function to recursively parse the XML nodes into JSON data that conforms to the internal interface specification, which includes node name, position coordinates, module type and parameter list fields; If an error occurs during XML parsing, the ErrorHandler method sends the error information through the Pinia cross-component communication tool, which is then handled by the top-level component and the parsing process is terminated.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When executed by the processor, the program implements the Vue3-based method for visualizing earthquake operation workflows and dynamically editing parameters as described in claim 8 or 9.

Images