CN113626901B - Bootstrap-based custom workflow flow designer for rail transit - Google Patents

Bootstrap-based custom workflow flow designer for rail transit Download PDF

Info

Publication number
CN113626901B
CN113626901B CN202110932352.0A CN202110932352A CN113626901B CN 113626901 B CN113626901 B CN 113626901B CN 202110932352 A CN202110932352 A CN 202110932352A CN 113626901 B CN113626901 B CN 113626901B
Authority
CN
China
Prior art keywords
flow
designer
design
bootstrap
data
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.)
Active
Application number
CN202110932352.0A
Other languages
Chinese (zh)
Other versions
CN113626901A (en
Inventor
彭景强
吕国玺
李效祖
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
BEIJING NANKAI AUTOMATION SYSTEM ENGINEERING CO LTD
Original Assignee
BEIJING NANKAI AUTOMATION SYSTEM ENGINEERING CO LTD
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by BEIJING NANKAI AUTOMATION SYSTEM ENGINEERING CO LTD filed Critical BEIJING NANKAI AUTOMATION SYSTEM ENGINEERING CO LTD
Priority to CN202110932352.0A priority Critical patent/CN113626901B/en
Publication of CN113626901A publication Critical patent/CN113626901A/en
Application granted granted Critical
Publication of CN113626901B publication Critical patent/CN113626901B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F30/00Computer-aided design [CAD]
    • G06F30/10Geometric CAD
    • G06F30/12Geometric CAD characterised by design entry means specially adapted for CAD, e.g. graphical user interfaces [GUI] specially adapted for CAD
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0485Scrolling or panning
    • G06F3/04855Interaction with scrollbars
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/31Programming languages or programming paradigms
    • G06F8/315Object-oriented languages
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/34Graphical or visual programming
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Geometry (AREA)
  • Mathematical Analysis (AREA)
  • Mathematical Optimization (AREA)
  • Pure & Applied Mathematics (AREA)
  • Computer Hardware Design (AREA)
  • Evolutionary Computation (AREA)
  • Computational Mathematics (AREA)
  • Architecture (AREA)
  • Computing Systems (AREA)
  • Stored Programmes (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

The self-defined workflow flow designer based on Bootstrap for rail transit comprises a flow design unit, a flow preview unit and a flow storage unit; the flow design unit is used for defining a graphic representation of each action in the workflow, adopting a dynamic floating toolbar to design a functional button, establishing corresponding flow logic according to flow rules, and generating corresponding flow data; the flow preview unit is used for acquiring flow data and dynamically generating the flow data into an image which can be displayed on the current interface; the flow saving unit is used for generating a flow definition Json file from the flow data and uploading the flow definition Json file to the server. The designer provided by the invention has good running performance and low requirements on running environment, can span windows, linux, a desk system, an apple system and the like, and can only run browser equipment, so that the track traffic flow design can be carried out on multiple platforms.

Description

Bootstrap-based custom workflow flow designer for rail transit
Technical Field
The invention relates to the field of flow design, in particular to a Bootstrap-based custom workflow flow designer for rail transit.
Background
The traditional workflow designer presents modes, which are developed for large-screen PC computer displays and run based on windows operating system environments, so that the display effect on the devices is good, but the display effect of the traditional workflow designer on the mobile terminal device is poor due to the fact that the screen of the mobile terminal is relatively small. For example: the workflow designer with full screen display on the PC computer display cannot be used by the mobile phone. The main stream operating system of the mobile terminal is not windows, but the android operating system, the apple operating system, the Linux operating system and the like are more, and a workflow designer developed based on the windows system cannot run on the systems.
Meanwhile, as Browser Server mode systems are commonly applied, a plurality of systems developed based on browsers are less required to be installed on specific clients by users so as to improve the usability of the systems. Therefore, a system developed in Browser Server mode cannot use a workflow designer based on a Browser without installing a flow designer program.
Disclosure of Invention
In view of the technical defects and technical drawbacks existing in the prior art, the embodiment of the invention provides a Bootstrap-based custom workflow flow designer for rail transit, which overcomes or at least partially solves the above problems, and the specific scheme is as follows:
The self-defined workflow flow designer based on Bootstrap for rail transit comprises a flow design unit, a flow preview unit and a flow storage unit;
The flow design unit is used for defining a graphic representation of each action in the workflow, adopting a dynamic floating toolbar to design a functional button, establishing corresponding flow logic according to flow rules, and generating corresponding flow data;
The flow preview unit is used for acquiring flow data and dynamically generating the flow data into an image which can be displayed on the current interface;
The flow saving unit is used for generating a flow definition Json file from the flow data and uploading the flow definition Json file to the server.
Further, the flow design unit includes a definition flow design control, where the definition flow design control is used to define diagrams representing various actions in a workflow, and a set of icons is designed for each diagram in the flow, and each icon supports selection, drag and drop, and automatic alignment events and operations when the flow design is performed, so as to complete the design function of the flow.
Further, the flow design unit specifically uses Button and Icon components of Bootstrap and custom icons as each graphic in the flow, designs a set of icons, uses tooltip components, pops up friendly function prompts for each function component, and is convenient for users to use.
Further, the flow design unit comprises a flow designer layout design control, wherein the flow designer layout design control is used for adopting dynamic floating toolbar design function buttons to float a toolbar to the top and the bottom of a screen, meanwhile, a scroll bar is designed at a blank panel, and the toolbar rolls on the screen through the scroll bar, wherein the position of the toolbar is not changed, and along with the rolling, the position of the toolbar is automatically adjusted and always kept in the top and the bottom of the current screen.
Further, the flow designer layout design control is also for: for the mobile terminal, adding a scrolling following function to the top icon bar and the bottom auxiliary toolbar which are well arranged on the basis of the computer terminal.
Further, the flow design unit includes a visual designer control, where the visual designer control is used to visually design events and operations of the flow icon, and according to the flow rule, establish corresponding flow logic, generate corresponding flow data, and load the corresponding flow data into LocalStorage of the browser.
Further, the events and operations of the icons include flow icon drag and drop, flow icon positioning, flow icon connection, and flow icon alignment.
Further, establishing corresponding flow logic according to the flow rule, generating corresponding flow data, and storing LocalStorage includes: the method comprises the steps of selecting a browser, clicking, processing and monitoring a mobile event, logically judging and processing the event and operation by a Javascript class of a system, loading flow data to LocalStorage of the browser by using a LocalStorage technology of HTML5, and directly reading the flow data by the browser during rendering to avoid repeated reading from a server side.
Further, the process preview unit is specifically configured to: and dynamically generating an image which can be displayed on the current interface according to the stored flow data in LocalStorage by using canvas components of Javascript and HTML 5.
Further, dynamically generating the flow data into an image that can be displayed on the current interface specifically includes: firstly, reading a starting diagram in flow data, then sequentially reading a subsequent processing diagram and a branch diagram, connecting all diagram objects on an interface according to a sequence by using connecting wires to form a complete flow processing diagram, and adapting to the display of various screens by using an automatic image scaling function of a Bootstrap.
The invention has the following beneficial effects:
1) The Bootstrap self-defined workflow flow designer has good running performance and low requirements on running environment, can span windows, linux, a desk system, an apple system and the like, and can only run browser equipment, so that the track traffic flow design can be carried out on multiple platforms.
2) The installation cost is low, professional personnel are not required to install, the installation process is not required to be executed in time, and the browser can be opened for use; the system with the BS structure can be well integrated, is not limited to a computer end any more, can be designed at a mobile end, and can adapt to screens with various sizes in an interface and layout; the system breaks through the limitation of equipment and places, and can open the designer website by a computer or mobile terminal equipment, so that the design of the workflow can be carried out even at home, on a construction site, on a vehicle and in the field. Meanwhile, the maintenance and upgrading cost is low, and all users can use the latest workflow designer without manually upgrading after the files are modified at the server side and the browser opens the website.
3) The Bootstrap self-defined workflow flow designer is used in the field of rail transit, so that the cost of a rail transit operation system is reduced, the flow changing efficiency is improved, the deployment is simple, multiple ends are available, and the flexibility of the workflow design is greatly improved.
Drawings
Fig. 1 is a structural framework diagram of a Bootstrap-based custom workflow designer for rail transit according to an embodiment of the present invention.
FIG. 2 is a schematic diagram of a layout of a computer-side flow designer according to an embodiment of the present invention;
fig. 3 is a schematic layout diagram of a mobile end flow designer according to an embodiment of the invention.
Detailed Description
The following description of the embodiments of the present invention will be made clearly and fully with reference to the accompanying drawings, in which it is evident that the embodiments described are only some, but not all embodiments of the invention. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.
As shown in fig. 1, as a first aspect of the present invention, there is provided a Bootstrap-based custom workflow flow designer for rail transit, including a flow design unit, a flow preview unit, and a flow save unit; the flow design unit comprises a definition flow design control, a flow designer layout design control and a visual designer control;
The method comprises the steps of defining a workflow design control, wherein the workflow design control is specifically used for defining a graphic representation of each action in the workflow, and the workflow is provided with a set of graphic representations of each action, such as starting, ending, flow processing, branch selection and the like. And meanwhile, a tooltip component is used, so that friendly function prompts are popped up for each function component, and convenience is brought to users.
The flow designer layout design control is used for designing function buttons by adopting a dynamic floating toolbar.
The process designer is not only used at the computer end, but also used at the mobile end, the screen sizes of the computer end and the mobile end are different, and the width and the resolution are greatly different, so that the design layout needs to be elastically designed:
Computer terminal layout:
The computer end is arranged as equipment with the screen width larger than 768px, as shown in fig. 2, the screen of the equipment is larger, the function buttons of the designer can be displayed completely, and the top and the bottom can be arranged in a row respectively, the top is used for icons in the process such as start, end, branch judgment and the like, and the bottom is used for auxiliary functions such as icon alignment, icon connecting lines and the like.
The top uses BootStrap grid system, set to col-md-12 for the flow icon, occupy 12 columns, place navbar components that can be automatically folded at the mobile end, while the middle design panel, occupy 12 columns, 12 rows, and the right side auxiliary tools, occupy 12 columns, also place navbar components that can be automatically folded at the mobile end.
Layout of mobile terminal:
the mobile terminal is arranged as a device with a screen width smaller than 768px, as shown in fig. 3, the screen of such a device is smaller, and the width may be narrower, if the designer elements are all displayed, the blank panel of the designer may be squeezed to become smaller, and the blank panel cannot be used.
In order to solve the problems, the invention adopts a dynamic floating toolbar design, the toolbar floats to the top and the bottom, and meanwhile, a blank panel is designed into a rolling bar, so that the rolling bar can roll on a screen, but the position of the toolbar is not changed, and along with the rolling, the position of the toolbar is automatically adjusted and always kept in the top, middle and the bottom of the current screen; because the use of the mobile terminal is considered in the computer terminal layout, the mobile terminal only needs to add a rolling following function to the icon bar at the top and the auxiliary tool bar at the bottom of the computer terminal layout.
The mobile terminal can complete the design of one flow by using a plurality of scrolling screens.
The visual designer control is used for visually designing events and operations of the flow icons, establishing corresponding flow logic according to flow rules, generating corresponding flow data and loading the corresponding flow data into LocalStorage of the browser;
The visual designer control needs to realize the functions of flow icon drag and drop, flow icon positioning, flow icon connection, flow icon alignment and the like, and meanwhile needs to perform logic processing according to a series of flow rules, such as branch selection, and needs to connect more than two components; the start and end can only occur once, etc. The method comprises the steps of processing and monitoring events such as selection, clicking, movement and the like of a browser, and logically judging and processing by Javascript class of a system; in order to accelerate the rendering speed of the interface, the LocalStorage technology of the HTML5 is used for loading a part of data to LocalStorage of the browser, the data can be read from the direct browser during rendering, repeated reading from a server side is avoided, and meanwhile, the designer is still available under special conditions of network disconnection, network blocking and the like.
The user designs the flow design definition file generated by each operation and stores the flow design definition file into LocalStorage, so that the problem that the designed flow is lost due to careless closing or exiting of the user under special conditions is avoided.
The process preview unit acquires process data and dynamically generates the process data into an image which can be displayed on the current interface.
In the above embodiment, after the process design is completed, a canvas component of Javascript and HTML5 may be used to dynamically generate an image that can be displayed on the current interface according to the process data stored in LocalStorage, and then the starting graphic is read first, and then the subsequent processing graphic, the branch graphic, etc. are sequentially read, all the graphic objects are connected on the interface according to the sequence, using the connecting lines to form the complete process graphic, and using the automatic image scaling function of Bootstrap to adapt to the display of various screens, where the image can be displayed in the Windows system, the android system, and the apple operating system.
The graphic representation represents only the processing flow and has no relation with the attributes such as the size, position, color and the like of the image, so that the final flow definition file can be generated according to the flow data stored in LocalStorage as long as the sequence of the graphic representation, the connecting line of the graphic representation and the type of the graphic representation are not wrong in the previewed image.
The process saving unit is used for generating process definition Json files from the process data and uploading the process definition Json files to the server, wherein the process files represent final design processes, and start nodes of the processes, processing nodes of the processes, selection and end nodes of the processes and the like are defined in the process files, so that the processing sequence and processing logic of a service are represented.
The foregoing description of the preferred embodiments of the invention is not intended to limit the invention to the precise form disclosed, and any such modifications, equivalents, and alternatives falling within the spirit and scope of the invention are intended to be included within the scope of the invention.

