├── babel.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   ├── edit.png
    │   ├── flow.png
    │   ├── logo.png
    │   ├── delete.png
    │   ├── icon-ask.png
    │   ├── logo copy.png
    │   ├── node-img.png
    │   ├── icon-single.png
    │   ├── node-close.png
    │   ├── node-timer.png
    │   ├── block-preview.png
    │   ├── icon-multiple.png
    │   ├── icon-operation.png
    │   ├── icon-trigger.png
    │   ├── grid-background.png
    │   └── icon-destination.png
    ├── router.js
    ├── main.js
    ├── components
    │   ├── node
    │   │   ├── destinationNode.vue
    │   │   ├── singleNode.vue
    │   │   ├── askNode.vue
    │   │   ├── operationNode.vue
    │   │   ├── multipleNode.vue
    │   │   └── triggerNode.vue
    │   ├── miniView
    │   │   └── miniView.vue
    │   ├── tool.vue
    │   ├── node_form.vue
    │   ├── node.vue
    │   └── jumpRelationContainer
    │   │   └── jumpRelationContainer.vue
    ├── store.js
    ├── App.vue
    ├── utils
    │   ├── util.js
    │   └── filter.js
    ├── scss
    │   └── node.scss
    └── views
    │   └── Home.vue
├── .editorconfig
├── .gitignore
├── vue.config.js
├── README.md
└── package.json


/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lee-won/vue-jsPlumb-case/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/edit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lee-won/vue-jsPlumb-case/HEAD/src/assets/edit.png


--------------------------------------------------------------------------------
/src/assets/flow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lee-won/vue-jsPlumb-case/HEAD/src/assets/flow.png


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lee-won/vue-jsPlumb-case/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/delete.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lee-won/vue-jsPlumb-case/HEAD/src/assets/delete.png


--------------------------------------------------------------------------------
/src/assets/icon-ask.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lee-won/vue-jsPlumb-case/HEAD/src/assets/icon-ask.png


--------------------------------------------------------------------------------
/src/assets/logo copy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lee-won/vue-jsPlumb-case/HEAD/src/assets/logo copy.png


--------------------------------------------------------------------------------
/src/assets/node-img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lee-won/vue-jsPlumb-case/HEAD/src/assets/node-img.png


--------------------------------------------------------------------------------
/src/assets/icon-single.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lee-won/vue-jsPlumb-case/HEAD/src/assets/icon-single.png


--------------------------------------------------------------------------------
/src/assets/node-close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lee-won/vue-jsPlumb-case/HEAD/src/assets/node-close.png


--------------------------------------------------------------------------------
/src/assets/node-timer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lee-won/vue-jsPlumb-case/HEAD/src/assets/node-timer.png


--------------------------------------------------------------------------------
/src/assets/block-preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lee-won/vue-jsPlumb-case/HEAD/src/assets/block-preview.png


--------------------------------------------------------------------------------
/src/assets/icon-multiple.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lee-won/vue-jsPlumb-case/HEAD/src/assets/icon-multiple.png


--------------------------------------------------------------------------------
/src/assets/icon-operation.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lee-won/vue-jsPlumb-case/HEAD/src/assets/icon-operation.png


--------------------------------------------------------------------------------
/src/assets/icon-trigger.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lee-won/vue-jsPlumb-case/HEAD/src/assets/icon-trigger.png


--------------------------------------------------------------------------------
/src/assets/grid-background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lee-won/vue-jsPlumb-case/HEAD/src/assets/grid-background.png


--------------------------------------------------------------------------------
/src/assets/icon-destination.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lee-won/vue-jsPlumb-case/HEAD/src/assets/icon-destination.png


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Home from './views/Home.vue'
 4 | 
 5 | Vue.use(Router)
 6 | 
 7 | export default new Router({
 8 |     // mode: 'history',
 9 |     base: process.env.BASE_URL,
10 |     routes: [{
11 |         path: '/',
12 |         name: 'home',
13 |         component: Home
14 |     }]
15 | })


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack')
 2 | module.exports = {
 3 |     lintOnSave: false,
 4 |     configureWebpack: {
 5 |         plugins: [
 6 |             new webpack.ProvidePlugin({
 7 |                 $: 'jquery',
 8 |                 jQuery: 'jquery',
 9 |                 'windows.jQuery': 'jquery',
10 |                 Popper: ['popper.js', 'default']
11 |             })
12 |         ]
13 |     }
14 | }


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store'
 5 | import $ from 'jquery'
 6 | import '@/utils/filter'
 7 | 
 8 | import ElementUI from 'element-ui'
 9 | import 'element-ui/lib/theme-chalk/index.css'
10 | 
11 | Vue.use(ElementUI)
12 | 
13 | Vue.config.productionTip = false
14 | 
15 | new Vue({
16 |     router,
17 |     store,
18 |     render: h => h(App)
19 | }).$mount('#app')


--------------------------------------------------------------------------------
/src/components/node/destinationNode.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="node-content">
 3 |     跳转到下个意图
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |   data () {
 9 |     return {}
10 |   },
11 |   props: {
12 |     node: {
13 |       type: Object,
14 |       default: function () {
15 |         return {}
16 |       }
17 |     }
18 |   }
19 | }
20 | </script>
21 | <style lang="scss" scoped>
22 | .node-content {
23 |   font-size: 12px;
24 |   font-weight: 700;
25 | }
26 | </style>
27 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>js-plumb</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but js-plumb doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ### 该项目模仿的是某机器人供应商关于多轮聊天的流程配置功能。虽然阉割了大量的业务逻辑功能，但是关于 jsPlumb 的实际应用还是很全面的。
 2 | 
 3 | ![img](https://github.com/lee-won/vue-jsPlumb-case/blob/master/src/assets/flow.png)
 4 | 
 5 | ## Project setup
 6 | 
 7 | ```
 8 | npm install
 9 | ```
10 | 
11 | ### Compiles and hot-reloads for development
12 | 
13 | ```
14 | npm run serve
15 | ```
16 | 
17 | ### Compiles and minifies for production
18 | 
19 | ```
20 | npm run build
21 | ```
22 | 
23 | ### Run your tests
24 | 
25 | ```
26 | npm run test
27 | ```
28 | 
29 | ### Lints and fixes files
30 | 
31 | ```
32 | npm run lint
33 | ```
34 | 
35 | ### Customize configuration
36 | 
37 | See [Configuration Reference](https://cli.vuejs.org/config/).
38 | 


--------------------------------------------------------------------------------
/src/components/miniView/miniView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="mini-View">
 3 |     <div class="window-view"></div>
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 | 
 9 | }
10 | </script>
11 | <style lang="scss" scoped>
12 | .mini-View {
13 |   width: 192px;
14 |   height: 108px;
15 |   position: fixed;
16 |   bottom: 48px;
17 |   left: 310px;
18 |   border-radius: 4px;
19 |   background-color: rgba(66, 91, 109, 0.2);
20 |   z-index: 4;
21 |   .window-view {
22 |     width: 38.4px;
23 |     height: 20px;
24 |     left: 0px;
25 |     top: 0px;
26 |     position: absolute;
27 |     top: 0;
28 |     left: 0;
29 |     border-radius: 4px;
30 |     background: #b3bdc5;
31 |     cursor: pointer;
32 |   }
33 | }
34 | </style>
35 | 


--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | export default new Vuex.Store({
 7 |     state: {
 8 |         nodeList: [],
 9 |         scrollPosition: {}
10 |     },
11 |     getters: {
12 |         getNodeList: state => {
13 |             return state.nodeList
14 |         },
15 |         getScrollPosition: state => {
16 |             return state.scrollPosition
17 |         }
18 |     },
19 |     mutations: {
20 |         setNodeList(state, payload) {
21 |             state.nodeList = payload
22 |         },
23 |         setScrollPosition(state, payload) {
24 |             state.scrollPosition = payload
25 |         }
26 |     },
27 |     actions: {
28 |         listenNodeListChange(context, payload) {
29 |             context.commit('setNodeList', payload)
30 |         },
31 |         listenScrollPosition(context, payload) {
32 |             context.commit('setScrollPosition', payload)
33 |         }
34 |     }
35 | })


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style lang="scss">
 8 | *{
 9 |   padding: 0;
10 |   margin:0;
11 | }
12 | #app {
13 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
14 |   -webkit-font-smoothing: antialiased;
15 |   -moz-osx-font-smoothing: grayscale;
16 |   text-align: center;
17 |   color: #2c3e50;
18 | 
19 | }
20 | #nav {
21 |   padding: 30px;
22 |   a {
23 |     font-weight: bold;
24 |     color: #2c3e50;
25 |     &.router-link-exact-active {
26 |       color: #42b983;
27 |     }
28 |   }
29 | }
30 | 
31 | #flowContianer .aLabel {
32 |     background-color: white;
33 |     width:24px;
34 |     height:24px;
35 |     border-radius: 12px;
36 |     font: 12px sans-serif;
37 |     color: #444;
38 |     z-index: 21;
39 |     border: 1px dotted gray;
40 |     opacity: 0.8;
41 |     cursor: pointer;
42 |     background:#fff url('./assets/delete.png')no-repeat center center;
43 | }
44 | </style>
45 | 


