|
|
@@ -6,6 +6,7 @@
|
|
|
<el-button @click="delWholeFlow" style="margin-left: auto;" type="danger" size="mini">删除</el-button>
|
|
|
<el-button style="margin-left: 1%;" type="info" size="mini" plain @click="toImage">导出为图片</el-button>
|
|
|
<el-button style="margin-left: 1%;" type="primary" size="mini" @click="saveFlow">保存</el-button>
|
|
|
+ <el-button style="margin-left: 1%;" type="primary" size="mini" @click="showData">ceshi</el-button>
|
|
|
</div>
|
|
|
<div v-if="nodeDeSer" style="height: 85vh;width: 20vw;position: absolute;float: right;z-index: 1000;right: 1%;top: 1%;border: 0.1px solid #dedfe0;border-radius: 6px;background-color: white;">
|
|
|
<div style="display: flex;margin-left: 3%;margin-top: 3%;align-items: center;justify-content: space-between;width: 95%;">
|
|
|
@@ -63,7 +64,16 @@
|
|
|
<el-input-number v-model="form.retryCount" :min="1" style="width: 50%" :max="30"/>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="输出">
|
|
|
- <el-input v-model="form.output" style="width: 100%" type="textarea" />
|
|
|
+ <el-table :data="tableDataCanOut" border style="width: 100%">
|
|
|
+ <el-table-column prop="paramCode" label="参数名" width="" />
|
|
|
+ <el-table-column prop="paramValue" label="参数值" width="">
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="width: 100%;">
|
|
|
+ <el-input placeholder="" type="primary" class="noBor" v-model="scope.row.paramValue" size="mini" text style="margin-left: 0%;"></el-input>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
@@ -80,9 +90,8 @@
|
|
|
<el-tree :expand-on-click-node="false" ref="treeRef" :filter-node-method="filterNode" :current-node-key="currentNodeKey" class="treeLeft" :data="dataTree"
|
|
|
@node-click="handleNodeClick" node-key="id" style="margin-left: 5%;margin-top: 3%;width: 90%;background-color: transparent;" default-expand-all :key="valueKet">
|
|
|
<template #default="{ node, data }">
|
|
|
- <span style="justify-content: space-between;display: flex;width: 100%;align-items: center;">
|
|
|
- <div class="custom-tree-node":draggable="true"
|
|
|
- @dragstart="onDragStart($event,data)">
|
|
|
+ <span style="justify-content: space-between;display: flex;width: 100%;align-items: center;" :draggable="true" @dragstart="onDragStart($event,data)">
|
|
|
+ <div class="custom-tree-node">
|
|
|
<!-- <el-tag v-if="data.nodeType=='MODEL'" class="ml-2" type="warning">模型</el-tag> -->
|
|
|
<svg-icon icon-class="model2" style="color: #eebe77;" v-if="data.nodeType=='MODEL'"/>
|
|
|
<!-- <el-tag class="ml-2">
|
|
|
@@ -97,7 +106,7 @@
|
|
|
</el-tree>
|
|
|
</div>
|
|
|
<div ref="flowContainer" style="width: 80%;">
|
|
|
- <VueFlow style="background-color: #EFEFF4;margin-top: 0.5%;" :nodes="nodes" :viewport="zoom" :edges="edges" @drop="onDrop" @dragover="onDragOver" @dragleave="onDragLeave"
|
|
|
+ <VueFlow ref="vueFlowRef" style="background-color: #EFEFF4;margin-top: 0.5%;" :nodes="nodes" :viewport="zoom" :edges="edges" @drop="onDrop" @dragover="onDragOver" @dragleave="onDragLeave"
|
|
|
@node-click="onNodeClick" @connect="onConnect" fit-view-on-init>
|
|
|
<Controls :showInteractive="false" :showFitView="false"/>
|
|
|
<template #node-special="specialNodeProps">
|
|
|
@@ -127,11 +136,13 @@
|
|
|
style="border: 0.5px solid #c8c9cc;border-radius: 6px;border-radius: 6px;min-height: 8vh;min-width: 13vw">
|
|
|
<div style='width:100%;font-size:10px;display:flex;align-items:flex-end;height: 10px;margin-top: 2%;justify-content: space-between;'>
|
|
|
<img style="width: 15px;height:15px;border-radius: 12px;" src="@/assets/images/icon-HTTP.png" alt="">
|
|
|
- <div style="margin-left:3%;font-weight: 500;">
|
|
|
- {{ specialNodeProps.data.label }}
|
|
|
+ <div style="margin-left:3%;font-weight: 500;">
|
|
|
+ <el-input class="custom-no-border" placeholder="" type="primary" v-model="specialNodeProps.data.label" size="mini" text
|
|
|
+ style="margin-left: 0%;font-size: 10px;height: 15px;width: 150%;" ></el-input>
|
|
|
+ <!-- {{ specialNodeProps.data.label}} -->
|
|
|
</div>
|
|
|
<el-icon style="cursor: pointer;margin-left: auto;"><CaretRight /></el-icon>
|
|
|
- <el-icon @click.stop="delNode(specialNodeProps.data)" style="cursor: pointer;color: #F56C6C;margin-left: 2%;"><Delete /></el-icon>
|
|
|
+ <el-icon @click.stop="delNode(specialNodeProps)" style="cursor: pointer;color: #F56C6C;margin-left: 2%;"><Delete /></el-icon>
|
|
|
</div>
|
|
|
<div style="display: flex;margin-top: 3%;">
|
|
|
<el-tag class="ml-2" style="width: 35px;height: 20px;font-size: 10px;" type="warning">服务</el-tag>
|
|
|
@@ -173,7 +184,7 @@ import '@vue-flow/core/dist/theme-default.css';
|
|
|
import { Plus,Search } from '@element-plus/icons-vue'
|
|
|
import DynamicMap from '@/components/DynamicMap/index.vue'
|
|
|
import {Promotion} from '@element-plus/icons-vue'
|
|
|
-import { onMounted, ref } from 'vue'
|
|
|
+import { onMounted, ref,onBeforeUnmount } from 'vue'
|
|
|
import {useVueFlow, VueFlow ,MarkerType } from '@vue-flow/core'
|
|
|
import SpecialNode from './components/SpecialNode.vue'
|
|
|
import SpecialEdge from './components/SpecialEdge.vue'
|
|
|
@@ -190,6 +201,7 @@ const {
|
|
|
addEdges,
|
|
|
onEdgeClick,
|
|
|
addNodes,
|
|
|
+ removeNodes,
|
|
|
screenToFlowCoordinate,
|
|
|
onNodesInitialized,
|
|
|
updateNode,
|
|
|
@@ -200,10 +212,13 @@ const {
|
|
|
getEdges,
|
|
|
} = useVueFlow()
|
|
|
snapToGrid.value = true
|
|
|
+const vueFlowModel = ref();
|
|
|
+const tableDataCanOut = ref([]);
|
|
|
const flowContainer = ref(null);
|
|
|
const status = ref('就绪');
|
|
|
const zoom = ref();
|
|
|
const inputNode = ref('');
|
|
|
+const vueFlowRef = ref(null);
|
|
|
const treeRef = ref(null);
|
|
|
const servieName = ref()
|
|
|
const serviceRqtype = ref()
|
|
|
@@ -260,6 +275,9 @@ const store = useStore();
|
|
|
watch(inputNode, (val) => {
|
|
|
treeRef.value?.filter(val); // 调用树的过滤方法
|
|
|
});
|
|
|
+function showData(){
|
|
|
+ console.log(nodes.value)
|
|
|
+}
|
|
|
function delWholeFlow(){
|
|
|
proxy.$confirm('是否删除该模型流程?', '提示', {
|
|
|
confirmButtonText: '确定',
|
|
|
@@ -304,10 +322,10 @@ const toImage = async () => {
|
|
|
console.error('导出错误:', error);
|
|
|
}
|
|
|
};
|
|
|
-function delNode(node){
|
|
|
- console.log(node)
|
|
|
- console.log(nodes.value)
|
|
|
- nodes.value = nodes.value.filter(item => item.data.label !== node.label)
|
|
|
+async function delNode(node){
|
|
|
+ removeNodes([node])
|
|
|
+ await nextTick()
|
|
|
+
|
|
|
}
|
|
|
onEdgeClick(({ edge }) => {
|
|
|
console.log(edges.value,edge)
|
|
|
@@ -364,6 +382,7 @@ onNodeClick(({event, node}) => {
|
|
|
serviceRqtype.value = res.data.ptService.rqtype
|
|
|
servieName.value = res.data.ptService.name
|
|
|
tableDataCan.value = res.data.list
|
|
|
+ tableDataCanOut.value = res.data.returnList
|
|
|
serviceUrl.value = res.data.ptService.url
|
|
|
nodeDeSer.value = true
|
|
|
})
|
|
|
@@ -385,7 +404,7 @@ function onDragStart(event, data) {
|
|
|
|
|
|
draggedData.value = data
|
|
|
isDragging.value = true
|
|
|
-
|
|
|
+
|
|
|
document.addEventListener('drop', onDragEnd)
|
|
|
}
|
|
|
function back(){
|
|
|
@@ -397,7 +416,7 @@ function back(){
|
|
|
*/
|
|
|
function onDragOver(event) {
|
|
|
event.preventDefault()
|
|
|
-
|
|
|
+
|
|
|
if (draggedData.value) {
|
|
|
isDragOver.value = true
|
|
|
|
|
|
@@ -413,6 +432,9 @@ function onDragOver(event) {
|
|
|
*/
|
|
|
|
|
|
function onDrop(event) {
|
|
|
+ getSerDe(draggedData.value.id).then(res=>{
|
|
|
+ draggedData.value = res.data.ptService
|
|
|
+ })
|
|
|
const position = screenToFlowCoordinate({
|
|
|
x: event.clientX,
|
|
|
y: event.clientY,
|
|
|
@@ -524,7 +546,16 @@ watch(nodes, (newNodes) => {
|
|
|
@import '@vue-flow/core/dist/theme-default.css';
|
|
|
</style>
|
|
|
<style scoped>
|
|
|
-
|
|
|
+.custom-no-border :deep(.el-input__wrapper) {
|
|
|
+ box-shadow: none !important; /* 移除默认阴影(即边框) */
|
|
|
+ border: none !important; /* 双重保障 */
|
|
|
+}
|
|
|
+/* 处理悬停和聚焦状态 */
|
|
|
+.custom-no-border :deep(.el-input__wrapper:hover),
|
|
|
+.custom-no-border :deep(.el-input__wrapper:focus-within) {
|
|
|
+ box-shadow: none !important;
|
|
|
+ border: none !important;
|
|
|
+}
|
|
|
:deep(.treeLeft) .el-tree-node__content {
|
|
|
display: flex !important;
|
|
|
height: 28px; /* 按设计稿调整高度 */
|