记录一下在VUE 使用 gojs实现物联网设备运行效果（1）

关于gojs 介绍需要自行，英文水平有限。
官方文档 、 gojs部分中文的文档

1、安装依赖

npm install gojs --save
npm安装参考

2、开始使用
创建一个div,gojs渲染的图层

<div id="myDiagramDiv" style=" width: 100%; height: 100%; cursor: pointer;"></div>

3、创建画布
一定要在 mounted() 中使用

		var $ = go.GraphObject.make; // for more concise visual tree definitions
		var that = this;
		// 创建画布
		that.myDiagram = $(go.Diagram, 'myDiagramDiv', {
   
			// 'grid.visible': true, // 是否展示网格
			// 'grid.gridCellSize': new go.Size(30, 20),// 网格大小
			'draggingTool.isGridSnapEnabled': true,
			'resizingTool.isGridSnapEnabled': true,
			'rotatingTool.snapAngleMultiple': 90,
			'rotatingTool.snapAngleEpsilon': 45,
			'undoManager.isEnabled': true,  支持 Ctrl-Z 和 Ctrl-Y 操作
			'toolManager.mouseWheelBehavior': go.ToolManager.WheelZoom, //有鼠标滚轮事件放大和缩小，而不是向上和向下滚动
			allowMove: false, //是否允许拖动
			isReadOnly: true //只读
		});

官方文档是用$作为变量，其实是可以任意的合法js变量名作 go.GraphObject.make的声明。go.GraphObject.make是GoJS的核心，对象都是根据它来创建的

3、添加节点模板

that.myDiagram.nodeTemplateMap.add(
			'Process',
			$(
				go.Node,
				'Auto',
				{
   
					locationSpot: new go.Spot(0.5, 0.5),
					locationObjectName: 'SHAPE',
					resizable: true,
					resizeObjectName: 'SHAPE'
				},
				new go.Binding('location', 'pos', go.Point.parse).makeTwoWay(go.Point.stringify), //创建节点并设定节点的初始位置
				$(
					go.TextBlock,
					{
   
						alignment: go.Spot.Center,
						textAlign: 'center',
						margin: 5,
						editable: true
					},
					new go.Binding