9.6

src/style/index.css

@@ -68,7 +68,7 @@ img{
 }
 .heder_tabs .el-tabs__item{
     width: 120px;
-    height: 40px;
+    height: 39px;
 }
 body{
     width: 100%;
@@ -76,9 +76,9 @@ body{
     background-color:rgba(123, 176, 232, 0.1);
 }
 .heder_tabs .el-tabs__item.is-active{
-    background-color: #fff;
+  background-color: #2267B1 !important;
     border-radius: 10px 10px 0px 0px;
-    color: #2267B1 ;
+    color: #FED500 ;
 }
 .el-tabs--card>.el-tabs__header .el-tabs__item,.el-tabs--card>.el-tabs__header .el-tabs__nav{
     border: none;
@@ -382,7 +382,8 @@ position:relative;
   display: block;
   width: 45%;
   height: 2px;
-  background: linear-gradient( 270deg, #1E69FF 0%, #5B91FF 100%);
+ /* // background: linear-gradient( 270deg, #1E69FF 0%, #5B91FF 100%); */
+ background: #FED500;
   border-radius: 0px 0px 0px 0px;
   bottom: 3px;
   position: absolute;

src/style/style.css

@@ -76,9 +76,9 @@ body{
     background-color:rgba(123, 176, 232, 0.1);
 }
 .heder_tabs .el-tabs__item.is-active{
-    background-color: #fff;
-    border-radius: .0521rem .0521rem 0px 0px;
-    color: #2267B1 ;
+  background-color: #2267B1 !important;
+    border-radius: 10px 10px 0px 0px;
+    color: #FED500 ;
 }
 .el-tabs--card>.el-tabs__header .el-tabs__item,.el-tabs--card>.el-tabs__header .el-tabs__nav{
     border: none;
@@ -396,7 +396,7 @@ position:relative;
   display: block;
   width: 45%;
   height: 2px;
-  background: linear-gradient( 270deg, #1E69FF 0%, #5B91FF 100%);
+  background: #FED500;
   border-radius: 0px 0px 0px 0px;
   bottom: 3px;
   position: absolute;

src/views/echart/index.vue

@@ -4,7 +4,7 @@
 <!-- 折线图 -->
   <div>
   <div class="echartitem">
-      <div id="line" style="width: 340px;height:.9375rem;"></div>
+      <div id="line" style="width: 340px;height:180px;"></div>
   </div>
   </div>
 </template>

src/views/echart/optimize_monitor.vue

@@ -4,7 +4,7 @@
 <!-- 折线图 -->
     <div>
     <div class="echartitem">
-        <div id="line" style="width: 100%;height:0.8888rem;"></div>
+        <div id="line" style="width: 100%;height:170px;"></div>
     </div>
     </div>
   </template>

src/views/home.vue

@@ -153,166 +153,6 @@
                 </div>
               </template>
             </el-dialog>
-            <!-- 优化目标 -->
-            <el-dialog v-model="dialog.targetdialog"
-            v-if="tabactive=='优化目标'"
-             align-center :modal="false" :close-on-click-modal="true"
-              :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
-              :before-close="handleClose" width="50%" class="dialog_class bgcolor tianjia">
-  
-              <template #header="{ titleId, titleClass }">
-                <div class="my-header ">
-                  <el-image :src="getImgPath('q1.png')" fit="contain"></el-image>
-                  <h4 :id="titleId" :class="titleClass">优化目标</h4>
-                </div>
-              </template>
-              <div>
-                
-                  <el-table :data="tableData" stripe style="width: 100%">
-                    <el-table-column type="index" label="编号"  width="70" />
-                    <el-table-column prop="qi" label="启用" width="70">
-                    <template v-slot="scope">
-                      <el-checkbox :label="false" v-model="scope.row.qi" />
-                    </template>
-                  </el-table-column>
-                    <el-table-column prop="data" label="目标类型" width="120">
-                    <template v-slot="scope">
-                      <el-select v-model="scope.row.device"  class="no-border " :suffix-icon="CaretBottom"  placeholder="请选择">
-                            <el-option
-                              v-for="item in options"
-                              :key="item.value"
-                              :label="item.label"
-                              :value="item.value">
-                            </el-option>
-                          </el-select>
-  
-                    </template>
-              </el-table-column>
-                    <el-table-column prop="name" label="优化方向"  width="100">
-                      <template v-slot="scope">
-                      <el-select class="no-border "  v-model="scope.row.z" :suffix-icon="CaretBottom" placeholder="请选择">
-                            <el-option
-                              v-for="item in options1"
-                              :key="item.value"
-                              :label="item.label"
-                              :value="item.value">
-                            </el-option>
-                          </el-select>
-  
-                    </template>
-                  </el-table-column>
-                    <el-table-column prop="q" label="权重系数"/>
-                    <el-table-column prop="cai" label="采用基准翼型数据缩放" width="180">
-                      <template v-slot="scope">
-                      <el-checkbox :label="scope.row.qi?'采用':'不采用'" v-model="scope.row.qi" />
-  
-                    </template>
-                  </el-table-column>
-                    <el-table-column prop="yin" label="缩放因子" />
-                    <el-table-column prop="address" label="备注" width="200" />
-                  </el-table>
-            
-              </div>
-              <template #footer>
-                <div class="dialog-footer">
-                  <el-button @click="dialog.targetdialog = false">取消</el-button>
-                  <el-button type="primary" @click="targetclick(); dialog.targetdialog = false">
-                    确定
-                  </el-button>
-                </div>
-              </template>
-            </el-dialog>
-            <!-- 设计变量 -->
-            <el-dialog v-model="dialog.design" 
-            v-if="tabactive=='设计变量'"
-            align-center :modal="false" :close-on-click-modal="true"
-              :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
-              :before-close="handleClose" width="50%" class="dialog_class bgcolor tianjia">
-  
-              <template #header="{ titleId, titleClass }">
-                <div class="my-header ">
-                  <el-image :src="getImgPath('q2.png')" fit="contain"></el-image>
-                  <h4 :id="titleId" :class="titleClass">设计变量</h4>
-                </div>
-              </template>
-              <div>
-                
-                <el-table :data="designtable" stripe style="width: 100%">
-                    <el-table-column type="index" label="编号"  width="70" />
-                    <el-table-column prop="name" label="变量名称" width="100"/>
-                    <el-table-column prop="date" label="变量类型" width="120"/>
-                    <el-table-column prop="name" label="上限值"  width="100"/>
-                    <el-table-column prop="q" label="权重系数"/>
-                    <el-table-column prop="cai" label="基准值" width="100"/>
-                    <el-table-column prop="yin" label="下限值" />
-                    <el-table-column prop="address" label="备注" />
-                  </el-table>
-              </div>
-              <template #footer>
-                <div class="dialog-footer">
-                  <el-button @click="dialog.design = false">取消</el-button>
-                  <el-button type="primary" @click="dialog.design = false">
-                    确定
-                  </el-button>
-                </div>
-              </template>
-            </el-dialog>
-             <!-- 约束条件 -->
-             <el-dialog v-model="dialog.constraint" 
-             v-if="tabactive=='约束条件'"
-             align-center :modal="false" :close-on-click-modal="true"
-              :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
-              :before-close="handleClose" width="800" class="dialog_class bgcolor tianjia">
-  
-              <template #header="{ titleId, titleClass }">
-                <div class="my-header ">
-                  <el-image :src="getImgPath('q3.png')" fit="contain"></el-image>
-                  <h4 :id="titleId" :class="titleClass">约束条件</h4>
-                </div>
-              </template>
-              <div>
-                
-                  <el-table :data="tableData" stripe style="width: 100%">
-                    <el-table-column type="index" label="编号"  width="100" />
-                    <el-table-column prop="data" label="约束类型" >
-                    <template v-slot="scope">
-                      <el-select v-model="scope.row.device"  class="no-border " :suffix-icon="CaretBottom"  placeholder="请选择">
-                            <el-option
-                              v-for="item in options2"
-                              :key="item.value"
-                              :label="item.label"
-                              :value="item.value">
-                            </el-option>
-                          </el-select>
-  
-                    </template>
-              </el-table-column>
-                    <el-table-column prop="name" label="约束关系"  >
-                      <template v-slot="scope">
-                      <el-select class="no-border "  v-model="scope.row.z" :suffix-icon="CaretBottom" placeholder="请选择">
-                            <el-option
-                              v-for="item in options3"
-                              :key="item.value"
-                              :label="item.label"
-                              :value="item.value">
-                            </el-option>
-                          </el-select>
-  
-                    </template>
-                  </el-table-column>
-                    <el-table-column prop="address" label="约束基准值"  />
-                  </el-table>
-            
-              </div>
-              <template #footer>
-                <div class="dialog-footer">
-                  <el-button @click="dialog.constraint = false">取消</el-button>
-                  <el-button type="primary" @click=" dialog.constraint = false">
-                    确定
-                  </el-button>
-                </div>
-              </template>
-            </el-dialog>
             <!-- 外形参数化 -->
             <el-dialog v-model="dialog.parameter"
             v-if="tabactive=='Task-11'"
@@ -649,7 +489,7 @@
                   </el-form-item>
                   <el-input v-model="name" maxlength="18"
                       oninput="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" class="w-50 m-2"
-                      placeholder="请输入关键字" />
+                      placeholder="请输入" />
                       <el-button class="btncolor">查询</el-button>
                       <el-button class="btncolor">添加</el-button>
                       <el-button class="btncolor">删除</el-button>
@@ -881,31 +721,6 @@
             <div class="main  mianflex">
               <!--left菜单栏  -->
            <Sidebar />
-              <!-- <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">
-                    <template #default="{ node, data }">
-                          <div>
-                            <img :src="data.img" class="custom-image" />
-                            <span class="custom-text">
-                              {{ node.label }}
-                            </span>
-                          </div>
-                        </template>
-                  </el-tree>
-                 <el-tree :data="datatree1"  class="custom-tree1" default-expand-all  :props="defaultProps" @node-click="handleNodeClick">
-                    <template #default="{ node, data }">
-                          <div>
-                            <img :src="getImgPath(data.img)" class="custom-image" />
-                            <span class="custom-text">
-                              {{ node.label }} 
-                            </span>
-                          </div>
-                        </template>
-                  </el-tree> 
-            </div>
-              </div> -->
             <!-- 放图形 -->
             <div class="main_container">
               <div class="main_model">
@@ -950,6 +765,7 @@
                   </li>
                 </div>
               </div> 
+              <div v-if="footerShow">
               <div class="footerTextBox"   v-if="activeIndex==0">
                   <el-input
                     class="footerText"
@@ -965,7 +781,7 @@
                 </ul>
                 <div  class="footer-content">
                 <div class="eldesign" v-if="activeIndex2==0">
-                  <el-table :data="designtable" border style="width: 100%">
+                 <el-table :data="designtable" border style="width: 100%">
                   <el-table-column type="index" label="编号"  width="70" />
                   <el-table-column prop="name" label="变量名称">
                     <template #default="{ row }">
@@ -996,12 +812,105 @@
                   <template #default="{ row }">
                     <el-input v-model="row.yin" @change="handleEdit(row)" />
                   </template>
+                </el-table-column> 
+                </el-table>
+                
+                </div>
+                <div class="elconstraint" v-if="activeIndex2==1">
+                  <el-table :data="tableData" stripe style="width: 100%">
+                  <el-table-column type="index" label="编号"  width="100" />
+                  <el-table-column prop="data" label="约束类型" >
+                  <template v-slot="scope">
+                    <el-select v-model="scope.row.device"  class="no-border " :suffix-icon="CaretBottom"  placeholder="请选择">
+                          <el-option
+                            v-for="item in options2"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value">
+                          </el-option>
+                        </el-select>
+
+                  </template>
+                </el-table-column>
+                      <el-table-column prop="name" label="约束关系"  >
+                        <template v-slot="scope">
+                        <el-select class="no-border "  v-model="scope.row.z" :suffix-icon="CaretBottom" placeholder="请选择">
+                              <el-option
+                                v-for="item in options3"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value">
+                              </el-option>
+                            </el-select>
+
+                      </template>
+                    </el-table-column>
+                      <el-table-column prop="address" label="约束基准值">
+                        <template #default="{ row }">
+                          <el-input v-model="row.address" @change="handleEdit(row)" />
+                        </template>
+                      </el-table-column>
+                    </el-table>
+                
+                </div>
+                <div class="eloptimize" v-if="activeIndex2==2">
+                  <el-table :data="eloptimize" stripe style="width: 100%">
+                  <el-table-column type="index" label="编号"  width="70" />
+                  <el-table-column prop="qi" label="启用" width="70">
+                  <template v-slot="scope">
+                    <el-checkbox :label="false" v-model="scope.row.qi" />
+                  </template>
+                </el-table-column>
+                  <el-table-column prop="data" label="目标类型" width="120">
+                  <template v-slot="scope">
+                    <el-select v-model="scope.row.device"  class="no-border " :suffix-icon="CaretBottom"  placeholder="请选择">
+                          <el-option
+                            v-for="item in options"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value">
+                          </el-option>
+                        </el-select>
+
+                  </template>
+            </el-table-column>
+                  <el-table-column prop="name" label="优化方向"  width="100">
+                    <template v-slot="scope">
+                    <el-select class="no-border "  v-model="scope.row.z" :suffix-icon="CaretBottom" placeholder="请选择">
+                          <el-option
+                            v-for="item in options1"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value">
+                          </el-option>
+                        </el-select>
+
+                  </template>
+                </el-table-column>
+                  <el-table-column prop="q" label="权重系数">
+                    <template #default="{ row }">
+                          <el-input v-model="row.q" @change="handleEdit(row)" />
+                        </template>
+                  </el-table-column>
+                  <el-table-column prop="cai" label="采用基准翼型数据缩放" width="180">
+                    <template v-slot="scope">
+                    <el-checkbox :label="scope.row.qi?'采用':'不采用'" v-model="scope.row.qi" />
+
+                  </template>
                 </el-table-column>
+                  <el-table-column prop="yin" label="缩放因子">
+                    <template #default="{ row }">
+                          <el-input v-model="row.yin" @change="handleEdit(row)" />
+                        </template>
+                  </el-table-column>
+                  <el-table-column prop="address" label="备注" width="200">
+                    <template #default="{ row }">
+                          <el-input v-model="row.address" @change="handleEdit(row)" />
+                        </template>
+                  </el-table-column>
                 </el-table>
                 
                 </div>
-                <div class="elconstraint" v-if="activeIndex2==1">约束条件</div>
-                <div class="eloptimize" v-if="activeIndex2==2">优化目标</div>
               </div>
               <div class="dibu">
                 <div class="footer-add">
@@ -1019,37 +928,8 @@
                 </div>
               </div>
           </div>
+        </div>
               <div class="pading_foter">
-             
-                <!-- 日志 -->
-                <!-- <div class="footerTitle   el-tag--primary">
-                <div>
-                  <p>信息栏</p>
-                </div>
-                <div>
-                  <li
-                    class="exloadbox"
-                    v-show="elodingfalse"
-                  >
-                    <span>正在求解中</span>
-                    <i class="el-icon-loading"></i>
-                  </li>
-                  <li>
-                    <span >清空</span>
-                  </li>
-                  <li>
-                    <span @click="footerShows('foot')">&#9650;&#9660;</span>
-                  </li>
-                </div>
-              </div>  -->
-                 <!-- <div class="footerTextBox"   v-if="footerShow">
-                  <el-input
-                    class="footerText"
-                    type="textarea"
-                    id="textarea_id"
-                    v-model="logs"
-                  ></el-input>
-                </div>  -->
                 </div>
               </div>
               </el-footer>
@@ -1120,7 +1000,18 @@
     },
   
   ])
-
+  let options1=ref([
+{ label: '增大', value: '增大' },
+{ label: '减小', value: '减小' },
+])
+  let options2=ref([
+{ label: '升力系数', value: '升力系数' },
+{ label: '翼型面积', value: '翼型面积' },
+])
+let options3=ref([
+{ label: '大于', value: '大于' },
+{ label: '小于', value: '小于' },
+])
   const datatree1 = ref([
     {
       id:2,
@@ -1396,37 +1287,22 @@
       ],
     },
   ]
+  const eloptimize = ref([
+  {
+    qi:"false",
+    date: '2016-05-03',
+    device: '升阻比',
+    z: '增大',
+    q:1.0,
+    cai:false,
+    yin:1.0,
+    address:'serrrrrrr'
+  }
+  ])
   const tableData = ref([
     {
-      qi:"false",
-      date: '2016-05-03',
-      device: '升阻比',
-      z: '增大',
-      q:1.0,
-      cai:false,
-      yin:1.0,
-      address:'serrrrrrr'
-      
-    },
-    {
-      qi:"true",
-      date: '2016-05-03',
       device: '升阻比',
       z: '增大',
-      q:1.0,
-      cai:false,
-      yin:1.0,
-      address:'serrrrrrr'
-      
-    },
-    {
-      qi:"false",
-      date: '2016-05-03',
-      device: '升阻比',
-      z: '增大',
-      q:1.0,
-      cai:false,
-      yin:1.0,
       address:'serrrrrrr'
       
     },
@@ -1438,7 +1314,7 @@
       device: '升阻比',
       z: '增大',
       q:1.0,
-      cai:false,
+      cai:'false',
       yin:1.0,
       address:'serrrrrrr'
       
@@ -1589,6 +1465,28 @@
                 
                 })
       }
+    } else if(activeIndex2.value==1){
+      for (let i = 0; i < tablevalnum; i++) {
+        tableData .value.push({
+          device: '升阻比',
+          z: '增大',
+          address:''
+                })
+      }
+    }else if(activeIndex2.value==2){
+      for (let i = 0; i < tablevalnum; i++) {
+        eloptimize.value.push( {
+        qi:"false",
+        date: '2016-05-03',
+        device: '升阻比',
+        z: '增大',
+        q:1.0,
+        cai:false,
+        yin:1.0,
+        address:'serrrrrrr'
+ })
+        
+      }
     }
 
   }
