A multi-mode tutoring system for web terminal application and a tutoring method thereof

Abstract

The application discloses a kind of Web terminal application multi-mode tutoring systems, which is based on Vue framework to be encapsulated in the form of component construction, the system includes front-end interface, tutoring module and server, the tutoring module includes intelligent labeling module, process guide module and intelligent consulting module, the server includes communication module, business system public module, management module, capability module and data module, the intelligent labeling module is provided with user mode module and management mode module.The application also discloses a tutoring method.The application can be quickly integrated without changing the content of the original business system, so that taxpayers can choose to use the various operation tutoring functions provided by the method system when encountering questions during the process in the business system, solve the problem of doing things difficult, and further change the traditional service mode from "person teaching person" to "machine teaching person", and further promote the convenience and efficiency of "non-contact" business of the business system.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computer equipment, and in particular to a web terminal application multi-mode tutoring system and a tutoring method thereof. BACKGROUND

[0002] In order to improve the efficiency of tax or business, the existing tax usually uses web terminal application to operate, but the existing web terminal application system is limited by the size of the terminal screen, and the interface usually occupies the position of the web page control elements required by the business, and it is difficult to add more detailed operation instructions except for adding simple text operation prompts in the remaining blank position of the interface. The operation instruction efficiency is slow, and if a pop-up window or a jump page is used to display, it needs to be switched back and forth to compare and fill in the results, which is slow in operation efficiency, increases the complexity of system operation, and the operation experience of taxpayers is poor; when the existing web terminal application system is operated by an administrator, it cannot be previewed in the management mode, and needs to exit the management mode and enter the user mode for testing, which is tedious and time-consuming in preview operation steps, and affects the maintenance efficiency; the applicability of the existing web terminal application system is low, and it needs higher hardware and software environment to install. SUMMARY

[0003] The present application is aimed at the technical deficiencies of the prior art, and provides a web terminal application multi-mode tutoring system.

[0004] The present application also discloses a tutoring method.

[0005] The technical scheme adopted by the present application to achieve the above-mentioned purposes is:

[0006] A web terminal application multi-mode tutoring system is encapsulated and constructed in the form of a component based on a Vue framework, and the system includes a front-end interface, a tutoring module and a server, the front-end interface, the tutoring module and the server are communicatively linked, the tutoring module includes an intelligent labeling module, a process guidance module and an intelligent consulting module, the server includes a communication module, a business system public module, a management module, a capability module and a data module, the intelligent labeling module is provided with a user mode module and a management mode module;

[0007] The front-end interface is used for operation control of users or administrators, and display of different business interfaces;

[0008] The tutoring module is used for tutoring and guiding operation;

[0009] The server is used for connecting with external business systems and calling data of the external business systems;

[0010] The management module is used for managing labeling data, node data and knowledge base data.

[0011] The capability module is used for converting speech into text and splitting phrases;

[0012] The data module is used for storing annotated data, node data and knowledge data;

[0013] The business system public module is used for providing shared contact of other business systems in the outside world.

[0014] For further improvement, the management mode module includes a webpage Html2Canvas drawing board and a Svg annotation technology, which makes the management mode module control the front-end interface to form layer elements, and enables the front-end interface to quickly build an editable drawing board when it enters the management mode state, thereby realizing the function of quickly editing and planning the front-end interface. The management mode module is also provided with a judgment module, which is used to judge whether the front-end interface is subjected to annotation processing.

[0015] For further improvement, the user mode module is provided with a dynamic loading module, which is used to quickly load and associate the identification data of the selected items of the user when the user module is performed, so that the user can display different dynamic echo rendering and custom loop playing in different business interfaces when using.

[0016] For further improvement, the process guide module is built based on the Vue framework, and includes a plurality of types of node controls, a classification collection and saving module, a multi-screen communication module and a component recursion module.