Claims (9)

1. The self-defined workflow flow designer based on Bootstrap for rail transit is characterized by comprising a flow design unit, a flow preview unit and a flow storage unit;
The flow design unit is used for defining a graphic representation of each action in the workflow, adopting a dynamic floating toolbar to design a functional button, establishing corresponding flow logic according to flow rules, and generating corresponding flow data;
The flow preview unit is used for acquiring flow data and dynamically generating the flow data into an image which can be displayed on the current interface;
The flow saving unit is used for generating a flow definition Json file from the flow data and uploading the flow definition Json file to the server;
The flow design unit comprises a definition flow design control, wherein the definition flow design control is used for defining diagrams representing various actions in a workflow, a set of icons is designed for each diagram in the flow, and each icon supports selection, drag and drop and automatic alignment events and operations when the flow design is carried out, so that the design function of the flow is completed.
2. The Bootstrap-based custom workflow process designer for rail transit of claim 1, wherein the process design unit specifically uses Bootstrap's Button and Icon components, and custom icons for each graphic in the process, designs a set of icons, and uses tooltip components to pop up friendly function prompts for each functional component, facilitating user use.
3. The Bootstrap-based custom workflow process designer for rail transit of claim 1, wherein the process design unit comprises a process designer layout design control for floating a toolbar to the top and bottom of a screen using dynamic floating toolbar design function buttons while designing a scroll bar at a blank panel, whereby the toolbar is scrolled on the screen with the scroll bar position floating, wherein the toolbar position is automatically adjusted as it scrolls, always remains in the top and bottom of the current screen.
4. The bootstrapping-based custom workflow designer for rail transit of claim 3 wherein the flow designer layout design control is further configured to: for the mobile terminal, adding a scrolling following function to the top icon bar and the bottom auxiliary toolbar which are well arranged on the basis of the computer terminal.
5. The Bootstrap-based custom workflow process designer for rail transit of claim 3, wherein the process design unit comprises a visual designer control for visualizing events and operations of designing process icons, creating corresponding process logic according to process rules, generating corresponding process data, and loading the corresponding process data into a browser LocalStorage.
6. The bootstrapping-based custom workflow process designer of claim 5 wherein the events and operations of the icons include process icon drag and drop, process icon positioning, process icon connection, and process icon alignment.
7. The Bootstrap-based custom workflow process designer for rail transit of claim 5, wherein building corresponding process logic and generating corresponding process data and storing to LocalStorage according to process rules comprises: the method comprises the steps of selecting a browser, clicking, processing and monitoring a mobile event, logically judging and processing the event and operation by a Javascript class of a system, loading flow data to LocalStorage of the browser by using a LocalStorage technology of HTML5, and directly reading the flow data by the browser during rendering to avoid repeated reading from a server side.
8. The bootstrapping-based custom workflow process designer for rail transit of claim 1, wherein the process preview unit is specifically configured to: and dynamically generating an image which can be displayed on the current interface according to the stored flow data in LocalStorage by using canvas components of Javascript and HTML 5.
9. The Bootstrap-based custom workflow process designer for rail transit of claim 1, wherein dynamically generating a sheet of image displayable on a current interface from process data comprises: firstly, reading a starting diagram in flow data, then sequentially reading a subsequent processing diagram and a branch diagram, connecting all diagram objects on an interface according to a sequence by using connecting wires to form a complete flow processing diagram, and adapting to the display of various screens by using an automatic image scaling function of a Bootstrap.
CN202110932352.0A 2021-08-13 2021-08-13 Bootstrap-based custom workflow flow designer for rail transit Active CN113626901B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110932352.0A CN113626901B (en) 2021-08-13 2021-08-13 Bootstrap-based custom workflow flow designer for rail transit

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110932352.0A CN113626901B (en) 2021-08-13 2021-08-13 Bootstrap-based custom workflow flow designer for rail transit

