1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
| <!doctype>
| <html>
| <head>
| <title>图片热点维护</title>
| <script type="text/javascript" src="esl.js"></script>
| <script type="text/javascript" src="zrender.js"></script>
| <script type="text/javascript" src="prototype.min.js"></script>
| <script type="text/javascript" src="HH.Libra.Graph.js"></script>
| <script type="text/javascript" src="HH.Libra.Activity.js"></script>
| <script type="text/javascript" src="HH.Libra.Transition.js"></script>
| <style>
| body{margin:0;}
| .context-menu {
| position:absolute;
| width:150px;
| background-color:#eee;
| border:1px solid #bbb;
| border-radius:3px;
| font-size:12px;
| }
| .context-menu ul{
| padding:5px;
| margin:0;
| }
| .context-menu ul li{
| list-style:none;
| }
| .context-menu ul li a{
| display:block;
| text-decoration:none;
| color:#555;
| line-height:2em;
| padding:0 0 0 6px;
| }
| .context-menu ul li a:hover{
| color:#000;
| background-color:#ccc;
| }
| </style>
|
| <script type="text/javascript">
|
| var activities = [
| new HH.Libra.StartActivity({ 'id': '0755d21f-672e-4289-9c4e-a6c800c89fc5', 'position': { x: 88, y: 60 }, 'title': '开始' }),
| new HH.Libra.ActionAssemblyActivity({ 'id': 'c28dc449-50c9-440f-b539-a6c800c8af01', 'position': { x: 88, y: 160 }, 'title': '初始审批' }),
| new HH.Libra.ManualActivity({ 'id': '6b475718-572c-4141-b6f7-a6c800d9cefd', 'position': { x: 88, y: 260 }, 'title': '直接领导审批' })
| ];
|
| var transitions = [
| new HH.Libra.Transition({ 'id': 'db2faea5-81f2-4958-a075-a6c800ee41c1', 'from': '0755d21f-672e-4289-9c4e-a6c800c89fc5', 'fromAngle': -5, 'to': 'c28dc449-50c9-440f-b539-a6c800c8af01', 'toAngle': -1, 'title': '无条件' }),
| new HH.Libra.Transition({ 'id': 'c6a3680f-4343-4599-bd16-a6c8017b536e', 'from': 'c28dc449-50c9-440f-b539-a6c800c8af01', 'fromAngle': -5, 'to': '6b475718-572c-4141-b6f7-a6c800d9cefd', 'toAngle': 1, 'title': '无条件' })
| ];
|
| require([
| 'zrender',
| 'zrender/tool/color',
| 'zrender/Group',
| 'zrender/shape/Circle',
| 'zrender/shape/Rectangle',
| 'zrender/shape/Polygon',
| 'zrender/shape/Polyline',
| 'zrender/shape/Text',
| 'zrender/shape/Line'
| ],
| function (zrender, color, Group, Circle, Rectangle, Polygon, Polyline, Text, Line) {
|
| var canvas = $('canvas');
| var createOptions = {
| canvas: {
| element: canvas
| }
| };
|
| var type = {
| zrender: zrender,
| tool: {
| color: color
| },
| Group: Group,
| Shape: {
| Rectangle: Rectangle,
| Circle: Circle,
| Polygon: Polygon,
| Polyline: Polyline
| }
| };
|
| var graph = new HH.Libra.Graph(type, createOptions);
| activities.each(function (activity) { graph.addActivity(activity); });
| transitions.each(function (transition) { graph.addTransition(transition); });
| graph.init();
| graph.render();
| }
| );
| </script>
| </head>
| <body>
|
| <div id="canvas" ></div>
|
| </body>
| </html>
|
|