[0017] The multi-screen communication module is based on the lsbridge.js multi-screen communication technology, and is used to load related data and control the component recursion module to perform traversal and subsequent control matching processing.

[0018] The component recursion module adopts a component recursion technology, and is used to traverse the related data loaded by the multi-screen communication module, match the type node controls of the related types of data, and thereby cyclically render all process nodes. The component recursion module is also used to bind the node id to the interface element id, and after obtaining the actual coordinate position of the node by js getting dom calculation, the full dynamic loading of the business process nodes can be realized.

[0019] The plurality of types of node controls are used for dynamic transformation of corresponding styles according to different business interfaces.

[0020] The classification collection and saving module is used for classification configuration and saving according to standard specification process templates, and is also used for collecting process data of items and saving.

[0021] As a further improvement, the intelligent consultation module is provided with a voice and text recognition module, a data calling module and a robot consultation module, the voice and text recognition module is in communication connection with the capability module, the data calling module is in communication connection with the management module and the data module;

[0022] The voice and text recognition module is used for voice or text collection action, and converts into text and word groups through the capability module, so as to facilitate quick retrieval;

[0023] The data calling module is used for the function of quickly retrieving data and details of matters;

[0024] The robot consultation module is used for the function of providing robot consultation interaction.

[0025] As a further improvement, the management module includes a labeled data management module, a node data management module and a knowledge base management module, the capability module includes a voice to text module and a word breaking module, and the data module includes a labeled data storage module, a node data storage module and a knowledge data storage module.

[0026] As a further improvement, a guidance method for implementing the Web terminal application multi-mode guidance system includes the following steps:

[0027] S1. Selecting a management mode and a user mode on a front-end interface, if the management mode is selected, the next step is entered, if the user mode is selected, a business function selection is entered;

[0028] S2. The management mode module controls the front-end interface, an administrator selects a business function and enters a business interface;

[0029] S3. The administrator selects "edit label" or "start guide" preview on the business interface, if "edit label" is selected, the next step is entered, if "start guide" preview is selected, a guide interface is entered;

[0030] S4. The front-end interface enters an edit label interface, the administrator selects label editing, the administrator selects to close and return to the edit label interface, if editing is selected, label data editing is entered, after editing is completed, the label data is saved to the labeled data storage module, after the system is saved, it returns to the edit label interface, then returns to the business interface, and finally returns to the system home page.

[0031] As a further improvement, the operation of the guide interface further includes the following steps:

[0032] S31. The administrator enters the guidance interface, and a judging module judges whether the standard data is updated and displayed, if yes, the next step is entered, if not, the guidance interface is returned, and then the business interface is returned to step S1-S4;

[0033] S32. The administrator clicks the "close guidance", the system closes the marking guidance action, the system temporarily stores the current function page guidance process information, the judging module judges whether the standard data is updated and displayed again, if yes, the guidance process of the current page is restarted, the related node data, marking data and knowledge data are obtained, the related data is saved, and the next step is entered, if not, the step S31 is returned;

[0034] S33. After saving, the initial guidance interface is returned.

[0035] Further improvement, the operation of the business function selection comprises the following steps:

[0036] S21. The user selects any configured intelligent marking business function, clicks the operation guidance, enters the business handling process, displays the process guidance interface, enters the robot consultation module for voice or text interaction, the consultation module performs voice or text collection action, after the collection is completed, the ability module is converted into text and word groups, and then the next step is entered;

[0037] S22. The data calling module quickly calls related data and matters according to the text and word groups, and combines the multi-screen communication module to realize the split-screen action of the related information, and displays the related information to the side of the guidance page, and the user selects according to the information displayed on the guidance page;

[0038] S23. After the selection is completed, the business function is handled, after the handling is completed, the business handling is completed is displayed, and after the business handling is completed, the system homepage is returned, and the guidance is completed.

