Edge-computing-plug-in NPM

边缘计算

本项目实现类流程图可视化工具 , 通过控件拖拽连线 , 实现数据的传递并通过后端计算结果输出前台 .

项目运行和构建

npm run serve

npm run build

软件架构

1. LogicFlow 核心库
2. vue2
3. element-ui
4. vue-router
5. vuex
6. scss

界面布局

左侧-控件栏 (自行开发实现)

 UI实现文件目录：/src/components/LeftMenu
 控件实现文件目录：/src/node-red/...
 控件UI样式参考： 第三方工具 node-red

// 组件初始化参数说明：
startDrag(item) {
 // 全局存储的画布对象
  const { lf } = window;
  lf.dnd.startDrag({
    // 组件类型 对应/node-red/nodes的导出type  目前大部分通常使用'diy'类型
    // 请注意 diy 和 其他类型控件都是基于BaseNode文件实现
    type: item.type, 
    // 控件中间显示的文本
    text: item.text, 
    properties: {
      //  用于后端处理的默认传入参数
      inParams: item.paramJson?.inParams || [],
      //  用于后端处理的默认的导出参数
      outParams: item.paramJson?.outParams || [],
      // 组件名称 (仅后台使用)
      componentName: item.componentName || item.ctrlName,
      // 显示icon文件名 对应/public/images下文件
      icon: item.icon,
      // 控件左侧锚点显示数量
      inPoint: item.paramJson?.inPoint || 0,
      // 控件右侧锚点显示数量
      outPoint: item.paramJson?.outPoint || 0,
      // 控件颜色
      color: item.color,
      // 用于控制左侧是否连线 (暂未使用)
      isControlLeft: item.paramJson?.isControlLeft,
      // 用于控制右侧是否连线 (暂未使用)
      isControlRight:item.paramJson?.isControlRight,
      // 控件中间显示的文本   
      text: item.text,
      // 属性栏表单渲染数据
      OperatorForm: item.paramJson?.OperatorForm || [],
      ...item.data,
    },
  });
},

> 中间-画布  (LogicFlow实现)
- 对应文件 /views/edgeComputing/canvas/index 

``` js
 // 画布初始化
	this.lf = new LogicFlow({
         // 初始化容器
			container: this.$refs.lfContainer,
			// 网格
         grid: true,
			// 插件
         plugins: [
				Menu,
				Control,
				MiniMap,
				NodeRedExtension,
				SelectionSelect,
				Snapshot,
			],
         // 默认样式
			style: {
				edgeText: {
					fill: "#333",
				},
			},
	});

属性栏 (自行开发实现)
对应文件 /components/NodePanel/
属性栏根据节点OperatorForm属性渲染 , 其中type声明不同的渲染类型 , 渲染不同组件内容。
点击属性栏保存时，根据表单填写内容生成out 属性用于内部数据传递和生成outParams , out属性和传递给后端的outParams格式有所不同 ,请注意差异 , 同理in和inParams也是同等关系
右侧-调试窗口 (自行开发实现)

- 对应文件/components/RightMenu/index

  - 调整窗口的数据 , 来自点击功能栏"运行"按钮接口返回的数据  通过状态管理读取渲染

顶部-功能按钮栏 (LogicFlow实现大部分+部分功能自定义点击逻辑)

- 对应文件  /views/edgeComputing/canvas

增加新组件流程

1. 如有新图标放在/public/static/images/...
2. 如有特定连线逻辑 , 修改src/components/node-red/指定类型的渲染逻辑
3. 如有特定属性栏字段，添加src/components/NodePanel/指定类型属性栏渲染组件
4. 确认属性栏点击保存时 , 是否要修改数据生成格式

插件安装教程

安装: npm install edge-computing-plug-in
卸载： npm uninstall edge-computing-plug-in
直接升级: npm update edge-computing-plug-in

插件使用说明

main.js里引入
import myEdge from 'edge-computing-plug-in';//边缘计算插件 import "edge-computing-plug-in/dist/edge-computing-plug-in.css"; //边缘计算插件 Vue.use(myEdge);//边缘计算插件
vue.config.js中配置需要转译的依赖包 module.exports = { transpileDependencies: 'edge-computing-plug-in' ,
```
...}
```