Publications (2)

Publication Number Publication Date
CN113626901A CN113626901A (en) 2021-11-09
CN113626901B true CN113626901B (en) 2024-04-30

Family

ID=78385575

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110932352.0A Active CN113626901B (en) 2021-08-13 2021-08-13 Bootstrap-based custom workflow flow designer for rail transit

Country Status (1)

Country Link
CN (1) CN113626901B (en)

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101819529A (en) * 2010-02-24 2010-09-01 上海引跑信息科技有限公司 System and method for realizing visual development of workflow task interface
CN104731594A (en) * 2015-03-26 2015-06-24 浪潮集团有限公司 Method for displaying runtime customized page based on Bootstrap
CN106202016A (en) * 2016-07-06 2016-12-07 浪潮软件集团有限公司 Bootstrap-based user-defined form system
CN109062567A (en) * 2018-07-09 2018-12-21 南京君度科技有限公司 Information management system quick development platform based on B/S structure
CN110990012A (en) * 2019-12-10 2020-04-10 四川科莱电梯股份有限公司 Design method of automatic drawing system software of elevator civil engineering drawing
CN112487591A (en) * 2020-12-09 2021-03-12 国网江西省电力有限公司电力科学研究院 Power distribution network line system line graph model processing platform
CN112632651A (en) * 2020-12-28 2021-04-09 广西交控智维科技发展有限公司 Rail transit station map generation method and system, electronic device and storage medium

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20150012818A1 (en) * 2013-07-07 2015-01-08 Ana Rink System and method for semantics-concise interactive visual website design

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101819529A (en) * 2010-02-24 2010-09-01 上海引跑信息科技有限公司 System and method for realizing visual development of workflow task interface
CN104731594A (en) * 2015-03-26 2015-06-24 浪潮集团有限公司 Method for displaying runtime customized page based on Bootstrap
CN106202016A (en) * 2016-07-06 2016-12-07 浪潮软件集团有限公司 Bootstrap-based user-defined form system
CN109062567A (en) * 2018-07-09 2018-12-21 南京君度科技有限公司 Information management system quick development platform based on B/S structure
CN110990012A (en) * 2019-12-10 2020-04-10 四川科莱电梯股份有限公司 Design method of automatic drawing system software of elevator civil engineering drawing
CN112487591A (en) * 2020-12-09 2021-03-12 国网江西省电力有限公司电力科学研究院 Power distribution network line system line graph model processing platform
CN112632651A (en) * 2020-12-28 2021-04-09 广西交控智维科技发展有限公司 Rail transit station map generation method and system, electronic device and storage medium