[0039] The beneficial effects of the present application are as follows: the multi-screen communication module is formed by adopting the lsbridge.js multi-screen communication technology, which is used for loading related data and controlling the component recursive module to traverse and control subsequent matching processing, the multi-screen communication module can also realize the multi-screen display function, and the component recursive module is combined with the component recursive technology, the component recursive module is used for traversing the related data loaded by the multi-screen communication module, matching the type node control of the related type of data, so that all process nodes are circularly rendered, the component recursive module is also used for binding the node id to the interface element id, the actual coordinate position of the node is calculated through js to obtain dom, and then the full dynamic loading of the business process node can be realized, and the efficiency is improved;

[0040] The application can quickly integrate without changing the content of the original business system, and can realize that when taxpayers encounter doubts in the process of handling in the business system, a variety of operation guidance functions provided by the method system can be selected to solve the problem of handling difficulty, and further change the traditional service mode from "person teaching person" to "machine teaching person", and further popularize the convenience of "non-contact" handling of the business system; the Vue framework with general and low coupling degree is adopted to encapsulate in the form of components, which is convenient for quick and convenient integration of other modules, so that the web terminal application multi-mode guidance system can be applied to various installation environments, improve the applicability, save the development time, and improve the efficiency;

[0041] By setting the intelligent marking module, the corresponding process node control can also be dynamically changed in style, realizing interactive process guidance and handling business experience. In the management mode, the marking and guiding operation can be performed, and the business interface can be optimized, greatly improving the maintenance efficiency and saving the maintenance cost. In the management mode, quick preview operation can be realized without returning to the user mode for testing operation, saving steps and time, improving the efficiency of maintenance, thereby ensuring the normal use efficiency of the web terminal application multi-mode guidance system.

[0042] The application will be further described below in combination with the drawings and specific embodiments. BRIEF DESCRIPTION OF DRAWINGS

[0043] Fig. 1 It is a whole module schematic diagram of the web terminal application multi-mode guidance system of the embodiment.

[0044] Fig. 2 It is a guidance method module schematic diagram of the embodiment. SPECIFIC EMBODIMENT

[0045] The following description is only a preferred embodiment of the application, and does not limit the protection scope of the application.

[0046] Embodiment, see attached Figs. 1-2 A web terminal application multi-mode guidance system is packaged and constructed in the form of components based on the Vue framework, the system includes a front-end interface, a guidance module and a server, the front-end interface, the guidance module and the server are mutually communicated and linked, the guidance module includes an intelligent marking module, a process guidance module and an intelligent consulting module, the server includes a communication module, a business system public module, a management module, a capability module and a data module, the intelligent marking module is provided with a user mode module and a management mode module;

[0047] The front-end interface is used for operation control of users or administrators, and display of different business interfaces;

[0048] The guidance module is used for guiding and guiding operation.

[0049] The server is used for connecting with external business system, and calling data of external business system;

[0050] The management module is used for marking management of data, node data and knowledge base data;

[0051] The capability module is used for converting voice into words and splitting words;

[0052] The data module is used for storing data, node data and knowledge data;

[0053] The business system public module is used for providing shared contact of other business systems outside.

[0054] Further improvement, the management mode module includes a web Html2Canvas drawing board and Svg marking technology, the web Html2Canvas drawing board and Svg marking technology makes the management mode module control front-end interface formation layer element, and makes the front-end interface enter to the management mode state can quickly build the editable drawing board, so as to realize the function of quick editing and planning of front-end interface, the management mode module is also provided with judging module, the judging module is used for judging whether the front-end interface is marked.

[0055] The user mode module is provided with a dynamic loading module, the dynamic loading module is used for quickly loading and associating the identification data of the selected items of the user when the user module is performed, so that the user can display different dynamic echo rendering and custom loop playing in different business interfaces when using.

[0056] The process guide module is built based on Vue framework, the process guide module includes a plurality of types of node controls, a classification collection and storage module, a multi-screen communication module and a component recursion module;

