基于B/S结构下的OA流程可视化的研究与实现

Narrator

发布日期: 2019-01-10 08:40:01 浏览量: 1050
评分:
star star star star star star star star star_border star_border
*转载请注明来自write-bug.com

摘 要

工作流是指整个或部分业务流程在计算机支持下的全自动或半自动化。在计算机网络环境下,工作任务在多个人或单位之间的流转实际上将表现为信息或数据在多个人之间的传送。使用可视化的OA工作流设计工具,用户不需要编程就可以定义设计出满足要求的收发文流程,实际使用效果良好。论文以可视化的OA工作流设计工具的开发为基础,主要阐述五个方面的内容。第一部分介绍了工作流和工作流设计工具的相关概念与开发背景;第二部分对工作相关基础理论技术、系统环境与平台基础、以及开发技术进行了描述;第三部分对系统功能进行了分析;第四部分详细介绍了系统流程、流程可视化设计的实际开发过程中使用到的关键技术;最后一部分在总结了系统开发心得的同时,提出了目前系统存在的不足和有待改进的地方。

关键词:工作流;流程定义;可视化;Java Applet

1 系统需求分析与总体设计

1.1 系统需求分析

在最近几年的各级单位的信息化改造建设中,随着信息化基础设施建设的逐渐完备,各类应用系统开始受到各级单位的重视,开发重点主要侧重于人事信息数字化、文书信息化、公文流转、交互式审批等信息化可行性高的工作领域。 因此,改革传统办公模式,开展电子办公,使业务办公、公文流转和管理过程电子化、信息化,并通过统一办公规范,提高工作效率降低办公成本,实现办公自动化已势在必行。

而上述所介绍的公文流转的一个重要特征就是流程复杂,难以用标准的程序化语言解释,因而公文流转系统必须有与之相适应的工作流程定义系统,使操作人员能够自主地设定公文流转流程。为此我们设计了一个可视化流程设计工具,该工具可以作为工作流管理系统里的一个模块。它具有图形用户界面,用户定义与任务执行完全分离,其体系结构基本上符合WFMC 标准结构。用户不需要程序员的支持就可以定义和设计出工作流程模型,根据该模型生成的文件可以非常方便地被解释为上层接口所需的工作流。

1.2 系统功能介绍

可视化OA工作流程设计工具针对用户的要求对工作流程进行定制和维护,主要包括:对接点、接点连接线可自由拖放。具备删除节点、节点之间连接线功能。接点之间采用箭头连接。接点采用矩形表示。图形内容利用XML形式保存于的Access数据库中,可查询,编辑,保存,更多自定义属性。

通过对用户需求的分析,要求本流程设计工具具有以下功能:

  • 可视化的操作界面

  • 可以对流程节点和弧线进行填加、修改、删除操作

  • 工作流程支持串签、会签和分支流程

  • 可以将图形内容保存于access数据库或(xml)中,可查询,编辑,保存

  • 可以通过流程模型解释接口和引擎主程序提供给上层程序使用

1.3 系统模块功能和设计思想

工作流管理系统的参考模型定义了一个基本的工作流管理系统所需要的6个基本模块:过程定义工具,工作流执行服务,其他工作流执行服务,客户应用程序,被调应用程序,管理及监控工具;并制定了个模块之间的接口标准。

流程设计工具与其系统交互的简单模块关系图如下:

可视化流程设计工具各模块的功能描述和设计思想介绍:

  • 绘图模块:可将需要设计的流程用此模块画出,利用java.awt来绘制节点和弧线

  • 图象关系序列化模块:可将已画出流程中的节点和弧线序列化,利用接口java.io.Serializable就能实现

  • 图象关系保存模块:可将序列化后的节点和弧线关系保存起来供上层流程定义解释器使用

可视化流程设计工具的系统关系图如下:

1.4数据库设计

1.4.1 E-R图设计

实体关系图(E-R图)将系统中的数据模型以一种更加清楚、具体的方式展现出来。图中方框代表实体,椭圆代表实体的属性,实体和实体之间的关系用菱形来表示。

在工作流管理系统中,上层程序需要通过读取保存在数据库里流程的XML文件来实现流程的解释和实例化。在对工作流进行定义的工作中用到的E-R如下图所示:

1.4.2 表的构建

