|
|
@@ -0,0 +1,305 @@
|
|
|
+// import { useVueFlow,Position,MarkerType } from '@vue-flow/core';
|
|
|
+import { useVueFlow,Position,MarkerType} from '@vue-flow/core';
|
|
|
+import { ref, watch } from 'vue'
|
|
|
+import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus"
|
|
|
+import { request, uploadFile } from "@/utils/request"
|
|
|
+import emitter from "@/utils/emitter"
|
|
|
+import gc1 from '@/assets/flowimg/gc1.png'
|
|
|
+import gc2 from '@/assets/flowimg/gc2.png'
|
|
|
+import gc3 from '@/assets/flowimg/gc3.png'
|
|
|
+import wen from '@/assets/flowimg/wen.png'
|
|
|
+import xuek1 from '@/assets/flowimg/xuek1.png'
|
|
|
+import xuek0 from '@/assets/flowimg/xuek0.png'
|
|
|
+import xuek2 from '@/assets/flowimg/xuek2.png'
|
|
|
+import xuek3 from '@/assets/flowimg/xuek3.png'
|
|
|
+import xuek4 from '@/assets/flowimg/xuek4.png'
|
|
|
+import xuek5 from '@/assets/flowimg/xuek5.png'
|
|
|
+import xuek6 from '@/assets/flowimg/xuek6.png'
|
|
|
+import xuek7 from '@/assets/flowimg/xuek7.png'
|
|
|
+import xuek8 from '@/assets/flowimg/xuek8.png'
|
|
|
+import xuek9 from '@/assets/flowimg/xuek9.png'
|
|
|
+import xuek10 from '@/assets/flowimg/xuek10.png'
|
|
|
+import xuek11 from '@/assets/flowimg/xuek11.png'
|
|
|
+import xuek12 from '@/assets/flowimg/xuek12.png'
|
|
|
+import r2 from '@/assets/flowimg/mob.png'
|
|
|
+import aero from '@/assets/flowimg/aero.png'
|
|
|
+import csh from '@/assets/flowimg/csh.png'
|
|
|
+import ffd from '@/assets/flowimg/ffd.png'
|
|
|
+import ADflow from '@/assets/flowimg/ADflow.png'
|
|
|
+import tacs from '@/assets/flowimg/TACS.png'
|
|
|
+import fsi from '@/assets/flowimg/fsi.png'
|
|
|
+import fsibackground from '@/assets/flowimg/fsibackg.png'
|
|
|
+import mathfunc from '@/assets/flowimg/MathFunc.png'
|
|
|
+import flight from '@/assets/flowimg/flight.png'
|
|
|
+let nid = 0;
|
|
|
+let id=0
|
|
|
+let treeobj=ref([]);
|
|
|
+let datas={}
|
|
|
+
|
|
|
+/**
|
|
|
+ * @returns {string} - A unique id.
|
|
|
+ */
|
|
|
+function getId() {
|
|
|
+ //return `node_${id++}`
|
|
|
+ return `${nid}${id++}`;
|
|
|
+}
|
|
|
+function imagefun(){
|
|
|
+ console.log(nid);
|
|
|
+ // if(nid=='1-1'){
|
|
|
+ // return datas = {label: '优化问题', image:gc1}
|
|
|
+ // }else if(nid=='1-2'){
|
|
|
+ // return datas = {label:'分析流程', image:gc2}
|
|
|
+ // }else if(nid=='1-3'){
|
|
|
+ // return datas = {label:'优化器', image:gc3}
|
|
|
+ // }else
|
|
|
+ if(nid=='2-1'){
|
|
|
+ return datas = {label:'优化问题', image:wen,name:'Project'}
|
|
|
+ }else if(nid=='3-1'){
|
|
|
+ return datas = {label:'CATIA', image:xuek1,name:'CATIA'}
|
|
|
+ }else if(nid=='3-0'){
|
|
|
+ return datas = {label:'CST', image:xuek0,name:'CST'}
|
|
|
+ }else if(nid=='3-10'){
|
|
|
+ return datas = {label:'FFD', image:ffd,name:'FFD'}
|
|
|
+ }else if(nid=='3-11'){
|
|
|
+ return datas = {label:'ADflow', image:ADflow,name:'ADflow'}
|
|
|
+ }else if(nid=='3-12'){
|
|
|
+ return datas = {label:'TACS', image:tacs,name:'TACS'}
|
|
|
+ }else if(nid=='3-13'){
|
|
|
+ return datas = {label:'FUN to FEM', image:fsi,backgroud:fsibackground , name:'FSI'}
|
|
|
+ }else if(nid=='3-14'){
|
|
|
+ return datas = {label:'MathFunc', image:mathfunc,name:'MathFunc'}
|
|
|
+ }else if(nid=='3-15'){
|
|
|
+ return datas = {label:'Flight', image:flight,name:'Flight'}
|
|
|
+ }
|
|
|
+ else if(nid=='3-2'){
|
|
|
+ return datas = {label:'Excel', image:xuek2,name:'Excel'}
|
|
|
+ }else if(nid=='3-3'){
|
|
|
+ return datas = {label:'Feko', image:xuek3,name:'Feko'}
|
|
|
+ }else if(nid=='3-4'){
|
|
|
+ return datas = {label:'Fluent', image:xuek4,name:'Fluent'}
|
|
|
+ }else if(nid=='3-5'){
|
|
|
+ return datas = {label:'HCFD', image:xuek5,name:'HCFD'}
|
|
|
+ }else if(nid=='3-6'){
|
|
|
+ return datas = {label:'Matlab', image:xuek6,name:'Matlab'}
|
|
|
+ }else if(nid=='3-7'){
|
|
|
+ return datas = {label:'Nastran', image:xuek7,name:'Nastran'}
|
|
|
+ }else if(nid=='3-8'){
|
|
|
+ return datas = {label:'Python', image:xuek8,name:'Python'}
|
|
|
+ }else if(nid=='3-9'){
|
|
|
+ return datas = {label:'Xfoil', image:xuek9,name:'Xfoil'}
|
|
|
+ }else if(nid=='4-1'){
|
|
|
+ return datas = {label:'进化优化器', image:xuek10,name:'optimizer1'}
|
|
|
+ }else if(nid=='4-2'){
|
|
|
+ return datas = {label:'代理优化器', image:xuek11,name:'optimizer3'}
|
|
|
+ }else if(nid=='4-3'){
|
|
|
+ return datas = {label:'梯度优化器', image:xuek12,name:'optimizer2'}
|
|
|
+ }else if(nid=='3-01'){
|
|
|
+ return datas = {label:'优化器', image:r2,name:'optimizer'}
|
|
|
+ }else if(nid=='3-02'){
|
|
|
+ return datas = {label:'参数化', image:csh,name:'参数化'}
|
|
|
+ }else if(nid=='3-03'){
|
|
|
+ return datas = {label:'气动分析', image:aero,name:'气动分析'}
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+/**
|
|
|
+ * In a real world scenario you'd want to avoid creating refs in a global scope like this as they might not be cleaned up properly.
|
|
|
+ * @type {{draggedType: Ref<string|null>, isDragOver: Ref<boolean>, isDragging: Ref<boolean>}}
|
|
|
+ */
|
|
|
+const state = {
|
|
|
+ /**
|
|
|
+ * The type of the node being dragged.
|
|
|
+ */
|
|
|
+ draggedType: ref(null),
|
|
|
+ isDragOver: ref(false),
|
|
|
+ isDragging: ref(false),
|
|
|
+}
|
|
|
+
|
|
|
+// 保存流
|
|
|
+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 {
|
|
|
+ const res = await request(params);
|
|
|
+ if (uid.includes('MathFunc')) {
|
|
|
+ console.log("pid:", pid);
|
|
|
+ console.log("wid:", res.wid);
|
|
|
+ emitter.emit("getMfcid", { id: pid, nowid: res.wid });
|
|
|
+ }
|
|
|
+ return res.wid;
|
|
|
+ } catch (err) {
|
|
|
+ ElMessage.error(err.returnMsg);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 用来存储每种组件名称出现次数的对象
|
|
|
+const nameCount = {}
|
|
|
+
|
|
|
+export default function useDragAndDrop() {
|
|
|
+ const { draggedType, isDragOver, isDragging } = state
|
|
|
+
|
|
|
+ const { addNodes, addEdges,screenToFlowCoordinate, onNodesInitialized, updateNode } = useVueFlow()
|
|
|
+
|
|
|
+ watch(isDragging, (dragging) => {
|
|
|
+ document.body.style.userSelect = dragging ? 'none' : ''
|
|
|
+ })
|
|
|
+
|
|
|
+ function onDragStart(event, type,id) {
|
|
|
+
|
|
|
+
|
|
|
+ if (event.dataTransfer) {
|
|
|
+
|
|
|
+ nid=id;
|
|
|
+ event.dataTransfer.setData('application/vueflow', type)
|
|
|
+ event.dataTransfer.effectAllowed = 'move'
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ draggedType.value =type;
|
|
|
+ //draggedType.value = 'smoothstep'
|
|
|
+ isDragging.value = true
|
|
|
+
|
|
|
+ document.addEventListener('drop', onDragEnd)
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Handles the drag over event.
|
|
|
+ *
|
|
|
+ * @param {DragEvent} event
|
|
|
+ */
|
|
|
+ function onDragOver(event) {
|
|
|
+ event.preventDefault()
|
|
|
+
|
|
|
+ if (draggedType.value) {
|
|
|
+ isDragOver.value = true
|
|
|
+
|
|
|
+ if (event.dataTransfer) {
|
|
|
+ event.dataTransfer.dropEffect = 'move'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function handleNodeDrop(e){
|
|
|
+
|
|
|
+ }
|
|
|
+ function onDragLeave(e) {
|
|
|
+
|
|
|
+ isDragOver.value = false
|
|
|
+ }
|
|
|
+
|
|
|
+ function onDragEnd() {
|
|
|
+ isDragging.value = false
|
|
|
+ isDragOver.value = false
|
|
|
+ draggedType.value = null
|
|
|
+ nid=''
|
|
|
+ document.removeEventListener('drop', onDragEnd)
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Handles the drop event.
|
|
|
+ *
|
|
|
+ * @param {DragEvent} event
|
|
|
+ */
|
|
|
+ async function onDrop(event) {
|
|
|
+ const position = screenToFlowCoordinate({
|
|
|
+ x: event.clientX,
|
|
|
+ y: event.clientY,
|
|
|
+ })
|
|
|
+
|
|
|
+ const savedObj = JSON.parse(sessionStorage.getItem("objlist"));
|
|
|
+ // console.log('objlist',savedObj);
|
|
|
+ const pid = savedObj.pid;
|
|
|
+ const newwid = '';
|
|
|
+
|
|
|
+ const nodeId = getId()
|
|
|
+ const image1=imagefun();
|
|
|
+ // 获取当前组件的名称
|
|
|
+ const componentName = image1.name;
|
|
|
+
|
|
|
+ // 如果该组件的名称已存在，给名称添加序号
|
|
|
+ if (!nameCount[componentName]) {
|
|
|
+ nameCount[componentName] = 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ nameCount[componentName]++; // 增加计数
|
|
|
+ const newName = `${componentName}${nameCount[componentName]}`; // 新的名称加上序号
|
|
|
+
|
|
|
+ let snodes=ref([]);
|
|
|
+ let sedges=ref([]);
|
|
|
+
|
|
|
+ if(nid=='4'){
|
|
|
+ // const nodes = ref([])
|
|
|
+ // const edges = ref([])
|
|
|
+
|
|
|
+ }else{
|
|
|
+ // 创建初始的节点数据，不包含 wid
|
|
|
+ // FSI为group类型
|
|
|
+ if(nid == '3-13'){
|
|
|
+ draggedType.value = 'group';
|
|
|
+ }
|
|
|
+ const newNode = {
|
|
|
+ id: nodeId,
|
|
|
+ type: draggedType.value,
|
|
|
+ position,
|
|
|
+ data: { ...image1, uid: newName },
|
|
|
+ };
|
|
|
+
|
|
|
+ snodes.value.push(newNode)
|
|
|
+
|
|
|
+ // 异步保存数据并更新 wid
|
|
|
+ saveflow(pid, newwid, newName, 'com', '', '').then((wid) => {
|
|
|
+ // 更新节点数据中的 wid
|
|
|
+ newNode.data.wid = wid;
|
|
|
+
|
|
|
+ // 使用 onNodesInitialized 来更新节点数据
|
|
|
+ onNodesInitialized(() => {
|
|
|
+ // 更新节点的其他数据
|
|
|
+ updateNode(nodeId, (node) => ({
|
|
|
+ ...node,
|
|
|
+ data: {
|
|
|
+ ...node.data,
|
|
|
+ wid: newNode.data.wid, // 更新节点中的 wid
|
|
|
+ },
|
|
|
+ }));
|
|
|
+ });
|
|
|
+ }).catch((err) => {
|
|
|
+ console.error('保存流程失败:', err.message);
|
|
|
+ ElMessage.error('保存流程失败');
|
|
|
+ });
|
|
|
+ }
|
|
|
+ const { off } = onNodesInitialized(() => {
|
|
|
+ updateNode(nodeId, (node) => ({
|
|
|
+ position: { x: node.position.x - node.dimensions.width / 2, y: node.position.y - node.dimensions.height / 2 },
|
|
|
+ dimensions:{ height: 58, width: 60}
|
|
|
+ }))
|
|
|
+
|
|
|
+ off()
|
|
|
+ })
|
|
|
+ addNodes(snodes.value)
|
|
|
+ treeobj.value=snodes.value
|
|
|
+
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ treeobj,
|
|
|
+ draggedType,
|
|
|
+ isDragOver,
|
|
|
+ isDragging,
|
|
|
+ onDragStart,
|
|
|
+ onDragLeave,
|
|
|
+ onDragOver,
|
|
|
+ onDrop,
|
|
|
+ handleNodeDrop,
|
|
|
+ }
|
|
|
+}
|
tangjunhao
