|
@@ -1,48 +1,50 @@
|
|
|
<template>
|
|
|
- <div style="width: 90vw;height: 90vh;">
|
|
|
- <ul class="box">
|
|
|
- <li class="leftMenu">
|
|
|
- <h3>选择节点</h3>
|
|
|
- <el-collapse>
|
|
|
- <el-collapse-item :title="item1.name" v-for="(item1, index) in leftMenuData" :key="index">
|
|
|
- <draggable @start="moveStart" @end="moveEnd" v-model="item1.children" :options="options">
|
|
|
- <div v-for="(item2, n) in item1.children" class="content" :divOption="JSON.stringify(item2)"
|
|
|
- @mousedown="mouseDownFun" :key="n">
|
|
|
- {{ item2.config[0].value }}
|
|
|
- </div>
|
|
|
- </draggable>
|
|
|
- </el-collapse-item>
|
|
|
- </el-collapse>
|
|
|
- </li>
|
|
|
- <li class="plumbBox" id="plumbBox">
|
|
|
- <div v-for="(item, index) in info" :key="index" :id="item.id" :style="getStyle(item)"
|
|
|
- :class="item.id === activeNode.id ? 'activeNode' : 'normalNode'" @click="sendActive(item)">
|
|
|
- <div class="plumbNode" :id="item.id + 'plumbNode'">
|
|
|
- <el-icon :size="20">
|
|
|
- <CirclePlusFilled />
|
|
|
+ <div>
|
|
|
+ <div style="width: 90vw;height: 90vh;" id="diagramContainer">
|
|
|
+ <ul class="box">
|
|
|
+ <li class="leftMenu">
|
|
|
+ <h3>选择节点</h3>
|
|
|
+ <el-collapse>
|
|
|
+ <el-collapse-item :title="item1.name" v-for="(item1, index) in leftMenuData" :key="index">
|
|
|
+ <draggable @start="moveStart" @end="moveEnd" v-model="item1.children" :options="options">
|
|
|
+ <div v-for="(item2, n) in item1.children" class="content" :divOption="JSON.stringify(item2)"
|
|
|
+ @mousedown="mouseDownFun" :key="n">
|
|
|
+ {{ item2.config[0].value }}
|
|
|
+ </div>
|
|
|
+ </draggable>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ </li>
|
|
|
+ <li class="plumbBox" id="plumbBox">
|
|
|
+ <div v-for="(item, index) in info" :key="index" :id="item.id" :style="getStyle(item)"
|
|
|
+ :class="item.id === activeNode.id ? 'activeNode' : 'normalNode'" @click="sendActive(item)">
|
|
|
+ <div class="plumbNode" :id="item.id + 'plumbNode'">
|
|
|
+ <el-icon :size="20">
|
|
|
+ <CirclePlusFilled />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ {{ item.config[0].value }}
|
|
|
+ <el-icon class="is-loading" v-if="item.status === 'loading'" color="blue">
|
|
|
+ <Loading />
|
|
|
+ </el-icon>
|
|
|
+ <el-icon v-else-if="item.status === 'success'" color="green">
|
|
|
+ <CircleCheckFilled />
|
|
|
+ </el-icon>
|
|
|
+ <el-icon v-else-if="item.status === 'error'" color="red">
|
|
|
+ <CircleCloseFilled />
|
|
|
</el-icon>
|
|
|
</div>
|
|
|
- {{ item.config[0].value }}
|
|
|
- <el-icon class="is-loading" v-if="item.status === 'loading'" color="blue">
|
|
|
- <Loading />
|
|
|
- </el-icon>
|
|
|
- <el-icon v-else-if="item.status === 'success'" color="green">
|
|
|
- <CircleCheckFilled />
|
|
|
- </el-icon>
|
|
|
- <el-icon v-else-if="item.status === 'error'" color="red">
|
|
|
- <CircleCloseFilled />
|
|
|
- </el-icon>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
+ </li>
|
|
|
|
|
|
- <li class="rightContent">
|
|
|
- <h3>节点操作</h3>
|
|
|
- <div style="padding-left: 10px">
|
|
|
- <RightForm ref="rightForm" @changeActiveNodeInfo="changeActiveNodeInfo" @deleteLine="deleteLine"
|
|
|
- @deleteNode="deleteNode"></RightForm>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ <li class="rightContent">
|
|
|
+ <h3>节点操作</h3>
|
|
|
+ <div style="padding-left: 10px">
|
|
|
+ <RightForm ref="rightForm" @changeActiveNodeInfo="changeActiveNodeInfo" @deleteLine="deleteLine"
|
|
|
+ @deleteNode="deleteNode"></RightForm>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup>
|
|
@@ -408,21 +410,28 @@ const makeFun = (item) => {
|
|
|
var common = {
|
|
|
isSource: true,
|
|
|
isTarget: true,
|
|
|
- connector: ['Straight'],
|
|
|
- overlays: [['Arrow', { width: 12, length: 12, location: 0.5 }]]
|
|
|
+ connector: ['Flowchart'],
|
|
|
+ grid: [10, 10],
|
|
|
+ maxConnections: -1,
|
|
|
+ overlays: [
|
|
|
+ ['Arrow', { width: 12, length: 12, location: 0.5 }],
|
|
|
+ // ["Label", { location: 0.5, label: "标签", cssClass: "endpointTargetLabel", visible: true, id: "label" }]
|
|
|
+ ],
|
|
|
+ anchor: ['Bottom'],
|
|
|
+ // anchor: "Continuous"
|
|
|
}
|
|
|
plumbInit.addEndpoint(item.id + '', common)
|
|
|
- // plumbInit.setSourceEnabled(item.id, { anchors: ['Right'] }, common);
|
|
|
- // plumbInit.setTargetEnabled(item.id, { anchors: ['Right'] }, common);
|
|
|
- // plumbInit.setDraggable(item.id, true);
|
|
|
+ plumbInit.setSourceEnabled(item.id, common);
|
|
|
+ plumbInit.setTargetEnabled(item.id, common);
|
|
|
+ plumbInit.setDraggable(item.id, true);
|
|
|
plumbInit.makeSource(item.id, {
|
|
|
filter: ".plumbNode",
|
|
|
filterExclude: false,
|
|
|
allowLoopback: true,
|
|
|
maxConnections: -1,
|
|
|
Container: "plumbBox",
|
|
|
- anchor: item.anchor,
|
|
|
- connector: item.connector,
|
|
|
+ anchor: "Continuous",
|
|
|
+ connector: ['Flowchart'],
|
|
|
endpoint: item.endpoint,
|
|
|
overlays: item.overlays,
|
|
|
paintStyle: item.paintStyle,
|
|
@@ -435,8 +444,8 @@ const makeFun = (item) => {
|
|
|
allowLoopback: true,
|
|
|
maxConnections: 1,
|
|
|
Container: "plumbBox",
|
|
|
- anchor: item.anchor,
|
|
|
- connector: item.connector,
|
|
|
+ anchor: "Continuous",
|
|
|
+ connector: ['Flowchart'],
|
|
|
endpoint: item.endpoint,
|
|
|
overlays: item.overlays,
|
|
|
paintStyle: item.paintStyle,
|