edge-computing-plug-in

边缘计算

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

项目运行和构建

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

    // 画布初始化
	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' ],

   ...}
  

description

• 打包: npm run lib
• 登录: npm login account:wh... password:my... email:lov...
• 发包： npm publish

参与贡献

• Fork 本仓库
• 新建 Feat_xxx 分支
• 提交代码
• 新建 Pull Request

特技

• 使用 Readme_XXX.md 来支持不同的语言，例如 Readme_en.md, Readme_zh.md
• Gitee 官方博客 blog.gitee.com
• 你可以 https://gitee.com/explore 这个地址来了解 Gitee 上的优秀开源项目
• GVP 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
• Gitee 官方提供的使用手册 https://gitee.com/help
• Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 https://gitee.com/gitee-stars/