Also Published As

Publication number Publication date
CN113626901A (en) 2021-11-09

Similar Documents

Publication Publication Date Title
JP2947704B2 (en) Display screen creation method and display screen creation device
US8314809B1 (en) Selective rendering of off-screen content
CN109117138B (en) Configuration method and device and computer readable storage medium
US6948125B2 (en) Computer controlled user interactive display interface implementation for tracking the organization of items in a hierarchical tree of nested categories
CN1922896B (en) Method and device for automatically selecting a frame for display
US10878175B2 (en) Portlet display on portable computing devices
US20090138815A1 (en) Enhancing visual continuity in scrolling operations
CN101834938A (en) Device and method for realizing horizontal/vertical screen switching of mobile terminal
JP2012521041A (en) Smooth layout animation for continuous and discontinuous properties
CN103473082A (en) Method and device for starting WebApp
CN111475239B (en) Page processing method and system of application program, electronic equipment and storage medium
US7701471B1 (en) Methods and apparatus to display a viewing region
CN105094841A (en) Page commenting method and device
EP3958104A1 (en) Control bar for element activation
CN111079045B (en) Full-screen display method, storage medium and system of customized page
WO2007036690A1 (en) Presentation system
US8205160B2 (en) Graphical user interface for multi-frame presentation
CN105335154A (en) Multi-terminal-oriented self-adaptive webpage layout method and device
CN111510646A (en) Video display method, display device, computer equipment and medium of spliced screen
CN113626901B (en) Bootstrap-based custom workflow flow designer for rail transit
JP2002132410A (en) Www browser
CN115525270A (en) Method, system, terminal device and storage medium for rendering form page based on dragging
CN113676677B (en) Dynamic picture synthesis method and device, electronic equipment and readable storage medium
JP4755813B2 (en) Client terminal
CN108762756B (en) Application program display method and device

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
GR01 Patent grant
GR01 Patent grant