将最近学习的内容，以博客的形式记录下来。
本人主要是从事.Net后端开发，在现任的公司，主要做全栈。
最近有研究学习web组态方面的内容，通过vue2+antv x6 实现了一个简易版的web组态编辑器。
参考资料
涉及的知识点
- vue2、vuex、mixins、provide/inject、组件封装
- iview ui布局
- antv x6
目前实现的功能点
- 自定义拖拽
- 复制
- 粘贴
- 剪切
- 删除
- 撤销
- 重做
- 快捷键
- 组合/取消组合
- 右键菜单
- 渲染vue节点
- 实现漏水绳
- 画布属性设置
- 节点属性设置
- 边属性设置
- 左/水平/居中 对齐
- 顶/垂直/底 对齐
- 水平/垂直 等间距
- 内容缩放/内容居中对齐
- 置顶、置底、上移一层、下移一层
页面布局
工具菜单栏
开启/关闭连线模式、对齐方式、复制、粘贴、删除、撤销、保存、预览
右键菜单
画布右键、节点右键、边右键
目前已对画布的上下边缘做了自适应判断，左右两边的还未处理，待定...
监控画面预览
组合/取消组合/组合复制
锁定/解除锁定
锁定的节点，不可移动，不可框选操作，解除锁定后，恢复移动。框选的时候，过滤已锁定的节点
居中/缩放
封装Echarts图表为节点
封装温湿度组件
用户只需要绑定设备即可，系统会自动的将设备的各个通道绑定到对应的位置上，监控预览的时候，会根据报警做出不同的展示。
组态按钮
封装组态按钮，设置点击事件，配置点击打开组态页面。
常用方法
鼠标事件
//单击节点 显示节点/边的属性，修改属性
graph.on('cell:click', ({ e, x, y, cell, view }) => { })
//单击画布 显示画布属性面板，可设置画布的属性
graph.on('blank:click', ({ e, x, y }) => { })
//鼠标移入 显示连接桩
graph.on('cell:mouseenter', ({ e, cell, view }) => { })
//鼠标移出 隐藏连接桩
graph.on('node:mouseleave', () => {})
//监听异步加载完成 需要画布配置开启异步
graph.on('render:done', (e) => {})
//
未完...
