基於Vue的任務節點圖繪製插件（vue-task-node）

簡介：

在線Demo https://codesandbox.io/s/9413yop49r
vue-task-node 是一個基於Vue的任務節點圖繪製插件（vue-task-node is a Vue based task node mapping plug-in）

首先來張圖展示一下

❤MyHome:🏡

github：https://github.com/Liwengbin

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

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

npm：https://www.npmjs.com/~liwenbing
✉：[email protected]

一、安裝

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;
}
-->

五、版本

版本	說明	更新時間	是否支持拖拽
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感興趣就聯繫我和我一起開發他吧😘

感謝您看到最後！

基於Vue的任務節點圖繪製插件（vue-task-node）

簡介：

一、安裝

二、引入

三、教程

四、Demo

五、版本

六、未來新版本

七、結語

線程池工具類的封裝

基於Vue的任務節點圖繪製插件（vue-task-node）

中級工程師之路

Java枚舉類學習到進階

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結