CN112688992A - vue method and device for displaying flow chart auditing state - Google Patents
vue method and device for displaying flow chart auditing state Download PDFInfo
- Publication number
- CN112688992A CN112688992A CN202011473193.4A CN202011473193A CN112688992A CN 112688992 A CN112688992 A CN 112688992A CN 202011473193 A CN202011473193 A CN 202011473193A CN 112688992 A CN112688992 A CN 112688992A
- Authority
- CN
- China
- Prior art keywords
- node
- flow chart
- data
- vue
- sub
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 42
- 238000012550 audit Methods 0.000 claims description 18
- 239000003086 colorant Substances 0.000 claims description 11
- 230000004044 response Effects 0.000 claims description 7
- 238000009877 rendering Methods 0.000 claims description 4
- 238000004458 analytical method Methods 0.000 claims description 2
- 238000004806 packaging method and process Methods 0.000 claims description 2
- 238000010586 diagram Methods 0.000 description 11
- 230000006870 function Effects 0.000 description 7
- 230000000694 effects Effects 0.000 description 4
- 238000012545 processing Methods 0.000 description 4
- 230000005540 biological transmission Effects 0.000 description 3
- 238000012544 monitoring process Methods 0.000 description 3
- 238000011161 development Methods 0.000 description 2
- 238000012856 packing Methods 0.000 description 2
- 230000000750 progressive effect Effects 0.000 description 2
- 230000003044 adaptive effect Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000001914 filtration Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 238000007726 management method Methods 0.000 description 1
- 238000012552 review Methods 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
Images
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a method and a device for displaying the auditing state of a flow chart under the vue environment, and in the embodiment of the invention, different color values are given to nodes in different states, so that the auditing state of the flow chart can be displayed visually.
Description
Technical Field
The invention relates to a method for displaying a flow chart audit state under an vue environment, and also relates to a device for displaying the flow chart audit state under a vue environment.
Background
vue is a progressive JavaScript framework developed by yuxi in 2014 for building user interfaces, commonly denoted vue. Vue is currently a popular framework for front-end development because it can create data-driven UI (User Interface) components through a simple and flexible API (Application Programming Interface) as opposed to other frameworks.
For a flow transaction, people always expect that different stages of each node can be visually displayed, so that a better user experience is achieved. However, the existing NPM (Node Package Manager, Node. js packing management tool, NPM is a default packing Manager of JavaScript runtime environment Node. js) component based on vue environment is too simple to meet the complex requirement of the audit progress.
In addition, the current flow chart part is mostly drawn by adopting canvas technology, canvas is displayed in a bitmap mode, occupied memory is in direct proportion to the size of the canvas, and when the flow is more, the corresponding canvas is large, the problems of large size, occupied memory increase, slow loading and the like are caused; moreover, because bitmap display is used, the method cannot be perfectly adapted to all browsers and all resolutions, and the picture is distorted after being amplified and reduced.
As can be seen from chinese patent document CN111857375A, based on the vue framework, a required function node can be constructed at a server, and then a client can directly call the function node, perform mouse event setting on the function node, and assemble the function node to obtain the function node and connection data. According to this patent document, the processing of large data flow graphs can be solved to obtain a relatively high processing efficiency. However, monitoring the state of the flowchart, such as checking the progress of the flowchart, still lacks a solution.
Disclosure of Invention
The invention aims to provide a method for displaying the audit state of a flow chart in vue environment, which can visually display the audit state of the flow chart, and also provides a device for displaying the audit state of the flow chart in vue environment.
In an embodiment of the invention, a method for presenting a flow chart audit state in an vue environment is provided, the method comprising the steps of:
requesting, wherein a client sends a request for displaying a specified flow chart to a server;
responding, the server side responds to the request, calls data corresponding to the specified flow chart, packages the data and sends the packaged data to the client side sending the request;
analyzing, namely analyzing the data by the client to generate subdata of each component of the flow chart;
displaying, namely transmitting node data in the subdata into each node, and displaying the node as a corresponding color according to the state data in the subdata; transmitting the link data in the subdata to a connecting line component to generate a connecting line between the nodes;
when sub data are packaged into vue components, a node color value is given to a node attribute according to the state of a node corresponding to the sub data; or when the node is displayed, the client gives the color value corresponding to the state to the node according to the state of the node.
Optionally, when the client generates each node, the node graph is drawn by using the vector diagram drawing module.
Optionally, the vector diagram is an SVG diagram;
wherein, SVG is the abbreviation of Scalable Vector Graphics, i.e. Vector Graphics that can be scaled.
Optionally, the number of the color values is not less than five, and the difference between at least one channel of one color and the corresponding channel of any of the other color values is greater than or equal to 30.
Optionally, when a node includes a sub-process, a mouse event is set for the node, and the sub-process is called out in response to the mouse event.
Optionally, the mouse event is a click on a predetermined area of a corresponding node; popping up a sub-flow data list containing a sub-flow chart after clicking, and clicking the sub-flow chart to pop up the sub-flow chart;
and after popping up the sub-flow chart, clicking in the preset area and an area outside the sub-flow data list to hide the sub-flow.
Optionally, encapsulating the detailed information of the selected node into the selected node, and setting a mouse-in event for the detailed information;
correspondingly, when the mouse moves into the preset area of the node, the detailed information is popped up, the mouse moves out of the preset area or clicks a blank of the flow chart, and the detailed information is hidden.
Optionally, the request is a request called by a flowchart ID to show a flowchart.
Optionally, the data transmitted between the client and the server is data encapsulated in a JSON format;
JSON is JavaScript Object Notation, JS Object Notation.
In an embodiment of the present invention, there is further provided an apparatus for presenting a flow chart audit state in an vue environment, the apparatus including:
the request unit sends a request for displaying the specified flow chart to the server through the request unit client;
the response unit is used for responding the request through the server side of the response unit, calling data corresponding to the specified flow chart, packaging and sending the data to the client side sending the request;
the client analyzes the data through the analysis unit to generate subdata of each component of the flow chart;
the client transmits the node data in the subdata to each node through the display unit, and the nodes display corresponding colors according to the state data in the subdata; transmitting the link data in the subdata to a connecting line component to generate a connecting line between the nodes;
when sub data are packaged into vue components, a node color value is given to a node attribute according to the state of a node corresponding to the sub data; or when the node is displayed, the client gives the color value corresponding to the state to the node according to the state of the node.
In the embodiment of the invention, different color values are given to the nodes in different states, so that the auditing state of the flow chart can be visually displayed.
Drawings
FIG. 1 is a flow diagram showing details of the flow diagram process and state.
FIG. 2 is a flow chart showing only the contents of the flow chart
Fig. 3 is a SVG diagram drawing flow chart.
Detailed Description
Js is a set of progressive frameworks for building user interfaces, which, relative to other traditional frameworks, is a relatively lightweight framework that can be designed to be applied layer by layer from the bottom up.
Js, when used in conjunction with tool chains and libraries of various supporting classes, will still provide the drive for complex single-page applications.
Js, a v-if instruction may be used to conditionally render a block of content that will only be rendered when the instruction's expression returns the value of treathy.
Further, it is possible to use an "else block" that can be added with v-else.
The above illustrated vue-pointing component can be rendered, it being understood that there are other types of rendering available in vue. Accordingly, it may be useful to assemble vue a component such that a specified node in the component is assigned a color value, or vue some attributes of the component are color attributes.
Js, based on specific instructions, basic processing such as list rendering, event processing, form input binding, and the like can also be performed.
For the vue component, which is a reusable instance and carries a name, we can use this component as a custom element in a vue instance created by new vue.
Further, because the vue components are reusable vue instances, they receive the same options as new vue.
vue components may be multiplexed any number of times, thus reducing the amount of code.
Furthermore, when the vue framework is used for development, the flow chart display can be directly embedded into a page in a plug-in introducing mode, and the code writing amount and the flow chart type design are reduced.
In the embodiment of the invention, flow components such as start, end and manual activities are packaged into vue components through vue component characteristics, so as to facilitate calling.
In the embodiment of the present invention, 6 colors are used to represent 6 different states, and the states in the flowchart may be completed, in progress, not reached, rejected, withdrawn, suspended. It is to be understood that more colors may be selected when more colors are needed to distinguish between different states.
In order to distinguish effectively and thus recognize different states intuitively and quickly, it is required that, for example, the above six colors should be distinguished relatively clearly. It is understood that the colors here are colors. In the RGB mode, for example, sufficient color types with relatively large mutual discrimination can be obtained by adjusting the color values of three channels, and the color types required by the aforementioned application are relatively small in number, and the color with relatively large adaptive discrimination can be easily selected.
Generally, the difference between the color value of at least one channel of a certain color and the color value of the corresponding channel of any other color is greater than or equal to 30, so that more colors can be selected.
For a flowchart, the components are assigned certain attributes during rendering or later auditing, such as the content displayed in response to a mouse event, the color of a rendered primitive or text, the connection between nodes, the position of nodes, and the like.
Furthermore, for the flow chart, there are 5 different flow nodes except the beginning and the end, specifically, manual activity, external sub-flow, single gateway, parallel gateway, and multi-path gateway.
Wherein, the manual activity: and when the mouse is moved in, the detailed information of the node is displayed according to the position of the mouse, the information of the corresponding node is displayed in a list after clicking, and the complete data display is recovered after clicking a blank position.
The detailed information belongs to more specific information which is expected to be seen through the mouse event by auditing, depends on auditing predetermined data which is expected to be seen through the mouse event, is irrelevant to the implementation of the invention, and is not described again here.
External subflow: the other introduced flow chart is equivalent to a module, the module forms a node in the main flow, and the node also comprises an algorithm for realizing the function of the node, and the algorithm corresponds to the external sub-flow, which is called the sub-flow for short.
And for the node containing the external sub-process in the main process, popping up an introduced process data list after clicking, and clicking the flow chart in the list to display the flow chart of the sub-process.
As mentioned above, the vue component may be a multi-layer structure, and the external child processes may also include external grandchild processes, and others are described above.
For the aforementioned gateways, the connection between nodes is referred to, and the outgoing connection of a single gateway is only one.
For parallel gateways (which must appear in pairs), there may be multiple outgoing lines.
For multiple gateways (which must also be present in pairs), the logic for at least one connection holds.
The connection between the nodes is controlled by the link data encapsulated in each node component, and the client generates the connection line between the nodes according to the link subdata in the node components.
As to how to assemble or package vue components, see some examples in chinese patent document CN111857375A, and also see the manual of the vue.
In an embodiment of the invention, the default invoked vue component is the vue component packaged as per predetermined requirements. It should be appreciated that in embodiments of the present invention, the audit status of the flow diagram is presented primarily rather than the editing of a node or vue component within the flow diagram.
When vue elements are required to have content that is distinct from a purely functional presentation, more attributes, such as the color of node primitives and/or text, etc., can be assembled for vue elements by means of the vue.
The auditor audits the state of the review flowchart through the flowchart presented at the client, the client first sends a request for displaying the selected flowchart to the server, and the request sent from the client to the server may be a request for displaying data required by the flowchart through the request for selecting the id of the flowchart.
Further, referring to fig. 1 of the specification, the server responds to the request, requests data, bound to the flow diagram ID, from the background according to the flow diagram ID to obtain data of each component of the flow diagram, packages the data by using the JSON format, and sends the data back to the client sending the request.
JSON is a lightweight data exchange format, which is a lightweight data exchange format. It stores and represents data in a text format that is completely independent of the programming language, based on a subset of ECMAScript (js specification set by the european computer association). The compact and clear hierarchy makes JSON an ideal data exchange language. The network transmission method is easy to read and write by people, is easy to analyze and generate by machines, and effectively improves the network transmission efficiency.
The client analyzes the received json data into data required by different components, including SVG graphic data to be processed, flow node interaction information and flow node information corresponding to the list.
The client further transmits attribute values required by generating different nodes into sub-components contained in corresponding nodes, the sub-components judge the flow states corresponding to the nodes and display different state colors, and then the generated corresponding node components or sub-components containing the SVG are placed into a page coordinate system, and the state is that the ongoing components are dynamic personals to highlight the current state.
Fig. 2 shows a drawing process of generating a flow chart node primitive by a client, data returned by server data is data packaged in a JSON format, the client analyzes the data, processes the data used for generating the node primitive therein, draws based on SVG, and displays the data at the client.
It should be noted that the components and sub-components that construct the nodes are loaded with the coordinate data of the SVG graph when assembled. Specifically, each packaged node component is called on a flow chart display page, the component position is determined according to XPoint and YPoint in return data, and multiple identical components are drawn through v-for circulation.
The method for displaying whether the full screen is packaged in the component can control the display size of the flow chart and whether the corresponding list is displayed.
The flow chart display is divided into two display modes, wherein one mode is a static flow chart viewing mode, the flow chart viewing mode does not comprise list display of the flow and detail display when the mouse is moved in, only the process of the flow is displayed, and the process of the flow is not displayed; the other method is to show the progress and the state of the process, display different colors to represent different states, display detailed information of the process progress in a list, and have interactive effect and single-click event when each node moves in and out.
Furthermore, a mouse moving-in and clicking monitoring event is added for each manual activity, and a variable of the clicking event is transmitted into the list component through a parent-child transmission value of vue, so that the functions of filtering data and displaying list information of a corresponding process node through clicking are achieved. And adding the single-click monitoring event into the external sub-process, clicking the external sub-process to open a popup list, wherein the list comprises a flow chart corresponding to the sub-process.
Claims (10)
1. A method for presenting a flow chart audit status in an vue environment, the method comprising the steps of:
requesting, wherein a client sends a request for displaying a specified flow chart to a server;
responding, the server side responds to the request, calls data corresponding to the specified flow chart, packages the data and sends the packaged data to the client side sending the request;
analyzing, namely analyzing the data by the client to generate subdata of each component of the flow chart;
displaying, namely transmitting node data in the subdata into each node, and displaying the node as a corresponding color according to the state data in the subdata; transmitting the link data in the subdata to a connecting line component to generate a connecting line between the nodes;
when sub data are packaged into vue components, a node color value is given to a node attribute according to the state of a node corresponding to the sub data; or when the node is displayed, the client gives the color value corresponding to the state to the node according to the state of the node.
2. The method for demonstrating audit status of a flow chart under the environment of claim 1, wherein a vector graphics rendering module is used to render a graph of nodes as each node is generated by a client.
3. The method for demonstrating the audit state of a flow chart under the vue environment of claim 2, wherein the vector graphics are SVG graphics;
wherein, SVG is the abbreviation of Scalable Vector Graphics, i.e. Vector Graphics that can be scaled.
4. The method of claim vue, wherein the number of color values is not less than five, and the difference between at least one channel of a color and the channel corresponding to any of the other color values is greater than or equal to 30.
5. The method of claim 1, wherein when a node includes a sub-process, setting a mouse event for the node, and invoking the sub-process in response to the mouse event.
6. The method for demonstrating audit status of a flow chart under the vue environment of claim 5, wherein the mouse event is a single click on a predetermined area of a corresponding node; popping up a sub-flow data list containing a sub-flow chart after clicking, and clicking the sub-flow chart to pop up the sub-flow chart;
and after popping up the sub-flow chart, clicking in the preset area and an area outside the sub-flow data list to hide the sub-flow.
7. The method for demonstrating audit status of a flow chart under vue environment according to claim 1, wherein the selected node is encapsulated with detailed information of the node and a mouse-in event is set for the detailed information;
correspondingly, when the mouse moves into the preset area of the node, the detailed information is popped up, the mouse moves out of the preset area or clicks a blank of the flow chart, and the detailed information is hidden.
8. The method for presenting a flow chart audit state under the vue environment of claim 1 wherein the request is a request invoked with a flow chart ID to present a flow chart.
9. The method for demonstrating audit status of a flow chart under vue environment of claim 1, wherein the data transmitted between the client and the server is JSON format encapsulated data;
JSON is JavaScript Object Notation, JS Object Notation.
10. An apparatus for presenting a flow chart audit status in an vue environment, the apparatus comprising:
the request unit sends a request for displaying the specified flow chart to the server through the request unit client;
the response unit is used for responding the request through the server side of the response unit, calling data corresponding to the specified flow chart, packaging and sending the data to the client side sending the request;
the client analyzes the data through the analysis unit to generate subdata of each component of the flow chart;
the client transmits the node data in the subdata to each node through the display unit, and the nodes display corresponding colors according to the state data in the subdata; transmitting the link data in the subdata to a connecting line component to generate a connecting line between the nodes;
when sub data are packaged into vue components, a node color value is given to a node attribute according to the state of a node corresponding to the sub data; or when the node is displayed, the client gives the color value corresponding to the state to the node according to the state of the node.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011473193.4A CN112688992A (en) | 2020-12-15 | 2020-12-15 | vue method and device for displaying flow chart auditing state |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011473193.4A CN112688992A (en) | 2020-12-15 | 2020-12-15 | vue method and device for displaying flow chart auditing state |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112688992A true CN112688992A (en) | 2021-04-20 |
Family
ID=75447738
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011473193.4A Pending CN112688992A (en) | 2020-12-15 | 2020-12-15 | vue method and device for displaying flow chart auditing state |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112688992A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114564948A (en) * | 2022-01-20 | 2022-05-31 | 北京鼎诚世通科技有限公司 | Text auditing method and device, electronic equipment and medium |
| CN116451656A (en) * | 2023-04-28 | 2023-07-18 | 南京维拓科技股份有限公司 | Method for marking state of flow chart |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108829381A (en) * | 2018-06-01 | 2018-11-16 | 浪潮软件集团有限公司 | A data visualization method and device |
| CN109343924A (en) * | 2018-09-20 | 2019-02-15 | 北京锐安科技有限公司 | Activiti flow chart redraws method, apparatus, computer equipment and storage medium processed |
| CN109460276A (en) * | 2018-10-25 | 2019-03-12 | 北京字节跳动网络技术有限公司 | The page and page configuration document generating method, device, terminal device and medium |
| CN109615210A (en) * | 2018-12-05 | 2019-04-12 | 山东浪潮通软信息科技有限公司 | Business process map methods of exhibiting and system under a kind of Web frame |
| US20190289462A1 (en) * | 2016-07-18 | 2019-09-19 | Lg Electronics Inc. | Method for security of user equipment connection identifier in wireless communication system and apparatus therefor |
| CN111857375A (en) * | 2020-07-08 | 2020-10-30 | 国电南瑞科技股份有限公司 | A big data flow graph processing method based on vue framework |
| CN111949258A (en) * | 2020-08-14 | 2020-11-17 | 工银科技有限公司 | Approval process construction method, device and system |
-
2020
- 2020-12-15 CN CN202011473193.4A patent/CN112688992A/en active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20190289462A1 (en) * | 2016-07-18 | 2019-09-19 | Lg Electronics Inc. | Method for security of user equipment connection identifier in wireless communication system and apparatus therefor |
| CN108829381A (en) * | 2018-06-01 | 2018-11-16 | 浪潮软件集团有限公司 | A data visualization method and device |
| CN109343924A (en) * | 2018-09-20 | 2019-02-15 | 北京锐安科技有限公司 | Activiti flow chart redraws method, apparatus, computer equipment and storage medium processed |
| CN109460276A (en) * | 2018-10-25 | 2019-03-12 | 北京字节跳动网络技术有限公司 | The page and page configuration document generating method, device, terminal device and medium |
| CN109615210A (en) * | 2018-12-05 | 2019-04-12 | 山东浪潮通软信息科技有限公司 | Business process map methods of exhibiting and system under a kind of Web frame |
| CN111857375A (en) * | 2020-07-08 | 2020-10-30 | 国电南瑞科技股份有限公司 | A big data flow graph processing method based on vue framework |
| CN111949258A (en) * | 2020-08-14 | 2020-11-17 | 工银科技有限公司 | Approval process construction method, device and system |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114564948A (en) * | 2022-01-20 | 2022-05-31 | 北京鼎诚世通科技有限公司 | Text auditing method and device, electronic equipment and medium |
| CN116451656A (en) * | 2023-04-28 | 2023-07-18 | 南京维拓科技股份有限公司 | Method for marking state of flow chart |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10949491B2 (en) | Method and apparatus for using proxies to interact with webpage analytics | |
| US9570050B2 (en) | System and method for enhanced screen copy | |
| JP3392870B2 (en) | Graphic edge system | |
| US11036345B2 (en) | System and method for on-screen graphical user interface encapsulation and reproduction | |
| US8732588B2 (en) | Method and apparatus for remotely displaying screen files and efficiently handling remote operator input | |
| AU2005202722B2 (en) | Common charting using shapes | |
| US7609280B2 (en) | High level graphics stream | |
| US8132119B2 (en) | Priority controlled display | |
| CN109918604A (en) | Page drawing method, apparatus, equipment and storage medium | |
| US20190065440A1 (en) | Adaptable user interface layout | |
| CN110968944A (en) | Method for displaying and operating CAD drawing at Web front end | |
| CN109885301B (en) | Method, device, storage medium and equipment for generating scalable vector graphics | |
| CN110506267A (en) | The rendering of digital assembly background | |
| CN112688992A (en) | vue method and device for displaying flow chart auditing state | |
| CN107423014A (en) | Multiwindow rendering intent and device | |
| US7418668B2 (en) | Glass appearance window frame colorization | |
| US10289388B2 (en) | Process visualization toolkit | |
| US20110001753A1 (en) | Method, module, and device for displaying graphical information | |
| US8312365B2 (en) | Rendering web content with a brush | |
| CN116501427A (en) | WakeData applet custom layout method | |
| WO2002031776A1 (en) | Method and system for loading three dimensional visual objects into the video display area of a two dimensional graphical user interface | |
| Terpo et al. | Building Workflow Diagrams with SVG, HTML5, CSS3 and JavaScript | |
| CN118466944A (en) | Method and device for generating head navigation bar, storage medium and terminal equipment | |
| CN119556909A (en) | A tool and method for designing industrial control software interface based on Vue | |
| CN117014689A (en) | Bullet screen display method and device and electronic equipment |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20210420 |
|
| RJ01 | Rejection of invention patent application after publication |