--------------------------------------------------------------------------------
/src/utils/util.js:
--------------------------------------------------------------------------------
 1 | export const util = {
 2 |     deepCopy(obj, cache = []) {
 3 |         function find(list, f) {
 4 |             return list.filter(f)[0]
 5 |         }
 6 |         // just return if obj is immutable value
 7 |         if (obj === null || typeof obj !== 'object') {
 8 |             return obj
 9 |         }
10 | 
11 |         // if obj is hit, it is in circular structure
12 |         const hit = find(cache, c => c.original === obj)
13 |         if (hit) {
14 |             return hit.copy
15 |         }
16 | 
17 |         const copy = Array.isArray(obj) ? [] : {}
18 |             // put the copy into cache at first
19 |             // because we want to refer it in recursive deepCopy
20 |         cache.push({
21 |             original: obj,
22 |             copy
23 |         })
24 | 
25 |         Object.keys(obj).forEach(key => {
26 |             copy[key] = this.deepCopy(obj[key], cache)
27 |         })
28 | 
29 |         return copy
30 |     },
31 |     getRandomId() {
32 |         return Math.random().toString().substring(3, 7)
33 |     }
34 | 
35 | }


--------------------------------------------------------------------------------
/src/components/node/singleNode.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="node-content"
 3 |        v-if="node.nodeData.slot">
 4 |     <div :id="item.id"
 5 |     :key="item.id"
 6 |          class="branch-jump"
 7 |          v-for="(item) in node.nodeData.branchJump">
 8 |       <span class="blue">{{node.nodeData.slot}}</span>
 9 |       <span class="gray">{{item.ruleEnumCode | setRuleEnumCode}}</span>
10 |       <span class="blue"> {{item.content}}</span>
11 |       <span class="visual-endpoint-dom"></span>
12 |     </div>
13 |     <div class="slot"
14 |          :id="node.nodeData.defaultJump.id">
15 |       <span class="gray">收集到 </span>
16 |       <span class="blue">{{node.nodeData.slot}}</span>
17 |       <span class="gray"> 时</span>
18 |       <span class="visual-endpoint-dom"></span>
19 |     </div>
20 |   </div>
21 | </template>
22 | <script>
23 | export default {
24 |   data () {
25 |     return {}
26 |   },
27 |   props: {
28 |     node: {
29 |       type: Object,
30 |       default: function () {
31 |         return {}
32 |       }
33 |     }
34 |   }
35 | }
36 | </script>
37 | <style lang="scss" scoped>
38 | @import "../../scss/node";
39 | </style>
40 | 


--------------------------------------------------------------------------------
/src/components/node/askNode.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="node-content"
 3 |        v-if="node.nodeData.slot">
 4 |     <div :id="item.id"
 5 |          :key="item.id"
 6 |          class="branch-jump"
 7 |          v-for="(item) in node.nodeData.branchJump">
 8 |       <span class="blue">{{node.nodeData.slot}}</span>
 9 |       <span class="gray">{{item.ruleEnumCode | setRuleEnumCode}}</span>
10 |       <span class="blue"> {{item.content}}</span>
11 |       <span class="visual-endpoint-dom"></span>
12 |     </div>
13 |     <div class="slot"
14 |          :id="node.nodeData.defaultJump.id">
15 |       <span class="gray">收集到 </span>
16 |       <span class="blue">{{node.nodeData.slot}}</span>
17 |       <span class="gray"> 时</span>
18 |       <span class="visual-endpoint-dom"></span>
19 |     </div>
20 |   </div>
21 | </template>
22 | <script>
23 | export default {
24 |   data () {
25 |     return {}
26 |   },
27 |   props: {
28 |     node: {
29 |       type: Object,
30 |       default: function () {
31 |         return {}
32 |       }
33 |     }
34 |   }
35 | }
36 | </script>
37 | <style lang="scss" scoped>
38 | @import "../../scss/node";
39 | </style>
40 | 


--------------------------------------------------------------------------------
/src/components/node/operationNode.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="node-content"
 3 |        v-if="node.nodeData.slot">
 4 |     <div :id="item.id"
 5 |     :key="item.id"
 6 |          class="branch-jump"
 7 |          v-for="(item) in node.nodeData.branchJump">
 8 |       <span class="blue">{{node.nodeData.slot}}</span>
 9 |       <span class="gray">{{item.ruleEnumCode | setRuleEnumCode}}</span>
10 |       <span class="blue"> {{item.content}}</span>
11 |       <span class="visual-endpoint-dom"></span>
12 |     </div>
13 |     <div class="slot"
14 |          :id="node.nodeData.defaultJump.id">
15 |       <span class="gray">收集到 </span>
16 |       <span class="blue">{{node.nodeData.slot}}</span>
17 |       <span class="gray"> 时</span>
18 |       <span class="visual-endpoint-dom"></span>
19 |     </div>
20 |   </div>
21 | </template>
22 | <script>
23 | export default {
24 |   data () {
25 |     return {}
26 |   },
27 |   props: {
28 |     node: {
29 |       type: Object,
30 |       default: function () {
31 |         return {}
32 |       }
33 |     }
34 |   }
35 | }
36 | </script>
37 | <style lang="scss" scoped>
38 | @import "../../scss/node";
39 | </style>
40 | 


--------------------------------------------------------------------------------
/src/components/node/multipleNode.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="node-content"
 3 |        v-if="node.nodeData.slot">
 4 |     <div :id="item.id"
 5 |          :key="item.id"
 6 |          class="branch-jump"
 7 |          v-for="(item) in node.nodeData.branchJump">
 8 |       <span class="blue">{{node.nodeData.slot}}</span>
 9 |       <span class="gray">{{item.ruleEnumCode | setRuleEnumCode}}</span>
10 |       <span class="blue"> {{item.content}}</span>
11 |       <span class="visual-endpoint-dom"></span>
12 |     </div>
13 |     <div class="slot"
14 |          :id="node.nodeData.defaultJump.id">
15 |       <span class="gray">收集到 </span>
16 |       <span class="blue">{{node.nodeData.slot}}</span>
17 |       <span class="gray"> 时</span>
18 |       <span class="visual-endpoint-dom"></span>
19 |     </div>
20 |   </div>
21 | </template>
22 | <script>
23 | export default {
24 |   data () {
25 |     return {}
26 |   },
27 |   props: {
28 |     node: {
29 |       type: Object,
30 |       default: function () {
31 |         return {}
32 |       }
33 |     }
34 |   }
35 | }
36 | </script>
37 | <style lang="scss" scoped>
38 | @import "../../scss/node";
39 | </style>
40 | 


--------------------------------------------------------------------------------
/src/scss/node.scss:
--------------------------------------------------------------------------------
 1 | .node-content {
 2 |     .gray {
 3 |         font-size: 12px;
 4 |         color: #687c8a;
 5 |         font-weight: bold;
 6 |         margin-right: 10px;
 7 |     }
 8 |     .blue {
 9 |         font-size: 12px;
10 |         color: rgb(31, 119, 243);
11 |         font-weight: bold;
12 |         margin-right: 10px;
13 |     }
14 |     .slot,
15 |     .branch-jump {
16 |         text-align: left;
17 |         height: 30px;
18 |         display: flex;
19 |         align-items: center;
20 |         padding: 0 10px;
21 |         position: relative;
22 |         &:hover {
23 |             background: #eee;
24 |             .visual-endpoint-dom {
25 |                 background: rgb(31, 119, 243);
26 |                 border: none;
27 |             }
28 |         }
29 |         .visual-endpoint-dom {
30 |             position: absolute;
31 |             top: 50%;
32 |             right: -8px;
33 |             width: 14px;
34 |             height: 14px;
35 |             margin-top: -9px;
36 |             border-width: 3px;
37 |             border-style: solid;
38 |             border-color: rgb(142, 156, 168);
39 |             border-image: initial;
40 |             border-radius: 8px;
41 |             background: rgb(255, 255, 255);
42 |             box-sizing: border-box;
43 |         }
44 |     }
45 | }


--------------------------------------------------------------------------------
/src/components/node/triggerNode.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="node-content">
 3 |     <div class="content"
 4 |          :id="node.nodeData.defaultJump.id">
 5 |       <img class="icon"
 6 |            :src="node.icon" />
 7 |       <span>{{node.name}}</span>
 8 |       <span class="visual-endpoint-dom"></span>
 9 |     </div>
