G6流程图绘制

最新推荐文章于 2024-05-26 22:37:49 发布

2022再出发

最新推荐文章于 2024-05-26 22:37:49 发布

阅读量1.8k

点赞数 1

分类专栏： JavaScript 文章标签：经验分享

本文链接：https://blog.csdn.net/QingQiang8808/article/details/113583327

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

为了能在线编辑流程，支持流程节点编辑等功能，支持人员等选择功能，支持流程图数据保存，利用阿里G6进行设计开发，整体效果图如下：

支持放大缩小，节点移动，添加节点及边等，同时支持节点及边删除操作，流程图数据保存等工作。

支持节点编辑，包括人员选择，图形选择，宽高编辑，背景色、边框色等信息编辑；

支持边的编辑，边描述等。

各种交互功能就不赘述了。

页面代码如下：

<!DOCTYPE TYPE>
<html>
	<head>
		<meta charset="utf8">
		<title>procedure</title>
		<link rel="stylesheet" type="text/css" href="css/procedure.css">
	</head>
	<body>
		<div class="procedure-all" id="procedure" v-cloak>
			<div class="procedure-tool-bar">
				<div class="operate">
					<span class="operate-radio">
						<input type="radio" v-model="currentMode" value="1" id="mode-1"/>
						<label for="mode-1">移动放大</label>
						<input type="radio" v-model="currentMode" value="2" id="mode-2"/>
						<label for="mode-2">添加节点</label>
						<input type="radio" v-model="currentMode" value="3" id="mode-3"/>
						<label for="mode-3">添加边</label>
					</span>
					<span class="save-msg" v-bind:class="saveSuc ? 'save-success' : 'save-error'">{{saveMsg}}</span>
					<span class="operate-btn">
						<button v-on:click="deleteItem">删除该项</button>
						<button v-on:click="saveData">保存数据</button>
					</span>
				</div>
			</div>
			<div class="procedure-content" ref="procedureContent" id="procedure-content"></div>
			<div class="procedure-foot">流程图2.0</div>
			<div class="g6-item-info">
				<div class="g6-item-info-content">
					<div class="title"><span>{{typeName}}信息修改</span></div>
					<div class="content" v-show="itemType == 1">
						<div class="line">
							<div class="item one">节点类型：</div>
							<div class="item two">
								<select v-model="currentModel.nodeType" v-on:change="modelSave">
									<option value="1">开始</option>
									<option value="2">途中</option>
									<option value="3">结束</option>
								</select>
							</div>
						</div>
						<div class="line">
							<div class="item one">名称：</div>
							<div class="item two">
								<input type="text" placeholder="请输入名称" v-model.trim="currentModel.label" v-on:blur="modelSave">
							</div>
						</div>
						<div class="line">
							<div class="item one">审批人：</div>
							<div class="item two approve-list" id="approver"></div>
						</div>
						<div class="line">
							<div class="item one">图形：</div>
							<div class="item two">
								<select v-model="currentModel.type" v-on:change="modelSave">
									<option value="circle">圆形</option>
									<option value="rect">长方形</option>
									<option value="ellipse">椭圆</option>
									<option value="diamond">菱形</option>
								</select>
							</div>
						</div>
						<div class="line">
							<div class="item one">宽度：</div>
							<div class="item two">
								<input type="number" placeholder="请输入宽度" v-model.number="currentModel.size[0]" v-on:blur="modelSave">
							</div>
						</div>
						<div class="line">
							<div class="item one">高度：</div>
							<div class="item two">
								<input type="number" placeholder="请输入高度" v-model.number="currentModel.size[1]" v-on:blur="modelSave">
							</div>
						</div>
						<div class="line">
							<div class="item one">背景色：</div>
							<div class="item two">
								<input type="text" placeholder="请输入背景色" v-model.trim="currentModel.style.fill" v-on:blur="modelSave">
							</div>
						</div>
						<div class="line">
							<div class="item one">边框颜色：</div>
							<div class="item two">
								<input type="text" placeholder="请输入边框颜色" v-model.trim="currentModel.style.stroke" v-on:blur="modelSave">
							</div>
						</div>
						<div class="line">
							<div class="item one">边框宽度：</div>
							<div class="item two">
								<input type="text" placeholder="请输入边框宽度" v-model.number="currentModel.style.lineWidth" v-on:blur="modelSave">
							</div>
						</div>
						<div class="line">
							<div class="item one">字体颜色：</div>
							<div class="item two">
								<input type="text" placeholder="请输入字体颜色" v-model.trim="currentModel.labelCfg.style.fill" v-on:blur="modelSave">
							</div>
						</div>
						<div class="line">
							<div class="item one">字体大小：</div>
							<div class="item two">
								<input type="text" placeholder="请输入字体颜色" v-model.number="currentModel.labelCfg.style.fontSize" v-on:blur="modelSave">
							</div>
						</div>
					</div>
					<div class="content" v-show="itemType == 2">
						<div class="line">
							<div class="item one">边描述：</div>
							<div class="item two">
								<input type="text" placeholder="请输入边描述" v-model.trim="currentModel.label" v-on:blur="modelSave">
							</div>
						</div>
						<div class="line">
							<div class="item one">边X轴偏移：</div>
							<div class="item two">
								<input type="text" placeholder="请输入边X轴偏移" v-model.number="currentModel.labelCfg.refX" v-on:blur="modelSave">
							</div>
						</div>
						<div class="line">
							<div class="item one">边Y轴偏移：</div>
							<div class="item two">
								<input type="text" placeholder="请输入边Y轴偏移" v-model.number="currentModel.labelCfg.refY" v-on:blur="modelSave">
							</div>
						</div>
						<div class="line">
							<div class="item one">边颜色：</div>
							<div class="item two">
								<input type="text" placeholder="请输入边颜色" v-model.trim="currentModel.style.stroke" v-on:blur="modelSave">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="js/xm-select.js"></script>
	<script src="js/vue-2.6.12.js"></script>
	<script src="js/vue-resource-1.5.1.js"></script>
	<script src="js/g6-3.8.3.min.js"></script>
	<script src="js/procedure.js"></script>
</html>

如需详细代码，可以下载完整代码：https://download.csdn.net/download/QingQiang8808/14998955

如有问题请随时指正。

2022再出发

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
G6流程图绘制

为了能在线编辑流程，支持流程节点编辑等功能，支持人员等选择功能，支持流程图数据保存，利用阿里G6进行设计开发，整体效果图如下：支持放大缩小，节点移动，添加节点及边等，同时支持节点及边删除操作，流程图数据保存等工作。支持节点编辑，包括人员选择，图形选择，宽高编辑，背景色、边框色等信息编辑；支持边的编辑，边描述等。各种交互功能就不赘述了。页面代码如下：<!DOCTYPE TYPE><html> <head> <meta ch
复制链接

扫一扫