airoptweb/src/views/home.vue

<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菜单栏  -->
           <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">
                <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="gooterpading">
               <div class="footerTitle   el-tag--primary">
                <div >
                  <span   v-for="(tab, index) in tabs"  :key="index" :class="{ 'active': activeIndex === index }"
                  @click="activeIndex = index">{{ tab }}</span>
                </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="activeIndex==0">
                  <el-input
                    class="footerText"
                    type="textarea"
                    id="textarea_id"
                    v-model="logs"
                  ></el-input>
                </div> 
              <div class="youhualog" v-if="activeIndex==1">
                <ul>
                  <li v-for="(tab, index) in listli"  :key="index" :class="{ 'active2': activeIndex2 === index }"
                  @click="activeIndex2 = index">{{ tab }}</li>
                </ul>
                <div  class="footer-content">
                <div class="eldesign" v-if="activeIndex2==0">
                  <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 }">
                    <el-input v-model="row.name" @change="handleEdit(row)" />
                  </template>
                </el-table-column>
                  <el-table-column prop="date" label="变量类型">
                    <template #default="{ row }">
                    <el-input v-model="row.date" @change="handleEdit(row)" />
                  </template>
                </el-table-column>
                  <el-table-column prop="name" label="上限值">
                    <template #default="{ row }">
                    <el-input v-model="row.name" @change="handleEdit(row)" />
                  </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="100">
                  <template #default="{ row }">
                    <el-input v-model="row.cai" @change="handleEdit(row)" />
                  </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>
                
                </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">
                  <div class="sev_ruwu">
                  <div class="disflex "> 
                  <el-form-item label="新增变量数：">   
                <el-input v-model="tableval" maxlength="18"
                    oninput="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" class="w-50 m-2"
                    placeholder="请输入关键字" />   </el-form-item>
                    <el-button class="btncolor">导入</el-button>
                    <el-button class="btncolor" @click="onAddItem">新增</el-button>
                    <el-button class="btncolor">确认</el-button>
                </div>
              </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>
              </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 gc1 from "@/assets/img/gc1.png"
  import gc2 from "@/assets/img/gc2.png"
  import gc3 from "@/assets/img/gc3.png"
  import wen from "@/assets/img/wen.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 vuefindex from './vuetree/index.vue'
  import Sidebar from './vuetree/Sidebar.vue'
  const router = useRouter();
  let logs=ref("");
  let tableval=ref();
  let elodingfalse=ref(false);
  let footerShow=ref(false);
  let tabName=ref("one")
  const tabs = ['信息栏', '优化问题'];
  const listli = ['设计变量', '约束条件', '优化目标'];
  const activeIndex = ref(0);
  const activeIndex2 = ref(0);
  const datatree = ref([
    {
      id:1,
      label: '工程',
      children: [
        {
          id:'1-1',
          label: '优化问题',
          img:gc1,
         
        },
        {
          id:'1-2',
          label: '分析流程',
          img:gc2,
   
        },
        {
          id:'1-3',
          label: '优化器',
          img:gc3
        },
      ],
    },
  
  ])

  const datatree1 = ref([
    {
      id:2,
      label: '优化问题组件',
      img:'',
      children: [
        {
          id:'2_1',
          label: '优化问题',
          img:"wen.png",
         
        },
      ],
    },
    {
      id:3,
      label: '学科分析组件',
      img:'',
      children: [
        {
          id:'3-1',
          label: 'CATIA',
          img:'xuek1.png',
        },
        {
          id:'3-2',
          label: 'Excel',
          img:'xuek2.png',
   
        },
        {
          id:'3-3',
          label: 'Feko',
          img:'xuek3.png'
        },
        {
          id:'3-4',
          label: 'Fluent',
          img:'xuek4.png',
         
        },
        {
          id:'3-5',
          label: 'HCFD',
          img:'xuek5.png',
   
        },
        {
          id:'3-6',
          label: 'Matlab',
          img:"xuek6.png"
        },
        {
          id:'3-7',
          label: 'Nastran',
          img:'xuek7.png',
         
        },
        {
          id:'3-8',
          label: 'Python',
          img:'xuek8.png',
   
        },
        {
          id:'3-9',
          label: 'AirfoilAero',
          img:'xuek9.png'
        },
      ],
    },
    {
      id:4,
      label: '优化器组件',
      img:'',
      children: [
        {
          id:'4-1',
          label: '进化优化器',
          img:'youh1.png',
         
        },
        {
          id:'4-2',
          label: '代理优化器',
          img:'youh2.png',
   
        },
        {
          id:'4-3',
          label: '梯度优化器',
          img:'youh3.png',
        },
      ],
    },
  
  ])
  let  defaultExpandedArr=ref([]);
  const defaultProps = {
    children: 'children',
    label: 'label',
  }

  // treeData.value.forEach((item) => {
  //   defaultExpandedArr.value.push(item.id);
  //       });
  const activeName = ref('Three')
  const activeName1 = ref('message')
  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'
      
    },
  ])
  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 handleEdit = (row) => {
  console.log('编辑后的数据:', row);
  // 在这里处理数据保存逻辑，例如发送请求到后端更新数据
};
  const footerClick = (tab, event) => {
}
  // 关闭所有弹窗
  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 onAddItem=()=>{
    let tablevalnum=Number(tableval.value)

    if(activeIndex2.value==0){
      for (let i = 0; i < tablevalnum; i++) {
        designtable.value.push({
                name:"",
                date: '',
                device: '',
                z: '',
                q:'',
                cai:'',
                yin:'',
                address:''
                
                })
      }
    }

  }
  // 日志框
     // 日志的文本框
     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;;
      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>
  <style>
    .el-treeicon .el-tree-node__expand-icon.is-leaf{
   display: none !important;
  }
  .custom-text{
    font-family: Inter, Inter;
    font-weight: 600;
    font-size: 16px;
    color: #383838;
    line-height: 24px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  } 
  .el-tree  .el-tree-node__children  .custom-text{
  font-size: 13px; /* 这里设置为20px，你可以根据需求调整大小 */
  font-weight: 400;
}
/* .el-tree  .el-tree-node.is-current>.el-tree-node__content img{
 display: none; 
} */
 .custom-tree1 > .el-tree-node > .el-tree-node__content >div img{
      display: none; /* 隐藏一级节点复选框 */
    }
 .footerTitle{
      background: #9FCDFF;
border-radius: 0px 0px 0px 0px;
    }
    .footer-tab .el-tabs__item{
      color: #383838;
    }
    .footerTitle .active {
  background-color: #f0f0f0;
}
.youhualog{
  width: 100%;
  height: 178px;
  overflow-y: auto;
}
.youhualog .active2 {
  background-color: #f0f0f0;
}
.youhualog ul{
width: 320px;
display: flex;
}
.youhualog ul li{ 
  flex: 1;
  background: #DFDFDF ;
  border: 1px solid #2267B1;
  font-size: 14px;

}
.footer-content{
  padding: 15px 24px;
  border: 1px solid #2267B1;
  margin-right: 119px;
}
.footer-add{
  width: 530px;
}
.dibu{
  margin-top: 10px;
  display: flex;
    justify-content: flex-end;
}
.dibu .el-input__wrapper{
  width: 226px;
}
.dibu .btncolor{
  margin-top: 2px;
    height: 27px;
  background: #FFFFFF;
box-shadow: 0px 2px 2px 0px #2267B1;
border-radius: 0px 0px 0px 0px;
border: 1px solid #2267B1;
}
.el-table td.el-table__cell div .el-input__wrapper{
  box-shadow: none !important;
  padding: 0;
}
.el-table .el-table__cell{
  padding: 0;
}
.gooterpading{
  border: 1px solid #2267B1;
}
.el-table th .cell{
  background:#D8D8D8;
}
.el-table .cell{
  font-size: 12px;
}
.el-table td.el-table__cell div{
  height: 24px;
    overflow: hidden;
}
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf,.eldesign{
  border: 1px solid #000000;
}
  </style>