10 | 
11 |   </div>
12 | </template>
13 | <script>
14 | export default {
15 |   data () {
16 |     return {}
17 |   },
18 |   props: {
19 |     node: {
20 |       type: Object,
21 |       default: function () {
22 |         return {}
23 |       }
24 |     }
25 |   }
26 | }
27 | </script>
28 | <style lang="scss" scoped>
29 | .node-content {
30 |   font-size: 12px;
31 |   font-weight: 700;
32 |   .content {
33 |     height: 40px;
34 |     display: flex;
35 |     align-items: center;
36 |   }
37 |   .icon {
38 |     width: 20px;
39 |     height: 20px;
40 |     margin: 0 10px;
41 |   }
42 |   .visual-endpoint-dom {
43 |     position: absolute;
44 |     top: 50%;
45 |     right: -8px;
46 |     width: 14px;
47 |     height: 14px;
48 |     margin-top: -9px;
49 |     border-width: 3px;
50 |     border-style: solid;
51 |     border-color: rgb(142, 156, 168);
52 |     border-image: initial;
53 |     border-radius: 8px;
54 |     background: rgb(255, 255, 255);
55 |     box-sizing: border-box;
56 |     &:hover {
57 |       background: rgb(31, 119, 243);
58 |       border: none;
59 |     }
60 |   }
61 | }
62 | </style>
63 | 


--------------------------------------------------------------------------------
/src/utils/filter.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | const conditions = [{
 3 |         value: 1,
 4 |         label: '等于'
 5 |     },
 6 |     {
 7 |         value: 2,
 8 |         label: '不等于'
 9 |     },
10 |     {
11 |         value: 3,
12 |         label: '大于'
13 |     },
14 |     {
15 |         value: 4,
16 |         label: '大于等于'
17 |     },
18 |     {
19 |         value: 5,
20 |         label: '小于'
21 |     },
22 |     {
23 |         value: 6,
24 |         label: '小于等于'
25 |     },
26 |     {
27 |         value: 7,
28 |         label: '包含'
29 |     },
30 |     {
31 |         value: 8,
32 |         label: '不包含'
33 |     },
34 |     {
35 |         value: 9,
36 |         label: '属于实体'
37 |     },
38 |     {
39 |         value: 10,
40 |         label: '不属于实体'
41 |     },
42 |     {
43 |         value: 11,
44 |         label: '符合正则'
45 |     },
46 |     {
47 |         value: 12,
48 |         label: '不符合正则'
49 |     },
50 |     {
51 |         value: 13,
52 |         label: '不满足条件'
53 |     },
54 |     {
55 |         value: 500,
56 |         label: '异常'
57 |     },
58 |     {
59 |         value: 200,
60 |         label: '有结果'
61 |     },
62 |     {
63 |         value: 201,
64 |         label: '无结果'
65 |     }
66 | ]
67 | Vue.filter('setRuleEnumCode', (code) => {
68 |     const temp = conditions.filter((item) => {
69 |         return item.value === code
70 |     })
71 |     console.log(code, temp, 1111)
72 | 
73 |     return temp[0].label
74 | })


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "js-plumb",
 3 |     "version": "0.1.0",
 4 |     "private": true,
 5 |     "scripts": {
 6 |         "serve": "vue-cli-service serve",
 7 |         "build": "vue-cli-service build",
 8 |         "lint": "vue-cli-service lint"
 9 |     },
10 |     "dependencies": {
11 |         "core-js": "^2.6.5",
12 |         "element-ui": "^2.12.0",
13 |         "jquery": "^3.4.1",
14 |         "jsplumb": "^2.9.2",
15 |         "vue": "^2.6.10",
16 |         "vue-router": "^3.0.3",
17 |         "vuedraggable": "^2.23.1",
18 |         "vuex": "^3.0.1"
19 |     },
20 |     "devDependencies": {
21 |         "@vue/cli-plugin-babel": "^3.11.0",
22 |         "@vue/cli-plugin-eslint": "^3.11.0",
23 |         "@vue/cli-service": "^3.11.0",
24 |         "@vue/eslint-config-standard": "^4.0.0",
25 |         "babel-eslint": "^10.0.1",
26 |         "eslint": "^5.16.0",
27 |         "eslint-plugin-vue": "^5.0.0",
28 |         "node-sass": "^4.9.0",
29 |         "sass-loader": "^7.1.0",
30 |         "vue-template-compiler": "^2.6.10"
31 |     },
32 |     "eslintConfig": {
33 |         "root": true,
34 |         "env": {
35 |             "node": true,
36 |             "jquery": true
37 |         },
38 |         "extends": [
39 |             "plugin:vue/essential",
40 |             "@vue/standard"
41 |         ],
42 |         "rules": {},
43 |         "parserOptions": {
44 |             "parser": "babel-eslint"
45 |         }
46 |     },
47 |     "postcss": {
48 |         "plugins": {
49 |             "autoprefixer": {}
50 |         }
51 |     },
52 |     "browserslist": [
53 |         "> 1%",
54 |         "last 2 versions"
55 |     ]
56 | }
57 | 


--------------------------------------------------------------------------------
/src/components/tool.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="menu">
  3 | <draggable v-for="(item,index) in navData"
  4 |                :key="index"
  5 |                @end="addNode"
  6 |                @choose="move(index)"
  7 |                v-bind="draggableOptions">
  8 |       <div class="item">
  9 |         <img :src="item.icon">
 10 |         <span>{{item.name}}</span>
 11 |       </div>
 12 |     </draggable>
 13 | </div>
 14 | </template>
 15 | <script>
 16 | import draggable from 'vuedraggable'
 17 | 
 18 | var mousePosition = {
 19 |   left: -1,
 20 |   top: -1
 21 | }
 22 | export default {
 23 |   data () {
 24 |     return {
 25 |       navData: [
 26 |         {
 27 |           icon: require('../assets/icon-ask.png'),
 28 |           name: '询问填槽单元',
 29 |           type: 'askNode'
 30 |         },
 31 |         {
 32 |           icon: require('../assets/icon-single.png'),
 33 |           name: '单槽接口单元',
 34 |           type: 'singleNode'
 35 |         },
 36 |         {
 37 |           icon: require('../assets/icon-multiple.png'),
 38 |           name: '多槽接口单元',
 39 |           type: 'multipleNode'
 40 |         },
 41 |         {
 42 |           icon: require('../assets/icon-operation.png'),
 43 |           name: '词槽运算单元',
 44 |           type: 'operationNode'
 45 |         },
 46 |         {
 47 |           icon: require('../assets/icon-destination.png'),
 48 |           name: '意图终点单元',
 49 |           type: 'destinationNode'
 50 |         }
 51 |       ],
 52 |       draggableOptions: {
 53 |         preventOnFilter: false
 54 |       },
 55 |       defaultOpeneds: ['group0', 'group1'],
 56 |       type: '' // 模块类型
 57 |     }
 58 |   },
 59 |   components: {
 60 |     draggable
 61 |   },
 62 |   created () {
 63 |     /**
 64 |              * 以下是为了解决在火狐浏览器上推拽时弹出tab页到搜索问题
 65 |              * @param event
 66 |              */
 67 |     if (this.isFirefox()) {
 68 |       document.body.ondrop = function (event) {
 69 |         // 解决火狐浏览器无法获取鼠标拖拽结束的坐标问题
 70 |         mousePosition.left = event.layerX
 71 |         mousePosition.top = event.clientY - 50
 72 |         event.preventDefault()
 73 |         event.stopPropagation()
 74 |       }
 75 |     }
 76 |   },
 77 |   methods: {
 78 |     // 根据类型获取左侧菜单对象
 79 |     move (type) {
 80 |       this.type = type
 81 |     },
 82 | 
 83 |     // 添加节点
 84 |     addNode (evt, e) {
 85 |       console.log(evt, e)
 86 |       this.$emit('addNode', evt, this.navData[this.type], mousePosition)
 87 |     },
 88 |     // 是否是火狐浏览器
 89 |     isFirefox () {
 90 |       var userAgent = navigator.userAgent
 91 |       if (userAgent.indexOf('Firefox') > -1) {
 92 |         return true
 93 |       }
 94 |       return false
 95 |     }
 96 |   }
 97 | }
 98 | </script>
 99 | <style lang="scss" scoped>
100 |    .menu {
101 |     width: inherit;
102 |     height: 100%;
103 |     display: inline-block;
104 |    .item {
105 |     position: relative;
106 |     width: 230px;
107 |     height: 72px;
108 |     box-shadow: rgb(236, 238, 240) 0px -1px 0px 0px inset;
109 |     line-height: 72px;
110 |     text-align: center;
111 |     box-sizing: border-box;
112 |     cursor: pointer;
113 |     background: rgb(255, 255, 255);
114 |     transition: all 0.3s ease 0s;
115 |     color: rgb(0, 0, 0);
116 |     font-family: PingFang-SC;
117 |     font-size: 14px;
118 |     font-weight: bold;
119 |     display: flex;
120 |     align-items: center;
121 |     justify-content: center;
122 |     img {
123 |       width: 20px;
124 |       height: 20px;
125 |       margin-right: 20px;
126 |     }
127 |     &:hover {
128 |       box-shadow: rgba(66, 91, 109, 0.4) 0px 4px 8px 0px;
129 |       z-index: 1;
130 |       transform: scale(1.02);
131 |     }
132 |   }
133 |   }
134 | </style>
135 | 


