10.30

src/views/vueflow/modelb.vue

@@ -50,10 +50,12 @@ onMounted(() => {
 <style>
 .vue-flow__node.draggable {
   width: 64px !important;
-    height: 64px !important;
-    border: none;
+    height: 64px !important; 
     background-color: rgba(0,0,0,0);
 }
+.vue-flow__node-default.selected, .vue-flow__node-default.selected:hover, .vue-flow__node-input.selected, .vue-flow__node-input.selected:hover, .vue-flow__node-output.selected, .vue-flow__node-output.selected:hover{
+  box-shadow:none;
+}
 .vue-flow__node {
           stroke: none; /* 移除节点边框 */
         }

src/views/vuetree/Sidebar.vue

@@ -1,11 +1,12 @@
 <script setup>
-  import { ref, onMounted, reactive, } from "vue";
+  import { ref, onMounted, reactive,provide } from "vue";
   import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
   import gc1 from "@/assets/img/gc1.png"
   import gc2 from "@/assets/img/gc2.png"
   import gc3 from "@/assets/img/gc3.png"
 import useDragAndDrop from './useDnD'
-const { onDragStart,onDragLeave,} = useDragAndDrop()
+const { onDragStart,onDragLeave,treeobj,onDrop} = useDragAndDrop()
+import emitter from "@/utils/emitter";
 const datatree = ref([
     {
       id:1,
@@ -15,19 +16,28 @@ const datatree = ref([
           id:'1-1',
           label: '优化问题',
           img:gc1,
+          Text:'2-',
+          children:[]
          
         },
+        
         {
-          id:'1-2',
+          id:'1-3',
           label: '分析流程',
           img:gc2,
+          Text:'3-',
+          children:[]
+
    
         },
         {
-          id:'1-3',
+          id:'1-2',
           label: '优化器',
-          img:gc3
+          img:gc3,
+          Text:'4-',
+          children:[]
         },
+       
       ],
     },
   
@@ -40,7 +50,7 @@ const datatree = ref([
       img:'',
       children: [
         {
-          id:'2_1',
+          id:'2-1',
           label: '优化问题',
           img:"wen.png",
          
@@ -135,6 +145,38 @@ const datatree = ref([
     },
   
   ])
+  let cgtree=ref();
+  onMounted(() => {
+    gcnode();
+    funcdata();
+    emitter.on('doSomethingEvent', getnode);
+    //emitter.on('doSomethingEvent', getnode);
+  })
+  // 获取工程图片
+  const gcnode=()=>{
+    let objlist=JSON.parse(sessionStorage.getItem("objlist"));
+    if(objlist.flow!=''){
+    let nodesflow=JSON.parse(objlist.flow).nodes
+   for(let i=0;i<nodesflow.length;i++){
+    for(let j=0;j<datatree.value[0].children.length;j++){
+      if(nodesflow[i].id.includes(datatree.value[0].children[j].Text)){
+        let item={
+          id:nodesflow[i].id,
+          label: nodesflow[i].data.label,
+          img:nodesflow[i].data.image,
+        }
+      
+        datatree.value[0].children[j].children.push(item)
+     
+      }else{
+       
+      }
+
+    }
+   }
+   
+  }
+  }
   const getImgPath = (url) => {
     return new URL(`../../assets/img/${url}`, import.meta.url).href
   }
@@ -144,13 +186,38 @@ const datatree = ref([
   }
   const handleNodeClick = (data) => {
   }
+const funcdata=()=>{
+ emitter.emit('child2Data',datatree.value)
+}
+
+onUnmounted(() => {
+  emitter.off('doSomethingEvent', getnode);
+
+  //emitter.off('child2Data',datatree.value)
+});
+  const getnode=()=>{
+    funcdata();
+    for(let i=0;i<datatree.value[0].children.length;i++){
+      if(treeobj.value[0].id.includes(datatree.value[0].children[i].Text)){
+        let item={
+          id:treeobj.value[0].id,
+          label: treeobj.value[0].data.label,
+          img:treeobj.value[0].data.image,
+        }
+        datatree.value[0].children[i].children.push(item);
+     
+    }else{
+    }
+  
+  }
+}
+  defineExpose({datatree,getnode}); 
 </script>
 
 <template>
 <div class="left_main">       
-
 <div class="left_main_content el-treeicon">
-  <el-tree :data="datatree"  class="custom-tree"  default-expand-all  :props="defaultProps" @node-click="handleNodeClick"  >
+  <el-tree :data="datatree"  class="custom-tree" ref="cgtree"  default-expand-all  :props="defaultProps" @node-click="handleNodeClick"  >
     <template #default="{ node, data }">
           <div   @dragstart="onDragStart($event, 'default',data.id)"  :draggable="true" >
             <img :src="data.img" class="custom-image" />

src/views/vuetree/eltree.vue

@@ -17,10 +17,10 @@ onMounted(() => {
 });
 </script>
 <template>
- 
+       <div v-if="props.node.data.label!='模块化'">
   <div v-if="props.node.data!=null">
     <div class="custom-node icons" :id="`node-${node.id}`"  >
-    <img :src="props.node.data.image" alt="节点图片" />
+    <img :src="props.node.data.image"/>
     <span>{{props.node.data.label }}</span>
   </div>
   <Handle type="source" :position="Position.Right"  />
@@ -28,7 +28,7 @@ onMounted(() => {
    <Handle id="target-b" type="target"  :position="Position.Left" /> 
   <Handle id="target-d" type="target" :position="Position.Bottom"  /> 
   </div>
-
+</div>
 </template>
 <style scoped> 
 
@@ -43,11 +43,14 @@ onMounted(() => {
 </style>
 <style>
 .vue-flow__node.draggable {
-  width: 60px !important;
-    height: 58px !important;
-    border: none;   
+  /* width: 60px !important;
+    height: 58px !important; */
     background-color: rgba(0,0,0,0);
 }
+
+.vue-flow__node-default.selected, .vue-flow__node-default.selected:hover, .vue-flow__node-input.selected, .vue-flow__node-input.selected:hover, .vue-flow__node-output.selected, .vue-flow__node-output.selected:hover{
+  box-shadow:none;
+}
 .vue-flow__node {
           stroke: none; /* 移除节点边框 */
         }

src/views/vuetree/index.vue

@@ -1,21 +1,22 @@
 <template>
   <VueFlow ref="vueFlowRef" :nodes="nodes" :edges="edges"  :class="{ dark }"
     class="basic-flow" 
-    :default-viewport="{ zoom: 1.5 }" :min-zoom="0.2" :max-zoom="2.5" @drop="onDrop"
+    :default-viewport="{ zoom: 1.5 }" :min-zoom="0.2" :max-zoom="2.5" @drop="onDrop1"
     @contextmenu.prevent="onContextMenu" @node-contextmenu="logEvent('contextmenu', $event)" 
     @dragover="onDragOver" @dragleave="onDragLeave" @edge-click="onEdgeClick" @node-double-click="onNodeDoubleClick"  @node-click="onNodeClick">
+
     <template  #node-default="props">
-      <!-- <template  #node-process="props">   //  @contextmenu.prevent="onContextMenu"  -->
       <eltree :node="props" />
     </template>
-
+ 
     <Background pattern-color="#aaa" :gap="16" />
 
     <!-- <MiniMap /> @input="handleUpdate"-->
     <Panel :position="'right'">
       <div class="field">
+        <div>
         <label for="label">Label:</label>
-        <input id="label" v-model="labelname"  />
+        <input id="label" v-model="labelname"  /></div>
         <button @click="handleUpdate"  class="lableaniu">确定</button>
       </div>
       <!-- <div> -->
@@ -24,7 +25,7 @@
         <button class="remove" @click="removeall(event)">all</button>
      
       </div> -->
-     
+      <!-- <button @click="onSelection()"  class="lableaniu">获取</button> -->
     </Panel>
     <Controls position="top-left">
       <ControlButton title="Reset Transform" @click="resetTransform">
@@ -61,7 +62,7 @@
   </div>
 </template>
 <script setup>
-import { ref, markRaw } from 'vue'
+import { ref, markRaw,inject } from 'vue'
 import { VueFlow,Panel, useVueFlow, MarkerType} from '@vue-flow/core'
 import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
 import {
@@ -86,10 +87,11 @@ import f11 from '@/assets/img/f11.png'
 import html2canvas from 'html2canvas';
 import Icon from './Icon.vue'
 import { formatTime } from '@/js/lindex.js';
-
+import emitter from "@/utils/emitter";
 // import func from 'vue-temp/vue-editor-bridge.js';
 
 const dark = ref(false)
+let datatree=ref();
 const route = useRoute();
 const { onInit, onNodeDragStop, onNodeContextMenu, onConnect, addEdges, setViewport, toObject } = useVueFlow()
 let vueFlowRef = ref();
@@ -130,6 +132,7 @@ let contextMenu = ref({
   position: { x: 0, y: 0 },
   target: 'kong',
 })
+let Nested=ref([]);
 const { onDragOver, onDrop, onDragLeave, isDragOver } = useDragAndDrop();
 const edges = ref([]);
 const nodes = ref([]);
@@ -148,18 +151,50 @@ function handleUpdate(){
   noid.value.data.label=labelname.value;
   console.log( noid.value.data.label);
 }
+emitter.on('child2Data', data => {
+  datatree.value = data;
+  console.log(datatree.value);
+})
+onUnmounted(() => {
+  emitter.off('child2Data');
+});
 function onNodeClick(e) {
   noid.value = e.node;
   labelname.value=e.node.data.label;
+  console.log(e.node);
+
+}
+//模块化
+function onSelection(){
+  //onNodeDragStop();
+  let num=1;
+    num++;
+  let item= {
+    id: '1',
+    data: { label: '模块化' },
+    position: { x: 100, y: 100 },
+    style: { backgroundColor: 'rgba(16, 185, 129,0.1)', width: '200px',height: '200px' },
+  }
+  nodes.value = Nested.value.map(node => {
+    node.parentNode=item.id;
+    node.expandParent=true;
+    return node;
+  });
+  nodes.value.push(item);
+  console.log( nodes.value);
+ 
+
+ 
 }
 function onNodeDoubleClick(e) {
   noid.value = e.node;
+  console.log( e.node);
   if (e.node.data.label == '优化器') {
     emit('optimizerfalse','优化器');
-  }else if(e.node.data.label=='进化优化器'){
+  }else if(e.node.data.image=="/src/assets/flowimg/xuek10.png"){
     emit('optimizerfalse','进化优化器');
 
-  }else if(e.node.data.label=='AirfoilAero'||e.node.data.label=='Rosenbrock'){
+  }else if(e.node.data.image=="/src/assets/flowimg/xuek8.png"){
     emit('optimizerfalse','AirfoilAero');
   }
 
@@ -182,6 +217,7 @@ onInit((vueFlowInstance) => {
 
 onNodeDragStop(({ event, nodes, node }) => {
   console.log(nodes)
+  Nested.value=nodes;
   //console.log('Node Drag Stop', { event, nodes, node })
 })
 
@@ -200,17 +236,48 @@ function updatePos() {
     }
   })
 }
+
 function removeEdge(id) {
   id = Edgeid.value;
   vueFlowRef.value.removeEdges(id);
+  console.log('msg:',datatree.value);
+}
+
+
+// 触摸
+const onDrop1=(event)=>{
+  onDrop(event);
+emitter.emit('doSomethingEvent');
+
 }
 function removeNode(id) {
-  id = noid.value.id
-  vueFlowRef.value.removeNodes(noid.value.id);
+  id = noid.value.id;
+  console.log(id);
+  console.log( datatree.value);
+  for (let i = 0; i <datatree.value[0].children.length; i++) {
+    if(id.includes(datatree.value[0].children[i].Text)){
+      for (let j = 0; j <datatree.value[0].children[i].children.length; j++) {
+        if(id==datatree.value[0].children[i].children[j].id){
+         //datatree.value[0].children.splice(datatree.value[0].children[i].children[j], 1); 
+           datatree.value[0].children[i].children.splice(j, 1)
+           vueFlowRef.value.removeNodes(id);
+        }
+    
+  }
+    }
+
+}
 }
 function removeall(){
   nodes.value=[];
   edges.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=[];
+    }
+
+}
+
 }
 async  function logToObject1() {
   let obj = { nodes: toObject().nodes,edges:toObject().edges };
@@ -308,8 +375,6 @@ console.log(num)
 }
 //改变线的颜色
 const changeAllEdgesColor=(color1)=>{
-  //console.log(props.color1);
-  //console.log(seledge.value);
   linecolor.value= color1;
   if(  seledge.value){
     console.log(11111)
@@ -324,7 +389,7 @@ watch(() => seledge.value, (newItems, oldItems) => {
   //   //seledge.value.style.stroke =  linecolor.value;
   // }
     });
-defineExpose({changeAllEdgesColor,linestrokeWidth,getroter});
+defineExpose({changeAllEdgesColor,linestrokeWidth,getroter,onSelection});
 </script>
 
 <style>
@@ -371,7 +436,7 @@ panel {
   font-size: 12px;
 }
 .vue-flow__node-default, .vue-flow__node-input, .vue-flow__node-output{
-  width: auto !important;
+  /* width: auto !important; */
   border: none;
   background-color: rgba(0,0,0,0);
 }
@@ -403,4 +468,7 @@ panel {
   max-width: 16px;
   max-height: 16px;
 }
+.field{
+  display: flex;
+}
 </style>

src/views/vuetree/useDnD.js

@@ -20,23 +20,26 @@ import xuek11 from '@/assets/flowimg/xuek11.png'
 import xuek12 from '@/assets/flowimg/xuek12.png'
 let nid = 0;
 let id=0
+let treeobj=ref([]);
 let datas={}
 
 /**
  * @returns {string} - A unique id.
  */
 function getId() {
-  return `node_${id++}`
+  //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'){
+  // 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}
     }else if(nid=='3-1'){
       return datas = {label:'CATIA', image:xuek1}
@@ -55,7 +58,7 @@ function imagefun(){
     }else if(nid=='3-7'){
       return datas = {label:'Nastran', image:xuek7}
     }else if(nid=='3-8'){
-      return datas = {label:'Rosenbrock', image:xuek8}
+      return datas = {label:'Python', image:xuek8}
     }else if(nid=='3-9'){
       return datas = {label:'AirfoilAero', image:xuek9}
     }else if(nid=='4-1'){
@@ -101,7 +104,6 @@ export default function useDragAndDrop() {
       nid=id;
       event.dataTransfer.setData('application/vueflow', type)
       event.dataTransfer.effectAllowed = 'move'    
-      console.log(1122344)   
    
     }
 
@@ -181,16 +183,18 @@ export default function useDragAndDrop() {
     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
+
    // addEdges(sedges.value)
   }
-
   return {
+    treeobj,
     draggedType,
     isDragOver,
     isDragging,

vite.config.ts

@@ -47,7 +47,7 @@ export default defineConfig(({ mode }) => {
             proxy: {
                 '/api': {
                     //target: 'http://192.168.0.131:8188/TransServlet',//配置文件获取地址
-                    target: 'http://192.168.0.104:8188/TransServlet',
+                    target: 'http://192.168.0.108:8188/TransServlet',
                     secure: false, //接受使用https
                     changeOrigin: true, //允许跨域
                     ws: false, //使用websocket