|
|
@@ -49,7 +49,7 @@
|
|
|
<ControlButton title="删除线" @click="removeEdge()">
|
|
|
<el-icon :color="iconcolor"><Crop /></el-icon>
|
|
|
</ControlButton>
|
|
|
- <ControlButton title="清空全部" @click="removeall()">
|
|
|
+ <ControlButton title="清空全部" @click="confirmDelete()">
|
|
|
<el-icon :color="iconcolor"><DeleteFilled /></el-icon>
|
|
|
</ControlButton>
|
|
|
|
|
|
@@ -236,7 +236,7 @@
|
|
|
<script setup>
|
|
|
import { ref, markRaw,inject } from 'vue'
|
|
|
import { VueFlow,Panel, useVueFlow, MarkerType} from '@vue-flow/core'
|
|
|
-import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
|
|
|
+import { ElMessage, ElButton, ElDialog, ElSelect, ElMessageBox} from 'element-plus'
|
|
|
import {
|
|
|
DocumentDelete,
|
|
|
Delete,
|
|
|
@@ -267,7 +267,7 @@ import emitter from "@/utils/emitter";
|
|
|
const dark = ref(false)
|
|
|
let datatree=ref();
|
|
|
const route = useRoute();
|
|
|
-const { onInit, onNodeDragStop, onNodeContextMenu, onConnect, addEdges, setViewport, toObject,addNode } = useVueFlow()
|
|
|
+const { onInit, onNodeDragStop, onNodeContextMenu, onConnect, addEdges, setViewport, toObject,addNodes,updateEdgeData } = useVueFlow()
|
|
|
let vueFlowRef = ref();
|
|
|
let emit = defineEmits(['optimizerfalse']);
|
|
|
let mergedObj=ref();
|
|
|
@@ -329,8 +329,16 @@ onNodeContextMenu((e) => {
|
|
|
changeNameshow.value = true;
|
|
|
})
|
|
|
|
|
|
+// 线的类型 process-逻辑线 data-数据线
|
|
|
+let lineType = ref('process');
|
|
|
+// 线序号
|
|
|
+let linecount = ref(0);
|
|
|
+
|
|
|
onConnect((connection) => {
|
|
|
- console.log(connection);
|
|
|
+ console.log('线连接',connection);
|
|
|
+ // 创建唯一的边ID（由源节点和目标节点组成）
|
|
|
+ const edgeId = `${connection.source}-${connection.target}`;
|
|
|
+ connection.id = edgeId; // 自定义 ID
|
|
|
connection.type = 'smoothstep';// smoothstep straight
|
|
|
connection.markerEnd = MarkerType.ArrowClosed;
|
|
|
connection.color=linecolor.value;
|
|
|
@@ -338,6 +346,30 @@ onConnect((connection) => {
|
|
|
connection.style = { strokeWidth:linenum.value ,stroke:linecolor.value};
|
|
|
addEdges(connection)
|
|
|
seledge.value=null;
|
|
|
+
|
|
|
+ linecount.value++;
|
|
|
+ const newName = `Seg${linecount.value}`;
|
|
|
+
|
|
|
+ const sourceNode = vueFlowRef.value.getNode(connection.source);
|
|
|
+ const targetNode = vueFlowRef.value.getNode(connection.target);
|
|
|
+
|
|
|
+ // 调用 saveflow 保存数据并获取 wid
|
|
|
+ saveflow(pid.value, '', newName, lineType.value, sourceNode.data.uid, targetNode.data.uid)
|
|
|
+ .then((wid) => {
|
|
|
+ // 更新连接线的数据
|
|
|
+ const updatedData = {
|
|
|
+ wid: wid,
|
|
|
+ uid: newName,
|
|
|
+ type: lineType.value,
|
|
|
+ fromuid: sourceNode.data.uid,
|
|
|
+ touid: targetNode.data.uid,
|
|
|
+ };
|
|
|
+ updateEdgeData(connection.id, updatedData);
|
|
|
+
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.error('保存流程失败:', error);
|
|
|
+ });
|
|
|
})
|
|
|
//修改名称
|
|
|
const handleUpdate = () => {
|
|
|
@@ -352,7 +384,7 @@ const handleUpdate = () => {
|
|
|
};
|
|
|
emitter.on('child2Data', data => {
|
|
|
datatree.value = data;
|
|
|
- console.log(datatree.value);
|
|
|
+ console.log("datatree的值：",datatree.value);
|
|
|
})
|
|
|
|
|
|
function onNodeClick(e) {
|
|
|
@@ -487,6 +519,7 @@ let onPythonlist=ref(['Python','Branin','Rosenbrock','Rastrigin','G9','Forrester
|
|
|
let previousEdge = null; // 用于保存上一个选中的边缘
|
|
|
// 监听线
|
|
|
function onEdgeClick(e) {
|
|
|
+ console.log('Edge Click', e.edge);
|
|
|
// 如果已经有选中的边缘
|
|
|
if (seledge.value) {
|
|
|
// 恢复上一个选中边缘的样式
|
|
|
@@ -740,9 +773,10 @@ onNodeDragStop(({ event, nodes, node }) => {
|
|
|
console.log('Node Drag Stop', { event, nodes, node })
|
|
|
})
|
|
|
|
|
|
-onConnect((connection) => {
|
|
|
- addEdges(connection)
|
|
|
-})
|
|
|
+// onConnect((connection) => {
|
|
|
+// addEdges(connection)
|
|
|
+// console.log('Connection', connection)
|
|
|
+// })
|
|
|
function updatePos() {
|
|
|
|
|
|
nodes.value = nodes.value.map((node) => {
|
|
|
@@ -806,20 +840,121 @@ console.log( nodes.value);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-function removeall(){
|
|
|
- nodes.value=[];
|
|
|
- edges.value=[];
|
|
|
- Nested2.value=[];
|
|
|
- Nested.value=[];
|
|
|
|
|
|
- for (let i = 0; i <datatree.value[0].children.length; i++) {
|
|
|
- for (let j = 0; j <datatree.value[0].children[i].children.length; j++) {
|
|
|
- datatree.value[0].children[i].children=[];
|
|
|
+// 删除提示
|
|
|
+const confirmDelete = () => {
|
|
|
+ ElMessageBox.confirm(
|
|
|
+ '确定要删除全部吗？删除后不可恢复！',
|
|
|
+ '删除确认',
|
|
|
+ {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
}
|
|
|
+ )
|
|
|
+ .then(() => {
|
|
|
+ removeall();
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ ElMessage({
|
|
|
+ type: 'info',
|
|
|
+ message: '已取消删除',
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function removeall() {
|
|
|
+ try {
|
|
|
+ nodes.value = []
|
|
|
+ edges.value = []
|
|
|
+ Nested2.value = []
|
|
|
+ Nested.value = []
|
|
|
+
|
|
|
+ // 判断 datatree 是否为空或未定义
|
|
|
+ if (!datatree.value || datatree.value.length === 0 || !datatree.value[0]?.children) {
|
|
|
+ console.warn('datatree 数据为空或未定义')
|
|
|
+ ElMessage({
|
|
|
+ type: 'warning',
|
|
|
+ message: '没有数据可以删除'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ // 清空 datatree 的 children
|
|
|
+ for (let i = 0; i < datatree.value[0].children.length; i++) {
|
|
|
+ if (datatree.value[0]?.children[i]?.children) {
|
|
|
+ datatree.value[0].children[i].children = []
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 删除成功
|
|
|
+ ElMessage({
|
|
|
+ type: 'success',
|
|
|
+ message: '删除成功'
|
|
|
+ })
|
|
|
+ } catch (error) {
|
|
|
+ console.error('删除失败：', error)
|
|
|
+ ElMessage({
|
|
|
+ type: 'error',
|
|
|
+ message: '删除过程中出错'
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
+// 流查询
|
|
|
+const queryflow = () => {
|
|
|
+ const params = {
|
|
|
+ transCode: 'MDO0057',
|
|
|
+ pid: pid.value,
|
|
|
+ }
|
|
|
+ request(params)
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res);
|
|
|
+
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ ElMessage.error(err.returnMsg)
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
+// 保存流
|
|
|
+const saveflow = async (pid,wid, uid, type, fromuid, touid) => {
|
|
|
+ const params = {
|
|
|
+ transCode: 'MDO0058',
|
|
|
+ pid: pid || '',
|
|
|
+ wid: wid || '', // 流ID
|
|
|
+ uid: uid || '',
|
|
|
+ type: type || '',
|
|
|
+ fromuid: fromuid || '',
|
|
|
+ touid: touid || '',
|
|
|
+ };
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 直接使用 await 等待 request 返回
|
|
|
+ const res = await request(params);
|
|
|
+ return res.wid; // 返回 wid
|
|
|
+ } catch (err) {
|
|
|
+ // 处理错误
|
|
|
+ ElMessage.error(err.returnMsg || '保存流程失败');
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// async function saveFlowExample() {
|
|
|
+// try {
|
|
|
+// const wid = await saveflow('flow123', 'user001', 'process', 'fromA', 'toB');
|
|
|
+// console.log('返回的 wid:', wid);
|
|
|
+// } catch (err) {
|
|
|
+// console.error('保存流程失败:', err.message);
|
|
|
+// }
|
|
|
+// }
|
|
|
+// saveFlowExample();
|
|
|
+
|
|
|
+// 删除流
|
|
|
+const deleteflow = () => {
|
|
|
+
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
async function logToObject1() {
|
|
|
let obj = { nodes: toObject().nodes,edges:toObject().edges };
|
|
|
mergedObj.value=JSON.stringify(obj);
|
tangjunhao