--------------------------------------------------------------------------------
/src/components/node_form.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <el-drawer :visible.sync="visible"
  3 |              direction="ltr"
  4 |              :show-close="false"
  5 |              :before-close="handleClose"
  6 |              ref="drawer">
  7 |     <template slot="title">
  8 |       <div class="header">
  9 |         <div class="header-left">{{node.name}}</div>
 10 |         <div class="header-right">
 11 |           <el-button size="medium"
 12 |                      @click="visible=false">取消</el-button>
 13 |           <el-button type="primary"
 14 |                      size="medium"
 15 |                      @click="save">保存</el-button>
 16 |         </div>
 17 |       </div>
 18 |     </template>
 19 |     <div class="container">
 20 |       <el-collapse v-model="activeNames"
 21 |                    @change="handleChange">
 22 |         <el-collapse-item title="基础配置"
 23 |                           name="1">
 24 |           <div class="label-wrap">
 25 |             <div class="label-name">询问单元</div>
 26 |             <el-input size="medium"
 27 |                       v-model="node.name"></el-input>
 28 |           </div>
 29 |           <div class="label-wrap"
 30 |                v-if="node.nodeData">
 31 |             <div class="label-name">关联词槽</div>
 32 |             <el-select size="medium"
 33 |                        v-model="node.nodeData.slot"
 34 |                        placeholder="请选择"
 35 |                        clearable
 36 |                        style="width:100%;">
 37 |               <el-option v-for="item in options"
 38 |                          :key="item.value"
 39 |                          :label="item.label"
 40 |                          :value="item.value">
 41 |               </el-option>
 42 |             </el-select>
 43 |           </div>
 44 |         </el-collapse-item>
 45 |         <el-collapse-item title="跳转关系"
 46 |                           name="2">
 47 |           <div class="label-wrap">
 48 |             <jumpRelationContainer :node="node"></jumpRelationContainer>
 49 |           </div>
 50 |         </el-collapse-item>
 51 |       </el-collapse>
 52 |     </div>
 53 |   </el-drawer>
 54 | 
 55 | </template>
 56 | 
 57 | <script>
 58 | import { util } from '../utils/util'
 59 | import jumpRelationContainer from './jumpRelationContainer/jumpRelationContainer'
 60 | export default {
 61 |   components: {
 62 |     jumpRelationContainer
 63 |   },
 64 |   data () {
 65 |     return {
 66 |       activeNames: ['1', '2', '3', '4'],
 67 |       visible: false,
 68 |       node: {},
 69 |       options: [{
 70 |         value: '姓名',
 71 |         label: '姓名'
 72 |       }, {
 73 |         value: '手机号',
 74 |         label: '手机号'
 75 |       }, {
 76 |         value: '确认信息',
 77 |         label: '确认信息'
 78 |       }, {
 79 |         value: '身份',
 80 |         label: '身份'
 81 |       }],
 82 |       value: ''
 83 |     }
 84 |   },
 85 |   methods: {
 86 |     // 深复制
 87 |     init (node, bool) {
 88 |       this.visible = bool
 89 |       this.node = util.deepCopy(node)
 90 |       console.log(this.node)
 91 |     },
 92 |     addMessage (index) {
 93 |       if (index !== this.node.messageArr.length - 1) return
 94 |       console.log('enter')
 95 |       this.node.messageArr.push(this.getMessageItem())
 96 |     },
 97 |     getMessageItem () {
 98 |       return { text: '', hasEndPoint: false }
 99 |     },
100 |     handleChange (val) {
101 |       console.log(val)
102 |     },
103 |     handleClose () { },
104 |     save () {
105 |       if (this.node.nodeData.branchJump.length) {
106 |         const index = this.node.nodeData.branchJump.findIndex((item) => {
107 |           return !item.ruleEnumCode || !item.content
108 |         })
109 |         if (index !== -1) {
110 |           this.$message.error('请完善分支跳转条件信息！')
111 |           return
112 |         }
113 |       }
114 |       this.visible = false
115 |       this.$emit('saveUnitData', this.node)
116 |     }
117 |   }
118 | }
119 | </script>
120 | 
121 | <style lang="scss" scoped>
122 | .header {
123 |   display: flex;
124 |   justify-content: space-between;
125 |   align-items: center;
126 | }
127 | .container {
128 |   width: 100%;
129 |   height: calc(100vh - 100px);
130 |   overflow: auto;
131 |   padding: 0 20px;
132 |   box-sizing: border-box;
133 |   .label-wrap {
134 |     .label-name {
135 |       color: rgb(66, 91, 109);
136 |       padding-top: 12px;
137 |       line-height: 36px;
138 |       font-weight: 600;
139 |       position: relative;
140 |       text-align: left;
141 |     }
142 |     .add-btn {
143 |       margin-top: 20px;
144 |     }
145 |   }
146 | }
147 | </style>
148 | 


--------------------------------------------------------------------------------
/src/components/node.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div ref="node"
  3 |        :id="node.id"
  4 |        :style="flowNodeContainer"
  5 |        :class="['node',active ? 'active' : '']"
  6 |        @mousedown="setActiveData"
  7 |        @mouseup="changeNodeSite">
  8 |     <section :class="['visual-block', node.type==='triggerNode' ? 'trigger' : '']">
  9 |       <div class="header"
 10 |            v-if="node.type !== 'triggerNode'">
 11 |         <div class="header-left">
 12 |           <img class="icon"
 13 |                :src="node.icon" />
 14 |           <span>{{node.name}}</span>
 15 |         </div>
 16 |         <div class="header-right"
 17 |              v-if="node.type !== 'destinationNode'">
 18 |           <a href="#"
 19 |              class="icon"
 20 |              @click="editNode"><img src="../assets/edit.png"></a>
 21 |           <a href="#"
 22 |              class="icon"
 23 |              @click.stop.prevent="deleteNode"><img src="../assets/delete.png"></a>
 24 |         </div>
 25 |       </div>
 26 | 
 27 |       <span class="block-endpoint-dom"
 28 |             v-show="node.type !== 'triggerNode'"></span>
 29 |       <div class="no-msg"
 30 |            v-show="!node.nodeData.slot &&  !['triggerNode', 'destinationNode'].includes(node.type)">
 31 |         <span>暂无对话消息，点击单元添加</span>
 32 |         <img class="no-msg-bg"
 33 |              src="../assets/block-preview.png" />
 34 |       </div>
 35 |       <component :is="node.type"
 36 |                  :node="node"></component>
 37 | 
 38 |     </section>
 39 |   </div>
 40 | </template>
 41 | 
 42 | <script>
 43 | import triggerNode from './node/triggerNode'
 44 | import askNode from './node/askNode'
 45 | import singleNode from './node/singleNode'
 46 | import multipleNode from './node/multipleNode'
 47 | import operationNode from './node/operationNode'
 48 | import destinationNode from './node/destinationNode'
 49 | export default {
 50 |   components: {
 51 |     triggerNode,
 52 |     askNode,
 53 |     singleNode,
 54 |     multipleNode,
 55 |     operationNode,
 56 |     destinationNode
 57 |   },
 58 |   props: {
 59 |     node: Object,
 60 |     active: Boolean
 61 |   },
 62 |   data () {
 63 |     return {
 64 |       // 控制节点操作显示
 65 |       mouseEnter: false
 66 |     }
 67 |   },
 68 |   computed: {
 69 |     // 节点容器样式
 70 |     flowNodeContainer: {
 71 |       get () {
 72 |         return {
 73 |           // position: 'absolute',
 74 |           top: this.node.top,
 75 |           left: this.node.left
 76 |         }
 77 |       }
 78 |     }
 79 |   },
 80 |   methods: {
 81 |     setActiveData () {
 82 |       this.$parent.activeData = this.node
 83 |     },
 84 |     // 删除节点
 85 |     deleteNode () {
 86 |       this.$emit('deleteNode', this.node)
 87 |     },
 88 |     // 编辑节点
 89 |     editNode () {
 90 |       this.setActiveData()
 91 |       this.$emit('editNode')
 92 |     },
 93 |     // 鼠标移动后抬起
 94 |     changeNodeSite () {
 95 |       // 避免抖动
 96 |       if (this.node.left === this.$refs.node.style.left && this.node.top === this.$refs.node.style.top) {
 97 |         return
 98 |       }
 99 |       this.$emit('changeNodeSite', {
100 |         id: this.node.id,
101 |         left: this.$refs.node.style.left,
102 |         top: this.$refs.node.style.top
103 |       })
104 |     }
105 |   }
106 | }
107 | </script>
108 | 
109 | <style lang="scss" scoped>
110 | .node {
111 |   position: absolute;
112 |   z-index: 1;
113 |   &.active {
114 |     z-index: 2;
115 |     .visual-block {
116 |       border-width: 2px;
117 |       border-style: solid !important;
118 |       border-color: rgb(31, 119, 243);
119 |     }
120 |   }
121 |   &:hover {
122 |     .visual-block {
123 |       border-width: 2px;
124 |       border-style: dashed;
125 |       border-color: rgb(31, 119, 243);
126 |     }
127 |   }
128 | }
129 | .visual-block {
130 |   position: relative;
131 |   width: 256px;
132 |   padding-bottom: 16px;
133 |   box-shadow: rgba(66, 91, 109, 0.4) 0px 2px 4px 0px;
134 |   border-radius: 4px;
135 |   border-width: 2px;
136 |   border-style: solid;
137 |   border-color: rgb(255, 255, 255);
138 |   border-image: initial;
139 |   background: rgb(255, 255, 255);
140 |   transition: all 0.3s ease 0s;
141 |   box-sizing: border-box;
142 |   &:hover {
143 |     border: 2px dashed rgb(31, 119, 243);
144 |   }
145 |   &.active {
146 |     border-width: 2px;
147 |     border-style: solid;
148 |     border-color: rgb(31, 119, 243);
149 |   }
150 |   &.trigger {
151 |     width: 100px !important;
152 |     padding-bottom: 0;
153 |   }
154 |   .header {
155 |     display: flex;
156 |     align-items: center;
157 |     justify-content: space-between;
158 |     height: 48px;
159 |     font-size: 12px;
160 |     font-weight: 700;
161 |     padding: 0 10px;
162 |     .header-left {
163 |       display: flex;
164 |       align-items: center;
165 |       .icon {
166 |         width: 20px;
167 |         height: 20px;
168 |         margin-right: 10px;
169 |       }
170 |     }
171 |     .header-right {
172 |       text-align: right;
173 |       .icon {
174 |         margin-left: 15px;
175 |       }
176 |     }
177 |   }
178 |   .no-msg {
179 |     font-size: 14px;
180 |     font-weight: bold;
181 |     white-space: nowrap;
182 |     text-overflow: ellipsis;
183 |     padding: 10px 20px;
184 |     color: rgb(0, 0, 0);
185 |     position: relative;
186 |     text-align: center;
187 |     .no-msg-bg {
188 |       display: block;
189 |       width: 150px;
190 |       margin: 20px auto;
191 |     }
192 |   }
193 |   .block-endpoint-dom {
194 |     position: absolute;
195 |     top: 50%;
196 |     left: -9px;
197 |     width: 14px;
198 |     height: 14px;
199 |     margin-top: -7px;
200 |     border-width: 3px;
201 |     border-style: solid;
202 |     border-color: rgb(142, 156, 168);
203 |     border-image: initial;
204 |     border-radius: 8px;
205 |     background: rgb(142, 156, 168);
206 |     box-sizing: border-box;
207 |     z-index:1;
208 |   }
209 | }
210 | </style>
211 | 