[0057] The multi-screen communication module is based on lsbridge.js multi-screen communication technology, the multi-screen communication module is used for loading related data and controlling the component recursion module to traverse and control subsequent matching processing;

[0058] The component recursion module adopts component recursion technology, the component recursion module is used for traversing the related data loaded by the multi-screen communication module, matching the type node control of the related type of data, so as to circularly render all process nodes, the component recursion module is also used for binding the node id to the interface element id, and the actual coordinate position of the node can be obtained by js getting dom calculation, so as to realize full dynamic loading of business process nodes;

[0059] The plurality of types of node controls are used for dynamically changing the corresponding style according to different business interfaces;

[0060] The classified collection and storage module is configured and stored according to a standard specification process template, and is also used to collect process data of the matter and save it.

[0061] The intelligent consultation module is provided with a voice and text recognition module, a data calling module and a robot consultation module, the voice and text recognition module is in communication connection with the capability module, and the data calling module is in communication connection with the management module and the data module;

[0062] The voice and text recognition module is used for the collection of voice or text, and converts it into text and word groups through the capability module, so as to facilitate quick retrieval;

[0063] The data calling module is used for the quick retrieval of data and details of the matter;

[0064] The robot consultation module is used to provide the function of robot consultation interaction.

[0065] The management module includes a labeled data management module, a node data management module and a knowledge base management module, the capability module includes a voice-to-text module and a word breaking module, and the data module includes a labeled data storage module, a node data storage module and a knowledge data storage module.

[0066] A guidance method for implementing the multi-mode guidance system of the Web terminal application, comprising the following steps:

[0067] S1. Selecting the management mode and the user mode in the front-end interface, if the management mode is selected, the next step is entered, if the user mode is selected, the business function selection is entered;

[0068] S2. The management mode module controls the front-end interface, the administrator selects the business function and enters the business interface;

[0069] S3. The administrator selects "edit annotation" or "start guidance" preview in the business interface, if "edit annotation" is selected, the next step is entered, if "start guidance" preview is selected, the guidance interface is entered;

[0070] S4. The front-end interface enters the edit annotation interface, the administrator selects the annotation editing, the administrator selects to close and return to the edit annotation interface; if the edit is selected, the annotation data is edited, after the editing is completed, the annotation data is saved to the labeled data storage module, after the system is saved, it returns to the edit annotation interface, then returns to the business interface, and finally returns to the system home page.

[0071] The operation of the guidance interface comprises the following steps:

[0072] S31. The administrator enters the guidance interface, and a judging module judges whether the standard data is updated and displayed, if the judging module judges that the standard data is updated, the next step is entered, if not, the guidance interface is returned, and then the business interface is returned to step S1-S4;

[0073] S32. The administrator clicks the 'close guidance', the system closes the marking guidance action, the system temporarily stores the current function page guidance process information, the judging module judges whether the standard data is updated and displayed again, if the judging module judges that the standard data is updated, the guidance process of the current page is restarted, the related node data, marking data and knowledge data are obtained, then the related data is saved and the next step is entered, if the judging module judges that the standard data is not updated, the step S31 is returned;

[0074] S33. After saving, the initial guidance interface is returned.

[0075] The operation of the business function selection comprises the following steps:

[0076] S21. The user selects any configured intelligent marking business function, clicks the operation guidance, enters the business handling process, displays the process guidance interface, enters a robot consultation module to perform voice or text interaction, the consultation module performs voice or text collection action, after the collection is completed, the capability module is converted into text and word groups, and then the next step is entered;

[0077] S22. The data calling module quickly calls related data and matters in detail according to the text and word groups, and combines the multi-screen communication module to realize the split-screen action of the related information, and displays the related information to the side of the guidance page, and the user selects according to the information displayed on the guidance page;

[0078] S23. After the selection is completed, the business function is handled, after the handling is completed, the business handling is completed is displayed, and after the business handling is completed, the system homepage is returned, and the guidance is completed.

