Vue+Gojs实现流程图demo,带破解教程
第一步：引入package.json引入gojs依赖包-- "gojs": "^2.0.3", (npm install gojs --save)
第二步：运行下述代码
<template>
<div id="wrap">
<div id="chart-wrap">
<div id="chart-palette"></div>
<div id="chart-diagram"></div>
</div>
<button @click="onSubmit"></button>
</div>
</div>
</template>
<script>
import go from 'gojs'
const MAKE = go.GraphObject.make;
export default {
data() {
return {}
},
mounted() {
var mySelf = this;
mySelf.myDiagram = MAKE(go.Diagram, "chart-diagram", {
initialContentAlignment: go.Spot.Center, // 居中显示
"undoManager.isEnabled": true, // 支持 Ctrl-Z 和 Ctrl-Y 操作
"toolManager.hoverDelay": 100, //tooltip提示显示延时
"toolManager.toolTipDuration": 10000, //tooltip持续显示时间
//isReadOnly:true,//只读
"grid.visible": true, //显示网格
allowMove: true, //允许拖动
// allowDragOut:true,
allowDelete: true,
allowCopy: true,
allowClipboard: true,
"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, //有鼠标滚轮事件放大和缩小，而不是向上和向下滚动
layout: MAKE(go.TreeLayout, {
angle: 0,
layerSpacing: 35
})
}); //构建gojs对象
console.log(mySelf.myDiagram);
mySelf.myDiagram.addDiagramListener("ObjectSingleClicked", function(e) {
debugger
console.log(e.subject.part);
});
mySelf.myDiagram.addDiagramListener("BackgroundSingleClicked", function(e) {
debugger
console.log("Double-clicked at" + e.diagram.lastInput.documentPoint);
});
mySelf.myDiagram.addDiagramListener("ClipboardPasted", function(e) {
debugger
console.log("Pasted" + e.diagram.selection.count + "parts");
});
mySelf.myDiagram.linkTemplate = MAKE(go.Link, {
curve: go.Link.Bezier
}, // 贝塞尔曲线
{
routing: go.Link.Orthogonal,
corner: 15
},
MAKE(go.Shape, {
strokeWidth: 2,
stroke: "#F60"
}),
MAKE(go.Shape, {
toArrow: "Standard",
fill: "red",
stroke: "blue"
}), //箭头
MAKE(go.TextBlock, {
margin: 20,
stroke: "blue",
font: "14px sans-serif",
width: 50,
wrap: go.TextBlock.WrapDesiredSize
},
new go.Binding("text", "linktext")), {
toolTip: MAKE(go.Adornment, "Auto",
MAKE(go.Shape, {
fill: "#FFFFCC"
}),
MAKE(go.TextBlock, {
margin: 4
}, new go.Binding("text", "name1"))
) // end of Adornment
}
);
let myModel = MAKE(go.GraphLinksModel); //也可以创建link model;需要配置myModel.linkDataArray 如下
myModel.nodeDataArray = [];
myModel.linkDataArray = [];
var lightText = "whitesmoke";
mySelf.myDiagram.nodeTemplateMap.add(
"Next",
MAKE(
go.Node,
"Spot",
// nodeStyle(),
MAKE( //声明创建一个新的面板对象,自定义方式可参考mySelf.myDiagram.nodeTemplate
go.Panel, //表明需要创建一个panel面板对象
"Auto", //页面布局为自动
MAKE( //声明构建一个圆角矩形
go.Shape,
"RoundedRectangle", {
fill: "#44CCFF",
stroke: '#FFF',
strokeWidth: 1,
angle: 0
},
new go.Binding("figure", "figure") //声明并创建一个新的图形
),
MAKE( //声明一个可编辑文本域
go.TextBlock, {
font: "12pt Helvetica, Arial, sans-serif",
stroke: lightText,
width: 125,
maxSize: new go.Size(360, NaN),
wrap: go.TextBlock.WrapFit, //文本域换行
editable: true, //是否可编辑
margin: 12,
wrap: go.TextBlock.WrapDesiredSize
},
new go.Binding("text").makeTwoWay()
)
),
// four named ports, one on each side:
makePort("T", go.Spot.Top, false, true),
makePort("L", go.Spot.Left, true, true),
makePort("R", go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, true, false)
)
);
//Node连接线
function makePort(name, spot, output, input) {
return MAKE(go.Shape, "Circle", {
fill: "transparent",
stroke: null, // this is changed to "white" in the showPorts function
desiredSize: new go.Size(10, 10),
alignment: spot,
alignmentFocus: spot, // align the port on the main Shape
portId: name, // declare this object to be a "port"
fromSpot: spot,
toSpot: spot, // declare where links may connect at this port
fromLinkable: output,
toLinkable: input, // declare whether the user may draw links to/from here
cursor: "pointer" // show a different cursor to indicate potential link point
});
};
mySelf.myDiagram.model = myModel;
mySelf.init();
},
methods: {
onSubmit() {
},
init() {
var mySelf = this;
window.myPalette = MAKE(
go.Palette,
"chart-palette", // must name or refer to the DIV HTML element
{
scrollsPageOnFocus: false,
nodeTemplateMap: mySelf.myDiagram.nodeTemplateMap, // share the templates used by myDiagram
model: new go.GraphLinksModel([
// specify the contents of the Palette
{
category: "Next",
text: "新规则"
}
])
}
);
},
}
}
</script>
<style lang="less" scoped>
#form-wrap {
padding: 20px 40px;
// background-color: white;
border: solid 1px rgb(244, 244, 244);
}
#submit {
width: 102px;
height: 40px;
float: right;
margin: 20px 5px 16px 0;
}
#chart-wrap {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 22px;
#chart-palette {
width: 180px;
margin-right: 30px;
background-color: white;
border: solid 1px rgb(244, 244, 244);
}
#chart-diagram {
flex-grow: 1;
height: 720px;
background-color: white;
border: solid 1px rgb(244, 244, 244);
}
}
#lateEntry {
clear: both;
background-color: rgb(255, 255, 255);
border: solid 1px rgb(244, 244, 244);
>span {
display: inline-block;
height: 50px;
font-size: 16px;
line-height: 50px;
text-indent: 30px;
letter-spacing: 0.8px;
text-align: left;
color: rgb(35, 35, 35);
// border-bottom: 1px solid rgb(234, 234, 234);
}
}
</style>
第三步：去水印
在哪个文件中找到破解的文件。
在node_modules\gojs\release\go.js 下进行破解
- 在文件中搜索
7eba17a4ca3b1a8346，找到类似a.$q=b.V[Za("7eba17a4ca3b1a8346")][Za("78a118b7")](b.V,yk,4,4);这样结构的代码 - 将其注释，替换成
a.$q=function(){return true;}; - 直接npm install可以在module里寻找go.js文件，需修改的代码一般在769行
------拓展：相关构建gojs流程图时的某些参数及相关配置使用方式
====================-构建gojs流程面板 import go from 'gojs' const MAKE = go.GraphObject.make; mySelf.myDiagram = MAKE(go.Diagram, "mygoChart", { initialContentAlignment: go.Spot.Center, // 居中显示 "undoManager.isEnabled": true, // 支持 Ctrl-Z 和 Ctrl-Y 操作 "toolManager.hoverDelay": 100, //tooltip提示显示延时 "toolManager.toolTipDuration": 10000, //tooltip持续显示时间 //isReadOnly:true,//只读 "grid.visible": true, //显示网格 allowMove: true, //允许拖动 // allowDragOut:true, allowDelete: true,//允许删除 allowCopy: true,//允许复制 allowClipboard: false,//允许剪切 "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, //有鼠标滚轮事件放大和缩小，而不是向上和向下滚动 layout: MAKE(go.TreeLayout, {//创建布局,示例为树 angle: 0, //角度 layerSpacing: 35 //层间距 }) }); //构建gojs对象 ====================- mySelf.myDiagram.nodeTemplateMap.add(： //声明左侧Node工具栏Tools "Next", // 关键参数,需要与init初始化时window.myPalette中model对象配置的category保持一致 MAKE( go.Node, // "Spot", // nodeStyle(), MAKE(//声明创建一个新的面板对象,自定义方式可参考mySelf.myDiagram.nodeTemplate go.Panel, //表明需要创建一个panel面板对象 "Auto", //页面布局为自动 MAKE( //声明构建一个圆角矩形 go.Shape, "RoundedRectangle", { fill: "rgb(54, 128, 181)", //内填充颜色 stroke: null //外边框颜色 }, new go.Binding("figure", "figure") //声明并创建一个新的图形 ), MAKE( //声明一个可编辑文本域 go.TextBlock, { font: "11pt Helvetica, Arial, sans-serif", stroke: lightText, margin: 8, maxSize: new go.Size(160, NaN), wrap: go.TextBlock.WrapFit, //文本域换行 editable: true //是否可编辑 }, new go.Binding("text").makeTwoWay() ) ), makePort("T", go.Spot.Top, false, true),//创建Top顶端可延申链接点 makePort("L", go.Spot.Left, true, true),//创建Left左端可延申链接点 makePort("R", go.Spot.Right, true, true),//创建Righ右端可延申链接点 makePort("B", go.Spot.Bottom, true, false)//创建Buttom底端可延申链接点 ) ); ====================-自定义流程图流程节点相关配置 mySelf.myDiagram.nodeTemplate : 自定义流程图节点 -> MAKE(go.Node,//声明创建的是node对象 new go.Binding("location", "loc", go.Point.parse),//创建节点并设定节点的初始位置 MAKE(go.Shape, "RoundedRectangle", {//构建节点的形状,示例为圆角矩形 fill: "#44CCFF",//模块内填充颜色 stroke: 'green',//外填充颜色(可理解为margin,也可以当成外边框颜色来理解) strokeWidth: 2,//外边框(填充)宽度 angle: 0//模块形状的偏移量(角度) }), "Auto", //设置并定义节点模块内容布局走向:Vertical(垂直),Auto(自动),Horizontal(水平) { background: "#44CCFF" },//将Node背景底色渲染为蓝色 MAKE(go.Picture,//构建Node区域图像类内容 { source:"../assets/img/01.png",margin: 10, width: 50, height: 50, background: "red" },//基本参数设置 new go.Binding("source")),//*Picture.source参数值与模型数据中的"source"字段绑定 MAKE(go.TextBlock,//构建Node区域文本类内容 "Default Text", // 初始化默认文本 // 文字周围的空隙, 大号字体, 白色笔画: { margin: 12, stroke: "white", font: "bold 16px sans-serif", width:75, wrap: go.TextBlock.WrapDesiredSize }, new go.Binding("text", "name1")), // name1为linktext为nodeDataArray对象中的参数 { mouseEnter: function(e, node, prev) { console.log('mouseEnter');//鼠标点击事件 }, mouseLeave: function(e, node, prev) { mySelf.detailShow = false;//鼠标移开事件 }, }, MAKE(go.Panel, "Horizontal", {//创建并设置node内模板:实现Node块内的控件布局 padding: 5 }, ====================-自定义流程图连接线相关配置 mySelf.myDiagram.linkTemplate:自定义流程图连接线 -> { curve: go.Link.Bezier } ： 设置并定义连接线曲线样式,示例为贝塞尔曲线 -> MAKE(go.Shape, { strokeWidth: 2, //连接线宽(厚)度 stroke: "#F60"//连接线笔画默认(未选中)颜色 }) : 设置并定义连接线宽度及颜色 -> MAKE(go.Shape, { toArrow: "Standard",//箭头样式,示例为标准 fill: "#000",//箭头的填充颜色(内填充,可以理解为padding) stroke: null//连接线笔画默认(未选中)颜色,(外填充,可以理解为margin) }), //设置并定义箭头样式 --> MAKE(go.TextBlock, { //文本块创建器 margin: 20,//外边距,默认单位为px stroke: "blue",//字体颜色 font: "14px sans-serif",//字体样式 width:50,//内容宽度 wrap: go.TextBlock.WrapDesiredSize//样式包装器 }, new go.Binding("text", "linktext")), { //创建并绑定显示的文本域信息,linktext为nodeDataArray对象中的参数 toolTip: MAKE(go.Adornment, "Auto", MAKE(go.Shape, { fill: "#FFFFCC",//悬浮提示框内填充颜色 }), MAKE(go.TextBlock, { margin: 4 // 外边距 }, new go.Binding("text", "name1")) //创建并绑定显示的文本域信息,name1为nodeDataArray对象中的参数 ) ：设置并定义鼠标悬浮提示信息样式 } : 设置并定义连接线指示及指针悬浮提示内容 =================-渲染数据相关配置 --> let myModel = MAKE(go.Model);//无连接线模型渲染 let myModel = MAKE(go.GraphLinksModel);//指定连接(适用于复杂业务);需要配置myModel.linkDataArray let myModel = MAKE(go.TreeModel); //使用Tree树图模型渲染 --> myModel.nodeDataArray = [{},{},{}] : 流程节点数据(对象数组) --> myModel.linkDataArray = [ {from:"1",to:"2"}, {from:"1",to:"2"}……] : 流程链接指示数组,用于构建各个node节点间的数据关系，需要使用go.GraphLinksModel --> mySelf.myDiagram.model = myModel; 需渲染数据赋值
漫思
