master

分支 (1)

管理

管理

master

jointjs-demo
/
flow.html


<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/joint.css" />
		<script src="js/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jointjs/lodash.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jointjs/backbone.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jointjs/joint.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/template/template.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.left {
				float: left;
				height: 100%;
				width: 20%;
			}

			html,
			body,
			#paper {
				height: 100%;
				width: 100%;
			}

			#paper {
				position: absolute;
				top: 0;
			}

			p {
				margin: 50px 0;
			}
		</style>
	</head>

	<body>
		<div id="paper" class="paper"></div>
		<div class="box"></div>
		<script type="text/javascript">
			var graph = new joint.dia.Graph();
			//定义画布
			var paper = new joint.dia.Paper({
				el: $('#paper'),
				width: 1200,
				height: 600,
				gridSize: 1,
				model: graph
			});
			paper.$el.css('pointer-events', 'none')
			//定义形状
			var stat = function(x, y, shape, background, text) {
				var cell;
				if(shape === "rect") {
					cell = new joint.shapes.basic.Rect({
						position: {
							x: x,
							y: y
						}, //坐标
						size: {
							width: 140,
							height: 40
						}, //宽高
						attrs: {
							rect: {
								fill: {
									type: 'linearGradient',
									stops: [{
											offset: '0%',
											color: background
										}, //渐变开始
										{
											offset: '100%',
											color: background
										}
									], //渐变结束
									attrs: {
										x1: '0%',
										y1: '0%',
										x2: '0%',
										y2: '100%'
									}
								},
								stroke: background, //边框颜色
								'stroke-width': 1 //边框大小
							},
							text: {
								text: text,
								'ref-x': .5,
								'ref-y': .5,
								fill: '#000'
							}, //显示文字
						}
					});
				} else if(shape === "ellipse") {
					cell = new joint.shapes.basic.Ellipse({
						position: {
							x: x,
							y: y
						}, //坐标
						size: {
							width: 140,
							height: 40
						}, //宽高
						attrs: {
							ellipse: {
								fill: {
									type: 'linearGradient',
									stops: [{
											offset: '0%',
											color: background
										}, //渐变开始
										{
											offset: '100%',
											color: '#FFFFFF'
										} //渐变结束
									],
									attrs: {
										x1: '0%',
										y1: '0%',
										x2: '0%',
										y2: '100%'
									}
								},
								stroke: background, //边框颜色
								'stroke-width': 1 //边框大小
							},
							text: {
								text: text,
								'ref-x': .5,
								'ref-y': .5,
								fill: '#000'
							}, //显示文字
						}
					});
				}
				graph.addCell(cell);
				return cell;
			};

			//定义连线
			function link(source, target, label) {
				var cell = new joint.dia.Link({
					source: {
						id: source.id
					},
					target: {
						id: target.id
					},
					labels: [{
						position: 0.5,
						attrs: {
							text: {
								text: label || '',
								'font-weight': 'bold'
							}
						}
					}],

					attrs: {
						'.connection': {
							stroke: '#333333', //连线颜色
							'stroke-width': 4 //连线粗细
						},
						'.marker-target': {
							fill: '#000', //箭头颜色
							d: 'M 10 0 L 0 5 L 10 10 z' //箭头样式
						}
					}
				});
				graph.addCell(cell);
				return cell;
			}

			var data = [
				[{
					title: '订单',
					tolink: "",
					state: "1",
					id: "1",
					name: '订单'
				}],
				[{
					title: '预售',
					tolink: "1",
					state: "1",
					id: "2",
					name: '预售'
				}, {
					title: '预售2',
					tolink: "1",
					state: "0",
					id: "3",
					name: '预售2'
				}],
				[{
					title: '采购清单',
					tolink: "2",
					state: "-1",
					id: "4",
					name: '采购清单'
				}, {
					title: '待加工',
					tolink: "2",
					state: "-1",
					id: "5",
					name: '待加工'
				}]
			]

			console.log(data)
			var arraylist = [];
			$.each(data, function(index, item1) {
				$(".box").append("<div class='left'></div>")

				$.each(item1, function(index2, item2) {

					$(".left").eq(index).append("<p id='" + item1[index2].id + "'>" + item1[index2].title + "</p>")
					debugger
					var id1 = item1[index2].id
					var arrValue1 = arraylist[id1];
					var y = $("#" + id1).offset().top;
					var x = $("#" + id1).offset().left;
					var name = item1[index2].name
					var n = item1[index2].state
					if(arrValue1 == undefined) {

						switch(n) {
							case "1":
								arraylist[id1] = stat(x, y, "rect", "#99ff00", name);
								break;
							case "0":
								arraylist[id1] = stat(x, y, "rect", "#FFFF00", name);
								break;
							default:
								arraylist[id1] = stat(x, y, "rect", "red", name);

						}

					}
					if(item1[index2].tolink != "") {
						var id2 = item1[index2].tolink
						var arrValue2 = arraylist[id2];
						var y2 = $("#" + id2).offset().top;
						var x2 = $("#" + id2).offset().left;
						var state = item1[index2].state
						if(arrValue2 == undefined) {
							arraylist[id2] = stat(x2, y2, "rect", "#000");
						}
						link(arraylist[id2], arraylist[id1]);
					}

				});

			});
		</script>
	</body>

</html>