[0079] The application adopts the lsbridge.js multi-screen communication technology to form a multi-screen communication module for loading related data and controlling a component recursive module to perform traversal and subsequent control matching processing, the multi-screen communication module can also realize the multi-screen display function, and combines the component recursive module adopting the component recursive technology, the component recursive module is used for traversing the related data loaded by the multi-screen communication module, matching the type node control of the related type of data, so that all process nodes are circularly rendered, the component recursive module is also used for binding the node id to the interface element id, and the actual coordinate position of the node is calculated through js to obtain dom, so that the full dynamic loading of the business process node is realized, and the efficiency is improved.

[0080] The application can be quickly integrated without changing the content of the original business system, and can realize that when taxpayers encounter doubts in the process of handling in the business system, various operation guidance functions provided by the method system can be selected to solve the problem of handling difficulty, and further change the traditional service mode from 'person teaching person' to'machine teaching person', and further popularize the convenience of 'non-contact' handling of the business system; by using the general and low coupling degree Vue framework to encapsulate in the form of components, other modules can be quickly and easily integrated, so that the web terminal application multi-mode guidance system can be applicable to various installation environments, improve the applicability, save the development time and improve the efficiency;

[0081] By setting the intelligent marking module, the corresponding process node control will dynamically change the style, realize the interactive process guidance, handle the business experience, and can perform marking and guiding operations in the management mode, optimize the business interface, greatly improve the maintenance efficiency, save the maintenance cost, and realize the quick preview operation in the management mode without returning to the user mode for testing operation, save the steps and time, improve the maintenance efficiency, and thus ensure the normal use efficiency of the web terminal application multi-mode guidance system.

[0082] The application is not limited to the above-mentioned embodiments, and other web terminal application multi-mode guidance systems and guidance methods obtained by using the same or similar structures, devices, processes or methods as the above-mentioned embodiments of the application are within the protection scope of the application.

Claims

1. A multi-mode tutoring system for web terminal applications, characterized in that: The system is built on the Vue framework and encapsulated in the form of components. The system includes a front-end interface, a tutoring module, and a server. The front-end interface, tutoring module, and server communicate and link with each other. The tutoring module includes an intelligent annotation module, a process guidance module, and an intelligent consultation module. The server includes a communication module, a business system common module, a management module, a capability module, and a data module. The intelligent annotation module has a user mode module and a management mode module. The front-end interface is used for user or administrator operation control, as well as the display of different business interfaces; The tutoring module is used to provide guidance and instruction during operation. The server is used to connect to external business systems and call data from those systems. The management module is used for the management of labeled data, node data, and knowledge base data. The capability module is used to convert speech into text and to break down word groups. The data module is used for storing labeled data, node data, and knowledge data. The common module of the business system is used to provide shared connections with other external business systems. The management mode module includes a web page Html2Canvas canvas and SVG annotation technology. The web page Html2Canvas canvas and SVG annotation technology enable the management mode module to control the front-end interface to form layer elements, and enable the front-end interface to quickly build an editable canvas when it enters the management mode state, thereby realizing the function of rapid editing and planning of the front-end interface. The management mode module also includes a judgment module, which is used to determine whether the front-end interface has been annotated. The user mode module is equipped with a dynamic loading module, which is used to quickly load and associate the identification data of the user's selected items when using the user module, so that the user can display different dynamic echo rendering and custom loop playback on different business interfaces.

2. The Web terminal application multi-mode tutoring system according to claim 1, characterized in that: The process guidance module is built on the Vue framework and includes various types of node controls, a categorized collection and saving module, a multi-screen communication module, and a component recursion module. The multi-screen communication module is based on lsbridge.js multi-screen communication technology. The multi-screen communication module is used to load relevant data and control the component recursive module to perform traversal and subsequent control matching processing. The component recursion module adopts component recursion technology. The component recursion module is used to traverse the relevant data loaded by the multi-screen communication module, match the type node control of the data-related type, and thus render all process nodes in a loop. The component recursion module is also used to bind the node ID to the interface element ID. After obtaining the actual coordinate position of the node by DOM calculation through JS, the full dynamic loading of business process nodes can be realized. The various types of node controls are used to dynamically change their styles according to different business interfaces; The classification, collection, and storage module is used to classify and save data according to standard process templates. The classification, collection, and storage module is also used to collect and save process data for items.

