8.23新版本更新

src/router/index.js

@@ -6,13 +6,43 @@ const router = createRouter({
     routes: [ 
         {
           path: '/',
-          name:'主页',
-          component: () => import('@/views/index.vue'),
+          name:'启动页',
+          component: () => import('@/views/openpage.vue'),
           meta:{
               keepAlive:false, // 需要缓存
-              title: '主页'
-          },   
+              title: '启动页'
+          },
+          children:[
+            {
+              path: '/home/newfile',
+              name: 'newfile',
+              component: () => import('@/views/home/newfile.vue'),
+            },
+            {
+              path: '/home/baocuo',
+              name: 'baocuo',
+              component: () => import('@/views/home/baocuo.vue'),
+            }
+          ]   
       },
+      {
+        path: '/index',
+        name:'主页1',
+        component: () => import('@/views/index.vue'),
+        meta:{
+            keepAlive:false, // 需要缓存
+            title: '主页1'
+        },   
+    },
+    {
+      path: '/home',
+      name:'主页',
+      component: () => import('@/views/home.vue'),
+      meta:{
+          keepAlive:false, // 需要缓存
+          title: '主页'
+      },   
+  },
       {
         path: '/vueflow',
         name:'vueflow',

src/views/home.vue

@@ -0,0 +1,1581 @@
+<template>
+    <div class="common-layout">
+      <el-container>
+        <el-header>
+          <myheader />
+        </el-header>
+        <el-main>
+          <div class="main_container padding_gg">
+            <div class="heder_tabs">
+              <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
+                <!-- 开始 -->
+                <el-tab-pane label="首页" name="User">
+                    <!-- <router-link to="/"> </router-link> -->
+                </el-tab-pane>
+                <el-tab-pane label="运行" name="Three">
+                  <div class="imgzong">
+                    <div class="listitem lbg_color3 bkcolor3 threelist" >
+                      <div class="item2 floatitem" v-for="(item, index) in Threelist" :key="'Three-' + index"
+                      :class="{ activeOrange: active == 'Three-' + index }"
+                      @click="clickgeometry($event, index, 'Three-' + index,item.titlie )">
+                        <el-image :src="getImgPath(item.url)" fit="cover" />
+                        <span>{{ item.titlie }}</span>
+                      </div>
+                    </div>
+                    <div class="listitem lbg_color3 bkcolor3" v-for="(item, index) in Threelist1" :key="'Three1-' + index"
+                      :class="{ activeOrange: active == 'Three1' + index }"
+                      @click="clickgeometry($event, index, 'Three1' + index,item.titlie )">
+                      <div class="item2 ">
+                        <el-image :src="getImgPath(item.url)" fit="cover" />
+                        <span>{{ item.titlie }}</span>
+                      </div>
+                    </div>
+                  </div>
+                
+                </el-tab-pane>
+                <el-tab-pane label="可视化" name="Config">
+                  <div class="imgzong">
+                    <!-- <button @click="etImgPath()"></button> -->
+                    <div class="listitem lbg_color3 bkcolor3" v-for="(item, index) in question" :key="'Config-' + index"
+                      :class="{ activeOrange: active == 'Config-' + index }"
+                      @click="clickgeometry($event, index, 'Config-' + index,item.titlie )">
+                      <div class="item2 ">
+                        <el-image :src="getImgPath(item.url)" fit="cover" />
+                        <span>{{ item.titlie }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </el-tab-pane>
+                <el-tab-pane label="数据库管理" name="Seven">
+                  <div class="imgzong">
+                    <div class="listitem lbg_color3 bkcolor3" v-for="(item, index) in Sevenlist" :key="'Seven' + index"
+                      :class="{ activeOrange: active == 'Seven' + index }"
+                      @click="clickgeometry($event, index, 'Seven' + index,item.titlie )">
+                      <div class="item2 ">
+                        <el-image :src="getImgPath(item.url)" fit="cover" />
+                        <span>{{ item.titlie }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </el-tab-pane>
+                <el-tab-pane label="帮助" name="eight">
+                  <div class="imgzong">
+                    <div class="listitem lbg_color3 bkcolor3" v-for="(item, index) in eightlist" :key="'eight' + index"
+                      :class="{ activeOrange: active == 'eight' + index }"
+                      @click="clickgeometry($event, index, 'eight' + index,item.titlie )">
+                      <div class="item2 ">
+                        <el-image :src="getImgPath(item.url)" fit="cover" />
+                        <span>{{ item.titlie }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </el-tab-pane>
+              </el-tabs>
+            </div>
+            <!-- 新建任务 -->
+            <el-dialog v-model="dialog.newdialog"
+            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="480" class="dialog_class bgcolor tianjia">
+  
+              <template #header="{ titleId, titleClass }">
+                <div class="my-header ">
+                  <el-image :src="getImgPath('s0.png')" fit="contain"></el-image>
+                  <h4 :id="titleId" :class="titleClass">新建任务</h4>
+                </div>
+              </template>
+              <div>
+                <el-form>
+                  <el-form-item label="任务编号：" :label-width="formLabelWidth6">
+                    <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="请输入" />
+                  </el-form-item>
+                  <el-form-item label="任务名称：" :label-width="formLabelWidth6">
+                    <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="请输入" />
+                  </el-form-item>
+                  <el-form-item label="任务类型：" :label-width="formLabelWidth6">
+                    <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="请输入" />
+                  </el-form-item>
+                  <el-form-item label="备注：" :label-width="formLabelWidth6">
+                    <el-input v-model="name" maxlength="18" type="textarea"
+                      oninput="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" class="w-50 m-2"
+                      placeholder="请输入" />
+                  </el-form-item>
+                </el-form>
+              </div>
+              <template #footer>
+                <div class="dialog-footer">
+                  <el-button @click="dialog.newdialog = false">取消</el-button>
+                  <el-button type="primary" @click="dialog.newdialog = false">
+                    确定
+                  </el-button>
+                </div>
+              </template>
+            </el-dialog>
+            <!-- 问题设定 -->
+            <el-dialog v-model="dialog.setdialog" 
+            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="480" class="dialog_class bgcolor tianjia">
+  
+              <template #header="{ titleId, titleClass }">
+                <div class="my-header ">
+                  <el-image :src="getImgPath('q0.png')" fit="contain"></el-image>
+                  <h4 :id="titleId" :class="titleClass">问题设定</h4>
+                </div>
+              </template>
+              <div class="numberinput">
+                <el-form>
+                  <el-form-item label="目标函数个数：" :label-width="formLabelWidth1">
+                    <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
+                  </el-form-item>
+                  <el-form-item label="建立代理模型约束个数：" :label-width="formLabelWidth1">
+                    <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
+                  </el-form-item>
+                  <el-form-item label="不建立代理模型约束个数：" :label-width="formLabelWidth1">
+                    <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
+                  </el-form-item>
+                </el-form>
+              </div>
+              <template #footer>
+                <div class="dialog-footer">
+                  <el-button @click="dialog.setdialog = false">取消</el-button>
+                  <el-button type="primary" @click="dialog.setdialog = false">
+                    确定
+                  </el-button>
+                </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'"
+            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="480" class="dialog_class bgcolor tianjia sel">
+  
+              <template #header="{ titleId, titleClass }">
+                <div class="my-header ">
+                  <el-image :src="getImgPath('t0.png')" fit="contain"></el-image>
+                  <h4 :id="titleId" :class="titleClass">外形参数化</h4>
+                </div>
+              </template>
+              <div class="numberinput">
+                <el-form>
+                  <el-form-item label="参数化方法：" :label-width="formLabelWidth6">
+                    <el-select   v-model="canshu" :suffix-icon="CaretBottom" placeholder="请选择">
+                            <el-option
+                              v-for="item in canshulist"
+                              :key="item.value"
+                              :label="item.label"
+                              :value="item.value">
+                            </el-option>
+                          </el-select>
+                  </el-form-item>  
+                </el-form>
+              </div>
+              <template #footer>
+                <div class="dialog-footer">
+                  <el-button @click="dialog.parameter = false">取消</el-button>
+                  <el-button type="primary" @click="dialog.parameter = false">
+                    确定
+                  </el-button>
+                </div>
+              </template>
+            </el-dialog>
+             <!-- 代理模型 -->
+             <el-dialog v-model="dialog.agency"
+             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="480" class="dialog_class bgcolor tianjia sel">
+  
+              <template #header="{ titleId, titleClass }">
+                <div class="my-header ">
+                  <el-image :src="getImgPath('t2.png')" fit="contain"></el-image>
+                  <h4 :id="titleId" :class="titleClass">代理模型</h4>
+                </div>
+              </template>
+              <div class="numberinput">
+                <el-form>
+                  <el-form-item label="代理模型类型：" :label-width="formLabelWidth2">
+                    <el-select   v-model="agval" :suffix-icon="CaretBottom" placeholder="请选择">
+                            <el-option
+                              v-for="item in agelist"
+                              :key="item.value"
+                              :label="item.label"
+                              :value="item.value">
+                            </el-option>
+                          </el-select>
+                  </el-form-item>  
+                  <el-form-item label="设计空间类型：" :label-width="formLabelWidth2">
+                    <el-select   v-model="agval1" :suffix-icon="CaretBottom" placeholder="请选择">
+                            <el-option
+                              v-for="item in agelist1"
+                              :key="item.value"
+                              :label="item.label"
+                              :value="item.value">
+                            </el-option>
+                          </el-select>
+                  </el-form-item> 
+                  <el-form-item label="试验设计方法：" :label-width="formLabelWidth2">
+                    <el-select   v-model="agval2" :suffix-icon="CaretBottom" placeholder="请选择">
+                            <el-option
+                              v-for="item in agelist2"
+                              :key="item.value"
+                              :label="item.label"
+                              :value="item.value">
+                            </el-option>
+                          </el-select>
+                  </el-form-item> 
+                  <el-form-item label="初始样本点数：" :label-width="formLabelWidth2">
+                    <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
+                  </el-form-item>
+                </el-form>
+              </div>
+              <template #footer>
+                <div class="dialog-footer">
+                  <el-button @click="dialog.agency = false">取消</el-button>
+                  <el-button type="primary" @click="dialog.agency = false">
+                    确定
+                  </el-button>
+                </div>
+              </template>
+            </el-dialog>
+            <!-- 终止条件 -->
+            <el-dialog v-model="dialog.enddialog" 
+            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="480" class="dialog_class bgcolor tianjia sel">
+  
+              <template #header="{ titleId, titleClass }">
+                <div class="my-header ">
+                  <el-image :src="getImgPath('t4.png')" fit="contain"></el-image>
+                  <h4 :id="titleId" :class="titleClass">终止条件</h4>
+                </div>
+              </template>
+              <div class="numberinput">
+                <el-form>
+                  <el-form-item label="EI最小值：" :label-width="formLabelWidth1">
+                    <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="请输入" />
+                  </el-form-item>
+                  <el-form-item label="目标函数收敛误差：" :label-width="formLabelWidth1">
+                    <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="请输入" />
+                  </el-form-item>
+                  <el-form-item label="优化解收敛精度：" :label-width="formLabelWidth1">
+                    <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="请输入" />
+                  </el-form-item>
+                  <el-form-item label="真实函数约束精度：" :label-width="formLabelWidth1">
+                    <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="请输入" />
+                  </el-form-item>
+                  <el-form-item label="代理模型约束精度：" :label-width="formLabelWidth1">
+                    <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="请输入" />
+                  </el-form-item>
+                </el-form>
+              </div>
+              <template #footer>
+                <div class="dialog-footer">
+                  <el-button @click="dialog.enddialog = false">取消</el-button>
+                  <el-button type="primary" @click="dialog.enddialog = false">
+                    确定
+                  </el-button>
+                </div>
+              </template>
+            </el-dialog>
+            <!-- 优化算法 -->
+            <el-dialog v-model="dialog.sufun" 
+            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="480" class="dialog_class sel bgcolor tianjia sel">
+  
+              <template #header="{ titleId, titleClass }">
+                <div class="my-header ">
+                  <el-image :src="getImgPath('Framem.png')" fit="contain"></el-image>
+                  <h4 :id="titleId" :class="titleClass">优化算法</h4>
+                </div>
+              </template>
+              <div class="numberinput">
+                <!-- class="border2" -->
+                <div>
+                  <!-- <div class="title2">GA遗传算法</div> -->
+                  <el-form-item label="优化算法" :label-width="formLabelWidth1">
+                    <el-select   v-model="ys" :suffix-icon="CaretBottom" placeholder="请选择">
+                            <el-option
+                              v-for="item in yslist"
+                              :key="item.value"
+                              :label="item.label"
+                              :value="item.value">
+                            </el-option>
+                          </el-select>
+                  </el-form-item>
+                       <el-form-item label="种群规模：" :label-width="formLabelWidth1">
+                    <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
+                  </el-form-item>
+                  <el-form-item label="最大进化代数:" :label-width="formLabelWidth1">
+                    <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
+                  </el-form-item>
+                  <el-form-item label="交叉概率：" :label-width="formLabelWidth1">
+                    <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
+                  </el-form-item>
+                  <el-form-item label="变异概率：" :label-width="formLabelWidth1">
+                    <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
+                  </el-form-item>
+                  <el-form-item label="交叉算子：" :label-width="formLabelWidth1">
+                    <el-select   v-model="addval2" :suffix-icon="CaretBottom" placeholder="请选择">
+                            <el-option
+                              v-for="item in addlist2"
+                              :key="item.value"
+                              :label="item.label"
+                              :value="item.value">
+                            </el-option>
+                          </el-select>
+                  </el-form-item>
+                  <el-form-item label="竞赛规模：" :label-width="formLabelWidth1">
+                    <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
+                  </el-form-item>
+                  <el-form-item label="保留优选策略：" :label-width="formLabelWidth1">
+                    <el-select   v-model="addval3" :suffix-icon="CaretBottom" placeholder="请选择">
+                            <el-option
+                              v-for="item in addlist3"
+                              :key="item.value"
+                              :label="item.label"
+                              :value="item.value">
+                            </el-option>
+                          </el-select>
+                  </el-form-item>
+                  <el-form-item label="变异算子选择：" :label-width="formLabelWidth1">
+                    <el-select   v-model="addval4" :suffix-icon="CaretBottom" placeholder="请选择">
+                            <el-option
+                              v-for="item in addlist4"
+                              :key="item.value"
+                              :label="item.label"
+                              :value="item.value">
+                            </el-option>
+                          </el-select>
+                  </el-form-item>
+                  <el-form-item label="precision:" :label-width="formLabelWidth1">
+                    <el-select   v-model="addval7" :suffix-icon="CaretBottom" placeholder="请选择">
+                            <el-option
+                              v-for="item in addlist7"
+                              :key="item.value"
+                              :label="item.label"
+                              :value="item.value">
+                            </el-option>
+                          </el-select>
+                  </el-form-item>
+                  <el-form-item label="GPU" :label-width="formLabelWidth1">
+                    <el-select   v-model="addval8" :suffix-icon="CaretBottom" placeholder="请选择">
+                            <el-option
+                              v-for="item in addlist8"
+                              :key="item.value"
+                              :label="item.label"
+                              :value="item.value">
+                            </el-option>
+                          </el-select>
+                  </el-form-item>
+                </div>
+              </div>
+              <template #footer>
+                <div class="dialog-footer">
+                  <el-button @click="dialog.sufun = false">取消</el-button>
+                  <el-button type="primary" @click="dialog.sufun = false">
+                    确定
+                  </el-button>
+                </div>
+              </template>
+            </el-dialog>
+            <!-- 加点方法 -->
+            <el-dialog v-model="dialog.addfun" 
+            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="480" class="dialog_class sel bgcolor tianjia sel">
+  
+              <template #header="{ titleId, titleClass }">
+                <div class="my-header ">
+                  <el-image :src="getImgPath('t3.png')" fit="contain"></el-image>
+                  <h4 :id="titleId" :class="titleClass">加点方法</h4>
+                </div>
+              </template>
+              <div class="numberinput">
+                <el-form>
+                  <el-form-item label="最大样本点数：" :label-width="formLabelWidth1">
+                    <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
+                  </el-form-item>
+                  <el-form-item label="加点准则：" :label-width="formLabelWidth1">
+                    <el-select   v-model="addval" :suffix-icon="CaretBottom" placeholder="请选择">
+                            <el-option
+                              v-for="item in addlist"
+                              :key="item.value"
+                              :label="item.label"
+                              :value="item.value">
+                            </el-option>
+                          </el-select>
+                  </el-form-item>
+                  <el-form-item label="单次迭代新增样本点数：" :label-width="formLabelWidth1">
+                    <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
+                  </el-form-item>
+                  <el-form-item label="约束处理方法:" :label-width="formLabelWidth1">
+                    <el-select   v-model="addval1" :suffix-icon="CaretBottom" placeholder="请选择">
+                            <el-option
+                              v-for="item in addlist1"
+                              :key="item.value"
+                              :label="item.label"
+                              :value="item.value">
+                            </el-option>
+                          </el-select>
+                  </el-form-item>
+                </el-form>
+              </div>
+              <template #footer>
+                <div class="dialog-footer">
+                  <el-button @click="dialog.addfun = false">取消</el-button>
+                  <el-button type="primary" @click="dialog.addfun = false">
+                    确定
+                  </el-button>
+                </div>
+              </template>
+            </el-dialog>
+            <!-- 任务管理 -->
+            <el-dialog v-model="dialog.task"
+            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="800px" class="dialog_class bgcolor tianjia">
+  
+              <template #header="{ titleId, titleClass }">
+                <div class="my-header ">
+                  <el-image :src="getImgPath('s11.png')" fit="contain"></el-image>
+                  <h4 :id="titleId" :class="titleClass">任务管理</h4>
+                </div>
+              </template>
+              <div>
+                
+                <el-table :data="tasktable" stripe style="width: 100%">
+                    <el-table-column prop="id" label="任务编号"  />
+                    <el-table-column prop="name" label="任务名称" />
+                    <el-table-column prop="state" label="任务类型"/>
+                    <el-table-column prop="time" label="备注" />
+                  </el-table>
+                  <div class="sev_ruwu sev">
+                    <div class="disflex"> 
+                    <el-form-item label="关键字：">
+                    <el-select   v-model="seval4" :suffix-icon="CaretBottom" placeholder="请选择">
+                            <el-option
+                              v-for="item in sevlist"
+                              :key="item.value"
+                              :label="item.label"
+                              :value="item.value">
+                            </el-option>
+                          </el-select>
+                  </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="请输入关键字" />
+                      <el-button class="btncolor">查询</el-button>
+                      <el-button class="btncolor">添加</el-button>
+                      <el-button class="btncolor">删除</el-button>
+                      <el-button class="btncolor">提交</el-button>
+                  </div>
+                </div>
+              </div>
+              <template #footer>
+                <div class="dialog-footer">
+                  <el-button @click="dialog.task = false">取消</el-button>
+                  <el-button type="primary" @click="dialog.task = false">
+                    确定
+                  </el-button>
+                </div>
+              </template>
+            </el-dialog>
+             <!-- 任务检索 -->
+             <el-dialog v-model="dialog.guanli"
+             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="800px" class="dialog_class bgcolor tianjia">
+  
+              <template #header="{ titleId, titleClass }">
+                <div class="my-header ">
+                  <el-image :src="getImgPath('s11.png')" fit="contain"></el-image>
+                  <h4 :id="titleId" :class="titleClass">任务检索</h4>
+                </div>
+              </template>
+              <div>
+                <div class="sev_ruwu">
+                    <div class="disflex"> 
+                    <el-form-item label="关键字：">
+                    <el-select   v-model="seval4" :suffix-icon="CaretBottom" placeholder="请选择">
+                            <el-option
+                              v-for="item in sevlist"
+                              :key="item.value"
+                              :label="item.label"
+                              :value="item.value">
+                            </el-option>
+                          </el-select>
+                  </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="请输入关键字" />
+                      <el-checkbox class="magright" label="范围"  v-model="checkbox" />
+                      <el-button class="btncolor">查询</el-button>
+                  </div>
+                </div>
+                <el-table :data="tasktable" stripe style="width: 100%">
+                    <el-table-column prop="id" label="任务编号"  />
+                    <el-table-column prop="name" label="任务名称" />
+                    <el-table-column prop="state" label="任务类型"/>
+                    <el-table-column prop="time" label="备注" />
+                  </el-table>
+                 
+              </div>
+              <template #footer>
+                <div class="dialog-footer">
+                  <el-button @click="dialog.guanli = false">取消</el-button>
+                  <el-button type="primary" @click="dialog.guanli = false">
+                    确定
+                  </el-button>
+                </div>
+              </template>
+            </el-dialog>
+            <!-- 优化器 -->
+                 <el-dialog v-model="dialog.optimizer"
+             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="430" class="dialog_class bgcolor tianjia sel">
+  
+              <template #header="{ titleId, titleClass }">
+                <div class="my-header ">
+                  <el-image :src="getImgPath('t2.png')" fit="contain"></el-image>
+                  <h4 :id="titleId" :class="titleClass">优化器</h4>
+                </div>
+              </template>
+              <div class="numberinput lefttext">
+                <el-form >
+                  <span>代理模型</span>
+                  <el-form-item label="代理模型类型：" :label-width="formLabelWidth2">
+                    <el-select   v-model="agval" :suffix-icon="CaretBottom" placeholder="请选择">
+                            <el-option
+                              v-for="item in agelist"
+                              :key="item.value"
+                              :label="item.label"
+                              :value="item.value">
+                            </el-option>
+                          </el-select>
+                  </el-form-item>  
+                  <el-form-item label="设计空间类型：" :label-width="formLabelWidth2">
+                    <el-select   v-model="agval1" :suffix-icon="CaretBottom" placeholder="请选择">
+                            <el-option
+                              v-for="item in agelist1"
+                              :key="item.value"
+                              :label="item.label"
+                              :value="item.value">
+                            </el-option>
+                          </el-select>
+                  </el-form-item> 
+                  <el-form-item label="试验设计方法：" :label-width="formLabelWidth2">
+                    <el-select   v-model="agval2" :suffix-icon="CaretBottom" placeholder="请选择">
+                            <el-option
+                              v-for="item in agelist2"
+                              :key="item.value"
+                              :label="item.label"
+                              :value="item.value">
+                            </el-option>
+                          </el-select>
+                  </el-form-item> 
+                  <el-form-item label="初始样本点数：" :label-width="formLabelWidth2">
+                    <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
+                  </el-form-item>
+                  <span>加点方法</span>
+                  <el-form-item label="最大样本点数：" :label-width="formLabelWidth2">
+                    <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
+                  </el-form-item>
+                  <el-form-item label="加点准则：" :label-width="formLabelWidth2">
+                    <el-select   v-model="addval" :suffix-icon="CaretBottom" placeholder="请选择">
+                            <el-option
+                              v-for="item in addlist"
+                              :key="item.value"
+                              :label="item.label"
+                              :value="item.value">
+                            </el-option>
+                          </el-select>
+                  </el-form-item>
+                  <el-form-item label="单次迭代新增样本点数：" :label-width="formLabelWidth1">
+                    <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
+                  </el-form-item>
+                  <el-form-item label="约束处理方法:" :label-width="formLabelWidth2">
+                    <el-select   v-model="addval1" :suffix-icon="CaretBottom" placeholder="请选择">
+                            <el-option
+                              v-for="item in addlist1"
+                              :key="item.value"
+                              :label="item.label"
+                              :value="item.value">
+                            </el-option>
+                          </el-select>
+                  </el-form-item>
+                  <el-form-item label="优化算法" :label-width="formLabelWidth2">
+                    <el-select   v-model="ys" :suffix-icon="CaretBottom" placeholder="请选择">
+                            <el-option
+                              v-for="item in yslist"
+                              :key="item.value"
+                              :label="item.label"
+                              :value="item.value">
+                            </el-option>
+                          </el-select>
+                  </el-form-item>
+                       <el-form-item label="种群规模：" :label-width="formLabelWidth2">
+                    <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
+                  </el-form-item>
+                  <el-form-item label="最大进化代数:" :label-width="formLabelWidth2">
+                    <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
+                  </el-form-item>
+                  <el-form-item label="交叉概率：" :label-width="formLabelWidth2">
+                    <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
+                  </el-form-item>
+                  <el-form-item label="变异概率：" :label-width="formLabelWidth2">
+                    <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
+                  </el-form-item>
+                  <el-form-item label="交叉算子：" :label-width="formLabelWidth2">
+                    <el-select   v-model="addval2" :suffix-icon="CaretBottom" placeholder="请选择">
+                            <el-option
+                              v-for="item in addlist2"
+                              :key="item.value"
+                              :label="item.label"
+                              :value="item.value">
+                            </el-option>
+                          </el-select>
+                  </el-form-item>
+                  <el-form-item label="竞赛规模：" :label-width="formLabelWidth2">
+                    <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
+                  </el-form-item>
+                  <el-form-item label="保留优选策略：" :label-width="formLabelWidth2">
+                    <el-select   v-model="addval3" :suffix-icon="CaretBottom" placeholder="请选择">
+                            <el-option
+                              v-for="item in addlist3"
+                              :key="item.value"
+                              :label="item.label"
+                              :value="item.value">
+                            </el-option>
+                          </el-select>
+                  </el-form-item>
+                  <el-form-item label="变异算子选择：" :label-width="formLabelWidth2">
+                    <el-select   v-model="addval4" :suffix-icon="CaretBottom" placeholder="请选择">
+                            <el-option
+                              v-for="item in addlist4"
+                              :key="item.value"
+                              :label="item.label"
+                              :value="item.value">
+                            </el-option>
+                          </el-select>
+                  </el-form-item>
+                  <el-form-item label="precision:" :label-width="formLabelWidth2">
+                    <el-select   v-model="addval7" :suffix-icon="CaretBottom" placeholder="请选择">
+                            <el-option
+                              v-for="item in addlist7"
+                              :key="item.value"
+                              :label="item.label"
+                              :value="item.value">
+                            </el-option>
+                          </el-select>
+                  </el-form-item>
+                  <el-form-item label="GPU" :label-width="formLabelWidth2">
+                    <el-select   v-model="addval8" :suffix-icon="CaretBottom" placeholder="请选择">
+                            <el-option
+                              v-for="item in addlist8"
+                              :key="item.value"
+                              :label="item.label"
+                              :value="item.value">
+                            </el-option>
+                          </el-select>
+                  </el-form-item>
+                </el-form>
+              </div>
+              <template #footer>
+                <div class="dialog-footer">
+                  <el-button @click="dialog.optimizer = false">取消</el-button>
+                  <el-button type="primary" @click="dialog.optimizer = false">
+                    确定
+                  </el-button>
+                </div>
+              </template>
+            </el-dialog>
+            <!-- 内容区 -->
+            <div class="main  mianflex">
+              <!--left菜单栏  -->
+              <div class="left_main">
+                <div class="left_main_content">
+                <el-tabs
+                v-model="tabName"
+                type="card"
+                class="demo-tabs"
+                @tab-click="handleClick"
+              >
+                <el-tab-pane label="导航树" name="one">
+                
+                <!-- <p class="treetiele">优化设计</p> -->
+                <!-- <el-tree
+               class="custom-tree"
+              style="max-width: 300px"
+              :data="treeData"
+              :props="defaultProps"
+              @node-click="handleNodeClick"
+              :highlight-current="true"
+              :default-expanded-keys="defaultExpandedArr"
+               node-key="id"
+            >        
+            <template #default="{ node, data }">   
+                    <span  class="treesvgi">
+                          <i v-if="!data.children" class=""></i>
+              <i v-else-if="node.expanded" class="el-icon-collection-tag"> </i>
+              <i v-else class="el-icon-folder"> </i>
+                          <span  style="margin-left: 10px">{{ node.label}}</span>
+                    </span>
+    
+                  </template>
+            </el-tree> -->
+            <el-tree :data="datatree"   class="custom-tree" :props="defaultProps" @node-click="handleNodeClick" />
+                </el-tab-pane>
+                <el-tab-pane label="组件" name="tow">
+                  <!-- <div class="panetab">
+                  <el-image :src="getImgPath('f41.png')" fit="cover" />
+                  <span style=" display: block;">测试函数模版</span>
+                </div> -->
+                <Sidebar /> 
+                </el-tab-pane>
+              </el-tabs>
+            
+            </div>
+              </div>
+            <!-- 放图形 -->
+            <div class="main_container">
+              <div class="main_model">
+                <vuefindex :optimizer="dialog.optimizer" @optimizerfalse="optimizerfalse()"></vuefindex>
+                <div  class="maxh221">
+             
+                <!-- 右侧边栏开始 -->
+                    <!-- 优化监控echarts -->
+               <div class="opt_moitor" v-if="tabactive=='优化监控'">
+              <optmonitor />
+            </div>
+            <div class="opt_moitor" v-if="tabactive=='可视化'">
+              <sixtop />
+              <sixbottom/>
+           
+            </div>
+                <!-- 结束 -->
+              </div>
+              <el-footer
+                class="femFooter"
+              
+              >
+              <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>
+              </el-footer>
+              </div> 
+            </div>
+           
+            </div>
+         
+           
+          </div>
+        </el-main>
+  
+      </el-container>
+    </div>
+  </template>
+  <script setup>
+  import { ref, onMounted, reactive, } from "vue";
+  import { RouterView, RouterLink,useRouter } from "vue-router"
+  import myheader from "@/components/header.vue"
+  import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
+  import { Edit,CaretBottom } from '@element-plus/icons-vue'
+  // import '@/utils/flexible'
+  import s0 from "@/assets/img/s0.png"
+  import optmonitor from './echart/optimize_monitor.vue'
+  import sixtop from './echart/six_top.vue'
+  import sixbottom from './echart/six_bottom.vue'
+  import sixindex from './demo/index.vue'      
+  import sixchine from './demo/chine.vue'
+  import modelb from './vueflow/modelb.vue'
+  import vuefindex from './vueflow/index.vue'
+  import Sidebar from './vueflow/Sidebar.vue'
+  const router = useRouter();
+  let logs=ref("");
+  let elodingfalse=ref(false);
+  let footerShow=ref(false);
+  let tabName=ref("one")
+  const datatree = ref([
+    {
+      label: '优化设计',
+      children: [
+        {
+          label: '优化问题',
+          children: [
+            {
+              label: '优化目标',
+              children: [
+                {
+                  label: '输出',
+                },
+              ],
+            },
+            {
+              label: '设计变量',
+              children: [
+                {
+                  label: '输入1',
+                },
+                {
+                  label: '输入2',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: '分析流程',
+          children: [
+            {
+              label: '优化器',
+            },
+            {
+              label: 'Python',
+            },
+          ],
+        },
+      ],
+    },
+  
+  ])
+  const treeData = ref([
+    // { 
+      // id:0,
+      // label: '优化设计',
+      // children: [
+      //   {
+      //     // id:1,
+      //     // label: '任务',
+      //     // children: [
+      //     //   {
+      //     //     label: '任务编号',
+      //     //   },
+      //     //   {
+      //     //     label: '任务名称',
+      //     //   },
+      //     //   {
+      //     //     label: '任务类型',
+      //     //   },
+      //     // ],
+      //   },
+        {
+          id:2,
+          label: '优化问题',
+          children: [
+            {
+              label: '问题设定',
+            },
+            {
+              label: '优化目标',
+            },
+            {
+              label: '设计变量',
+            },
+            {
+              label: '约束条件',
+            },
+          ],
+        },
+        {
+          id:3,
+          label: '优化模型',
+          children: [
+            {
+              label: '代理模型',
+            },
+            {
+              label: '优化算法',
+            },
+            {
+              label: '加点方法',
+            },
+          
+          ],
+        },
+        {
+          id:4,
+          label: '优化运行',
+          children: [
+            {
+              label: '任务提交',
+            },
+            {
+              label: '优化监控',
+            },
+          
+          ],
+        },
+        
+        {
+          id:5,
+          label: '优化结果',
+          children: [
+            {
+              label: '可视化',
+            },
+            {
+              label: '查看报告',
+            },
+            {
+              label: '导出报告',
+            },
+          
+          ],
+        },
+        {
+          id:6,
+          label: '数据库管理',
+          children: [
+            {
+              label: '任务检索',
+            },
+          ],
+        },
+       
+      
+    //   ],
+    // },
+  
+  ])
+  
+  
+  let  defaultExpandedArr=ref([]);
+  const defaultProps = {
+    children: 'children',
+    label: 'label',
+  }
+  treeData.value.forEach((item) => {
+    defaultExpandedArr.value.push(item.id);
+        });
+  const activeName = ref('Three')
+  let active = ref('');
+  let tabactive=ref("");
+  let checkbox=ref(false)
+  let formLabelWidth6 = ref(100)
+  let formLabelWidth1 = ref(200)
+  let formLabelWidth2 = ref(130)
+  let canshu=ref();
+ 
+  let question = ref([
+    { url: 'k1.png', titlie: "面积图" },
+    { url: 'k2.png', titlie: "柱状图" },
+    { url: 'k3.png', titlie: "饼状图" },
+    { url: 'k4.png', titlie: "折线图" },
+    { url: 'k5.png', titlie: "散点图" },
+    { url: 'k6.png', titlie: "横条图" },
+    { url: 'k7.png', titlie: "雷达图" },
+    { url: 'k8.png', titlie: "查看报告" },
+    { url: 'k9.png', titlie: "导出报告" },
+  ])
+  let roletion = ref([
+  { url: 'f41.png', titlie: "测试函数模板" },
+    { url: 'r1.png', titlie: "工程优化模板" },
+    { url: 'r2.png', titlie: "自定义" },
+  ])
+  let tasktion = ref([
+    { url: 't0.png', titlie: "外形参数化" },
+  ])
+
+  let Threelist = ref([
+    { url: 'tt.png', titlie: "开始" },
+    { url: 'tt1.png', titlie: "暂停" },
+    { url: 'tt2.png', titlie: "结束" },
+    { url: 'tts.png', titlie: "续算" },
+  ])
+  let Threelist1 = ref([
+    { url: 'tt3.png', titlie: "优化监控" },
+  ])
+ 
+  let Sevenlist = ref([
+  { url: 's11.png', titlie: '任务管理' },
+  { url: 's12.png', titlie: '任务检索' },
+  { url: 's13.png', titlie: '备份与恢复' },
+  ])
+  let eightlist = ref([
+  { url: 'e1.png', titlie: '快速入门' },
+  { url: 'e2.png', titlie: '帮助文档' },
+  { url: 'e3.png', titlie: '关于软件' },
+  ])
+  let canshulist = ref([
+  { label: 'CST参数化', value: 'CST参数化' },
+  { label: 'FFD参数化', value: 'FFD参数化' },
+  ])
+  let sevlist = ref([
+  { label: '任务编号', value: '任务编号' },
+  { label: '任务名称', value: '任务名称' },
+  { label: '任务类型', value: '任务类型' },
+  { label: '创建时间', value: '创建时间' },
+  ])
+  let seval4=ref('任务名称');
+  let agelist = ref([
+  { label: 'Kriging模型', value: 'Kriging模型' },
+  { label: '相关函数类型', value: '相关函数类型' },
+  { label: '超参数优化方法', value: '超参数优化方法' },
+  { label: 'Hooke Jeeves方法循环次数', value: 'Hooke Jeeves方法循环次数' },
+  ])
+  let agval=ref("Kriging模型")
+  let agval1=ref("固定设计空间")
+  let agval2=ref("拉丁超立方")
+  let agelist1 = ref([
+  { label: '固定设计空间', value: '固定设计空间' },
+  ])
+  let agelist2 = ref([
+  { label: '拉丁超立方', value: '拉丁超立方' },
+  ])
+  let addval=ref("EI + MSP")
+  let addlist = ref([
+  { label: 'EI + MSP', value: 'EI + MSP' },
+  ])
+  
+  let yslist = ref([
+  { label: 'GA遗传算法', value: 'GA遗传算法' },
+  { label: 'PSO', value: 'PSO' },
+  ])
+  let addval1=ref("概率相乘法")
+  let addlist1 = ref([
+  { label: '概率相乘法', value: '概率相乘法' },
+  ])
+  let addval2=ref("SBX交叉")
+  let addlist2 = ref([
+  { label: 'SBX交叉', value: 'SBX交叉' },
+  ])
+  let addval3=ref("最佳保留策略")
+  let ys=ref("GA遗传算法")
+  let addlist3 = ref([
+  { label: '最佳保留策略', value: '最佳保留策略' },
+  ])
+  let addval4=ref("倒位变异")
+  let addlist4 = ref([
+  { label: '倒位变异', value: '倒位变异' },
+  ])
+  let addval7=ref("1e-7")
+  let addlist7 = ref([
+  { label: '1e-7', value: '1e-7' },
+  ])
+  let addval8=ref("YES")
+  let addlist8 = ref([
+  { label: 'YES', value: 'YES' },
+  ])
+  let dialog = ref({
+    newdialog: false,
+    setdialog: false,
+    targetdialog: false,
+    design:false,
+    constraint:false,
+    parameter:false,
+    agency:false,
+    optimizer:false,
+    enddialog:false,
+    addfun:false,
+    sufun:false,
+    task:false,
+    guanli:false,
+  })
+  let options=ref([
+  { label: '升阻比', value: '升阻比' },
+  { label: 'RCS', value: 'RCS' },
+  ])
+  let tasklist=ref([
+  { label: '气动', value: '气动' },
+  { label: '结构', value: '结构' },
+  { label: '隐身', value: '隐身' },
+  { label: '噪声', value: '噪声' },
+  ])
+  
+  const optiongroup = [
+    {
+      label: '大飞机',
+      options: [
+        {
+          value: '气动优化',
+          label: '气动优化',
+        },
+        {
+          value: '气弹优化',
+          label: '气弹优化',
+        },
+      ],
+    },
+    {
+      label: '直升机',
+      options: [
+        {
+          value: '气动优化1',
+          label: '气动优化',
+        },
+        {
+          value: '气弹优化2',
+          label: '气弹优化',
+        },
+        {
+          value: '气动噪声优化',
+          label: '气动噪声优化',
+        },
+       
+      ],
+    },
+  ]
+  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'
+      
+    },
+  ])
+  const designtable = ref([
+    {
+      name:"false",
+      date: '2016-05-03',
+      device: '升阻比',
+      z: '增大',
+      q:1.0,
+      cai:false,
+      yin:1.0,
+      address:'serrrrrrr'
+      
+    },
+    {
+      name:"true",
+      date: '2016-05-03',
+      device: '升阻比',
+      z: '增大',
+      q:1.0,
+      cai:false,
+      yin:1.0,
+      address:'serrrrrrr'
+      
+    },
+    {
+      name:"false",
+      date: '2016-05-03',
+      device: '升阻比',
+      z: '增大',
+      q:1.0,
+      cai:false,
+      yin:1.0,
+      address:'serrrrrrr'
+      
+    },
+  ])
+  const tasktable = ref([
+  {
+      id:"01",
+      time: '2016-05-03',
+      name: '升阻比',
+      state: '增大',
+  
+      
+    }, 
+    {
+      id:"02",
+      time: '2016-05-03',
+      name: '升阻比',
+      state: '增大',
+  
+      
+    }, 
+  ])
+  
+  let name = ref("1")
+  let num = ref(1)
+  const getImgPath = (url) => {
+    return new URL(`../assets/img/${url}`, import.meta.url).href
+  }
+  const handleClick = (tab, event) => {
+  
+    console.log(tab.props.name);
+    tabactive.value=tab.props.name;
+    if(tabactive.value=='User'){
+        router.replace({ path: '/' })
+    }
+    dialogcolse()
+  }
+  // 关闭所有弹窗
+  const  dialogcolse=()=>{
+    dialog.value.newdialog = false;
+    dialog.value.setdialog = false;
+    dialog.value.targetdialog = false;
+    dialog.value.design = false;
+    dialog.value.constraint = false;
+    dialog.value.parameter = false;
+    dialog.value.agency = false;
+    dialog.value.addfun = false;
+    dialog.value.sufun = false;
+    dialog.value.enddialog = false;
+    dialog.value.task = false;
+    dialog.value.guanli = false;
+  }
+  // Tree的点击事件
+  const handleNodeClick = (data) => {
+     console.log(data)
+     tabactive.value=data.label;
+     dialogbolen();
+  }
+  const optimizerfalse=(val)=>{
+    console.log(11111)
+    dialog.value.optimizer=true;
+    console.log(dialog.value.optimizer);
+  }
+  
+  // 模块选择
+  const clickgeometry = (e, index, key,name) => {
+    console.log(key);
+    console.log(name);
+    tabactive.value=name;
+    dialogbolen();
+  }
+   const dialogbolen=()=>{
+    switch (tabactive.value) {
+      case "新建任务":
+         dialog.value.newdialog = true;
+        break;
+      case "问题设定":
+        dialog.value.setdialog = true;
+        break;
+      case "优化目标":
+        dialog.value.targetdialog = true;
+        break;
+        case "设计变量":
+        dialog.value.design = true;
+        break;
+        case "约束条件":
+        dialog.value.constraint = true;
+        break;
+        case "外形参数化":
+        dialog.value.parameter = true;
+        break;
+        case "代理模型":
+        dialog.value.agency = true;
+        break;
+        case "加点方法":
+        dialog.value.addfun = true;
+        break;
+        case "优化算法":
+        dialog.value.sufun = true;
+        break;
+        case "终止条件":
+        dialog.value.enddialog = true;
+        break;
+        case "任务管理":
+        dialog.value.task = true;
+        break;
+        case "任务检索":
+        dialog.value.guanli  = true;
+        break;
+      default: 
+        console.log(1111)   
+    }
+   }
+  const deviceSelectChange = () => {
+  
+  }
+  const handleClose = (done) => {
+    console.log(111)
+    dialog.value.newdialog = false;
+    done();
+  };
+  const targetclick=()=>{
+    console.log(tableData.value)
+  }
+  // 日志框
+     // 日志的文本框
+     const  footerShows=(evt)=>{
+        if (evt == "claer") {
+        logs.value = "";
+        } else {
+        footerShow.value = !footerShow.value;
+        }
+      }
+  </script>
+  <style lang="scss" scoped>
+  //有子节点 且未展开
+  .left_main_content :deep(.el-icon svg) {
+    display: block;
+  }
+  .footerTitle {
+    display: flex;
+      justify-content: space-between;
+      padding: 5px 20px;
+      font-size: 20px;
+      height: 25px !important;
+      z-index: 99;
+      background-color: #fff;
+      border-radius: 5px 5px 0px 0px;
+      // bottom: 160px;
+      // position: absolute;
+      // width: 100%;
+  }
+  .footerTitle div {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 14px;
+  }
+  .kongzhit{
+     position: absolute;
+      bottom: 0;
+      width: 100%;
+  }
+  .footerTitle p {
+    margin: 0;
+  }
+  .footerTitle span {
+    padding: 5px 10px;
+    cursor: default;
+  }
+  .footerText .el-textarea__inner {
+    width: 100%;
+    height: 135px!important;
+    border: 0;
+    font-size: 12px;
+    color: #333;
+    padding: 2px;
+  }
+  //没有子节点
+  
+  
+  </style>

src/views/home/baocuo.vue

@@ -0,0 +1,21 @@
+<template>
+    <!-- 优化监控 -->
+<h3 class="opt_tltie">保存</h3>
+<!-- 折线图 -->
+  <div>
+  </div>
+</template>
+<script setup>
+import { ref, onMounted, reactive, } from "vue";
+import { RouterView, RouterLink } from "vue-router"
+import { request, uploadFile } from "@/utils/request";
+import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
+import * as echarts from 'echarts'
+
+
+
+</script>
+<style lang="scss" scoped>
+
+</style>
+

src/views/home/newfile.vue

@@ -0,0 +1,99 @@
+<template>
+    <!-- 新建 -->
+    <div class="demo-collapse">
+    <el-collapse  class="custom-collapse" v-model="activeNames" @change="handleChange">
+      <el-collapse-item title="新建工程" name="1">
+        <!-- <template #title>
+            <el-icon class="el-icon "><CaretRight /></el-icon>
+            新建工程
+          </template> -->
+        <div class="collapse-list">
+            <router-link to="/home">
+            <div class="list">
+                <el-image :src="s0" fit="contain" ></el-image>
+            </div>
+        </router-link>
+        </div>
+    
+      </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>
+            </div>
+        
+        </div>
+ 
+      </el-collapse-item>
+   
+  
+    </el-collapse>
+  </div>
+
+  <div>
+  </div>
+</template>
+<script setup>
+import { ref, onMounted, reactive, } from "vue";
+import {CaretRight } from "@element-plus/icons-vue";
+import { RouterView, RouterLink } from "vue-router"
+import { request, uploadFile } from "@/utils/request";
+import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
+import s0 from "@/assets/img/s0.png";
+import open2 from "@/assets/img/open2.png";
+import open3 from "@/assets/img/open3.png";
+
+const activeNames = ref(['1','2'])
+const handleChange = (val) => {
+  console.log(val)
+}
+let collapselist = ref([
+  {img:open2},{img:open3},
+ 
+])
+const openclick=()=>{
+   // router.replace({ path: key })
+}
+</script>
+<style lang="scss" scoped>
+.collapse-list{
+    display: flex;
+    .list{
+        width: 240px;
+        height: 240px;
+        border: 2px solid #71AAFF;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        margin: 0 10px;
+    }
+}
+</style>
+<style>
+.custom-collapse .el-collapse-item__header {
+    font-family: Inter, Inter;
+font-weight: 500;
+font-size: 16px;
+color: #383838;
+line-height: 24px;
+text-align: left;
+font-style: normal;
+text-transform: none;
+}
+.custom-collapse .el-collapse-item__header {
+  align-items: center;
+  border: none;
+}
+ 
+.custom-collapse .el-collapse-item__arrow {
+  order: -1; /* 将箭头元素的顺序设置为最前 */
+  margin-right: 10px;
+  margin-left: 10px; /* 根据需要调整箭头与标题的间距 */
+}
+ .custom-collapse .el-collapse-item__wrap,.custom-collapse{
+    border: none;
+}
+
+</style>
+

src/views/openpage.vue

@@ -0,0 +1,123 @@
+<template>
+    <!-- 打开页-->
+  <div class="openpage">
+    <el-header>
+        <myheader />
+    </el-header>
+    <!-- 主要内容 -->
+    <div class="user lbg_color2">
+    <div class="container border">
+      <div class="user-slider lbg_color3 el-menu ">
+
+        <el-menu class="lbg_color3  menuclass" :router='true' :default-active="activeIndex" @select="Select">
+          <div class="ve_logo_img">
+                <el-image
+                    style="height: 100%"
+                    :src="logo"
+                    fit="contain"
+                ></el-image>
+            </div>
+             <el-menu-item  index="/home/newfile">新建</el-menu-item>
+          <el-menu-item  >打开</el-menu-item>
+            <el-menu-item   index="/home/baocuo" >保存</el-menu-item>
+          <el-menu-item  >另存</el-menu-item>
+          <el-menu-item   >选择</el-menu-item>
+        </el-menu>
+      </div>
+      <section class="user-main ">
+       
+        <!-- <transition name="fade-transform" mode="out-in"> -->
+        <router-view > </router-view>
+        <!-- </transition> -->
+      </section>
+    </div>
+  </div>
+  </div>
+</template>
+<script setup>
+import { ref, onMounted, reactive,computed } from "vue";
+import { RouterView, RouterLink,useRouter } from "vue-router"
+import { request, uploadFile } from "@/utils/request";
+import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
+import myheader from "@/components/header.vue"
+import logo from "@/assets/logo.png";
+const router = useRouter();
+ let dateKeyref=ref(new Date().getTime())
+   //  defaultPage: '/project',
+let  defaultPage=ref('/home/newfile');
+const activeIndex=computed(()=>{
+    const path = router.currentRoute.value.fullPath
+    console.log(path);
+     if (path === '/') {
+        router.replace({ path: defaultPage.value })
+     }
+     return  path
+  })
+ function Select(key) {
+    console.log(router)
+    router.replace({ path: key })
+    }
+</script>
+<style lang="scss" scoped>
+.ve_logo_img{
+    text-align: center;
+}
+.user{
+    width: 100%;
+    height: calc(100vh - 40px);
+}
+.user .container .user-slider{
+    width: 190px;
+    height: 100%;
+    padding-top: 20px;
+}
+.user-slider {
+  .el-menu {
+    border: none;
+    &-item {
+      height: 36px;
+      line-height: 36px;
+      font-size: 14px;
+      text-align: center;
+      color: #b6b6b6;
+      &.is-active {
+        color:red;
+        background: #2267B1;
+      }
+    }
+  }
+  .menuclass {
+    background-color:rgba(0, 0, 0, 0)
+  }
+}
+.lbg_color3{
+    background: #2267B1;  
+}
+.border .el-menu{
+  border: none;
+  .el-menu-item{
+    color: #fff;
+  }
+}
+
+.user .container .user-main{
+    width: calc(100% - 190px);
+    height: 100%;
+    background: #Fff;
+    padding: 30px;
+}
+.user .container{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+}
+</style>
+

src/views/vueflow/index.vue

@@ -2,8 +2,10 @@
   <div class="dnd-flow" >
     <VueFlow ref="vueFlowRef"  :nodes="nodes" :edges="edges"  @drop="onDrop"   @contextmenu.prevent="onContextMenu"
     @keydown.delete="onDeleteKey"   @dragover="onDragOver" @dragleave="onDragLeave"  @node-click="onNodeClick">
-      <template #node-default="props">
-      <modelb :node="props" />
+      <!-- <template #node-default="props"> -->
+        <template #node-default="props">
+          <modelb  :node="props"  />
+      <!-- <modelb :node="props"  /> -->
     </template>
     <!-- //<Handle type="target" :position="Position.Left" /> -->
      <!-- <Panel>
@@ -27,10 +29,10 @@
 <script setup>
 import { ref } from 'vue'
 import { VueFlow,  useVueFlow,Position } from '@vue-flow/core'
+import "./main.css";//重置样式
 import DropzoneBackground from './DropzoneBackground.vue'
 import useDragAndDrop from './useDnD'
 import f11 from '@/assets/img/f11.png'
- import "./main.css";//重置样式
  import modelb from './modelb.vue'
  import { useDialogState } from './delete.js'
  const { isVisible, message, resolve } = useDialogState()

src/views/vueflow/main.css

@@ -1,5 +1,5 @@
-@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@1.39.0/dist/style.css';
-@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@1.39.0/dist/theme-default.css';
+@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@1.40.1/dist/style.css';
+@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@1.40.1/dist/theme-default.css';
 @import 'https://cdn.jsdelivr.net/npm/@vue-flow/controls@latest/dist/style.css';
 @import 'https://cdn.jsdelivr.net/npm/@vue-flow/minimap@latest/dist/style.css';
 @import 'https://cdn.jsdelivr.net/npm/@vue-flow/node-resizer@latest/dist/style.css';
@@ -98,4 +98,59 @@ body,
     justify-content:center;
     z-index:1;
     pointer-events:none
+}
+
+.basic-flow.dark {
+    background:#2d3748;
+    color:#fffffb
+}
+
+.basic-flow.dark .vue-flow__node {
+    background:#4a5568;
+    color:#fffffb
+}
+
+.basic-flow.dark .vue-flow__node.selected {
+    background:#333;
+    box-shadow:0 0 0 2px #2563eb
+}
+
+.basic-flow .vue-flow__controls {
+    display:flex;
+    flex-wrap:wrap;
+    justify-content:center
+}
+
+.basic-flow.dark .vue-flow__controls {
+    border:1px solid #FFFFFB
+}
+
+.basic-flow .vue-flow__controls .vue-flow__controls-button {
+    border:none;
+    border-right:1px solid #eee
+}
+
+.basic-flow .vue-flow__controls .vue-flow__controls-button svg {
+    height:100%;
+    width:100%
+}
+
+.basic-flow.dark .vue-flow__controls .vue-flow__controls-button {
+    background:#333;
+    fill:#fffffb;
+    border:none
+}
+
+.basic-flow.dark .vue-flow__controls .vue-flow__controls-button:hover {
+    background:#4d4d4d
+}
+
+.basic-flow.dark .vue-flow__edge-textbg {
+width: 100px;
+height: 30px;
+    fill:#292524
+}
+
+.basic-flow.dark .vue-flow__edge-text {
+    fill:#fffffb
 }

src/views/vueflow/modelb.vue

@@ -19,28 +19,6 @@ const props = defineProps({
     type: String,
   },
 })
-let  handles=([
-        {
-          id: 'bottom',
-          type: 'bottom',
-          position: 'bottom',
-        },
-        {
-          id: 'top',
-          type: 'top',
-          position: 'top',
-        },
-        {
-          id: 'left',
-          type: 'left',
-          position: 'left',
-        },
-        {
-          id: 'right',
-          type: 'right',
-          position: 'right',
-        },
-      ])
 onMounted(() => {
 });
 </script>

src/views/vueflow/useDnD.js

@@ -1,4 +1,5 @@
-import { useVueFlow,Position,MarkerType  } from '@vue-flow/core'
+// import { useVueFlow,Position,MarkerType } from '@vue-flow/core';
+import { useVueFlow,Position,MarkerType} from '@vue-flow/core';
 import { ref, watch } from 'vue'
 import f11 from '@/assets/img/f11.png'
 import f32 from '@/assets/img/f32.png'
@@ -59,12 +60,15 @@ export default function useDragAndDrop() {
   function onDragStart(event, type,id) {
  
     nid=id;
+    console.log(type);
+    console.log(1234667)
     if (event.dataTransfer) {
       event.dataTransfer.setData('application/vueflow', type)
       event.dataTransfer.effectAllowed = 'move'
     }
 
     draggedType.value = type
+   // draggedType.value = 'smoothstep'
     isDragging.value = true
 
     document.addEventListener('drop', onDragEnd)
@@ -124,18 +128,16 @@ export default function useDragAndDrop() {
       data:{label: '开始', image: f11},
       id: "node_01",
       position: {x:245, y: 317},
-      type: "default",
+      // type: "default",
       sourcePosition: Position.Right,
       targetPosition: Position.Left, 
-      sourcePosition: Position.Top,
-      targetPosition: Position.Bottom, 
 
       },
       {
       data:{label: '优化器', image: f32},
       id: "node_02",
       position: {x: 435, y: 317},
-      type: "default",
+      // type: "default",
       sourcePosition: Position.Right,
       targetPosition: Position.Left, 
       class: 'light',
@@ -146,7 +148,7 @@ export default function useDragAndDrop() {
       id: "node_03",
       position: {x: 630, y: 317},
       // type: "default",
-      type: "default",
+     // type: "default",
       sourcePosition: Position.Right,
       targetPosition: Position.Left, 
       // sourcePosition: Position.Top,
@@ -157,7 +159,7 @@ export default function useDragAndDrop() {
       data:{label: '结束', image: f12},
       id: "node_04",
       position: {x: 804, y: 317},
-      type: "default",
+      // type: "default",
       sourcePosition: Position.Right,
       targetPosition: Position.Left, 
       },
@@ -165,7 +167,7 @@ export default function useDragAndDrop() {
       data:{label: '输入1', image: f21},
       id: "node_05",
       position: {x: 435, y: 146},
-      type: "default",
+      // type: "default",
       draggable: true, 
       sourcePosition: Position.Top,
       targetPosition: Position.Bottom, 
@@ -175,7 +177,7 @@ export default function useDragAndDrop() {
       data:{label: '输入2', image: f21},
       id: "node_06",
       position: {x:804, y: 146},
-      type: "default",//default
+      //type: "default",//default
       sourcePosition: Position.Top,
       targetPosition: Position.Bottom, 
       },
@@ -183,7 +185,7 @@ export default function useDragAndDrop() {
       data:{label: '输出', image: f22},
       id: "node_07",
       position: {x: 630, y: 519},
-      type: "default",
+      //type: "default",
       sourceHandle: 'Top',
       sourcePosition: Position.Bottom,
       targetPosition: Position.Top, 
@@ -195,15 +197,24 @@ export default function useDragAndDrop() {
         id: 'e1->2',
         source: 'node_01',
         target: 'node_02',
+        label: '按照我的来',
         type: 'straight',
-        markerEnd: MarkerType.ArrowClosed,
+        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: 'smoothstep',
+        type: 'straight',
+       // markerEnd: MarkerType.ArrowClosed,
       //   markerEnd: {
       //     type: MarkerType.ArrowClosed,
       //     color: 'red',
@@ -234,10 +245,9 @@ export default function useDragAndDrop() {
         target: 'node_03',
         type: 'straight',
         animated: true ,
-        // sourcePosition: Position.Bottom,
-        // targetPosition: Position.Top, 
         sourceHandle: 'Top',
         targetHandle:'Bottom',
+        markerEnd: MarkerType.ArrowClosed,
 
       },
       {
@@ -250,6 +260,7 @@ export default function useDragAndDrop() {
         // target: 'handle-top',
         sourceHandle: 'Top',
         targetHandle:'Bottom',
+        tagName: MarkerType.ArrowClosed,
 
       
       },
@@ -257,24 +268,33 @@ export default function useDragAndDrop() {
         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=[];
       const newNode = {
         id: nodeId,
         type: draggedType.value,
         position,
         data: image1,
-     
       }
+      console.log(newNode);
       snodes.value.push(newNode)
+      const newedges = {
+        type: 'smoothstep',
+        markerEnd: MarkerType.ArrowClosed,
+      }
+      console.log(newedges);
+      sedges.value.push(newedges)
       //sedges=edges
     }