基于Vue的任务节点图绘制插件（vue-task-node）

栏目: 编程语言 · 发布时间: 5年前

内容简介：首先来张图展示一下❤MyHome::house_with_garden:

简介：

在线Demo https://codesandbox.io/s/9413yop49r

vue-task-node 是一个基于Vue的任务节点图绘制插件（vue-task-node is a Vue based task node mapping plug-in）

首先来张图展示一下

基于Vue的任务节点图绘制插件（vue-task-node）

❤MyHome::house_with_garden:

github： https://github.com/Liwengbin

思否： https://segmentfault.com/u/vi...

掘金： https://juejin.im/user/5bd967...

npm： https://www.npmjs.com/~liwenbing

✉：liwenbingmsc@qq.com

一、安装

npm install vue-task-node -S

二、引入

import Vue from 'vue'
import VueTaskNode from 'vue-task-node'
Vue.use(VueTaskNode)

三、教程

①工作区

<task-work-area style="width: 900px;height: 600px">
    <!--需要绘制的节点-->
</task-work-area>

参数	说明	类型	是否必填
id	工作区ID	String/Number	必填
style	高度和宽度必修设置	Number	必填

②Node节点

组件

<task-start-end-node :selectNode="selectNode" mousemenu="menu_id" :node="node"></task-start-end-node>

需要的数据

node:{
  id: 'node1',
  icon: 'icon-task-chucun',
  title: '数据',
  state: 'success',
  positionX: 400,
  positionY: 100,
  inports: [
      id: 'node1_in1',
      isConnected: true //true->有数据输入；false->无数据输入
  ],
  outports: [
    {
      id: 'node1_out1',
      content: 'xml'
    }
  ]
}

参数	说明	类型	是否必填
selectNode	选中节点回调函数	function(event,node)	否
mousemenu	鼠标右击弹出菜单ID	<task-mouse-menu>的ID	必填
node	节点数据	Json	必填

③节点间的链接线

组件

<task-path :start="{x:150,y:300}" :end="{x:300,y:400}"></task-path>

<task-curve-path areaID='area' :connection="connection"></task-curve-path>

需要的数据

法一的数据：
start:{x:150,y:300} //起点坐标
end:{x:300,y:400} //终点坐标
法二的数据：
connection: [
  {
    start: 'node1_out1',//输出节点的id
    end: 'node2_in1'//输入节点的id
  },
  {
    start: 'node2_out2',
    end: 'node4_in1'
  },
  {
    start: 'node4_out1',
    end: 'node3_in1'
  },
  {
    start: 'node4_out2',
    end: 'node5_in1'
  },
  {
    start: 'node4_out2',
    end: 'data_in1'
  },
  {
    start: 'data_out1',
    end: 'node6_in1'
  }
]

<task-curve-path>

参数	说明	类型	是否必填
areaID	工作区ID	<task-work-area>的ID	必填
connection	关系数据	Array	必填

<task-path>

参数	说明	类型	是否必填
start	起点坐标	Number	必填
end	终点坐标	Number	必填

④鼠标右击节点菜单

<task-mouse-menu id="menu_id">
        <task-mouse-item :selectClick="updateNode" icon="icon-task-fuzhi" :mouse="{id:'xg',title:'修改'}"></task-mouse-item>
      </task-mouse-menu>

数据格式

mouse:{id:'xg',title:'修改'}

<task-mouse-menu>

参数	说明	类型	是否必填
id	右键菜单ID	String/Number	必填

<task-mouse-item>

参数	说明	类型	是否必填
icon	被选项图标	css 类	否
selectClick	点击备选项回调函数	function(event,select)	必填
mouse	数据	Json	必填

⑤输入/输出节点 List

<task-in-port-list :inports="[{id:'data_in1',isConnected:true}]">
    <task-in-port pid="data_in5"></task-in-port>
</task-in-port-list>
<task-out-port-list :outports="[{id:'data_out1',content:'表格'}]">
    <task-out-port pid="data_out5"></task-out-port>
</task-out-port-list>

四、Demo