3. The Web terminal application multi-mode tutoring system according to claim 2, characterized in that: The intelligent consultation module includes a voice and text recognition module, a data retrieval module, and a robot consultation module. The voice and text recognition module is communicatively connected to the capability module, and the data retrieval module is communicatively connected to the management module and the data module. The speech and text recognition module is used to collect speech or text actions, and converts them into text and phrases through the capability module, so as to facilitate quick retrieval; The data retrieval module is used to quickly retrieve detailed data and information. The robot consultation module is used to provide robot consultation and interaction.

4. The Web terminal application multi-mode tutoring system according to claim 3, characterized in that: The management module includes a labeled data management module, a node data management module, and a knowledge base management module; the capability module includes a speech-to-text module and a word decomposition module; and the data module includes a labeled data storage module, a node data storage module, and a knowledge data storage module.

5. A tutoring method for implementing the multi-mode tutoring system for Web terminal applications according to any one of claims 3-4, comprising the following steps: S1. Select management mode and user mode on the front-end interface. If you select management mode, proceed to the next step. If you select user mode, proceed to the business function selection. S2. The management mode module controls the front-end interface, allowing administrators to select business functions and access the business interface. S3. The administrator can select "Edit Annotation" or "Start Guidance" to preview in the business interface. If "Edit Annotation" is selected, the next step will be taken. If "Start Guidance" is selected, the preview will take you to the guidance interface. S4. The front-end interface enters the annotation editing interface, where the administrator can select annotations to edit, or choose to close and return to the annotation editing interface; If you choose to edit, you will be taken to the annotation data for editing. After editing, the annotation data will be saved to the annotation data storage module. After the system saves the data, it will return to the annotation editing interface, then to the business interface, and finally to the system homepage.

6. The tutoring method of the multi-mode tutoring system for Web terminal applications according to claim 5, characterized in that, The operation of the guidance interface includes the following steps: S31. The administrator enters the guidance interface, and the judgment module performs a standard data update and display judgment. If the judgment has been updated, proceed to the next step; otherwise, return to the guidance interface, and then return to the business interface to proceed to steps S1-S4. S32. When the administrator clicks "Close Guide", the system closes the annotation guide action. The system temporarily saves the guide process information of the current function page. The judgment module then judges whether the standard data update is complete and displayed. If it is judged that it has been updated, the guide process of the current page is restarted and the relevant node data, annotation data and knowledge data are obtained. Then the relevant data is saved and the next step is performed. If it is judged that there is no update, the system returns to step S31. S33. After saving, return to the initial guidance screen.

7. The tutoring method of the multi-mode tutoring system for Web terminal applications according to claim 6, characterized in that, The process of selecting the business function includes the following steps: S21. The user selects any business function with configured intelligent annotation, clicks on the operation guide, enters the business processing process, displays the process guide interface, enters the robot consultation module for voice or text interaction, the consultation module performs voice or text collection actions, after the collection is completed, it is converted into text and phrases through the capability module, and then proceeds to the next step. S22. The data retrieval module quickly retrieves relevant data and matters in detail based on text and phrases, and combines with the multi-screen communication module to split the relevant information into multiple screens, displaying the relevant information on the side of the guidance page, so that the user can make selections based on the information displayed on the guidance page; S23. After making your selection, proceed with the business function. Once completed, a message will appear indicating that the business has been completed. You will then be redirected to the system homepage with instructions to complete the process.

Images