@@ -1615,9 +1513,7 @@
       height: 25px !important;
       z-index: 99;;
       border-radius: 5px 5px 0px 0px;
-      // bottom: 160px;
-      // position: absolute;
-      // width: 100%;
+      overflow: hidden;
   }
   .footerTitle div {
     display: flex;
@@ -1685,6 +1581,7 @@ border-radius: 0px 0px 0px 0px;
   width: 100%;
   height: 178px;
   overflow-y: auto;
+  background: #fff;
 }
 .youhualog .active2 {
   background-color: #f0f0f0;

src/views/vueflow/modelb.vue

@@ -58,12 +58,6 @@ onMounted(() => {
           stroke: none; /* 移除节点边框 */
         }
         
-.vue-flow__edge-path {
-  fill: none;
-  stroke-width: 1;
-  marker-end: url(#vue-flow__arrow);
-}
- 
 .vue-flow__edge-text {
   display: none;
 }

src/views/vuetree/eltree.vue

@@ -33,18 +33,18 @@ onMounted(() => {
 <style scoped>
 
 .icons img{
-    width: 50px;;
+    width: 35px;;
 
 }
 .icons span{
   display: block;
-  font-size: 13px;
+  font-size: 12px;
 }
 </style>
 <style>
 .vue-flow__node.draggable {
-  width: 80px !important;
-    height: 80px !important;
+  width: 68px !important;
+    height: 68px !important;
     border: none;
     background-color: rgba(0,0,0,0);
 }
@@ -52,11 +52,6 @@ onMounted(() => {
           stroke: none; /* 移除节点边框 */
         }
         
-.vue-flow__edge-path {
-  fill: none;
-  stroke-width: 1;
-  marker-end: url(#vue-flow__arrow);
-}
  
 .vue-flow__edge-text {
   display: none;

src/views/vuetree/index.vue

@@ -1,6 +1,67 @@
+<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"> 
+      <!-- <template  #node-process="props">   //  @contextmenu.prevent="onContextMenu"  -->
+         <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>
+    </Panel>
+    <Controls position="top-left">
+      <ControlButton title="Reset Transform" @click="resetTransform">
+        <Icon name="reset" />
+      </ControlButton>
+
+      <ControlButton title="Shuffle Node Positions" @click="updatePos">
+        <Icon name="update" />
+      </ControlButton>
+
+      <ControlButton title="Toggle Dark Mode" @click="toggleDarkMode">
+        <Icon v-if="dark" name="sun" />
+        <Icon v-else name="moon" />
+      </ControlButton>
+
+      <ControlButton title="Log `toObject`" @click="logToObject">
+        <Icon name="log" />
+      </ControlButton>
+    </Controls>
+  
+  </VueFlow>
+ <div class="dnd-flow" >
+  
+      <div id="contextMenu"   @click="deleteItemConfirm">删除</div>
+    
+   
+  </div> 
+</template>
 <script setup>
-import { ref } from 'vue'
-import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { ref,markRaw  } from 'vue'
+import { VueFlow, useVueFlow,MarkerType } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
 import { ControlButton, Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
@@ -20,47 +81,73 @@ import Icon from './Icon.vue'
  */
 // our dark mode toggle flag
 const dark = ref(false)
-const { onInit, onNodeDragStop, onConnect, addEdges, setViewport, toObject } = useVueFlow()
+const { onInit, onNodeDragStop,onNodeContextMenu, onConnect, addEdges, setViewport, toObject } = useVueFlow()
   let vueFlowRef=ref();
+  const edgeTypes = {
+  smoothstep: markRaw(eltree),
+}
   let emit = defineEmits(['optimizerfalse']);
-  const props = defineProps({})
-  let  shopShow=ref(false);
+  const props = defineProps({
+    
+    optimizer: {
+    type: Boolean,
+  },
+  })
+  const  shopShow=ref(false);
   let noid=ref([]);
+  let Edgeid=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 onConnect(params){
+  //     // 更改连线类型
+  //     console.log(params)
+  //    // params.type = 'custom';
+  //     // ...其他连线逻辑
+  //   }
+  onConnect((connection) => {
+     console.log(connection);
+    connection.type = 'smoothstep';
+    connection.markerEnd = MarkerType.ArrowClosed;
+
+ 
+  addEdges(connection)
+})
   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();
+  // 监听线
+  function onEdgeClick(e){
+    console.log(e.edge.id);
+    Edgeid.value=e.edge.id;
+    //console.log(999000)
+  }
+  function  logEvent(name,event){
+console.log(2222)
+  }
+ function  onContextMenu(event){
+  console.log(1111)
+  console.log(event);
    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';
+          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';
-      shopShow.value=true;
        event.preventDefault();
-  
+      //shopShow.value=true;
+     // document.getElementById('contextMenu').style.display = 'none';
         }
       }
     
@@ -68,11 +155,11 @@ const { onInit, onNodeDragStop, onConnect, addEdges, setViewport, toObject } = u
       //点击左键右键内容消失
       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';
+    //   shopShow.value=false;
     }
   });
-      function   onDeleteKey(event,node) {
+    function  onDeleteKey(event,node) {
         // 禁用Backspace删除节点
         console.log(event)
         event.preventDefault();
@@ -80,59 +167,28 @@ const { onInit, onNodeDragStop, onConnect, addEdges, setViewport, toObject } = u
       }
   //删除
   const deleteItemConfirm=()=>{
-    //const index = nodes.value.findIndex(n => n.id === noid.value.id);
     if(noid.value.id){
-      console.log(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
+    document.getElementById('contextMenu').style.display = 'none';
     }
   
   }
-
-/**
- * This is a Vue Flow event-hook which can be listened to from anywhere you call the composable, instead of only on the main component
- * Any event that is available as `@event-name` on the VueFlow component is also available as `onEventName` on the composable and vice versa
- *
- * onInit is called when the VueFlow viewport is initialized
- */
 onInit((vueFlowInstance) => {
   // instance is the same as the return of `useVueFlow`
   vueFlowInstance.fitView()
 })
 
-/**
- * onNodeDragStop is called when a node is done being dragged
- *
- * Node drag events provide you with:
- * 1. the event object
- * 2. the nodes array (if multiple nodes are dragged)
- * 3. the node that initiated the drag
- * 4. any intersections with other nodes
- */
 onNodeDragStop(({ event, nodes, node }) => {
   console.log('Node Drag Stop', { event, nodes, node })
 })
 
-/**
- * onConnect is called when a new connection is created.
- *
- * You can add additional properties to your new edge (like a type or label) or block the creation altogether by not calling `addEdges`
- */
 onConnect((connection) => {
   addEdges(connection)
+  console.log(1111);
+  console.log(edges.value);
 })
 
-/**
- * To update a node or multiple nodes, you can
- * 1. Mutate the node objects *if* you're using `v-model`
- * 2. Use the `updateNode` method (from `useVueFlow`) to update the node(s)
- * 3. Create a new array of nodes and pass it to the `nodes` ref
- */
 function updatePos() {
   nodes.value = nodes.value.map((node) => {
     return {
@@ -144,10 +200,14 @@ function updatePos() {
     }
   })
 }
-
-/**
- * toObject transforms your current graph data to an easily persist-able object
- */
+function removeEdge(id) {
+id= Edgeid.value;
+vueFlowRef.value.removeEdges(id);
+}
+function removeNode(id) {
+    id= noid.value.id
+  vueFlowRef.value.removeNodes(noid.value.id);
+}
 function logToObject() {
   console.log(toObject())
 }
@@ -162,57 +222,18 @@ function resetTransform() {
 function toggleDarkMode() {
   dark.value = !dark.value
 }
+// 点击右键显示
+// function contextmenuclick(e){
+//   console.log(e)
+// }
 </script>
 
-<template>
-  <div>
-    <div id="contextMenu"   v-show="shopShow"  @click="deleteItemConfirm">删除</div>
-</div>
-  <VueFlow
-    :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"
-      @keydown.delete="onDeleteKey"   @dragover="onDragOver" @dragleave="onDragLeave"  @node-click="onNodeClick">
-      <template #node-default="props">
-         <eltree  :node="props"  />
-      </template>
-    
-    <Background pattern-color="#aaa" :gap="16" /> 
-
-    <!-- <MiniMap /> -->
-
-    <Controls position="top-left">
-      <ControlButton title="Reset Transform" @click="resetTransform">
-        <Icon name="reset" />
-      </ControlButton>
-
-      <ControlButton title="Shuffle Node Positions" @click="updatePos">
-        <Icon name="update" />
-      </ControlButton>
-
-      <ControlButton title="Toggle Dark Mode" @click="toggleDarkMode">
-        <Icon v-if="dark" name="sun" />
-        <Icon v-else name="moon" />
-      </ControlButton>
-
-      <ControlButton title="Log `toObject`" @click="logToObject">
-        <Icon name="log" />
-      </ControlButton>
-    </Controls>
-  </VueFlow>
-
-</template>
 <style>
   .vue-flow__edge {
     text-align: left; /* 设置edges的左对齐 */
   }
   #contextMenu{
-    /* display: none; */
+    display: none; 
     position: absolute;
   background-color: #fff;
   border-radius: 5px;
@@ -222,5 +243,23 @@ function toggleDarkMode() {
   font-size: 14px;
   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;
   }
 </style>

src/views/vuetree/useDnD.js

@@ -14,9 +14,6 @@ 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 { E } from '@kitware/vtk.js/macros2'
-import { Right } from '@element-plus/icons'
-import { LEFT_CHECK_CHANGE_EVENT } from 'element-plus'
 let nid = 0;
 let id=0
 let datas={}
@@ -29,7 +26,6 @@ function getId() {
 }
 function imagefun(){
   console.log(nid);
-  
   if(nid=='1-1'){
     return  datas = {label: '优化问题', image:gc1}
     }else if(nid=='1-2'){
@@ -58,7 +54,7 @@ function imagefun(){
       return datas = {label:'AirfoilAero', image:xuek9}
     }
     else{
-      return;
+      return null;
     }
 
   }
@@ -87,15 +83,13 @@ export default function useDragAndDrop() {
 
   function onDragStart(event, type,id) {
     nid=id;
-    console.log(id);
-    console.log(1234667)
     if (event.dataTransfer) {
       event.dataTransfer.setData('application/vueflow', type)
-      event.dataTransfer.effectAllowed = 'move'
+      event.dataTransfer.effectAllowed = 'move'       
     }
 
-    draggedType.value = type
-   // draggedType.value = 'smoothstep'
+    draggedType.value =type;
+    //draggedType.value = 'smoothstep'
     isDragging.value = true
 
     document.addEventListener('drop', onDragEnd)
@@ -147,164 +141,12 @@ export default function useDragAndDrop() {
     const image1=imagefun();
  
     let snodes=ref([]);
-    let sedges=[];
+    let sedges=ref([]);
 
     if(nid=='4'){
-      const nodes = ref([
-        {
-      data:{label: '开始', image: f11},
-      id: "node_01",
-      position: {x:245, y: 317},
-      // type: "default",
-      sourcePosition: Position.Right,
-      targetPosition: Position.Left, 
-
-      },
-      {
-      data:{label: '优化器', image: f32},
-      id: "node_02",
-      position: {x: 435, y: 317},
-      // type: "default",
-      sourcePosition: Position.Right,
-      targetPosition: Position.Left, 
-      class: 'light',
-   
-      },
-      {
-      data:{label: 'Rosenbank', image: f33},
-      id: "node_03",
-      position: {x: 630, y: 317},
-      // type: "default",
-     // type: "default",
-      sourcePosition: Position.Right,
-      targetPosition: Position.Left, 
-      // sourcePosition: Position.Top,
-      // targetPosition: Position.Bottom, 
-     
-      },
-      {
-      data:{label: '结束', image: f12},
-      id: "node_04",
-      position: {x: 804, y: 317},
-      // type: "default",
-      sourcePosition: Position.Right,
-      targetPosition: Position.Left, 
-      },
-      {
-      data:{label: '输入1', image: f21},
-      id: "node_05",
-      position: {x: 435, y: 146},
-      // type: "default",
-      draggable: true, 
-      sourcePosition: Position.Top,
-      targetPosition: Position.Bottom, 
-   
-      },
-      {
-      data:{label: '输入2', image: f21},
-      id: "node_06",
-      position: {x:804, y: 146},
-      //type: "default",//default
-      sourcePosition: Position.Top,
-      targetPosition: Position.Bottom, 
-      },
-      {
-      data:{label: '输出', image: f22},
-      id: "node_07",
-      position: {x: 630, y: 519},
-      //type: "default",
-      sourceHandle: 'Top',
-      sourcePosition: Position.Bottom,
-      targetPosition: Position.Top, 
-      },
-      
-      ]);
-      const edges = ref([
-      {
-        id: 'e1->2',
-        source: 'node_01',
-        target: 'node_02',
-        label: '按照我的来',
-        type: 'straight',
-        markerEnd: {
-          type: MarkerType.ArrowClosed,
-        },
-        // id: 'e1->2',
-        // source: 'node_01',
-        // target: 'node_02',
-        // type: 'straight',
-        // markerEnd: MarkerType.ArrowClosed,
-
-      },
-      {
-        id: 'e2->3',
-        source: 'node_02',
-        target: 'node_03',
-        type: 'straight',
-       // markerEnd: MarkerType.ArrowClosed,
-      //   markerEnd: {
-      //     type: MarkerType.ArrowClosed,
-      //     color: 'red',
-      // },
-      markerEnd: {
-        tagName: MarkerType.ArrowClosed,
-        width: 20,
-        height: 20,
-      },
-        //type: 'output',
-        // style: {
-        //   stroke: '#FF0000',
-        //   markerEnd: MarkerType.ArrowClosed,
-        // },
-      },
-      {
-        id: 'e3->4',
-        source: 'node_03',
-        target: 'node_04',
-        type: 'straight' ,
-        markerEnd: "arrow" // 或者使用 " arrowhead"
-
+      // const nodes = ref([])
+      // const edges = ref([])
 
-      },
-      {
-        id: 'e4->5',
-        source: 'node_05',
-        target: 'node_03',
-        type: 'straight',
-        animated: true ,
-        sourceHandle: 'Top',
-        targetHandle:'Bottom',
-        markerEnd: MarkerType.ArrowClosed,
-
-      },
-      {
-        id: 'e5->6',
-        source: 'node_06',
-        target: 'node_03',
-        type: 'straight',
-         animated: true,
-        // source: 'handle-bottom',
-        // target: 'handle-top',
-        sourceHandle: 'Top',
-        targetHandle:'Bottom',
-        tagName: MarkerType.ArrowClosed,
-
-      
-      },
-      {
-        id: 'e6->7',
-        source: 'node_03',
-        target: 'node_07',
-        // type: 'straight',
-        type: 'straight',
-        animated: true,
-        sourceHandle: 'Top',
-        targetHandle:'Bottom',
-        markerEnd: MarkerType.ArrowClosed,
-      },
-      ]);
-snodes=nodes;
- sedges=edges;
     }else{
       snodes.value=[];
       sedges.value=[];
@@ -314,17 +156,16 @@ snodes=nodes;
         position,
         data: image1,
       }
-      console.log(newNode);
       snodes.value.push(newNode)
-      const newedges = {
-        type: 'smoothstep',
-        markerEnd: MarkerType.ArrowClosed,
-      }
-      sedges.value.push(newedges)
-      //sedges=edges
+      // const newedges = {
+      //   type: 'smoothstep',
+      //   smooth: true,
+      //   markerEnd: MarkerType.ArrowClosed,
+      // }
+      // sedges.value.push(newedges)
+    
     }
   
-   // console.log(newNode);
     /**
      * Align node position after drop, so it's centered to the mouse
      *
@@ -337,9 +178,9 @@ snodes=nodes;
 
       off()
     })
-    console.log(snodes.value);
     addNodes(snodes.value)
-    addEdges(sedges.value)
+    //addEdges(sedges.value)
+    console.log(sedges.value);
   }
 
   return {