<template>
  <div id="app">
    <div class="hello" style="text-align: center">
      <task-work-area id="area" style="width: 900px;height: 800px;display: inline-block;">

        <task-curve-path areaID='area' :connection="connection"></task-curve-path>
        <!--<task-path :start="{x:150,y:300}" :end="{x:300,y:400}"></task-path>-->

        <template v-for="node in nodes">
          <task-start-end-node :selectNode="selectNode" mousemenu="menu_id" :node="node"></task-start-end-node>
        </template>


        <task-start-end-node mousemenu="menu_id" :node="{id:'node6',icon:'icon-task-get',title:'数据分组',state:'mistake',positionX:400,positionY:500}">
          <task-in-port-list :inports="[{id:'data_in1',isConnected:true}]">
            <task-in-port pid="data_in5"></task-in-port>
          </task-in-port-list>
          <task-out-port-list :outports="[{id:'data_out1',content:'表格'}]">
            <task-out-port pid="data_out5"></task-out-port>
          </task-out-port-list>
        </task-start-end-node>

      </task-work-area>

      <task-mouse-menu id="menu_id">
        <task-mouse-item :selectClick="updateNode" icon="icon-task-fuzhi"
                         :mouse="{id:'xg',title:'修改'}"></task-mouse-item>
        <task-mouse-item :selectClick="findNode" icon="icon-task-yulan" :mouse="{id:'ck',title:'查看'}"></task-mouse-item>
        <task-mouse-item :selectClick="removeNode" icon="icon-task-shanchu"
                         :mouse="{id:'sc',title:'删除'}"></task-mouse-item>
        <task-mouse-item :selectClick="copyNode" icon="icon-task-jishufuwu"
                         :mouse="{id:'fz',title:'复制'}"></task-mouse-item>
        <task-mouse-item :selectClick="bugNode" icon="icon-task-sx-bug"
                         :mouse="{id:'bug',title:'Bug'}"></task-mouse-item>
      </task-mouse-menu>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'App',
    data() {
      return {
        nodes: [{
          id: 'node1', icon: 'icon-task-chucun', title: '数据', state: 'success', positionX: 400, positionY: 100,
          inports: [],
          outports: [{id: 'node1_out1',content: 'xml'}]
        },{
          id: 'node2', icon: 'icon-task-liujisuan', title: '数据格式化', state: 'success', positionX: 400, positionY: 200,
          inports: [{id: 'node2_in1', isConnected: true}],
          outports: [{id: 'node2_out1', content: '表格'}, {id: 'node2_out2', content: 'Json'}, {
            id: 'node2_out3',
            content: 'xml'
          }]
        },{
          id: 'node3', icon: 'icon-task-tubiao-zhexiantu', title: '折线图', state: 'ready', positionX: 200, positionY: 500,
          inports: [{id: 'node3_in1', isConnected: true}, {id: 'node3_in2', isConnected: false}],
          outports: []
        },{
          id: 'node4', icon: 'icon-task-shenjing1', title: '天气预测', state: 'running', positionX: 400, positionY: 300,
          inports: [{id: 'node4_in1', isConnected: true}],
          outports: [{id: 'node4_out1', content: '表格'}, {id: 'node4_out2', content: 'Json'}, {
            id: 'node4_out3',
            content: 'xml'
          }]
        },{
          id: 'node5', icon: 'icon-task-ranqijiance', title: '雷达图', state: 'success', positionX: 600, positionY: 500,
          inports: [{id: 'node5_in1', isConnected: true}],
          outports: []
        },{
          id: 'node6', icon: 'icon-task-tubiao-zhuzhuangtu', title: '条形图', state: 'ready', positionX: 400, positionY: 600,
          inports: [{id: 'node6_in1', isConnected: true}],
          outports: []
        }],
        connection: [{start: 'node1_out1', end: 'node2_in1'},{start: 'node2_out2', end: 'node4_in1'},{start: 'node4_out1', end: 'node3_in1'},{start: 'node4_out2', end: 'node5_in1'},{start: 'node4_out2', end: 'data_in1'},{start: 'data_out1', end: 'node6_in1'}]
      }
    },
    methods: {
      updateNode: function (event, select) {
        console.log(event, select);
      },
      findNode: function (event, select) {
        console.log(event, select);
      },
      removeNode: function (event, select) {
        console.log(event, select);
      },
      copyNode: function (event, select) {
        console.log(event, select);
      },
      bugNode: function (event, select) {
        console.log(event, select);
      },
      selectNode(event, node) {
        console.log(event, node);
      }
    }
  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    padding: 50px;
    background-color: #cccccc;
  }
</style>


<!--
.icon {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-task"], [class*=" icon-task"] {
  font-family:"iconfont" !important;
  /* 以下内容参照第三方图标库本身的规则 */
  font-size: 18px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
-->

基于Vue的任务节点图绘制插件（vue-task-node）

五、版本

版本	说明	更新时间	是否支持拖拽
1.0.0	开端,根据数据绘制任务节点	2019年1月16日	否
1.0.1	修改代码规范Eslin	2019年1月17日	否
1.0.2	调试入口文件	2019年1月17日	否
1.0.3	npm下载包错误修改	2019年1月17日	否
1.0.x	优化配置文件	2019年1月x日	否

六、未来新版本

1.1.0 版本需求

①工作区内节点拖拽

②优化传参和公共属性

七、结语

原文在 GitHub

如果觉得对你有帮助希望能给我一个小小的 start vue-task-node

如过你对 vue-task-node 感兴趣就联系我和我一起开发他吧:kissing_heart:

感谢您看到最后！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

跨越

Lydia / 人民文学出版社 / 2018-4-1 / 39

三跨青年Lydia的一线奋斗笔记，抛却艰深理论，用亲身经验为你打通任督二脉。揭开思维认知盲区，剖析成长潜在技巧，探知进阶背后逻辑，在拐点到来的时刻，推动人生加速上行。 10大职场潜在成长技巧，13种打破思维认知的的碎片重建，15种正确面对情感的能量释放， 38篇有世界观，有方法论的故事，为你打开上升通道。停留在思维层面的改变人生，其实已然陷入困境，人生上行的实......一起来看看《跨越》这本书的介绍吧!

码农工具