9.19

src/router/index.js

@@ -15,7 +15,7 @@ const router = createRouter({
           children:[
             {
               path: '/home/newfile',
-              name: 'newfile',
+              name: '首页',
               component: () => import('@/views/home/newfile.vue'),
             },
             {

src/views/home/newfile.vue

@@ -18,10 +18,12 @@
       </el-collapse-item>
       <el-collapse-item title="工程模板" name="2">
         <div class="collapse-list">
+         
             <div class="list"  v-for="(item, index) in collapselist" :key="index" >
-                <el-image :src="item.img" fit="contain" ></el-image>
+              <router-link :to="{ path: '/home', query: { id: index } }">
+                <el-image :src="item.img" fit="contain" ></el-image>       </router-link>
             </div>
-        
+   
         </div>
  
       </el-collapse-item>

src/views/vuetree/eltree.vue

@@ -33,19 +33,19 @@ onMounted(() => {
 <style scoped>
 
 .icons img{
-    width: 35px;;
+    width: 26px;
 
 }
 .icons span{
   display: block;
-  font-size: 12px;
+  font-size: 8px;
 }
 </style>
 <style>
 .vue-flow__node.draggable {
-  width: 68px !important;
-    height: 68px !important;
-    border: none;
+  width: 56px !important;
+    height: 56px !important;
+    border: none;   
     background-color: rgba(0,0,0,0);
 }
 .vue-flow__node {

src/views/vuetree/index.vue

@@ -1,45 +1,32 @@
 <template>
-
-  <VueFlow
-  ref="vueFlowRef"
-    :nodes="nodes"
-    :edges="edges"
-    :edgeTypes="edgeTypes.smoothstep"
-    :class="{ dark }"
-    class="basic-flow"
-    :default-viewport="{ zoom: 1.5 }"
-    :min-zoom="0.2"
-    :max-zoom="4"
-    @drop="onDrop"    
-    @contextmenu.prevent="onContextMenu"
-    @node-contextmenu="logEvent('contextmenu', $event)"
-    @keydown.delete="onDeleteKey"  
-    @dragover="onDragOver" 
-    @dragleave="onDragLeave"
-    @edge-click="onEdgeClick"
-    @node-click="onNodeClick">
-      <template #node-default="props"> 
+  <VueFlow ref="vueFlowRef" :nodes="nodes" :edges="edges"  :class="{ dark }"
+    class="basic-flow" 
+    :default-viewport="{ zoom: 1.5 }" :min-zoom="0.2" :max-zoom="4" @drop="onDrop"
+    @contextmenu.prevent="onContextMenu" @node-contextmenu="logEvent('contextmenu', $event)" 
+    @dragover="onDragOver" @dragleave="onDragLeave" @edge-click="onEdgeClick" @node-click="onNodeClick">
+    <template #node-default="props">
       <!-- <template  #node-process="props">   //  @contextmenu.prevent="onContextMenu"  -->
-         <eltree  :node="props"  />
-      </template>
-    
-    <Background pattern-color="#aaa" :gap="16" /> 
+      <eltree :node="props" />
+    </template>
+
+    <Background pattern-color="#aaa" :gap="16" />
 
     <!-- <MiniMap /> -->
     <Panel>
-   <div>
-      <button class="remove" @click="removeNode(event)">删除节点</button>
-      <button class="remove" @click="removeEdge(event)">删除线</button>
-    </div>
+      <div>
+        <button class="remove" @click="removeNode(event)">删除节点</button>
+        <button class="remove" @click="removeEdge(event)">删除线</button>
+        <!-- <button class="remove" @click="getnodes()">获取所有数据</button> -->
+      </div>
     </Panel>
     <Controls position="top-left">
       <ControlButton title="Reset Transform" @click="resetTransform">
         <Icon name="reset" />
       </ControlButton>
 
-      <ControlButton title="Shuffle Node Positions" @click="updatePos">
+      <!-- <ControlButton title="Shuffle Node Positions" @click="updatePos">
         <Icon name="update" />
-      </ControlButton>
+      </ControlButton> -->
 
       <ControlButton title="Toggle Dark Mode" @click="toggleDarkMode">
         <Icon v-if="dark" name="sun" />
@@ -50,132 +37,105 @@
         <Icon name="log" />
       </ControlButton>
     </Controls>
-  
+
   </VueFlow>
- <div class="dnd-flow" >
-  
-      <div id="contextMenu"   @click="deleteItemConfirm">删除</div>
-    
-   
-  </div> 
+  <div class="dnd-flow">
+
+    <div id="contextMenu" @click="deleteItemConfirm">删除</div>
+
+
+  </div>
 </template>
 <script setup>
-import { ref,markRaw  } from 'vue'
-import { VueFlow, useVueFlow,MarkerType } from '@vue-flow/core'
+import { ref, markRaw } from 'vue'
+import { VueFlow, useVueFlow, MarkerType } from '@vue-flow/core'
+import { useRoute } from 'vue-router';
 import { Background } from '@vue-flow/background'
 import { ControlButton, Controls } from '@vue-flow/controls'
+import { initialEdges, initialNodes } from './modeljs.js'
 import { MiniMap } from '@vue-flow/minimap'
 import "./main.css";//重置样式
-  import DropzoneBackground from './DropzoneBackground.vue'
-   import eltree from './eltree.vue'
-   import useDragAndDrop from './useDnD'
-   import f11 from '@/assets/img/f11.png'
-  import { initialEdges, initialNodes } from './initial-elements.js'
+import DropzoneBackground from './DropzoneBackground.vue'
+import eltree from './eltree.vue'
+import useDragAndDrop from './useDnD'
+import f11 from '@/assets/img/f11.png'
 import Icon from './Icon.vue'
-
-/**
- * `useVueFlow` provides:
- * 1. a set of methods to interact with the VueFlow instance (like `fitView`, `setViewport`, `addEdges`, etc)
- * 2. a set of event-hooks to listen to VueFlow events (like `onInit`, `onNodeDragStop`, `onConnect`, etc)
- * 3. the internal state of the VueFlow instance (like `nodes`, `edges`, `viewport`, etc)
- */
-// our dark mode toggle flag
 const dark = ref(false)
-const { onInit, onNodeDragStop,onNodeContextMenu, onConnect, addEdges, setViewport, toObject } = useVueFlow()
-  let vueFlowRef=ref();
-  const edgeTypes = {
-  smoothstep: markRaw(eltree),
-}
-  let emit = defineEmits(['optimizerfalse']);
-  const props = defineProps({
-    
-    optimizer: {
+const route = useRoute();
+const { onInit, onNodeDragStop, onNodeContextMenu, onConnect, addEdges, setViewport, toObject } = useVueFlow()
+let vueFlowRef = ref();
+let emit = defineEmits(['optimizerfalse']);
+const props = defineProps({
+
+  optimizer: {
     type: Boolean,
   },
-  })
-  const  shopShow=ref(false);
-  let noid=ref([]);
-  let Edgeid=ref();
-  let node=ref();
-  let  contextMenu=ref( {
-          position: { x: 0, y: 0 },
-          target: 'kong',
-        })
-  const { onDragOver, onDrop, onDragLeave, isDragOver} = useDragAndDrop();
-  const edges = ref([]);
-  const nodes = ref([]);
-  // function onConnect(params){
-  //     // 更改连线类型
-  //     console.log(params)
-  //    // params.type = 'custom';
-  //     // ...其他连线逻辑
-  //   }
-  onConnect((connection) => {
-     console.log(connection);
-    connection.type = 'smoothstep';
-    connection.markerEnd = MarkerType.ArrowClosed;
+})
 
- 
+const shopShow = ref(false);
+let noid = ref([]);
+let Edgeid = ref();
+let node = ref();
+let contextMenu = ref({
+  position: { x: 0, y: 0 },
+  target: 'kong',
+})
+const { onDragOver, onDrop, onDragLeave, isDragOver } = useDragAndDrop();
+const edges = ref([]);
+const nodes = ref([]);
+onConnect((connection) => {
+  console.log(connection);
+  connection.type = 'smoothstep';//  smoothstep straight
+  connection.markerEnd = MarkerType.ArrowClosed;
   addEdges(connection)
 })
-  function onNodeClick(e){
-    noid.value=e.node;
-    if(e.node.data.label=='优化器'){
-      console.log(e.node);
-      emit('optimizerfalse', true);
-    }
-  
-  }
-  // 监听线
-  function onEdgeClick(e){
-    console.log(e.edge.id);
-    Edgeid.value=e.edge.id;
-    //console.log(999000)
+function onNodeClick(e) {
+  noid.value = e.node;
+  if (e.node.data.label == '优化器') {
+    console.log(e.node);
+    emit('optimizerfalse', true);
   }
-  function  logEvent(name,event){
-console.log(2222)
-  }
- function  onContextMenu(event){
-  console.log(1111)
-  console.log(event);
-   if(noid.value!==null){
-        if (noid.value.id) {
-          console.log(noid.value.position.y);
-          console.log(noid.value.position.x);
-          document.getElementById('contextMenu').style.top = noid.value.position.y+100 + 'px';
-       document.getElementById('contextMenu').style.left = noid.value.position.x +270+ 'px';
-       document.getElementById('contextMenu').style.display = 'block';
-       event.preventDefault();
+
+}
+// 监听线
+function onEdgeClick(e) {
+  Edgeid.value = e.edge.id;
+}
+function logEvent(name, event) {
+  console.log(2222)
+}
+function onContextMenu(event) {
+  if (noid.value !== null) {
+    if (noid.value.id) {
+      console.log(noid.value.position.y);
+      console.log(noid.value.position.x);
+      document.getElementById('contextMenu').style.top = noid.value.position.y + 100 + 'px';
+      document.getElementById('contextMenu').style.left = noid.value.position.x + 270 + 'px';
+      document.getElementById('contextMenu').style.display = 'block';
+      event.preventDefault();
       //shopShow.value=true;
-     // document.getElementById('contextMenu').style.display = 'none';
-        }
-      }
-    
-      }
-      //点击左键右键内容消失
-      document.addEventListener('click', function(e) {
-    if (e.button === 0) { // 0 是左键
-      document.getElementById('contextMenu').style.display = 'none';
-    //   shopShow.value=false;
+      // document.getElementById('contextMenu').style.display = 'none';
     }
-  });
-    function  onDeleteKey(event,node) {
-        // 禁用Backspace删除节点
-        console.log(event)
-        event.preventDefault();
-     
-      }
-  //删除
-  const deleteItemConfirm=()=>{
-    if(noid.value.id){
+  }
+
+}
+//点击左键右键内容消失
+document.addEventListener('click', function (e) {
+  if (e.button === 0) { // 0 是左键
+    document.getElementById('contextMenu').style.display = 'none';
+    //   shopShow.value=false;
+  }
+});
+//删除
+const deleteItemConfirm = () => {
+  if (noid.value.id) {
     vueFlowRef.value.removeNodes(noid.value.id);
-    noid.value=null;
+    noid.value = null;
     document.getElementById('contextMenu').style.display = 'none';
-    }
-  
   }
+
+}
 onInit((vueFlowInstance) => {
-  // instance is the same as the return of `useVueFlow`
   vueFlowInstance.fitView()
 })
 
@@ -188,7 +148,6 @@ onConnect((connection) => {
   console.log(1111);
   console.log(edges.value);
 })
-
 function updatePos() {
   nodes.value = nodes.value.map((node) => {
     return {
@@ -201,11 +160,11 @@ function updatePos() {
   })
 }
 function removeEdge(id) {
-id= Edgeid.value;
-vueFlowRef.value.removeEdges(id);
+  id = Edgeid.value;
+  vueFlowRef.value.removeEdges(id);
 }
 function removeNode(id) {
-    id= noid.value.id
+  id = noid.value.id
   vueFlowRef.value.removeNodes(noid.value.id);
 }
 function logToObject() {
@@ -222,19 +181,32 @@ function resetTransform() {
 function toggleDarkMode() {
   dark.value = !dark.value
 }
-// 点击右键显示
-// function contextmenuclick(e){
-//   console.log(e)
-// }
+onMounted(() => {
+  getroter();
+  // childfun();
+
+});
+// 获取链接
+const getroter=()=>{
+  console.log(11111)
+  console.log(route.query);
+  if(route.query.id=='0'){
+    console.log(route.query);
+    nodes.value=initialNodes;
+    edges.value=initialEdges;
+  }
+}
 </script>
 
 <style>
-  .vue-flow__edge {
-    text-align: left; /* 设置edges的左对齐 */
-  }
-  #contextMenu{
-    display: none; 
-    position: absolute;
+.vue-flow__edge {
+  text-align: left;
+  /* 设置edges的左对齐 */
+}
+
+#contextMenu {
+  display: none;
+  position: absolute;
   background-color: #fff;
   border-radius: 5px;
   padding: 10px;
@@ -244,22 +216,28 @@ function toggleDarkMode() {
   font-weight: 400;
   cursor: pointer;
   z-index: 99999;
-  }
-  .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-default.selectable:hover, .vue-flow__node-input.selectable:hover, .vue-flow__node-output.selectable:hover{
-    box-shadow: none;
-  }
-  panel{
-    cursor: pointer;
-    position: absolute;
-    z-index: 100000;
-  }
-  .remove{
-    background: #fff;
-    color: #666;
-    margin: 0 10px;
-    font-size: 12px;
-  }
+}
+.vue-flow__node-default.selectable:hover,
+.vue-flow__node-input.selectable:hover,
+.vue-flow__node-output.selectable:hover {
+  box-shadow: none;
+}
+
+panel {
+  cursor: pointer;
+  position: absolute;
+  z-index: 100000;
+}
+
+.remove {
+  background: #fff;
+  color: #666;
+  margin: 0 10px;
+  font-size: 12px;
+}
+.vue-flow__node-default, .vue-flow__node-input, .vue-flow__node-output{
+  width: auto !important;
+  border: none;
+  background-color: rgba(0,0,0,0);
+}
 </style>

src/views/vuetree/modeljs.js

@@ -0,0 +1,133 @@
+export const initialEdges=[
+    {
+        "id": "vueflow__edge-node_1-node_2target-c",
+        "type": "smoothstep",
+        "source": "node_1",
+        "target": "node_2",
+        "sourceHandle": null,
+        "targetHandle": "target-c",
+        "data": {},
+        "label": "",
+        "markerEnd": "arrowclosed",
+        "sourceX": 509.7323655316011,
+        "sourceY": 202.72241194648137,
+        "targetX": 627.8352150354071,
+        "targetY": 271.1243394277253
+    },
+    {
+        "id": "vueflow__edge-node_1-node_3target-c",
+        "type": "smoothstep",
+        "source": "node_1",
+        "target": "node_3",
+        "sourceHandle": null,
+        "targetHandle": "target-c",
+        "data": {},
+        "label": "",
+        "markerEnd": "arrowclosed",
+        "sourceX": 509.7323655316011,
+        "sourceY": 202.72241194648137,
+        "targetX": 777.8758207425246,
+        "targetY": 393.9700853504278
+    },
+    {
+        "id": "vueflow__edge-node_3target-b-node_2target-d",
+        "type": "smoothstep",
+        "source": "node_3",
+        "target": "node_2",
+        "sourceHandle": "target-b",
+        "targetHandle": "target-d",
+        "data": {},
+        "label": "",
+        "markerEnd": "arrowclosed",
+        "sourceX": 746.8759327965649,
+        "sourceY": 424.9700305322286,
+        "targetX": 627.8352150354071,
+        "targetY": 333.12428702716807
+    },
+    {
+        "id": "vueflow__edge-node_3target-b-node_1target-d",
+        "type": "smoothstep",
+        "source": "node_3",
+        "target": "node_1",
+        "sourceHandle": "target-b",
+        "targetHandle": "target-d",
+        "data": {},
+        "label": "",
+        "markerEnd": "arrowclosed",
+        "sourceX": 746.8759327965649,
+        "sourceY": 424.9700305322286,
+        "targetX": 478.73236311395914,
+        "targetY": 233.72235712828217
+    },
+    {
+        "id": "vueflow__edge-node_2target-b-node_1target-d",
+        "type": "smoothstep",
+        "source": "node_2",
+        "target": "node_1",
+        "sourceHandle": "target-b",
+        "targetHandle": "target-d",
+        "data": {},
+        "label": "",
+        "markerEnd": "arrowclosed",
+        "sourceX": 596.8353270894474,
+        "sourceY": 302.1242846095261,
+        "targetX": 478.73236311395914,
+        "targetY": 233.72235712828217
+    },
+    {
+        "id": "vueflow__edge-node_2-node_3target-c",
+        "type": "smoothstep",
+        "source": "node_2",
+        "target": "node_3",
+        "sourceHandle": null,
+        "targetHandle": "target-c",
+        "data": {},
+        "label": "",
+        "markerEnd": "arrowclosed",
+        "sourceX": 658.8352174530492,
+        "sourceY": 302.1242846095261,
+        "targetX": 777.8758207425246,
+        "targetY": 393.9700853504278
+    }
+]
+export const initialNodes=[
+    {
+        "id": "node_1",
+        "type": "default",
+        "initialized": false,
+        "position": {
+            "x": 450.7324345442889,
+            "y": 174.72245475889054
+        },
+        "data": {
+            "label": "优化问题",
+            "image": "/src/assets/flowimg/wen.png"
+        }
+    },
+    {
+        "id": "node_2",
+        "type": "default",
+        "initialized": false,
+        "position": {
+            "x": 599.8352864657369,
+            "y": 274.12435603985585
+        },
+        "data": {
+            "label": "Python",
+            "image": "/src/assets/flowimg/xuek8.png"
+        }
+    },
+    {
+        "id": "node_3",
+        "type": "default",
+        "initialized": false,
+        "position": {
+            "x": 749.8758921728544,
+            "y": 396.9701019625583
+        },
+        "data": {
+            "label": "优化器",
+            "image": "/src/assets/flowimg/gc3.png"
+        }
+    }
+]

src/views/vuetree/nodes.vue

@@ -1,157 +0,0 @@
-<template>
-    <div class="dnd-flow" >
-      <VueFlow ref="vueFlowRef"  :class="{ dark }"
-    class="basic-flow"
-    :default-viewport="{ zoom: 1.5 }"
-    :min-zoom="0.2"
-    :max-zoom="4"  :nodes="nodes" :edges="edges"  @drop="onDrop"   @contextmenu.prevent="onContextMenu"
-      @keydown.delete="onDeleteKey"   @dragover="onDragOver" @dragleave="onDragLeave"  @node-click="onNodeClick">
-          <template #node-default="props">
-            <eltree  :node="props"  />
-      </template>
-   
-      </VueFlow>
-  
-      <!-- <Sidebar /> -->
-    <!-- 优化器 -->
-    <div id="contextMenu"   v-show="shopShow"  @click="deleteItemConfirm">删除</div>
-    </div>
-  </template>
-  
-  
-  <script setup>
-  import { ref } from 'vue'
-  import { VueFlow,  useVueFlow,Position } from '@vue-flow/core'
-  import { ControlButton, Controls } from '@vue-flow/controls'
-   import Icon from './Icon.vue'
-  import "./main.css";//重置样式
-  import DropzoneBackground from './DropzoneBackground.vue'
-  import eltree from './eltree.vue'
-  import useDragAndDrop from './useDnD'
-  import f11 from '@/assets/img/f11.png'
-   const { onConnect, addEdges, onNodesChange, onEdgesChange, applyNodeChanges, applyEdgeChanges } = useVueFlow()
-  let vueFlowRef=ref();
-  let emit = defineEmits(['optimizerfalse']);
-  const props = defineProps({})
-  let  shopShow=ref(false);
-  let noid=ref([]);
-  let node=ref();
-  let  contextMenu=ref( {
-          shopShow: false,
-          position: { x: 0, y: 0 },
-          target: 'kong',
-        })
-  const { onDragOver, onDrop, onDragLeave, isDragOver} = useDragAndDrop();
-  const edges = ref([]);
-  const nodes = ref([]);
-  onConnect(addEdges)
-  
-  function onNodeClick(e){
-    noid.value=e.node;
-    console.log(e);
-    console.log(111111)
-    if(e.node.data.label=='优化器'){
-      console.log(e.node);
-      emit('optimizerfalse', true);
-    }
-  
-  }
-  function onContextMenu(event,node) {
-    console.log(event)
-    console.log(node)
-   // event.preventDefault();
-   if(noid.value!==null){
-  
-  
-        if (noid.value.id) {
-          document.getElementById('contextMenu').style.top = noid.value.position.y+50 + 'px';
-       document.getElementById('contextMenu').style.left = noid.value.position.x +80+ 'px';
-       document.getElementById('contextMenu').style.display = 'block';
-      shopShow.value=true;
-       event.preventDefault();
-  
-        }
-      }
-    
-      }
-      //点击左键右键内容消失
-      document.addEventListener('click', function(e) {
-    if (e.button === 0) { // 0 是左键
-       //document.getElementById('contextMenu').style.display = 'none';
-      shopShow.value=false;
-    }
-  });
-      function   onDeleteKey(event,node) {
-        // 禁用Backspace删除节点
-        console.log(event)
-        event.preventDefault();
-     
-      }
-  //删除
-  const deleteItemConfirm=()=>{
-    //const index = nodes.value.findIndex(n => n.id === noid.value.id);
-    if(noid.value.id){
-    vueFlowRef.value.removeNodes(noid.value.id);
-    noid.value=null;
-     // nodes.value = nodes.value.filter(node => node.id !== noid.value.id);
-   //console.log(noid.value.id);
-    // resolve(true)
-    // console.log( resolve(true));
-    shopShow.value = false
-    }
-  
-  }
-  onNodesChange(async (changes) => {
-    const nextChanges = []
-  
-    for (const change of changes) {
-  
-      if (change.type === 'remove') {
-        const isConfirmed = noid.value.id
-        console.log(isConfirmed)
-        if (isConfirmed) {
-          nextChanges.push(change)
-        }
-      } else {
-        nextChanges.push(change)
-      }
-    }
-  
-    applyNodeChanges(nextChanges)
-  })
-  //  小图标
-  function logToObject() {
-  console.log(toObject())
-}
-
-/**
- * Resets the current viewport transformation (zoom & pan)
- */
-function resetTransform() {
-  setViewport({ x: 0, y: 0, zoom: 1 })
-}
-
-function toggleDarkMode() {
-  dark.value = !dark.value
-}
-  
-  </script>
-  <style>
-  .vue-flow__edge {
-    text-align: left; /* 设置edges的左对齐 */
-  }
-  #contextMenu{
-    /* display: none; */
-    position: absolute;
-  background-color: #fff;
-  border-radius: 5px;
-  padding: 10px;
-  text-align: center;
-  color: black;
-  font-size: 14px;
-  font-weight: 400;
-  cursor: pointer;
-  }
-  </style>
-  
-  

src/views/vuetree/useDnD.js

@@ -157,20 +157,8 @@ export default function useDragAndDrop() {
         data: image1,
       }
       snodes.value.push(newNode)
-      // const newedges = {
-      //   type: 'smoothstep',
-      //   smooth: true,
-      //   markerEnd: MarkerType.ArrowClosed,
-      // }
-      // sedges.value.push(newedges)
     
     }
-  
-    /**
-     * Align node position after drop, so it's centered to the mouse
-     *
-     * We can hook into events even in a callback, and we can remove the event listener after it's been called.
-     */
     const { off } = onNodesInitialized(() => {
       updateNode(nodeId, (node) => ({
         position: { x: node.position.x - node.dimensions.width / 2, y: node.position.y - node.dimensions.height / 2 },