--------------------------------------------------------------------------------
/src/components/jumpRelationContainer/jumpRelationContainer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="jump-relation-container">
  3 |     <div class="jump-relation"
  4 |          v-if="node.nodeData.slot">
  5 |       <div class="title">需要跳转的单元</div>
  6 |       <div class="content">
  7 |         <div class="default-jump">
  8 |           <div class="header">默认跳转</div>
  9 |           <div class="text">如果词槽中的值不满足分支跳转条件，那么进入单元</div>
 10 |           <el-select style="width:100%"
 11 |                      size="medium"
 12 |                      clearable
 13 |                      v-model="node.nodeData.defaultJump.nextId"
 14 |                      placeholder="空">
 15 |             <el-option v-for="(item) in filterUnitList"
 16 |                        :key="item.id"
 17 |                        :label="item.name"
 18 |                        :value="item.id">
 19 |             </el-option>
 20 |           </el-select>
 21 |         </div>
 22 |         <div class="branch-jump"
 23 |              v-for="(item,index) in node.nodeData.branchJump"
 24 |              :key="item.id"
 25 |              @click="selectBranchJump(index)">
 26 |           <i class="el-icon-close"
 27 |              @click="deleteBranchJump(index)"></i>
 28 |           <div class="header">分支跳转</div>
 29 |           <div class="text">当词槽「{{node.nodeData.slot}}」获取到的值</div>
 30 |           <div class="condition-wrap">
 31 |             <div class="condition-left">
 32 |               <el-select size="medium"
 33 |                          v-model="item.ruleEnumCode"
 34 |                          placeholder="空"
 35 |                          clearable>
 36 |                 <el-option v-for="item in conditions"
 37 |                            :key="item.value"
 38 |                            :label="item.label"
 39 |                            :value="item.value">
 40 |                 </el-option>
 41 |               </el-select>
 42 |             </div>
 43 |             <div class="condition-right">
 44 |               <el-input style="width:100%;"
 45 |                         size="medium"
 46 |                         v-model="item.content"
 47 |                         clearable
 48 |                         placeholder="必填项，请选择或者输入值"></el-input>
 49 |             </div>
 50 |           </div>
 51 | 
 52 |           <div class="text">进入单元：</div>
 53 |           <el-select style="width:100%"
 54 |                      size="medium"
 55 |                      v-model="item.nextId"
 56 |                      clearable
 57 |                      placeholder="空">
 58 |             <el-option v-for="(item) in filterUnitList"
 59 |                        :key="item.id"
 60 |                        :label="item.name"
 61 |                        :value="item.id">
 62 |             </el-option>
 63 |           </el-select>
 64 |         </div>
 65 |         <div class="add-btn"
 66 |              @click="addBranchJump">
 67 |           <i class="el-icon-circle-plus"></i>
 68 |           添加跳转关系
 69 |         </div>
 70 |       </div>
 71 |     </div>
 72 |     <div class="no-slot"
 73 |          v-else>
 74 |       <img class="pic"
 75 |            src="../../assets/block-preview.png" />
 76 |       <div class="text">请关联词槽，配置单元跳转</div>
 77 |     </div>
 78 |   </div>
 79 | </template>
 80 | <script>
 81 | import { mapGetters } from 'vuex'
 82 | import { util } from '@/utils/util'
 83 | export default {
 84 |   data () {
 85 |     return {
 86 |       entity: '',
 87 |       state: '',
 88 |       value: '',
 89 |       defaultJump: '',
 90 |       condition: 1,
 91 |       conditions: [
 92 |         {
 93 |           value: 1,
 94 |           label: '等于'
 95 |         },
 96 |         {
 97 |           value: 2,
 98 |           label: '不等于'
 99 |         },
100 |         {
101 |           value: 3,
102 |           label: '大于'
103 |         },
104 |         {
105 |           value: 4,
106 |           label: '大于等于'
107 |         },
108 |         {
109 |           value: 5,
110 |           label: '小于'
111 |         },
112 |         {
113 |           value: 6,
114 |           label: '小于等于'
115 |         },
116 |         {
117 |           value: 7,
118 |           label: '包含'
119 |         },
120 |         {
121 |           value: 8,
122 |           label: '不包含'
123 |         },
124 |         {
125 |           value: 9,
126 |           label: '属于实体'
127 |         },
128 |         {
129 |           value: 10,
130 |           label: '不属于实体'
131 |         },
132 |         {
133 |           value: 11,
134 |           label: '符合正则'
135 |         },
136 |         {
137 |           value: 12,
138 |           label: '不符合正则'
139 |         },
140 |         {
141 |           value: 13,
142 |           label: '不满足条件'
143 |         },
144 |         {
145 |           value: 500,
146 |           label: '异常'
147 |         },
148 |         {
149 |           value: 200,
150 |           label: '有结果'
151 |         },
152 |         {
153 |           value: 201,
154 |           label: '无结果'
155 |         }
156 |       ],
157 |       activeBranchIndex: ''
158 |     }
159 |   },
160 |   props: {
161 |     node: {
162 |       type: Object,
163 |       default: function () {
164 |         return {}
165 |       }
166 |     }
167 |   },
168 |   watch: {
169 | 
170 |   },
171 |   computed: {
172 |     ...mapGetters(['getNodeList']),
173 |     // 过滤掉自身单元和触发器的列表
174 |     filterUnitList () {
175 |       // this.unitList.unshift({ id: '', nodeName: '空' })
176 |       return this.getNodeList.filter((item) => {
177 |         return (item.id !== this.node.id) && (item.type !== 'triggerNode')
178 |       })
179 |     }
180 |   },
181 |   methods: {
182 |     // 新增分支跳转
183 |     addBranchJump () {
184 |       const temp = {
185 |         id: this.node.id + '_' + util.getRandomId(), // 拼接单元id,方便监听连线时找到对应单元
186 |         ruleEnumCode: '',
187 |         content: '',
188 |         nextId: ''
189 |       }
190 |       this.node.nodeData.branchJump.push(temp)
191 |     },
192 |     // 删除分支跳转
193 |     deleteBranchJump (index) {
194 |       this.node.nodeData.branchJump.splice(index, 1)
195 |     },
196 |     // 分支跳转项被点击时
197 |     selectBranchJump (index) {
198 |       this.activeBranchIndex = index
199 |       console.log(this.activeBranchIndex)
200 |     }
201 |   }
202 | 
203 | }
204 | </script>
205 | <style lang="scss" scoped>
206 | .jump-relation-container {
207 |   .jump-relation {
208 |     .title {
209 |       width: 100%;
210 |       color: rgb(66, 91, 109);
211 |       padding-top: 12px;
212 |       line-height: 36px;
213 |       font-weight: 600;
214 |       position: relative;
215 |     }
216 |     .branch-jump {
217 |       position: relative;
218 |       .el-icon-close {
219 |         position: absolute;
220 |         top: 16px;
221 |         right: 16px;
222 |         font-size: 20px;
223 |         cursor: pointer;
224 |       }
225 |       .header {
226 |         height: 20px;
227 |         line-height: 20px;
228 |         font-size: 14px;
229 |         color: rgb(66, 91, 109);
230 |         margin-bottom: 16px;
231 |       }
232 |       .text {
233 |         line-height: 36px;
234 |         font-size: 14px;
235 |         color: rgb(142, 156, 168);
236 |         margin-bottom: 5px;
237 |         &::before {
238 |           content: "";
239 |           width: 3px;
240 |           height: 8px;
241 |           margin-right: 3px;
242 |           background: rgb(255, 62, 39);
243 |           border-radius: 3px;
244 |         }
245 |       }
246 |       .condition-wrap {
247 |         display: flex;
248 |         .condition-left {
249 |           flex: 0 0 150px;
250 |         }
251 |         .condition-right {
252 |           flex: 1;
253 |           padding-left: 10px;
254 |         }
255 |       }
256 |       width: 100%;
257 |       position: relative;
258 |       margin-bottom: 8px;
259 |       border-radius: 8px;
260 |       background: rgb(245, 247, 247);
261 |       padding: 16px 16px 24px;
262 |       box-sizing: border-box;
263 |     }
264 |     .add-btn {
265 |       width: 100%;
266 |       height: 56px;
267 |       line-height: 56px;
268 |       font-size: 14px;
269 |       color: rgb(142, 156, 168);
270 |       border-width: initial;
271 |       border-style: none;
272 |       border-color: initial;
273 |       border-image: initial;
274 |       background: rgb(245, 247, 247);
275 |       text-align: center;
276 |       cursor: pointer;
277 |     }
278 |     .default-jump {
279 |       .header {
280 |         height: 20px;
281 |         line-height: 20px;
282 |         font-size: 14px;
283 |         color: rgb(66, 91, 109);
284 |         margin-bottom: 16px;
285 |       }
286 |       .text {
287 |         line-height: 36px;
288 |         font-size: 14px;
289 |         color: rgb(142, 156, 168);
290 |         margin-bottom: 5px;
291 |       }
292 |       width: 100%;
293 |       position: relative;
294 |       margin-bottom: 8px;
295 |       border-radius: 8px;
296 |       background: rgb(245, 247, 247);
297 |       padding: 16px 16px 24px;
298 |       box-sizing: border-box;
299 |     }
300 |   }
301 |   .no-slot {
302 |     width: 100%;
303 |     position: relative;
304 |     margin-bottom: 8px;
305 |     border-radius: 8px;
306 |     background: rgb(245, 247, 247);
307 |     padding: 16px 16px 24px;
308 |     text-align: center;
309 |     box-sizing: border-box;
310 |     .pic {
311 |       height: 80px;
312 |       margin: 40px auto;
313 |     }
314 |     .text {
315 |       text-align: center;
316 |       color: rgb(179, 189, 197);
317 |     }
318 |   }
319 | }
320 | </style>
321 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="home"
  3 |        v-if="easyFlowVisible">
  4 |     <div class="header">
  5 |       <el-button size="meduim"
  6 |                  type="primary"
  7 |                  @click="loadFlow">加载流程</el-button>
  8 |       <el-button size="meduim"
  9 |                  type="primary"
 10 |                  @click="saveFlow">保存流程</el-button>
 11 |     </div>
 12 |     <div class="content">
 13 |       <div class="navMenu"
 14 |            ref="navMenu">
 15 |         <flow-tool @addNode="addNode"></flow-tool>
 16 |       </div>
 17 |       <div class="flow-content"
 18 |            @scroll="scroll">
 19 |         <div id="flowContianer"
 20 |              class="container">
 21 |           <!-- 画布拓展按钮 -->
 22 |           <span class="btn down"
 23 |                 @click="extendFlowSize('height')"><i class="el-icon-arrow-down"></i></span>
 24 |           <span class="btn right"
 25 |                 @click="extendFlowSize('width')"><i class="el-icon-arrow-right"></i></span>
 26 |           <!-- end -->
 27 |           <template v-for=" (node) in data.nodeList">
 28 |             <flow-node :key="node.id"
 29 |                        :node="node"
 30 |                        :active="activeData && (activeData.id === node.id)"
 31 |                        @deleteNode="deleteNode"
 32 |                        @changeNodeSite="changeNodeSite"
 33 |                        @editNode="editNode"></flow-node>
 34 |           </template>
 35 |         </div>
 36 | 
 37 |       </div>
 38 |     </div>
 39 |     <node-form v-if="nodeFormVisible"
 40 |                ref="nodeForm"
 41 |                :nodeData="activeData"
 42 |                :nodelist=data.nodeList
 43 |                @saveUnitData="saveUnitData"></node-form>
 44 |     <miniView></miniView>
 45 |   </div>
 46 | </template>
 47 | 
 48 | <script>
 49 | import { jsPlumb } from 'jsplumb'
 50 | import { util } from '@/utils/util'
 51 | import { mapActions, mapGetters } from 'vuex'
 52 | import flowNode from '../components/node'
 53 | import flowTool from '../components/tool'
 54 | import nodeForm from '../components/node_form'
 55 | import miniView from '../components/miniView/miniView'
 56 | const triggerId = util.getRandomId()
 57 | const triggerNode = {
 58 |   id: triggerId,
 59 |   left: 50 + 'px',
 60 |   top: 50 + 'px',
 61 |   show: true,
 62 |   icon: require('../assets/icon-trigger.png'),
 63 |   name: '触发器',
 64 |   type: 'triggerNode',
 65 |   nodeData: {
 66 |     defaultJump: {
 67 |       id: triggerId + '_' + util.getRandomId(),
 68 |       nextId: ''
 69 |     }
 70 |   }
 71 | }
 72 | const sourceOption = {
 73 |   anchors: ['Right'],
 74 |   isSource: true
 75 | }
 76 | // 默认设置参数
 77 | const jsplumbSetting = {
 78 |   // 动态锚点、位置自适应
 79 |   Container: 'flowContianer',
 80 |   // 连线的样式 StateMachine、Flowchart
 81 |   // Connector: 'Flowchart',
 82 |   Connector: [
 83 |     'Flowchart',
 84 |     { stub: [40, 60], gap: 7, cornerRadius: 5, alwaysRespectStubs: true }
 85 |   ],
 86 |   // 鼠标不能拖动删除线
 87 |   ConnectionsDetachable: false,
 88 |   // 删除线的时候节点不删除
 89 |   DeleteEndpointsOnDetach: true,
 90 |   // 连线的端点
 91 |   Endpoint: ['Dot', { radius: 7 }],
 92 |   // 线端点的样式
 93 |   EndpointStyle: { fill: 'transparent' },
 94 |   LogEnabled: true, // 是否打开jsPlumb的内部日志记录
 95 |   // 绘制线
 96 |   PaintStyle: { stroke: '#999', strokeWidth: 4, fill: 'transparent' },
 97 |   // 绘制箭头
 98 |   HoverPaintStyle: {
 99 |     strokeWidth: 4,
100 |     stroke: '#409EFF'
101 |   },
102 |   // Overlays: [['Arrow', { width: 15, length: 15, location: 1 }]],
103 |   RenderMode: 'svg'
104 | }
105 | export default {
106 |   data() {
107 |     return {
108 |       jsPlumb: null, // jsPlumb 实例
109 |       easyFlowVisible: true,
110 |       flowInfoVisible: false,
111 |       nodeFormVisible: false,
112 |       loadEasyFlowFinish: false,
113 |       // 数据
114 |       data: {
115 |         nodeList: [triggerNode],
116 |         lineList: []
117 |       },
118 |       activeData: null,
119 |       flowSize: {
120 |         height: 0,
121 |         width: 0
122 |       }
123 |     }
124 |   },
125 |   components: {
126 |     flowNode,
127 |     flowTool,
128 |     nodeForm,
129 |     miniView
130 |   },
131 |   mounted() {
132 |     this.initFlowSize()
133 |     this.jsPlumb = jsPlumb.getInstance()
134 |     this.$nextTick(() => {
135 |       this.jsPlumbInit()
136 |       this.loadEasyFlowFinish = true
137 |     })
138 |   },
139 |   watch: {
140 |     'data.nodeList': {
141 |       handler(val) {
142 |         this.listenNodeListChange(this.data.nodeList)
143 |       },
144 |       deep: true
145 |     }
146 |   },
147 |   computed: {
148 |     ...mapGetters(['getScrollPosition'])
149 |   },
150 |   methods: {
151 |     ...mapActions(['listenNodeListChange', 'listenScrollPosition']),
152 |     // 初始化画布尺寸
153 |     initFlowSize() {
154 |       const width = $(window).width() - $('.navMenu').width()
155 |       const height = $(window).height() - $('.header').height()
156 |       $('#flowContianer').width(width).height(height)
157 |       this.flowSize.width = width
158 |       this.flowSize.height = height
159 |     },
160 |     // 画布滚动条滚动时
161 |     scroll() {
162 |       console.log($('.flow-content').scrollTop(), $('.flow-content').height(), $('#flowContianer').height())
163 |       if ($('.flow-content').scrollTop() + $('.flow-content').height() > $('#flowContianer').height()) {
164 |         $('.down').css({ display: ' block', left: $('.flow-content').width() / 2 + $('.flow-content').scrollLeft() })
165 |       } else {
166 |         $('.down').css({ display: ' none' })
167 |       }
168 |       if ($('.flow-content').scrollLeft() + $('.flow-content').width() > $('#flowContianer').width()) {
169 |         $('.right').css({ display: ' block', top: $('.flow-content').height() / 2 + $('.flow-content').scrollTop() })
170 |       } else {
171 |         $('.right').css({ display: ' none' })
172 |       }
173 |     },
174 |     // 扩展画布
175 |     extendFlowSize(type) {
176 |       if (type === 'height') {
177 |         const height = $('#flowContianer').height() + 500
178 |         $('#flowContianer').height(height)
179 |         this.flowSize.height = height
180 |       }
181 |       if (type === 'width') {
182 |         const width = $('#flowContianer').width() + 500
183 |         $('#flowContianer').width(width)
184 |         this.flowSize.width = width
185 |       }
186 |     },
187 |     setActiveData(data) {
188 |       this.activeData = data
189 |     },
190 |     jsPlumbInit() {
191 |       const _this = this
192 |       this.jsPlumb.ready(function () {
193 |         // 导入默认配置
194 |         _this.jsPlumb.importDefaults({
195 |           ...jsplumbSetting,
196 |           ConnectionOverlays: [
197 |             [
198 |               'Arrow',
199 |               {
200 |                 location: 1,
201 |                 visible: true,
202 |                 width: 11,
203 |                 length: 11,
204 |                 id: 'ARROW',
205 |                 events: {
206 |                   click: function () {
207 |                     alert('you clicked on the arrow overlay')
208 |                   }
209 |                 }
210 |               }
211 |             ],
212 |             [
213 |               'Label',
214 |               {
215 |                 location: 0.5,
216 |                 id: 'label',
217 |                 cssClass: 'aLabel',
218 |                 visible: false,
219 |                 events: {
220 |                   tap: function (e) {
221 |                     _this.jsPlumb.deleteConnection(e.component)
222 |                   }
223 |                 }
224 |               }
225 |             ]
226 |           ]
227 |         })
228 |       })
229 |       // 初始化流程图
230 |       _this.initFlow()
231 |       // 会使整个jsPlumb立即重绘。
232 |       _this.jsPlumb.setSuspendDrawing(false, true)
233 |       // 监听生成连线时
234 |       _this.jsPlumb.bind('connection', function (evt) {
235 |         let from = evt.source.id
236 |         let to = evt.target.id
237 |         console.log(evt.source.id, evt.target.id, '监听线连接时')
238 |         if (_this.loadEasyFlowFinish) {
239 |           _this.data.lineList.push({
240 |             from: from,
241 |             to: to
242 |           })
243 |         }
244 |         _this.listenLineHandle(from, to, 'connect')
245 | 
246 |         // evt.connection.getOverlay('label').setLabel(evt.sourceId + '-' + evt.targetId)
247 |       })
248 | 
249 |       // 删除连线
250 |       _this.jsPlumb.bind('click', function (conn, originalEvent) {
251 |         // console.log(conn)
252 |         // _this.jsPlumb.deleteConnection(conn)
253 |       })
254 | 
255 |       // 鼠标放到元素上时
256 |       _this.jsPlumb.bind('mouseover', function (conn, originalEvent) {
257 |         if (conn.getOverlays().label) conn.getOverlays().label.setVisible(true)
258 | 
259 |         // _this.jsPlumb.deleteConnection(conn)
260 |       })
261 | 
262 |       // 鼠标移出元素上时
263 |       _this.jsPlumb.bind('mouseout', function (conn, originalEvent) {
264 |         if (conn.getOverlays().label) {
265 |           conn.getOverlays().label.setVisible(false)
266 |         }
267 |         // _this.jsPlumb.deleteConnection(conn)
268 |       })
269 | 
270 |       // 监听线被删除
271 |       _this.jsPlumb.bind('connectionDetached', function (evt) {
272 |         _this.deleteLine(evt.sourceId, evt.targetId)
273 |       })
274 | 
275 |       // 监听线被连接时不允许自己与自己相连
276 |       _this.jsPlumb.bind('beforeDrop', function (conn) {
277 |         return !conn.sourceId.includes(conn.targetId)
278 |       })
279 |     },
280 | 
281 |     // 删除线的数据
282 |     deleteLine(from, to) {
283 |       console.log(this.data.lineList)
284 |       this.data.lineList = this.data.lineList.filter(function (line) {
285 |         return line.from !== from || line.to !== to
286 |       })
287 |       console.log(this.data.lineList)
288 |       this.listenLineHandle(from, to, 'del')
289 |     },
290 | 
291 |     // 解析加载的数据
292 |     initFlow() {
293 |       if (this.data.nodeList.length > 0) {
294 |         this.data.nodeList.forEach((item, index) => {
295 |           // 触发器只有源点，其它单元都有终点
296 |           if (item.type !== 'triggerNode') {
297 |             this.jsPlumb.addEndpoint(item.id, {
298 |               anchors: ['Left'],
299 |               isTarget: true,
300 |               maxConnections: -1,
301 |               paintStyle: {
302 |                 fill: 'transparent',
303 |                 radius: 7
304 |               }
305 |             })
306 |           }
307 |           this.createSourcePoint(item)
308 |           console.log('加载数据', item)
309 |           this.jsPlumb.draggable(item.id, {
310 |             containment: 'parent'
311 |           })
312 |         })
313 |       }
314 |       //  初始化连线
315 |       this.data.lineList.forEach((line, index) => {
316 |         this.jsPlumb.connect({
317 |           source: line.from,
318 |           target: line.to,
319 |           anchors: ['Right', 'Left']
320 |         })
321 |       })
322 |       console.log(this.jsPlumb)
323 |       this.jsPlumb.repaintEverything()
324 |     },
325 | 
326 |     // 添加新的节点
327 |     addNode(evt, type, mousePosition) {
328 |       console.log('添加节点', evt, type, mousePosition)
329 |       let width = this.$refs.navMenu.offsetWidth
330 |       let id = util.getRandomId()
331 |       var left = mousePosition.left
332 |       var top = mousePosition.top
333 |       if (mousePosition.left < 0) {
334 |         console.log(evt.originalEvent.layerX, evt.originalEvent.clientY)
335 |         console.log($('.flow-content').scrollLeft(), 'jquery')
336 |         left = $('.flow-content').scrollLeft() + evt.originalEvent.layerX - width
337 |       }
338 |       if (mousePosition.top < 0) {
339 |         top = $('.flow-content').scrollTop() + evt.originalEvent.clientY - 100
340 |         console.log(left)
341 |       }
342 |       let node = {
343 |         id: id,
344 |         left: left + 'px',
345 |         top: top + 'px',
346 |         show: true,
347 |         nodeData: {
348 |           slot: '',
349 |           defaultJump: {
350 |             id: id + '_' + util.getRandomId(),
351 |             nextId: ''
352 |           },
353 |           branchJump: []
354 |         },
355 |         ...type
356 | 
357 |       }
358 |       this.data.nodeList.push(node)
359 |       console.log(typeof node.id)
360 |       this.$nextTick(function () {
361 |         this.jsPlumb.addEndpoint(node.id, {
362 |           anchors: ['Left'],
363 |           isTarget: true,
364 |           maxConnections: -1,
365 |           endpointStyle: {
366 |             fill: 'transparent',
367 |             radius: 7
368 |           }
369 |         })
370 |         this.jsPlumb.draggable(node.id, {
371 |           containment: 'parent'
372 |         })
373 |       })
374 |     },
375 |     // nodeRightMenu (node.id, evt) {
376 |     //   this.menu.show = true
377 |     //   this.menu.curNodeId = node.id
378 |     //   this.menu.left = evt.x + 'px'
379 |     //   this.menu.top = evt.y + 'px'
380 |     // },
381 |     // 改变节点的位置
382 |     changeNodeSite(data) {
383 |       // console.log(data, '改变节点位置')
384 |       for (var i = 0; i < this.data.nodeList.length; i++) {
385 |         let node = this.data.nodeList[i]
386 |         if (node.id === data.id) {
387 |           node.left = data.left
388 |           node.top = data.top
389 |         }
390 |       }
391 |     },
392 |     deleteNode(data) {
393 |       console.log(this.jsPlumb)
394 |       this.$confirm('确定要删除节点' + data.id + '?', '提示', {
395 |         confirmButtonText: '确定',
396 |         cancelButtonText: '取消',
397 |         type: 'warning',
398 |         closeOnClickModal: false
399 |       })
400 |         .then(() => {
401 |           // this.data.nodeList.forEach(function (node) {
402 |           //   if (node.id === data.id) {
403 |           //     node.show = false
404 |           //   }
405 |           //   // return node.id !== data.id
406 |           // })
407 |           this.jsPlumb.remove(data.id)
408 |           this.jsPlumb.repaintEverything()
409 |           this.data.nodeList = this.data.nodeList.filter(item => {
410 |             console.log(item)
411 |             return item.id !== data.id
412 |           })
413 |           console.log(this.data.nodeList)
414 |         })
415 |         .catch((e) => {
416 |           console.log(e)
417 |         })
418 |       return true
419 |     },
420 |     // 编辑节点
421 |     editNode() {
422 |       this.nodeFormVisible = true
423 | 
424 |       this.$nextTick(() => {
425 |         // 保存滚动条位置
426 |         this.listenScrollPosition({ top: $('.flow-content').scrollTop(), left: $('.flow-content').scrollLeft() })
427 |         this.$refs.nodeForm.init(this.activeData, true)
428 |       })
429 |     },
430 |     // 保存节点编辑的数据
431 |     saveUnitData(data) {
432 |       this.nodeFormVisible = false
433 |       const nodeIndex = this.data.nodeList.findIndex(item => {
434 |         console.log(item)
435 |         return data.id === item.id
436 |       })
437 |       this.data.nodeList[nodeIndex] = data
438 |       // 判断默认跳转关系是否有指向其它节点
439 |       if (data.nodeData.defaultJump.nextId) {
440 |         this.addLine({ from: data.nodeData.defaultJump.id, to: data.nodeData.defaultJump.nextId })
441 |       }
442 |       if (data.nodeData.branchJump.length) {
443 |         data.nodeData.branchJump.forEach((item) => {
444 |           // 判断分支跳转关系是否有指向其它节点
445 |           if (item.nextId) {
446 |             this.addLine({ from: item.id, to: item.nextId })
447 |           }
448 |         })
449 |       }
450 |       this.easyFlowVisible = false
451 |       this.$nextTick(() => {
452 |         this.easyFlowVisible = true
453 |         this.jsPlumb = jsPlumb.getInstance()
454 |         this.$nextTick(() => {
455 |           this.jsPlumbInit()
456 |           // 设置滚动条位置
457 |           // const flowWindow = document.getElementsByClassName('flow-content')[0]
458 |           $('#flowContianer').width(this.flowSize.width).height(this.flowSize.height)
459 |           $('.flow-content').scrollTop(this.getScrollPosition.top)
460 |           $('.flow-content').scrollLeft(this.getScrollPosition.left)
461 |         })
462 |       })
463 |     },
464 |     // 创建单元源点
465 |     createSourcePoint(data) {
466 |       if (data.type === 'triggerNode') {
467 |         this.jsPlumb.addEndpoint(data.nodeData.defaultJump.id, sourceOption)
468 |       }
469 |       if (data.nodeData.defaultJump.id && data.nodeData.slot) {
470 |         this.jsPlumb.addEndpoint(data.nodeData.defaultJump.id, sourceOption)
471 |       }
472 |       if (data.nodeData.branchJump && data.nodeData.branchJump.length) {
473 |         data.nodeData.branchJump.forEach((item) => {
474 |           this.jsPlumb.addEndpoint(item.id, sourceOption)
475 |         })
476 |       }
477 |     },
478 |     // 新增连线关系并去重复的线
479 |     addLine(line) {
480 |       // 先删除该线的源点已连接的线,然后再生成新的线
481 |       this.data.lineList = this.data.lineList.filter((item) => {
482 |         return item.from !== line.from
483 |       })
484 |       this.data.lineList.push(line)
485 |     },
486 |     // 监听线的操作,删除或连接时改变单元数据   type值 connect: '连接时'， del: '删除时'
487 |     listenLineHandle(from, to, type) {
488 |       const sourceNode = this.data.nodeList.find((item) => {
489 |         console.log(from.split('_')[0])
490 |         return item.id === from.split('_')[0]
491 |       })
492 |       if (sourceNode.nodeData.defaultJump.id === from) {
493 |         sourceNode.nodeData.defaultJump.nextId = type === 'connect' ? to : ''
494 |         return
495 |       }
496 |       if (sourceNode.nodeData.branchJump.length) {
497 |         sourceNode.nodeData.branchJump.map((item) => {
498 |           if (item.id === from) {
499 |             item.nextId = type === 'connect' ? to : ''
500 |           }
501 |           return item
502 |         })
503 |       }
504 |     },
505 |     // 保存流程
506 |     saveFlow() {
507 |       window.localStorage.setItem('flowData', JSON.stringify(this.data))
508 |       window.localStorage.setItem('flowSize', JSON.stringify(this.flowSize))
509 |       this.$message({
510 |         message: '流程图已保存',
511 |         type: 'success'
512 |       })
513 |     },
514 |     // 加载流程图
515 |     loadFlow() {
516 |       if (!window.localStorage.getItem('flowData')) {
517 |         this.$message({
518 |           message: '您暂未保存过流程图',
519 |           type: 'error'
520 |         })
521 |       }
522 |       this.easyFlowVisible = false
523 |       this.data.nodeList = []
524 |       this.data.lineList = []
525 |       this.$nextTick(_ => {
526 |         // 这里模拟后台获取数据、然后加载
527 |         let data = window.localStorage.getItem('flowData')
528 |         this.easyFlowVisible = true
529 |         this.data = JSON.parse(data)
530 |         this.jsPlumb = jsPlumb.getInstance()
531 |         this.$nextTick(() => {
532 |           // 加载画布尺寸
533 |           if (!window.localStorage.getItem('flowSize')) {
534 |             this.initFlowSize()
535 |           } else {
536 |             const { width, height } = JSON.parse(window.localStorage.getItem('flowSize'))
537 |             console.log(width, height, $('#flowContianer'))
538 |             $('#flowContianer').width(width).height(height)
539 |             this.flowSize = { width, height }
540 |           }
541 |           this.jsPlumbInit()
542 |         })
543 |       })
544 |     }
545 |   }
546 | }
547 | </script>
548 | <style lang="scss" scoped>
549 | .home {
550 |   .header {
551 |     position: relative;
552 |     width: 100%;
553 |     background: #fff;
554 |     box-shadow: 2px 2px 2px 2px #eee;
555 |     text-align: right;
556 |     padding: 0 20px;
557 |     box-sizing: border-box;
558 |     height: 80px;
559 |     line-height: 80px;
560 |     z-index: 2;
561 |   }
562 |   .content {
563 |     position: relative;
564 |     height: calc(100vh - 80px);
565 |     .navMenu {
566 |       position: absolute;
567 |       top: 0;
568 |       bottom: 0;
569 |       left: 0;
570 |       width: 230px;
571 |       box-sizing: border-box;
572 |       overflow-y: auto;
573 |     }
574 |     .flow-content {
575 |       position: absolute;
576 |       top: 0;
577 |       bottom: 0;
578 |       left: 230px;
579 |       right: 0;
580 |       overflow: auto;
581 |       box-sizing: border-box;
582 |       & /deep/ .jtk-endpoint {
583 |         z-index: 10 !important;
584 |       }
585 |       .container {
586 |         overflow: hidden;
587 |         background: url(../assets/grid-background.png);
588 |         background-size: 50px 50px;
589 |         box-sizing: border-box;
590 |         position: relative;
591 |         .btn {
592 |           position: absolute;
593 |           cursor: pointer;
594 |           &:hover {
595 |             color: #409eff;
596 |           }
597 |           z-index: 999;
598 |           &.down {
599 |             bottom: 10px;
600 |             left: 50%;
601 |             display: none;
602 |           }
603 |           &.right {
604 |             right: 10px;
605 |             top: 50%;
606 |             display: none;
607 |           }
608 |         }
609 |       }
610 |     }
611 |   }
612 | }
613 | </style>
614 | 


--------------------------------------------------------------------------------