流程节点表(flow_Node)

对象名称 数据类型 功能描述
Node_ID 数字 节点编号
Node_Nane 文本 节点名称
Node_prev 文本 节点前驱名称
Node_prevID 数字 前驱节点号
Node_next 文本 节点后继
Node_nextID 数字 后继节点号
Flow_ID 数字 节点所属的流程号

流程表(flowdata)

对象名称 数据类型 功能描述
fileName 文本 保存流程的文件名
id 数字 流程号
type 文本 Node 类型还是 line 类型

2 系统功能模块实现

2.1 系统流程及图示

一个流程的设计是先通过绘图来对实际业务过程进行分析、建模,然后通过一定的技术生成所建立流程模型的可被上层接口处理的形式化描述。其流程如下图:

2.2 流程可视化设计实现

2.2.1 界面可视化

这是工具开始运行出现的第一个界面,由Internet Explorer浏览器打开,可以适应B/S结构的OA系统。

界面的布局由BorderLayout来实现,分北部、西部、中部三部分。

包括:

  • 北部 控制板(ArcControls)

  • 西部 绘图工具板(ToolBlank)

  • 中部 绘图画板 (ArcCanvas)

具体代码实现如下:

  1. this.setLayout(borderLayout1);
  2. this.add(ArcControlsBorderLayout.NORTH);
  3. this.add(ArcCanvasBorderLayout.CENTER);
  4. this.add(ToolBlank BorderLayout.WEST);

2.2.2 绘图功能设计

当设计一个流程时,用户点击绘图工作板中的绘制节点和绘制弧线两个按钮结合着选择环节名,将指定的可视化部件拖拉绘制在工作平台上,每一个可视化部件代表一个角色,用流向箭头将各个部件关联起来。还可以对节点和弧线进行修改和删除。

一个矩形节点的绘制,需要对它的各项属性进行定义,包括对它的起点坐标、矩形的宽和高、矩形的边框坐标。以下是节点定义的简单描述:

  1. public class Node extends BaseObject{
  2. int LeftUpNodeX;//定义顶点坐标
  3. int LeftUpNodeY;
  4. private int starx; //定义起始点,高,宽
  5. private int stary;
  6. private int Heigh;
  7. private int Width;
  8. private int MinX; //定义边框
  9. private int MinY;
  10. private int MaxX;
  11. private int MaxY;
  12. Color color; //定义外框颜色
  13. String NodeName="";//节点名称
  14. }

绘制节点

  1. g.drawRect(this.starxthis.starythis.Widththis.Height);//画矩形
  2. g.drawString(this.NodeNamethis.starx+this.Width/3this.stary+Height/2);//画节点名

拖动节点

  1. public void SetNodeMoved(int xint y){
  2. this.starx = x
  3. this.stary = y
  4. this.MinX = starx
  5. this.MinY = stary
  6. this.MaxX = starx + Width
  7. this.MaxY = stary + Height
  8. }

拖动节点时鼠标动态

  1. public void mouseDragged(MouseEvent e) { //鼠标拖动
  2. int x = e.getX();
  3. int y = e.getY();
  4. switch(status){
  5. case 1:
  6. if (this.NodeIFinit == true) {
  7. node = new Node(e.getX(), e.getY(),CurrentNodeName);
  8. this.NodeObject.add(node);
  9. this.IfDrag = true
  10. this.NodeIFinit = false
  11. repaint();
  12. }
  13. else {
  14. if (IfDrag == true) {
  15. if (node != null) {
  16. node.SetHeightAndWidth(x y);
  17. repaint();
  18. }
  19. }
  20. else {
  21. if (SelectNodeDrag == true) {
  22. node.SetNodeMoved(x y);
  23. node.DrawMyself(this.getGraphics());
  24. repaint();
  25. }
  26. }
  27. }
  28. break
  29. }
  30. }

节点与节点之间需要用弧线进行连接。一段弧线需要对它的起点坐标、终点坐标等属性进行定义。以下是弧线定义的简单描述:

