-
2022-03-23 13:17:22
vue antvG6产品流程图
antvG6 流程图效果展示
antvG6 流程图准备工作
如果你已经安装步骤完成相关安装,可直接创建页面复制代码
也可可直接下载我的demodemo地址:vue-antvg6地址
vue-antvg6简易包
git clone https://gitee.com/shuaizi010/vue-antvg6.git
cd 项目目录
npm install我是用panjiachen的vue-admin-tempalte,来做例子的框架,在上面做示例页面
1 安装vue-admin-template
git clone https://github.com/PanJiaChen/vue-admin-template.git
2进入目录 安装所需包
cd vue-admin-template npm install
3 安装必备库,antv/g6,insert-css
npm install @antv/g6 --save npm install insert-css
4新建页面配置路由
在src/router/index.js加入自己定义的路由
{ path: '/g6dagre', component: Layout, redirect: '/g6dagre/index2', children: [{ path: 'index2', name: 'G6dagre', component: () => import('@/views/g6dagre/index2'), meta: { title: 'G6dagre', icon: 'dashboard' } }] },
5流程图页面代码
参考地址
主页面代码
<template> <el-row :gutter="10" class="container"> <el-col :span="2"> <el-button type="" @click="downloadImage">导出</el-button> </el-col> <el-col :span="24"> <div class="whr100" id="dataDiv"></div> </el-col> </el-row> </template> <script> import G6 from "@antv/g6"; import insertCss from "insert-css"; insertCss(` .g6-tooltip { max-width: 600px; max-height: 500px; overflow-y: auto; position: absolute; left: -150px; z-index: 5; border: 1px solid #e2e2e2; border-radius: 4px; font-size: 14px; color: #545454; background-color: rgba(255, 255, 255, 0.9); padding: 20px 20px; box-shadow: rgb(174, 174, 174) 0px 0px 10px; text-align: justify; text-justify: newspaper; word-break: break-all; } .tooltip-header{ font-size:16px; } `); var graph = {}; //根据节点状态颜色 const dataTypeColor = { 100: "#EEBC20", 200: "#5BD8A6", 300: "#F46649", }; export default { name: "g6dagre", data() { return { dagreData: [], }; }, created() { //获取json数据 this.dagreData = require("@/assets/dagreData2.json"); this.$nextTick(() => { this.init(); }); }, methods: { init() { // 节点重定义 G6.registerNode( "flow", { drawShape(cfg, group) { const rect = group.addShape("rect", { attrs: { x: -75, y: -25, width: 150, height: 50, radius: 5, stroke: "#5B8FF9", fill: dataTypeColor[cfg.dataType], lineWidth: 3, }, name: "rect-shape", }); if (cfg.name) { group.addShape("text", { attrs: { text: cfg.name, x: 0, y: 0, fill: "#00287E", fontSize: 14, textAlign: "center", textBaseline: "middle", fontWeight: "bold", }, name: "text-shape", }); } return rect; }, }, "single-node" ); const container = document.getElementById("dataDiv"); const width = container.scrollWidth; const height = container.scrollHeight || 900; graph = new G6.Graph({ container: "dataDiv", width, height, defaultNode: { type: "flow", }, defaultEdge: { type: "polyline", style: { radius: 5, endArrow: true, lineWidth: 2, stroke: "#C2C8D5", }, }, nodeStateStyles: { selected: { stroke: "#d9d9d9", fill: "#5394ef", }, }, modes: { default: [ "drag-canvas", "zoom-canvas", "click-select", { type: "tooltip", formatText(model) { const cfg = model.conf; const text = []; cfg.forEach((row) => { text.push(row.label + ":" + row.value + "<br>"); }); return text.join("\n"); }, offset: 10, }, ], }, }); graph.read(this.dagreData); graph.fitView(); if (typeof window !== "undefined") window.onresize = () => { if (!graph || graph.get("destroyed")) return; if (!container || !container.scrollWidth || !container.scrollHeight) return; graph.changeSize(container.scrollWidth, container.scrollHeight); }; }, downloadImage() { graph.downloadFullImage(Math.random().toString(16)); }, }, }; </script> <style rel="stylesheet/scss" lang="scss" scoped> .whr100 { height: 100%; width: 100%; position: relative; } </style>
6数据json代码
{ "nodes": [ { "id": "1", "dataType": "100", "name": "生产部门", "x": -300, "y": 200, "conf": [ { "label": "生产入库", "value": "111" } ] }, { "id": "2", "dataType": "200", "name": "入库", "x": 0, "y": 200, "conf": [ { "label": "进入库房", "value": "222" } ] }, { "id": "3", "dataType": "300", "name": "入库单", "x": 300, "y": 200, "conf": [ { "label": "入库信息录入系统", "value": "333" } ] }, { "id": "4", "dataType": "100", "name": "检验员", "x": 600, "y": 200, "conf": [ { "label": "收到产品和入库单", "value": "444" } ] }, { "id": "6", "dataType": "200", "name": "质检", "x": 900, "y": 200, "anchorPoints": [ [ 0.5, 0 ], [ 0.5, 0.5 ] ], "conf": [ { "label": "质量检测", "value": "666" } ] }, { "id": "5", "dataType": "300", "name": "不合格入库单", "x": -300, "y": 0, "conf": [ { "label": "返回入库员", "value": "555" } ] }, { "id": "7", "dataType": "100", "name": "保管员", "x": 900, "y": 400, "conf": [ { "label": "核对产品", "value": "777" } ] }, { "id": "8", "dataType": "200", "name": "登记入库", "x": 600, "y": 400, "conf": [ { "label": "登记入库产品", "value": "888" } ] }, { "id": "9", "dataType": "300", "name": "库存账目系统", "x": 300, "y": 400, "conf": [ { "label": "库存汇总", "value": "999" } ] }, { "id": "10", "dataType": "100", "name": "统计员", "x": -300, "y": 400, "conf": [ { "label": "统计出入库存", "value": "101010" } ] }, { "id": "11", "dataType": "200", "name": "日数据报表", "x": 0, "y": 400, "conf": [ { "label": "系统报表", "value": "111111" } ] }, { "id": "12", "dataType": "200", "name": "统计月报表", "x": 300, "y": 600, "conf": [ { "label": "系统生成", "value": "121212" } ] }, { "id": "13", "dataType": "100", "name": "主管部门", "x": 300, "y": 800, "conf": [ { "label": "汇总分析上报", "value": "131313" } ] } ], "edges": [ { "source": "1", "target": "2" }, { "source": "5", "target": "1" }, { "source": "2", "target": "3" }, { "source": "3", "target": "4" }, { "source": "4", "target": "6" }, { "source": "6", "target": "5" }, { "source": "6", "target": "7" }, { "source": "7", "target": "8" }, { "source": "8", "target": "9" }, { "source": "10", "target": "11" }, { "source": "11", "target": "9" }, { "source": "13", "target": "12" }, { "source": "12", "target": "9" } ] }
更多相关内容 -
仓储物资入库出库流程图.doc
2021-10-11 14:30:08仓储物资入库出库流程图.doc -
仓库物品出入库流程图.pdf
2021-10-14 00:16:25仓库物品出入库流程图.pdf -
XX电子公司仓库物品出入库流程图
2020-12-15 20:07:10XX电子公司仓库物品出入库流程图是一篇关于物流采购的参考,能让你全面了解与感悟XX电子公司仓库物品出入...该文档为XX电子公司仓库物品出入库流程图,是一份很不错的参考资料,具有较高参考价值,感兴趣的可以下载... -
仓库管理业务流程图.docx
2021-09-27 10:27:01仓库管理业务流程图.docx -
成品出入库管理流程图.pdf
2021-10-22 20:57:16成品出入库管理流程图.pdf -
存货出入库管理流程XLS
2020-12-15 13:01:16物流采购若是能降低其过程成本,使其达到令人满意的服务水平那便是极为成功的,而存货出入库管理流程XLS...该文档为存货出入库管理流程XLS,是一份很不错的参考资料,具有较高参考价值,感兴趣的可以下载看看 -
国图农房入库流程.doc
2021-07-15 11:18:26国图农房建库软件流程图 -
采购入库流程图.doc
2021-09-16 16:56:47采购入库流程图.doc -
配送中心入库流程图.doc
2022-02-16 09:02:48配送中心入库流程图.doc -
库存管理系统流程图.doc
2019-10-29 23:51:29库存管理系统流程图doc,库存管理系统流程图 -
仓库出入库流程图.doc
2021-09-16 16:56:49仓库出入库流程图.doc -
自然资源统一确权登记流程图.jpg
2021-05-22 13:49:56自然资源统一确权登记流程图 -
采购、入库、出库、销售、物流等部门协作图2.pdf
2020-07-17 14:20:19描述整个跨境电商流程中的采购、仓库入库、出库、前端销售、支付、物流发货等模块的协作流程、为新入行的电商小伙伴提供基础知识储备。 -
城镇地籍建库系统cass数据的入库流程图.doc
2021-09-24 15:47:16城镇地籍建库系统cass数据的入库流程图.doc -
教你使用visio 2013绘制产品流程图
2020-12-31 07:24:131. 打开wisio2013后,将左侧形状区域切换到基本流程图形状,如下图:image如果找不到基本流程图,可以在上方的搜索按钮中进行搜索,也可以点击更多形状进行查找。2. 选中左侧的流程形状,将其拖拽到纸张画布区域。如...1. 打开wisio2013后,将左侧形状区域切换到基本流程图形状,如下图:
image
如果找不到基本流程图,可以在上方的搜索按钮中进行搜索,也可以点击更多形状进行查找。
2. 选中左侧的流程形状,将其拖拽到纸张画布区域。如下图:
image
3. 双击画布中的流程形状,进行写入文字,同时可以调整文字的字体大小、颜色等。如下图:
image
4. 在开始菜单/工具/线条(指针工具右侧)中,选择线条,如下图:
image
5. 在画布中的开始形状的下方画直线,如下图:
image
画完直线后,在“更改形状”中选择“动态连接”选项,如下图:
image
此时直线变成了箭头,如下图:
image
6. 选中箭头,在形状样式区域可以调整箭头的样式,如下图:
image
7. 同理,从左侧继续拖入一个判断流程至画布中箭头的下方,并双击写人文字“验证”,同时调整字体,如下图:
image
8. 继续从左侧形状区域拖动流程形状至画布中,将剩下的流程图画好,所有的线条采用的都是动态连接线,如下图:
image
9. 加上线条上的文字说明,双击线条,写入文字“N 验证不通过”即可,如下图:
image
10. 也可以从工具区单击“文本”,在需要写入文字的地方拖动即可出现文本框,写入相应的文字,例如,写入“Y 验证通过”,如下图:
image
好了,使用visio2013画的一个完整的产品流程图就完成了,不难吧!希望对大家有帮助。
有任何问题欢迎给我留言。
-
库存出入库管理业务流程图怎么做?
2019-01-10 10:54:04我们在日常工作中,最讲究的就是方法,办一件事情,那么,结果一定指向你想要的,而无任何方法的具体实施,就设计到流程。 没见事情都有它发生的流程,做饭有做饭的流程:...下面小编将和大家讲解库存出入库管理...我们在日常工作中,最讲究的就是方法,办一件事情,那么,结果一定指向你想要的,而无任何方法的具体实施,就设计到流程。
没见事情都有它发生的流程,做饭有做饭的流程:洗菜——切菜——炒菜。哪怕它有多普通多小,吃饭有吃饭的流程:拿筷——夹菜——入口——咀嚼——吞咽;自己搞明白流程,向别人描述清楚流程,是一项智慧。口说的永远没有画出来更易懂,尤其是流程复杂的时候。下面小编将和大家讲解库存出入库管理业务流程图制作方法。
画流程图前需要做什么?1.整个流程的起始点是什么?
2.整个流程的中街店是什么?
3.在整个流程中,涉及到的角色都是谁?
4.在整个流程中,都需要做什么事情?
5.在流程会议和任务中是可选还是不可选的?
6.每个环节分别产生什么文档?怎么画一个流程图?
认识工具之前我们先了解一下流程图中图形符号的定义,为了使事情描述变得简单一点,真正发挥画图的优势,我们有必要做一个规范,赋予不同的图形不同的含义和属性。常见流程图基础结构:
使用工具:
迅捷画图
电脑实用系数:☆☆☆☆☆
操作步骤:
1.流程图框架搭建
在绘制流程图时我们首先要做的就是对节点进行添加使用,添加节点多少是围绕主题中心内容的扩展多少进行搭建,所以要提前进行规划。2.流程图框架颜色更换
流程图的框架银色是可以进行更换的,单击画布空白处,在右边出现的工具栏中可以根据自己的喜好进行颜色的更换3.怎样在流程图中添加链接、图片等
制作流程图有时需要让其中内容更加丰富可以选择添加图片或者是链接,这样在使用的时候也是很方便的,那要怎样操作呢?在画布上方选择插入选项,可以直接对其进行添加使用。4.绘制完整的流程图导出PNG、PDF格式
一般绘制完成的流程图可以进行导出使用也可以选择储存在绘制软件中进行在线使用,那导出png、PDF格式要怎样操作呢?在导出选项中选择png、PDF格式进行导出使用就可以。以上就是绘制库存出入库管理业务流程图,过程阐述的很详细,需要的朋友可以根据上述步骤进行操作哦!
-
仓库工作流程及出入库管理流程图.pdf
2021-10-14 18:59:04仓库工作流程及出入库管理流程图.pdf -
成品出入库管理流程图.doc
2021-10-12 19:21:45成品出入库管理流程图.doc -
工厂仓库日常管理规定、工作流程图、入库单、出库单、明细表.doc
2021-09-25 15:22:30工厂仓库日常管理规定、工作流程图、入库单、出库单、明细表.doc -
物资有效入库管理流程图.doc
2021-09-21 10:16:23物资有效入库管理流程图.doc -
用友U8总体流程图
2012-04-26 16:32:39用友U8总体流程图,visio格式,打不开的去下visio -
书店进书的业务流程图和数据流程图
2012-06-27 23:25:22详细的书店进书业务的业务流程图和数据流程图,希望对你有帮助 -
物控部仓库流程图大全,原材料入库流程,低值易耗品出入库流程,成品仓库出入库流程等.pdf
2021-10-04 06:57:03物控部仓库流程图大全,原材料入库流程,低值易耗品出入库流程,成品仓库出入库流程等.pdf -
出入库标准流程
2020-12-15 16:17:53物流采购若是能降低其过程成本,使其达到令人满意的服务水平那便是极为成功的,而出入库标准流程可以给你...该文档为出入库标准流程,是一份很不错的参考资料,具有较高参考价值,感兴趣的可以下载看看 -
经典进销存流程图
2013-11-28 17:34:03经典进销存流程图 ERP进销存 生产 财务一般流程 -
Erp,设计流程图,数据流程图,业务流程图,功能模块图
2010-01-15 16:01:56图29.2 JIT计划管理数据流程图(第二层数据流程图) 28 图29.3 JIT系统维护数据流程图(第二层数据流程图) 29 图29.4 JIT生产管理数据流程图(第二层数据流程图) 29 图29.5 JIT系统实体关系图 30 图29.6 JIT功能... -
本人原创并在使用中的一般仓库入库流程,含具体流程图.doc
2021-10-26 17:07:52本人原创并在使用中的一般仓库入库流程,含具体流程图.doc -
销售部销售出库业务标准流程
2020-12-18 23:50:24销售部销售出库业务标准流程以规范化构造端到端的卓越业务流程为中心,致力于打造最强、最好的销售部销售...该文档为销售部销售出库业务标准流程,是一份很不错的参考资料,具有较高参考价值,感兴趣的可以下载看看 -
软件开发流程图模板
2020-08-10 22:59:06