弧线定义

  1. public class Arc {
  2. private int endx; //结束坐标
  3. private int endy;
  4. private int startx;//起点坐标
  5. private int starty;
  6. private int[] SelectedNode = new int[2];//选择节点
  7. private Vector Point;//点元素
  8. private Color color;
  9. private boolean ArcEnd;//判断弧段是否结束增加节点
  10. public Arc(int x,int y) {
  11. Point = new Vector();
  12. int[] star = new int[2];//点由2元素(x,y)组成
  13. star[0] = x;
  14. star[1] = y;
  15. this.startx = x;
  16. this.starty = y;
  17. this.Point.addElement(star);
  18. this.color = Color.BLACK;
  19. this.ArcEnd = false;
  20. }

绘制弧线

  1. public void DrawMyself(Graphics g){
  2. int length = Point.size();
  3. g.setColor(color);
  4. if (length > 0) {
  5. System.out.println("Arc node size:" + length);
  6. if (length == 1) { }
  7. else {
  8. for (int i = 0 i < length - 1 i++) {
  9. int[] Spoint = (int[]) Point.elementAt(i);
  10. int[] Epoint = (int[]) Point.elementAt(i + 1);
  11. g.drawLine(Spoint[0], Spoint[1], Epoint[0], Epoint[1]);
  12. }

弧线拖动

  1. public void mouseDragged(MouseEvent e) { //鼠标拖动
  2. int x = e.getX();
  3. int y = e.getY();
  4. switch(status){
  5. case 3:
  6. if (SelectArcDrag == true) {
  7. if ( (arc != null) && (arcNodeindex != -1)) {
  8. arc.SetSelectedNode(arcNodeindex x y);
  9. repaint();
  10. }else if((arc != null)&&(arcNodeindex == -1)){//选中的是最后一个不再Vetor里面的点
  11. arc.SetSelectedNode(x y);
  12. repaint();
  13. }
  14. }
  15. break
  16. }
  17. }

画箭头

  1. int[] lastpoint = (int[]) Point.elementAt(length - 1);
  2. g.drawLine(lastpoint[0], lastpoint[1], this.endx this.endy); //画箭头
  3. if((lastpoint[0] == endx)&&(lastpoint[1]<endy))//开口向下
  4. {
  5. g.drawLine(endxendyendx+3endy-3);
  6. g.drawLine(endxendyendx-3endy-3);
  7. }else if((lastpoint[0] == endx)&&(lastpoint[1]>endy)){ //开口向上
  8. g.drawLine(endxendyendx+3endy+3);
  9. g.drawLine(endxendyendx-3endy+3);
  10. }else if((lastpoint[1] == endy)&&(lastpoint[0]>endx)){//开口向左
  11. g.drawLine(endxendyendx+3endy-3);
  12. g.drawLine(endxendyendx+3endy+3);
  13. }else if((lastpoint[1] == endy)&&(lastpoint[0]<endx)){//开口向右
  14. g.drawLine(endxendyendx-3endy-3);
  15. g.drawLine(endxendyendx-3endy+3);
  16. }else{//任意方向用点代替
  17. g.fillOval(endx-2endy-255);
  18. }
  19. if ( (SelectedNode[0] != 0) && (SelectedNode[1] != 0)) {
  20. g.setColor(Color.BLUE);
  21. g.fillOval(SelectedNode[0]-2SelectedNode[1]-255);
  22. }

删除节点

  1. public void DeleteSelectedNode() {
  2. if (haveSelectedNode == true) {
  3. this.NodeObject.removeElementAt(nodeindex);
  4. this.haveSelectedNode = false
  5. repaint();
  6. }
  7. }

删除弧线

  1. public void DeleteSelectedArc() {
  2. if (haveSelectedArc == true) {
  3. this.ArcObject.removeElementAt(arcindex);
  4. this.haveSelectedArc = false
  5. repaint();
  6. }
  7. }

下图为一设计好了的流程图

参考文献

[1] 史美林,杨光信,向勇等.WFMS:工作流管理系统[J].计算机学报

[2] 冯峰,王小刚.OAS中的工作流设计方法[J].计算机工程与应用

[3] Wilvander Aalst,Keesvan Hee.工作流管理——模型、方法和系统[M].王建民,闻立杰等译.北京:清华大学出版社

上传的附件 cloud_download 基于BS结构的OA流程可视化的研究与实现.zip ( 190.94kb, 5次下载 )
error_outline 下载需要12点积分

发送私信

英雄不问出处,强者面前全是路

11
文章数
7
评论数
最近文章
eject