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="Role">
                <div class="imgzong Role">
               
                  <!-- <div class="listitem lbg_color3 bkcolor3 ">
                    <div class="threelist">
                      <div class="item2 floatitem wentsd" v-for="(item, index) in Rolelist" :key="'Role' + index"
                        :class="{ activeOrange: active == 'Role' + index }"
                        @click="clickgeometry($event, index, 'Role' + index, item.titlie)">
                        <el-image :src="getImgPath(item.url)" fit="cover" />
                        <span>{{ item.titlie }}</span>
                      </div>
                    </div>
                  </div> -->
                  <!-- <div class="item2 margr" @click="clickgeometry($event, index, 'Role-' + '2', undmodel)">
                      <el-image :src="getImgPath('tow1.png')" fit="cover" />
                      <span>{{ f4ce }}</span>
                      <el-select v-model="f4ce" class="no-border headersele" :suffix-icon="CaretBottom">
                        <el-option v-for="item in optiongroup1" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                      </el-select>
                    </div> -->
                    <div class="listitem lbg_color3 bkcolor3 threelist">
                    <div class="item2 margr" @click="clickgeometry($event, index, 'Role-' + '2', undmodel)">
                      <el-image :src="getImgPath('tow1.png')" fit="cover" />
                      <span>{{ f4ce }}</span>
                      <el-select v-model="f4ce" class="no-border headersele" :suffix-icon="CaretBottom">
                        <el-option v-for="item in optiongroup1" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                    <div class="item2 margr" @click="clickgeometry($event, index, 'Role-' + '1', modelban)">
                      <el-image :src="getImgPath('tow2.png')" fit="cover" />
                      <span>{{ modelban }}</span>
                      <el-select v-model="modelban" class="no-border headersele" :suffix-icon="CaretBottom">
                        <el-option-group v-for="group in optiongroup" :key="group.label" :label="group.label">
                          <el-option v-for="item in group.options" :key="item.value" :label="item.label"
                            :value="item.value" />
                        </el-option-group>
                      </el-select>
                    </div>
                    <div class="item2 margr" @click="clickgeometry($event, index, 'Role-' + '2', undmodel)">
                      <el-image :src="getImgPath('tow3.png')" fit="cover" />
                      <span>{{ undmodel }}</span>
                      <el-select v-model="undmodel" class="no-border headersele" :suffix-icon="CaretBottom">
                        <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value">
                          <div style="display: flex; align-items: center;">
                            <img :src="item.icon" style="width: 20px; height: 20px; margin-right: 10px;" />
                            <span>{{ item.label }}</span>
                          </div>
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <!--  -->
                  <div class="listitem lbg_color3 bkcolor3 ">
                    <div class="threelist">
                      <div class="item2 floatitem wentsd" v-for="(item, index) in Rolelist1" :key="'Role1' + index"
                        :class="{ activeOrange: active == 'Role1' + index }"
                        @click="clickgeometry($event, index, 'Role1' + index, item.titlie)">
                        <el-image :src="getImgPath(item.url)" fit="cover" />
                        <span>{{ item.titlie }}</span>
                      </div>
                      <div class="item2 floatitem wentsd" v-for="(item, index) in Rolelist11" :key="'Role11' + index"
                        :class="{ activeOrange: active == 'Role11' + index }"
                        @click="clickgeometry($event, index, 'Role11' + index, item.titlie)">
                        <el-image :src="getImgPath(item.url)" fit="cover" />
                        <el-color-picker v-model="color1" @change="colorpicker()"
                          :class="{ 'is-show-panel': showTrigger }" />
                        <span>{{ item.titlie }}</span>
                      </div>
                    </div>
                  </div>
                  <!--  -->
                  <div class="listitem lbg_color3 bkcolor3 ">
                    <div class="threelist">
                      <div class="item2 floatitem wentsd" v-for="(item, index) in Rolelist2" :key="'Role2' + index"
                        :class="{ activeOrange: active == 'Role2' + index }"
                        @click="clickgeometry($event, index, 'Role2' + index, item.titlie)">
                        <el-image :src="getImgPath(item.url)" fit="cover" />
                        <span>{{ item.titlie }}</span>
                      </div>
                      <div class="item2 floatitem wentsd" v-for="(item, index) in Rolelist22" :key="'Role22' + index"
                        :class="{ activeOrange: active == 'Role22' + index }"
                        @click="clickgeometry($event, index, 'Role22' + index, item.titlie)">
                        <el-image :src="getImgPath(item.url)" fit="cover" />
                        <el-color-picker v-model="colortier"    color-format="rgba" show-alpha @change="colorpickertier()"
                          :class="{ 'is-show-panel': showTrigger }" />
                        <span>{{ item.titlie }}</span>
                      </div>
                    </div>
                  </div>

                  <!--  -->
                  <div class="listitem lbg_color3 bkcolor3 ">
                    <div class="threelist">
                      <div class="item2 floatitem wentsd" v-for="(item, index) in Rolelist3" :key="'Role3' + index"
                        :class="{ activeOrange: active == 'Role3' + index }"
                        @click="clickgeometry($event, index, 'Role3' + index, item.titlie)">
                        <el-image :src="getImgPath(item.url)" fit="cover" />
                        <span>{{ item.titlie }}</span>
                      </div>
                    </div>
                  </div>
                 

                </div>
              </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 class="listitem lbg_color3 bkcolor3 ">
                    <div class="threelist">
                      <div class="item2 floatitem wentsd1" v-for="(item, index) in Threelist1" :key="'Three1' + index"
                        :class="{ activeOrange: active == 'Three1' + index }"
                        @click="clickgeometry($event, index, 'Three1' + index, item.titlie)">
                        <el-image :src="getImgPath(item.url)" fit="cover" />
                        <span>{{ item.titlie }}</span>
                      </div>
                    </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 threelist" 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 threelist" 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 threelist" 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.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">
              <div>
                <el-form-item label="优化算法" :label-width="formLabelWidth1">
                  <el-select v-model="youhua.algorithm" :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="youhua.popsize" :min="1" :max="10" controls-position="right" />
                </el-form-item>
                <el-form-item label="进化代数:" :label-width="formLabelWidth1">
                  <el-input-number v-model="youhua.epoch" :min="1" :max="10" controls-position="right" />
                </el-form-item>
                <el-form-item label="交叉概率：" :label-width="formLabelWidth1">
                  <el-input-number v-model="youhua.probcrossover" :min="1" :max="10" controls-position="right" />
                </el-form-item>
                <el-form-item label="变异概率：" :label-width="formLabelWidth1">
                  <el-input-number v-model="youhua.probmut" :min="1" :max="10" controls-position="right" />
                </el-form-item>
                <el-form-item label="交叉算子：" :label-width="formLabelWidth1">
                  <el-select v-model="youhua.proboperator" :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="youhua.probscale" :min="1" :max="10" controls-position="right" />
                </el-form-item>
                <el-form-item label="保留优选策略：" :label-width="formLabelWidth1">
                  <el-select v-model="youhua.strategy" :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="youhua.operator" :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="GPU" :label-width="formLabelWidth1">
                  <el-select v-model="youhua.gpu" :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="false"
            :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="formLabelWidth1">
                  <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="formLabelWidth1">
                  <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="formLabelWidth1">
                  <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="formLabelWidth1">
                  <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
                </el-form-item>
                <span>加点准则</span>
                <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>
                <span>优化算法</span>
                <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>
              </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>
          
          <!-- Xfiol改版后的 -->
          <el-dialog v-model="dialog.Xfiol" align-center :modal="false" :close-on-click-modal="false"
            :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false"
            modal-class="summary-dlg2 summary-dlg" :before-close="handleClose" width="675"
            class="dialog_class bgcolor tianjia colortext sel">

            <template #header="{ titleId, titleClass }">
              <div class="my-header ">
                <el-image :src="getImgPath('xuek9.png')" fit="contain"></el-image>
                <h4 :id="titleId" :class="titleClass">Xfoil</h4>
              </div>
            </template>
            <Xfoil ref="Xfoilref"/>
            <template #footer>
              <div class="dialog-footer">
                <!-- <el-button type="info" @click="newxfoil">新建 </el-button> -->
                <el-button type="info" @click="dialog.Xfiol = false">取消</el-button>
                <el-button type="primary" @click="xfoilok();dialog.Xfiol = false">
                  确定
                </el-button>
              </div>
            </template>
          </el-dialog>
          
          <!-- 列表 -->
          <el-dialog v-model="dialog.listdialog" align-center :modal="false" :close-on-click-modal="false"
            :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
            :before-close="handleClose" width="537" class="dialog_style sel" style="max-height: 70%;">

            <template #header="{ titleId, titleClass }">
              <div class="my-header ">
                <h4 :id="titleId" :class="titleClass">列表</h4>
              </div>
            </template>
            <div>
              <ListSE />
              <!-- <el-form>
                <el-form-item label="设计集：" >
                  <el-select v-model="listval" :suffix-icon="CaretBottom" placeholder="请选择">
                    <el-option v-for="item in listoptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="选择要在表中显示的一个或者多个变量和响应" >
                </el-form-item>
                <el-card shadow="hover" style="width: 100%">
                  <el-checkbox-group v-model="listcbval">
                    <el-checkbox v-for="item in Listcheckbox" :key="item.value" :label="item.value" style="display: block">{{ item.label }}</el-checkbox>
                  </el-checkbox-group>
                </el-card>
              </el-form> -->
            </div>
            <template #footer>
              <div class="dialog-footer">
                
                <el-button @click="dialog.listdialog = false">取消</el-button>
                <el-button type="primary" @click="dialog.listdialog = false">
                  确定
                </el-button>
              </div>
            </template>
          </el-dialog>
          <!-- 散点图 -->
          <el-dialog v-model="dialog.scatterdialog" align-center :modal="false" :close-on-click-modal="false"
            :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
            :before-close="handleClose" width="500" class="dialog_style bgcolor tianjia sel" style="max-height: 70%;">

            <template #header="{ titleId, titleClass }">
              <div class="my-header ">
                <h4 :id="titleId" :class="titleClass">散点图</h4>
              </div>
            </template>
            <div>
              <ListSE />
            </div>
            <template #footer>
              <div class="dialog-footer">
                
                <el-button @click="dialog.scatterdialog = false">取消</el-button>
                <el-button type="primary" @click="dialog.scatterdialog = false">
                  确定
                </el-button>
              </div>
            </template>
          </el-dialog>
          <!-- 折线图 -->
          <el-dialog v-model="dialog.echartLinedialog" align-center :modal="false" :close-on-click-modal="false"
            :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
            :before-close="handleClose" width="500" class="dialog_style bgcolor tianjia sel" style="max-height: 70%;">

            <template #header="{ titleId, titleClass }">
              <div class="my-header ">
                <h4 :id="titleId" :class="titleClass">折线图</h4>
              </div>
            </template>
            <div>
              <ListSE />
            </div>
            <template #footer>
              <div class="dialog-footer">
                
                <el-button @click="dialog.echartLinedialog = false">取消</el-button>
                <el-button type="primary" @click="dialog.echartLinedialog = false">
                  确定
                </el-button>
              </div>
            </template>
          </el-dialog>
          <!-- 帕雷托图 -->
          <el-dialog v-model="dialog.paretodialog" align-center :modal="false" :close-on-click-modal="false"
            :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
            :before-close="handleClose" width="500" class="dialog_style bgcolor tianjia sel" style="max-height: 70%;">

            <template #header="{ titleId, titleClass }">
              <div class="my-header ">
                <h4 :id="titleId" :class="titleClass">帕雷托图</h4>
              </div>
            </template>
            <div>
              <el-form>
                <el-form-item label="选择在X轴显示的一个变量和响应" >
                </el-form-item>
                <el-card>
                  <el-checkbox-group v-model="paretocbval">
                    <el-checkbox v-for="item in paretocheckbox" :key="item.value" :label="item.value" style="display: block">{{ item.label }}</el-checkbox>
                  </el-checkbox-group>
                </el-card>
                <el-form-item label="选择在Y轴显示的一个变量和响应" >
                </el-form-item>
                <el-card shadow="hover" style="width: 100%">
                  <el-checkbox-group v-model="paretocbval">
                    <el-checkbox v-for="item in paretocheckbox" :key="item.value" :label="item.value" style="display: block">{{ item.label }}</el-checkbox>
                  </el-checkbox-group>
                </el-card>
              </el-form>
            </div>
            <template #footer>
              <div class="dialog-footer">
                
                <el-button @click="dialog.paretodialog = false">取消</el-button>
                <el-button type="primary" @click="dialog.paretodialog = false">
                  确定
                </el-button>
              </div>
            </template>
          </el-dialog>
          <!-- 云图/等值线图 -->
          <el-dialog v-model="dialog.clouddialog" align-center :modal="false" :close-on-click-modal="false"
            :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
            :before-close="handleClose" width="800" class="dialog_style bgcolor tianjia sel cloudChart" style="height: 72%;">
            <template #header="{ titleId, titleClass }">
              <div class="my-header ">
                <h4 :id="titleId" :class="titleClass">云图/等值线显示</h4>
              </div>
            </template>
            <div>
              <div class="cloudbox">
                <el-row gutter="20">
                  <el-col :span="2"></el-col>
                  <el-col v-for="(item,index) in cloudbtnbox" :key="index" :span="4">
                    <el-button style="width: 100%;" @click="openSeconddialog(item.btnname)">
                      <el-image :src="getImgPath(item.url)" alt="img" fit="cover" style="width: 20px;margin-right: 4px;" />
                      {{ item.btnname }}
                    </el-button>
                  </el-col>
                </el-row>
              </div>
              <cloudChart/>
            </div>
          </el-dialog>
          <!-- 云图二级弹窗 -->
          <el-dialog v-model="seconddialogshow"
          align-center
          :modal="false"
          :close-on-click-modal="false"
          :append-to-body="true"
          draggable
          :fullscreen="false"
          :modal-append-to-body="false"
          modal-class="summary-dlg"
          :before-close="handleClose"
          width="600"
          class="dialog_class bgcolor tianjia"
          
          >
            <template #header="{ titleId, titleClass }">
              <div class="my-header">
                <h4 :id="titleId" :class="titleClass">{{ cloudsedtitle }}</h4>
              </div>
            </template>
            <cloudsecond  :activesd="activesd"/>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="seconddialogshow = false">取消</el-button>
                <el-button type="primary" @click="seconddialogshow = false">
                确定
                </el-button>
            </div>
            </template>
          </el-dialog>
          <!-- 查看报告 -->
          <el-dialog v-model="dialog.lookover" align-center :modal="false" :close-on-click-modal="false"
            :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlgPdf"
            :before-close="handleClose" width="580px" height="800px">

            <template #header="{ titleId, titleClass }">
              <div class="my-header ">
                <el-image :src="getImgPath('k8.png')" fit="contain"></el-image>
                <h4 :id="titleId" :class="titleClass">查看报告：</h4>
              </div>
            </template>
            <pdfReportView/>
            <!-- <div class="numberinput lefttext">
              <el-form>
                <el-image :src="getImgPath('baog.png')" fit="contain"></el-image>
              </el-form>
            </div> -->
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialog.lookover = false">取消</el-button>
                <el-button type="primary" @click="dialog.lookover = false">
                  确定
                </el-button>
              </div>
            </template>
          </el-dialog>
          <!-- 导出报告 -->
          <el-dialog v-model="dialog.exportreport" align-center :modal="false" :close-on-click-modal="false"
            :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
            :before-close="handleClose" width="600" class="dialog_class bgcolor tianjia sel" style="max-height: 70%;">

            <template #header="{ titleId, titleClass }">
              <div class="my-header ">
                <h4 :id="titleId" :class="titleClass">导出报告：</h4>
              </div>
            </template>
            <Exreport />
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialog.exportreport = false">取消</el-button>
                <el-button type="primary" @click="dialog.exportreport = false">
                  确定
                </el-button>
              </div>
            </template>
          </el-dialog>
          <!-- 气动分析Xfoil、ADflow -->
          <el-dialog v-model="dialog.XfAD" align-center :modal="false" :close-on-click-modal="false"
            :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
            :before-close="handleClose" width="860" class="dialog_class bgcolor tianjia sel colortext">

            <template #header="{ titleId, titleClass }">
              <div class="my-header ">
                <!-- <el-image :src="getImgPath('xuek0.png')" fit="contain"></el-image> -->
                <h4 :id="titleId" :class="titleClass">气动分析</h4>
              </div>
            </template>
            <div class="numberinput lefttext ">
              <el-form>
                <el-tabs tab-position="left" class="demo-tabs" v-model="activeadf" @tab-click="adfhandleClick3">
              <el-tab-pane label="Xfoil" name="Xfoil">
                <Xfoil ref="Xfoilref"/>
              </el-tab-pane>
              <!-- ADflow -->
              <el-tab-pane label="ADflow" name="ADflow">
                <ADflow ref="ADflowref"/>
              </el-tab-pane>
            </el-tabs>
              </el-form>
            </div>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialog.XfAD = false">取消</el-button>
                <el-button type="primary" @click="getXfoilAdflowsave(activeadf);dialog.XfAD = false;">
                  确定
                </el-button>
              </div>
            </template>
          </el-dialog>
          <!-- CST -->
          <el-dialog v-model="dialog.CSTt" align-center :modal="false" :close-on-click-modal="false"
            :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
            :before-close="handleClose" width="840" class="dialog_class bgcolor colortext tianjia sel">

            <template #header="{ titleId, titleClass }">
              <div class="my-header ">
                <el-image :src="getImgPath('xuek0.png')" fit="contain"></el-image>
                <h4 :id="titleId" :class="titleClass">CST</h4>
              </div>
            </template>
            <csts ref="Cstref"/>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialog.CSTt = false">取消</el-button>
                <el-button type="primary" @click="cstok()">
                  确定
                </el-button>
              </div>
            </template>
          </el-dialog>
           <!-- FFD -->
           <el-dialog v-model="dialog.ffdt" align-center :modal="false" :close-on-click-modal="false"
            :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
            :before-close="handleClose" width="730" class="dialog_class bgcolor colortext tianjia sel">

            <template #header="{ titleId, titleClass }">
              <div class="my-header ">
                <el-image :src="getImgPath('ffd.png')" fit="contain"></el-image>
                <h4 :id="titleId" :class="titleClass">FFD</h4>
              </div>
            </template>
            <ffds ref="Ffdref"/>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialog.ffdt = false">取消</el-button>
                <el-button type="primary" @click="ffdok()">
                  确定
                </el-button>
              </div>
            </template>
          </el-dialog>
             <!-- 气动分析CST、FFD -->
             <el-dialog v-model="dialog.cstffd" align-center :modal="false" :close-on-click-modal="false"
            :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
            :before-close="handleClose" width="1000" class="dialog_class bgcolor tianjia sel colortext">

            <template #header="{ titleId, titleClass }">
              <div class="my-header ">
                <h4 :id="titleId" :class="titleClass">参数化</h4>
              </div>
            </template>
            <div class="numberinput lefttext ">
              <el-form>
              <!-- CST -->
              <el-tabs tab-position="left" class="demo-tabs" v-model="activeadf" @tab-click="adfhandleClick2">
              <el-tab-pane label="CST" name="CST">
                <csts ref="Cstref"/>
              </el-tab-pane>
              <!-- FFD -->
              <el-tab-pane label="FFD" name="FFD">
               <ffds ref="Ffdref"/>
              </el-tab-pane>
            </el-tabs>
              </el-form>
            </div>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialog.cstffd = false">取消</el-button>
                <el-button type="primary" @click="getCstFfdsave(activeadf);dialog.cstffd = false">
                  确定
                </el-button>
              </div>
            </template>
          </el-dialog>
          <!-- TACS -->
          <el-dialog v-model="dialog.Taxs" align-center :modal="false" :close-on-click-modal="false"
            :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
            :before-close="handleClose" width="700" class="dialog_class bgcolor tianjia sel colortext ">

            <template #header="{ titleId, titleClass }">
              <div class="my-header ">
                <!-- <el-image :src="getImgPath('xuek0.png')" fit="contain"></el-image> -->
                <h4 :id="titleId" :class="titleClass">TACS</h4>
              </div>
            </template>
            <TACS />
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialog.Taxs = false">取消</el-button>
                <el-button type="primary">
                  确定
                </el-button>
              </div>
            </template>
          </el-dialog>
          <!-- 优化器 -->
          <el-dialog v-model="dialog.optgroup" align-center :modal="false" :close-on-click-modal="false"
            :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
            :before-close="handleClose" width="700" class="dialog_class bgcolor tianjia sel colortext">

            <template #header="{ titleId, titleClass }">
              <div class="my-header ">
                <h4 :id="titleId" :class="titleClass">优化器</h4>
              </div>
            </template>
            <div class="numberinput lefttext ">
              <el-form>
              <el-tabs tab-position="left" class="demo-tabs" v-model="activeadf" @tab-click="adfhandleClick">
              <!-- 代理优化器 -->
              <el-tab-pane label="代理优化器" name="代理优化器">
              <Doptimize ref='Doptimizeref'/>
              </el-tab-pane>
              <!-- 进步优化器 -->
              <el-tab-pane label="进化优化器" name="进化优化器">
                <Joptimize ref='Joptimizeref'/>
              </el-tab-pane>
              <!-- 梯度优化器 -->
              <el-tab-pane label="梯度优化器" name="梯度优化器">
                <Toptimize ref='Toptimizeref'/>
              </el-tab-pane>
            </el-tabs>
              </el-form>
            </div>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialog.optgroup = false">取消</el-button>
                <el-button type="primary"  @click="getSave(activeadf);dialog.optgroup = false">
                  确定
                </el-button>
              </div>
            </template>
          </el-dialog>
          <!-- 单独的进步优化器 -->
          <el-dialog v-model="dialog.jboptimizer" align-center :modal="false" :close-on-click-modal="false"
            :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 colortext">

            <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>
            <Joptimize ref='Joptimizeref'/>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialog.jboptimizer = false">取消</el-button>
                <el-button type="primary" @click="getaddsave(); dialog.jboptimizer = false">
                  确定
                </el-button>
              </div>
            </template>
          </el-dialog>
                <!-- 单独的代理优化器 -->
          <el-dialog v-model="dialog.dboptimizer" align-center :modal="false" :close-on-click-modal="false"
            :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
            :before-close="handleClose" width="530" class="dialog_class bgcolor tianjia sel colortext">

            <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>
            <Doptimize ref="Doptimizeref"/>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialog.dboptimizer = false">取消</el-button>
                <el-button type="primary" @click="getDaddsave(); dialog.dboptimizer = false">
                  确定
                </el-button>
              </div>
            </template>
          </el-dialog>
                <!-- 单独的梯度优化器 -->
          <el-dialog v-model="dialog.tboptimizer" align-center :modal="false" :close-on-click-modal="false"
            :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 colortext">

            <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>
            <Toptimize ref="Toptimizeref"/>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialog.tboptimizer = false">取消</el-button>
                <el-button type="primary" @click="getTaddsave(); dialog.tboptimizer = false">
                  确定
                </el-button>
              </div>
            </template>
          </el-dialog>
                 <!-- 单独的ADflow -->
                 <el-dialog v-model="dialog.isADflow" align-center :modal="false" :close-on-click-modal="false"
            :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
            :before-close="handleClose" width="630" class="dialog_class bgcolor tianjia sel colortext">

            <template #header="{ titleId, titleClass }">
              <div class="my-header ">
                <!-- <el-image :src="getImgPath('t2.png')" fit="contain"></el-image> -->
                <h4 :id="titleId" :class="titleClass">ADflow</h4>
              </div>
            </template>
            <ADflow ref="ADflowref"/>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialog.isADflow = false">取消</el-button>
                <el-button type="primary" @click=" adflowok();dialog.isADflow = false">
                  确定
                </el-button>
              </div>
            </template>
          </el-dialog>
            <!-- Python -->
            <el-dialog v-model="dialog.Pythonshow" align-center :modal="false" :close-on-click-modal="false"
            :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
            :before-close="handleClose" width="700" class="dialog_class bgcolor colortext tianjia sel">

            <template #header="{ titleId, titleClass }">
              <div class="my-header ">
                <!-- <el-image :src="getImgPath('xuek0.png')" fit="contain"></el-image> -->
                <h4 :id="titleId" :class="titleClass">Python</h4>
              </div>
            </template>
            <div class="footerp" style="height:525px;padding:15px">
              <div>
          <!-- <el-input
          v-model="textarea1"
       
          style="width: 100%"
          :autosize="{ minRows: 2, maxRows: 4 }"
          type="textarea"
          placeholder="Please input"
        /> -->
              <PythonEdit :value="textarea1" language="python" @change="handleEditorChange"/>
              </div>
              <div class="pythfoter">
                <div class="span active" >
                  <el-image :src="xin"  style="width: 25px;height: 25px;margin-right: 5px;"></el-image>
                  <span>信息栏 </span>
                </div>
                <el-input
                  v-model="textarea2"
                  style="width: 100%"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  type="textarea"
                  placeholder=""
                />
             </div>
            </div>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialog.Pythonshow = false">检查</el-button>
                <el-button type="primary" @click="pythonSubmit(); dialog.Pythonshow = false">
                  保存
                </el-button>
              </div>
            </template>
          </el-dialog>
          <!-- FSI -->
           <el-dialog v-model="dialog.fsidialog" align-center :modal="false" :close-on-click-modal="false"
            :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
            :before-close="handleClose" width="670" class="dialog_class bgcolor tianjia sel colortext">
            <template #header="{ titleId, titleClass }">
              <div class="my-header ">
                <!-- <el-image :src="getImgPath('xuek0.png')" fit="contain"></el-image> -->
                <h4 :id="titleId" :class="titleClass">FUM to FEM</h4>
              </div>
            </template>
            <FSI ref="Fsiref"/>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialog.fsidialog = false">取消</el-button>
                <el-button type="primary" @click=" dialog.fsidialog = false">
                  确定
                </el-button>
              </div>
            </template>
           </el-dialog>
           <!-- Flight -->
           <el-dialog v-model="dialog.flightdialog" align-center :modal="false" :close-on-click-modal="false"
            :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
            :before-close="handleClose" width="630" class="dialog_class bgcolor tianjia sel colortext">
            <template #header="{ titleId, titleClass }">
              <div class="my-header ">
                <!-- <el-image :src="getImgPath('xuek0.png')" fit="contain"></el-image> -->
                <h4 :id="titleId" :class="titleClass">Flight</h4>
              </div>
            </template>
            <Flight ref="Flightref"/>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialog.flightdialog = false">取消</el-button>
                <el-button type="primary" @click=" dialog.flightdialog = false">
                  确定
                </el-button>
              </div>
            </template>
           </el-dialog>
          <!-- 内容区 -->
          <div class="main  mianflex">
            <!--left菜单栏  -->
            <Sidebar ref="Sidebarref" />
            <!-- 放图形 -->
            <div class="main_container">
              <div class="main_model">
                <div class="jindutiao" v-show="progressshow">
                  <!-- <el-progress :text-inside="true" :stroke-width="26" :percentage="70" /> -->
                  <div class="demo-progress">
                    <el-progress :percentage="percentage" :stroke-width="15" :color="customColors">
                      <template #default="{ percentage }">
                        <span class="percentage-value">当前进度:{{ percentage }}%</span>
                      </template>
                    </el-progress>
                    <!-- <button @click="tbn">点我</button> -->
                  </div>
                </div>
                <div class="main_model" v-show='flowshow'>
                  <vuefindex ref="vuefval" @optimizerfalse="optimizerfalse($event)"></vuefindex>
                </div>
                <div class="maxh221">
                  <!-- 中间部分 -->
                   <!-- 列表监控 -->
                  <div class="conter_mian classtable " v-show="jiankong" style="width:100%; height: 100%;">
                    <el-table :data="tableDatalieb" 
                    border 
                    style=" overflow: auto; height: 100%;" 
                    :header-cell-class-name="lbjkheaderCellClassName"
                    :key="tableKey"
                    >
                      <el-table-column type="index" label="编号" width="100"></el-table-column>
                      <el-table-column v-for="(header, index) in tableHeaders" :key="index" :prop="header.prop" show-overflow-tooltip
                        :label="header.label" >
                      </el-table-column>
                    </el-table>
                  </div>
                  <!--   曲线监控 -->
                  <div class="conter_mian classtable " v-if="echartshow" style="width:100%; height: 100%;">
                    <!-- <el-form-item label="" >
                  <el-select v-model="quval" :suffix-icon="CaretBottom" placeholder="请选择">
                    <el-option v-for="item in quxian" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item> -->
                    <optmonitor ref="optmonitor1" :echartdata="echartdata" :selval="quval" :curvedata="curvedata" />
                  </div>
                  <!-- 过程监控 -->
                  <div class="conter_mian classtable conter_flex" v-if="echartshow2" style="width:100%; height: 100%;">
                    <div class="echart_left  ech">
                      <processMonitor1 ref="processMonitor1ref" :echartdata="echartdata" :selval="quval" :curvedata="curvedata"/>
                    </div>
                    <div class="echart_right ech">
                      <processMonitor2 ref="processMonitor2ref" :echartdata="echartdata" :selval="quval" :curvedata="curvedata"/>
                    </div>
                  </div>
                  <!-- 可视化开始 -->
                  <div class="conter_mian classtable echartcont" v-show="echartzongshow">
                    <echartarea ref="arearef" v-show="areashow" :areashow="areashow"/>
                    <bargraph ref="bargraphref" v-show="bargraphshow" :bargraphshow="bargraphshow"/>
                    <echartLine ref="echartLineref" v-show="echartLineshow" :echartLineshow="echartLineshow"/>
                    <BarChart ref="BarChartref" v-show="BarChartshow" :BarChartshow="BarChartshow"/>
                    <scatter ref="scatterref" v-show="scattershow" :scattershow="scattershow"/>
                    <radar ref="radarref" v-show="radarshow" :radarshow="radarshow"/>
                    <pie ref="pieref" v-show="pieshow" :pieshow="pieshow" />
                    <pareto ref="paretoref" v-show="paretoshow" :paretoshow="paretoshow" />
                  </div>
                  <!-- 可视化结束 -->
                  <!-- 右侧边栏开始 -->
                  <!-- 结束 -->
                </div>
                <el-footer class="femFooter">
                  <div class="gooterpading">
                    <div class="footerTitle   el-tag--primary">
                      <div>
                        <div class="span" v-for="(tab, index) in tabs" :key="index" :class="{ 'active': activeIndex === index }"
                          @click="xxclick(index)">
                          <el-image :src="tab.img" fit="contain"></el-image>
                          <span>{{ tab.name }} </span></div>
                      </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 v-if="footerShow">
                      <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>
                          <template v-for="(tab, index) in listli" :key="index">
                            <el-divider v-if="index !== 0" direction="vertical" class="custom-divider"></el-divider>
                            <li @click="issueclick(index)" :class="{ 'active2': activeIndex2 === index }">
                              <el-image v-if="activeIndex2 === index" :src="tab.isimg" fit="contain"></el-image>
                              <el-image v-else :src="tab.noimg" fit="contain"></el-image>
                              <span>{{ tab.name }}</span>
                            </li>
                          </template>
                        </ul>
                        <div class="footer-content">
                          <div class="eldesign classtable" v-if="activeIndex2 == 0">
                            <el-table :data="designtable" border style="width: 100%" height="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="upper" label="上限值">
                                <template #default="{ row }">
                                  <el-input type="text" v-model="row.upper" 
                                    @change="handleEdit(row)" />
                                </template>
                              </el-table-column>
                              <el-table-column prop="lower" label="下限值">
                                <template #default="{ row }">
                                  <el-input v-model="row.lower"  
                                    @change="handleEdit(row)" />
                                </template>
                              </el-table-column>
                              <el-table-column prop="reference" label="基准值" >
                                <template #default="{ row }">
                                  <el-input v-model="row.reference" 
                                    @change="handleEdit(row)" />
                                </template>
                              </el-table-column>
                              <el-table-column prop="remark" label="说明">
                                <template #default="{ row }">
                                  <el-input v-model="row.remark" @change="handleEdit(row)" />
                                </template>
                              </el-table-column>
                              <!-- <el-table-column label="操作" width="140">
                                <template #default="scope">
                                  <el-button size="small" type="danger"
                                    @click.stop="sjdelete(scope.$index, scope.row)">删除</el-button>
                                </template>
                              </el-table-column> -->
                            </el-table>

                          </div>
                          <div class="elconstraint classtable" v-if="activeIndex2 == 1">
                            <el-table :data="tableData" border style="width: 100%" height="100">
                              <el-table-column type="index" label="编号" width="100" />
                              <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="con" label="约束关系">
                                <template v-slot="scope">
                                  <el-select class="no-border " v-model.number="scope.row.con" :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="reference" label="约束基准值">
                                <template #default="{ row }">
                                  <el-input v-model="row.reference" 
                                    @change="handleEdit(row)" />
                                </template>
                              </el-table-column>
                              <el-table-column prop="upper" label="上限值">
                                <template #default="{ row }">
                                  <el-input v-model="row.upper" 
                                    @change="handleEdit(row)" />
                                </template>
                              </el-table-column>
                              <el-table-column prop="lower" label="下限值">
                                <template #default="{ row }">
                                  <el-input v-model="row.lower"
                                    @change="handleEdit(row)" />
                                </template>
                              </el-table-column>
                              <!-- <el-table-column label="操作" width="140">
                                <template #default="scope">
                                  <el-button size="small" type="danger"
                                    @click.stop="ysdelete(scope.$index, scope.row)">删除</el-button>
                                </template>
                              </el-table-column> -->
                            </el-table>

                          </div>
                          <div class="eloptimize classtable" v-if="activeIndex2 == 2">
                            <el-table :data="eloptimize" border style="width: 100%" height="100">
                              <el-table-column type="index" label="编号" width="70" />
                              
                              <el-table-column prop="name" label="目标名称">
                                <template #default="{ row }">
                                  <el-input v-model="row.name" />
                                </template>
                              </el-table-column>
                              <el-table-column prop="optdir" label="优化方向">
                                <template v-slot="scope">
                                  <el-select class="no-border " v-model="scope.row.optdir" :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="weight" label="权重系数">
                                <template #default="{ row }">
                                  <el-input v-model="row.weight" 
                                    @change="handleEdit(row)" />
                                </template>
                              </el-table-column>
                              <!-- <el-table-column prop="scaling" label="数据缩放">
                                <template v-slot="scope">
                                  <el-checkbox :false-label="0" :true-label="1" v-model="scope.row.scaling" />

                                </template>
                              </el-table-column>
                              <el-table-column prop="factor" label="缩放因子">
                                <template #default="{ row }">
                                  <el-input v-model.number="row.factor" oninput="value=value.replace(/^|[^0-9]/g,'')"
                                    @change="handleEdit(row)" />
                                </template>
                              </el-table-column> -->
                              <el-table-column prop="reference" label="约束基准值">
                                <template #default="{ row }">
                                  <el-input v-model="row.reference" 
                                    @change="handleEdit(row)" />
                                </template>
                              </el-table-column>
                              <el-table-column prop="remark" label="说明">
                                <template #default="{ row }">
                                  <el-input v-model="row.remark" @change="handleEdit(row)" />
                                </template>
                              </el-table-column>
                              <!-- <el-table-column label="操作" width="140">
                                <template #default="scope">
                                  <el-button size="small" type="danger"
                                    @click.stop="mbdelete(scope.$index, scope.row)">删除</el-button>
                                </template>
                              </el-table-column> -->
                            </el-table>

                          </div>
                        </div>
                        <div class="dibu">
                          <div class="footer-add">
                            <div class="sev_ruwu">
                              <div class="disflex flexend">
                                <el-form-item label="新增变量数：" v-if="activeIndex2 === 0">
                                  <el-input v-model="tableval" maxlength="18"
                                    oninput="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" class="w-50 m-2"
                                  /> 
                                </el-form-item>
                                <el-button class="btncolor" v-if="activeIndex2 === 0">导入</el-button>
                                <el-button class="btncolor" @click="onAddItem">新建</el-button>
                                <el-button class="btncolor" @click="onokItem">确定</el-button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="pading_foter">
                    </div>
                  </div>
                </el-footer>
              </div>
            </div>

          </div>


        </div>
      </el-main>

    </el-container>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive, provide, nextTick } from "vue";
import { RouterView, RouterLink, useRouter, useRoute } from "vue-router"
import myheader from "@/components/header.vue"
import { request, uploadFile } from "@/utils/request";
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 q2 from "@/assets/img/q2.png"
import f21 from "@/assets/img/f21.png"
import f22 from "@/assets/img/f22.png"
import f41 from "@/assets/img/f41.png"
import xin from "@/assets/img/xin.png"
import xin2 from "@/assets/img/xin2.png"
import s from "@/assets/img/s.png"
import y from "@/assets/img/y.png"
import y2 from "@/assets/img/y2.png"
import nos from "@/assets/img/nos.png"
import zy from "@/assets/img/zy.png"
import zy2 from "@/assets/img/zy2.png"
import xuek10 from '@/assets/flowimg/xuek10.png'
import xuek11 from '@/assets/flowimg/xuek11.png'
import xuek12 from '@/assets/flowimg/xuek12.png'
import optmonitor from './echart/optimize_monitor.vue'
import processMonitor1 from "./echart/process-monitor1.vue"
import processMonitor2 from "./echart/process-monitor2.vue"
import echartindex from './echart/index.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'
// 可视化echart
import echartarea from './echart/area.vue'
import bargraph from './echart/bargraph.vue'
import echartLine from './echart/echartLine.vue'
import BarChart from './echart/BarChart.vue'
import scatter from './echart/scatter.vue'
import radar from './echart/radar.vue'
import pie from './echart/pie.vue'
import pareto from './echart/pareto.vue' 

import Doptimize from './titlecomponent/Doptimize.vue'
import Joptimize from './titlecomponent/Joptimize.vue'
import Toptimize from './titlecomponent/Toptimize.vue'
import ADflow from './titlecomponent/ADflow.vue'
import Xfoil from './titlecomponent/Xfoil.vue'
import csts from './titlecomponent/csts.vue'
import ffds from './titlecomponent/ffds.vue'
import cloudsecond from "./titlecomponent/Cloudsecond.vue";
import FSI from './titlecomponent/FSI.vue'
import Flight from './titlecomponent/Flight.vue'
import ListSE from "./titlecomponent/ListSE.vue";
import TACS from "./titlecomponent/TACS.vue";

import fileUploads from './components/fileuploads.vue'
import Exreport from "./titlecomponent/Exreport.vue";
import PythonEdit from '@/components/PythonEditor/index.vue'; // python编辑器
import pdfReportView from '@/components/pdfReportView/index.vue'; //报告查看
import cloudChart from './threejsView/index.vue'; // 云图

let Sidebarref = ref();
let resource=ref(0);
let cstnum=ref('');
let textarea2=ref()

let textarea1 = ref(`import os
import numpy as np
from surromdao.solver import BaseSolver

class Branin(BaseSolver):
    def __init__(self, filename=os.path):
        super().__init__(filename)
    
    def compute(self, xdict):
        x = np.zeros(2)
        # x[0] = xdict['x1']
        # x[1] = xdict['x2']`);

let Cstref = ref();
let Ffdref = ref();
let Xfoilref = ref();
let ADflowref = ref();
let Joptimizeref=ref();
let Doptimizeref=ref();
let Toptimizeref=ref();
let Fsiref=ref();
let Flightref=ref();
let f4ce = ref("优化问题组件");
let modelban = ref("学科分析组件");
let undmodel=ref('优化器组件');
let optiongroup1 = ref([
  { label: '优化问题', value: '优化问题' }
])
let options4 = ref([
  { label: '进化优化器', value: '进化优化器', icon:xuek10 },
  { label: '代理优化器', value: '代理优化器', icon:xuek11 },
  { label: '梯度优化器', value: '梯度优化器', icon:xuek12 },
])
let formLabelWidth3=ref(100)
let formLabelWidth200=ref(200)
let tablecstHeaders=ref([]);
let treeitem = ref({});
let treeitem2 = ref({});
let treeitem3 = ref({});
let percentage = ref(70);
let progressshow = ref(false);
let flowshow = ref(true);
let jiankong = ref(false);
let echartshow = ref(false);
let echartshow2 = ref(false);
let areashow = ref(false);
let echartLineshow = ref(false);
let BarChartshow = ref(false);
let bargraphshow = ref(false);
let scattershow = ref(false);
let radarshow = ref(false);
let pieshow = ref(false);
let paretoshow = ref(false);
let bargraphref = ref();
let echartLineref = ref();
let BarChartref = ref();
let radarref = ref();
let pieref = ref();
let paretoref = ref();
let scatterref = ref();
let echartzongshow = ref(false);
const router = useRouter();
const route = useRoute();
let youhua = ref({
  algorithm: 'GA',
  popsize: 100,
  epoch: 100,
  probcrossover: 0.1,
  probmut: 0.1,
  proboperator: 'SBX交叉',
  probscale: 1,
  strategy: '最佳保留策略',
  operator: '倒位变异',
  gpu: 'YES'
})
let echartdata = ref(null);
let optmonitor1 = ref();
let processMonitor1ref = ref()
let processMonitor2ref = ref()
let arearef = ref();
let tableHeaders = ref([
  { label: '参数1', prop: 'value1' },
  { label: '参数2', prop: 'value2' },
  { label: '参数3', prop: 'value3' },
  { label: '参数4', prop: 'value4' },
  { label: '参数5', prop: 'value5' },

])
let varsobj = ref({});
let valsobj = ref({});
let tabarr = ref([]);
let arrobj = ref([]);
let tableDatalieb = ref([
  { value1: '0.00', value2: '0.00', value3:'0.00', value4:'0.00', value5:'0.00'},
  { value1: '0.00', value2: '0.00', value3:'0.00', value4:'0.00', value5:'0.00'},
  { value1: '0.00', value2: '0.00', value3:'0.00', value4:'0.00', value5:'0.00'},
  { value1: '0.00', value2: '0.00', value3:'0.00', value4:'0.00', value5:'0.00'},
  { value1: '0.00', value2: '0.00', value3:'0.00', value4:'0.00', value5:'0.00'},
])
let curvedata = ref('');
let websock = ref(null);
let times = ref({
  lockReconnect: false, //是否真正建立连接
  timeout: 28 * 1000, //30秒一次心跳
  timeoutObj: null, //心跳倒计时
  serverTimeoutObj: null, //
  timeoutnum: null, //断开重连倒计时
})
let input3=ref()
let eid = ref('');//进步优化器的eid
let logs = ref("");
let pid = ref("");
let fid = ref('');
let conid = ref('');
let tableval = ref();
let vuefval = ref();
let elodingfalse = ref(false);
let footerShow = ref(true);
let zhixing = ref('Rosenbrock');
let tabName = ref("one")
const tabs = [{
  name:'信息栏',
  img:xin,
},{
  name:'优化问题',
  img:xin2,

}]
const listli=[{
  name:'设计变量',
  noimg:nos,
  isimg:s
},{
  name:'约束条件',
  noimg:y2,
  isimg:zy2
},
{
  name:'优化目标',
  noimg:y,
  isimg:zy
}
]
const xfoil = ['输入', '执行', '输出'];
const newxfoil = ['输入参数', '输出参数', '中间参数'];
let srtable = ref([]);
let radio1=ref(0);
let srnewtable = ref([
{
    date: '2016-05-04',
    name: 'Aleyna Kutzner',
  },
  {
    date: '2016-05-03',
    name: 'Helen Jacobi',
  },
]);
let scnewtable = ref([
{
    date: '2016-05-04',
    name: 'Aleyna Kutzner',
    con:-1
  },
  {
    date: '2016-05-03',
    name: 'Helen Jacobi',
    con:1
  },
]);
let sctable = ref([]);
// let quxian=ref([{
//   val:'1',name:"设计变量",
//   val:'2',name:"约束条件",
//   val:'3',name:"约束条件",
// }])
//  let quval=ref('1')
let currentTab=ref(0);
// let tabslist = ref([
//   { id: '0', name: '来流参数' },
//   { id: '1', name: '设置参数' },
//   { id: '2', name: '分析参数' },
// ])
let yslist = ref([
  { label: 'GA', value: 'GA' },
  { label: 'PSO', value: 'PSO' },
  { label: 'NSGA2', value: 'NSGA2' },
])

let lailiutable=ref([
{
     data: 1,
    name: '结构质量',
    con:-1
  },
  {
    data: 23,
    name: 'KS失效',
    con:1
  },
  {
    data: 0.0,
    name: '最大变形',
    con: -1
  }
])
let quxian = ref([
  { label: '设计变量', value: '设计变量' },
  { label: '约束条件', value: '约束条件' },
  { label: '目标函数', value: '目标函数' },
])
let quval = ref("")
const activeIndex = ref(0);
const activeIndex2 = ref(0);
const activeIndex3 = ref(0);
const color1 = ref('');
const colortier = ref('rgba(16, 185, 129, 0.5)');
let showTrigger = ref(false);
let activeadf=ref('Xfoil');
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
      },
    ],
  },

])
let options1 = ref([
  { label: '最大化', value: "-1" },
  { label: '最小化', value: "1" },
])
let options2 = ref([
  { label: '升力系数', value: '升力系数' },
  { label: '翼型面积', value: '翼型面积' },
])
let options3 = ref([
  { label: '大于', value: -1 },
  { label: '小于', value: 1 },
])
let shuxingopt = ref([
  { label: '约束条件', value: -1 },
  { label: '优化目标', value: 1 },
])
let defaultExpandedArr = ref([]);
const defaultProps = {
  children: 'children',
  label: 'label',
}
let svarlist = ref('');
let conlist = ref('');
let funlist = ref('');
let looktext=ref('');

// treeData.value.forEach((item) => {
//   defaultExpandedArr.value.push(item.id);
//       });
const activeName = ref('Role')
const activeName1 = ref('message')
let active = ref('');
let tabactive = ref("");
let checkbox = ref(false)
let formLabelWidth6 = ref(100)
let formLabelWidth1 = ref(170)
let formLabelWidth2 = ref(130)
let canshu = ref();

let question = ref([
  { url: 'kk1.png', titlie: "列表" },
  { url: 'kk2.png', titlie: "散点图" },
  { url: 'kk4.png', titlie: "折线图" },
  { url: 'kk8.png', titlie: "帕雷托图" },
  { url: 'kk3.png', titlie: "面积图" },
  { url: 'kk5.png', titlie: "柱状图" },
  { url: 'k3.png', titlie: "饼状图" },
 
  { url: 'kk6.png', titlie: "横条图" },
  { url: 'kk7.png', titlie: "雷达图" },
  
  { url: 'kk9.png', titlie: "云图/等值线" },
  { url: 'kk10.png', titlie: "查看报告" },
  { url: 'kk11.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 Rolelist = ref([
  { url: 'tow1.png', titlie: "优化问题组件" },
  { url: 'tow2.png', titlie: "学科分析组件" },
  { url: 'tow3.png', titlie: "优化器组件" },
])
let Rolelist1 = ref([
  { url: 'l1.png', titlie: "逻辑流连线" },
  { url: 'l2.png', titlie: "数据流连线" },
])
let Rolelist11 = ref([{ url: 'w6.png', titlie: "选择连线颜色" }])
let Rolelist2 = ref([
  { url: 'cai1.png', titlie: "模块组合" },
  { url: 'cai2.png', titlie: "模块拆分" },
])
let Rolelist22 = ref([{ url: 'w9.png', titlie: "选择图框颜色" }])
let Rolelist3 = ref([
  { url: 'w10.png', titlie: "添加注释" },
])
let Threelist = ref([
  { url: 'you1.png', titlie: "开始" },
  { url: 'you2.png', titlie: "暂停" },
  { url: 'you3.png', titlie: "续算" },
  { url: 'tts.png', titlie: "结束" },
])
let Threelist1 = ref([
  { url: 'yh1.png', titlie: "列表监控" },
  { url: 'yh2.png', titlie: "曲线监控" },
  { url: 'yh3.png', titlie: "过程监控" },
])

let Sevenlist = ref([
{ url: 'rr2.png', titlie: '任务检索' },
{ url: 'rr1.png', titlie: '任务管理' },
  { url: 'rr3.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 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("NO")
let addlist8 = ref([
  { label: 'YES', value: 'YES' },
  { label: 'NO', value: 'NO' },
])


let paretocbval = ref([])
let paretocheckbox = ref([
  {label:'-cl',value:'-cl'},
  {label:'cd',value:'cd'},
])

let cloudbtnbox = ref([
  {url:'meshFile.png',btnname:'文件选择'},
  {url:'yu.png',btnname:'域'},
  {url:'kk9.png',btnname:'云图'},
  {url:'seka.png',btnname:'色卡'},
  {url:'dengzx.png',btnname:'等值线'},
])

let dialog = ref({
  newdialog: false,
  setdialog: false,
  targetdialog: false,
  design: false,
  constraint: false,
  parameter: false,
  agency: false,
  optimizer: false,
  jboptimizer: false,
  dboptimizer: false,
  tboptimizer: false,
  isADflow:false,
  lookover:false,
  exportreport:false,
  Xfiol: false,
  tidu:false,
  CSTt:false,
  ffdt:false,
  XfAD:false,
  cstffd:false,
  Taxs:false,
  enddialog: false,
  addfun: false,
  sufun: false,
  task: false,
  guanli: false,
  optgroup:false,
  Pythonshow:false,
  listdialog:false,
  scatterdialog:false,
  echartLinedialog:false,
  paretodialog:false,
  clouddialog:false,
  fsidialog:false,
  flightdialog:false,
})

// let columns=ref[{
//   columns: [
//         { label: '上表面', prop: 'sbiao' },
//         { label: '下表面', prop: 'xbiao' },
//         // 动态添加更多列
//       ]
// }]
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 eloptimize = ref([])
const tableData = ref([])
const designtable = ref([])
const tasktable = ref([
  // {
  //   id: "01",
  //   time: '2016-05-03',
  //   name: '升阻比',
  //   state: '增大',


  // },
  // {
  //   id: "02",
  //   time: '2016-05-03',
  //   name: '升阻比',
  //   state: '增大',


  // },
])
const customColors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#f56c6c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#5cb87a', percentage: 80 },
  { color: '#5cb87a', percentage: 100 },
]
let name = ref("1")
let num = ref(1)
const getImgPath = (url) => {
  return new URL(`../assets/img/${url}`, import.meta.url).href
}
onMounted(() => {
  //console.log( Sidebarref.value.datatree);

  setTimeout(function () {
    init();
    initWebSocket();
    logsget();
    // vuefval.value.getroter()
  }, 1500);
  // childfun();

});

const sjdelete = (index, row) => {
  console.log(index);
  designtable.value.splice(index, 1)


}
const ysdelete = (index, row) => {
  tableData.value.splice(index, 1)
}
const mbdelete = (index, row) => {
  eloptimize.value.splice(index, 1)
}
// 初始值
const init = () => {

  pid.value = route.query.pid;
  console.log(route.query.pid);
}
const handleClick = (tab, event) => {
  console.log('标签页：',tab.props.name);

  tabactive.value = tab.props.name;
  if (tabactive.value == 'User') {
    // vuefval.value.logToObject1();
    router.replace({ path: '/' })
  } else {

  }
  if (tabactive.value == 'Role') {
    flowshow.value = true;
    console.log(11111)
  } else {
    flowshow.value = false;
    console.log(flowshow.value)
  }
  ifjiankong();

  dialogcolse()

  // 可视化标签页
  if (tabactive.value == 'Config') {
    echartzongshow.value = true;
    // curveLine();
  } else {
    echartzongshow.value = false;
  }
}

const validateInput = (row)  => {
    // 允许输入 None / none / 负数 / 小数
    if (/^(none|None|-?\d*\.?\d*)$/.test(row.upper)) {
      row.upper = row.upper; // 允许输入
    } else {
      row.upper = row.upper.slice(0, -1); // 删除最后输入的非法字符
    }
}

const validateInput1 = (row)  => {
    // 允许输入 None / none  / 小数
    if (/^(none|None|\d*\.?\d*)$/.test(row.upper)) {
      row.upper = row.upper; // 允许输入
    } else {
      row.upper = row.upper.slice(0, -1); // 删除最后输入的非法字符
    }
}

//表格点击事件
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('双击',val);
  if (val == '优化器') {
    // dialog.value.optimizer = true;
    activeadf.value='代理优化器';
    initoptimize();
    dialog.value.optgroup = true;
  } else if (val == '参数化') {
    activeadf.value='CST';
    initcstffds();
    dialog.value.cstffd = true;
  }else if (val == '气动分析') {
    activeadf.value='Xfoil'
    intxfoiladflow();
    dialog.value.XfAD = true;
  } else if (val == '进化优化器') {
    activeadf.value='进化优化器';
    dialog.value.jboptimizer = true;
    nextTick(() => {
      // 确保 ref 已经初始化
      if (Joptimizeref.value) {
        // 调用 Joptimize 的 getoptimize 方法
        Joptimizeref.value.getoptimize(pid.value);
      }
    });
  } else if (val == '代理优化器') {
    activeadf.value='代理优化器';
    // dialog.value.optgroup = true;
    dialog.value.dboptimizer = true;
    nextTick(() => {
      // 确保 ref 已经初始化
      if (Doptimizeref.value) {
        Doptimizeref.value.getDoptimize(pid.value);
      }
    });
  } 
  //  else if (val == 'Xfiol' || val == 'Rosenbrock') {
  //   importget();
  //   dialog.value.Xfiol = true;

  // }
  else if(val == '梯度优化器'){
    activeadf.value='梯度优化器';
    dialog.value.tboptimizer = true;
    nextTick(() => {
      // 确保 ref 已经初始化
      if (Toptimizeref.value) {
        Toptimizeref.value.getToptimize(pid.value);
      }
    });
  }else if(val == 'CST'){
   /// dialog.value.CSTt = true;
    activeadf.value='CST';
    dialog.value.CSTt = true;
    nextTick(() => {
      // 确保 ref 已经初始化
      if (Cstref.value) {
        Cstref.value.getcst(pid.value);
      }
    });
  }else if(val == 'FFD'){
   /// dialog.value.CSTt = true;
    activeadf.value='FFD';
    dialog.value.ffdt = true;
    nextTick(() => {
      // 确保 ref 已经初始化
      if (Ffdref.value) {
        Ffdref.value.getffds(pid.value);
      }
    });
  }
  else if(val == 'ADflow'){
   // adfhandleClick();
   activeadf.value='ADflow';
   dialog.value.isADflow = true;
   nextTick(() => {
      // 确保 ref 已经初始化
      if (ADflowref.value) {
        ADflowref.value.getadflow(pid.value);
      }
    });
  }else if(val == 'Xfoil'){
  //  activeadf.value='Xfiol';
   dialog.value.Xfiol = true;
   nextTick(() => {
      // 确保 ref 已经初始化
      if (Xfoilref.value) {
        Xfoilref.value.getxfoil(pid.value);
      }
    });
  }else if(val == 'TACS'){
    dialog.value.Taxs = true;
  }else if(val == '模版'){
    dialog.value.optgroup = true;
    activeadf.value='代理优化器';
  }else if(val == 'Python'){
    dialog.value.Pythonshow = true;
    initPython();
  }else if(val == 'FUM to FEM'){
    dialog.value.fsidialog = true;
    
  }else if(val == 'Flight'){
    dialog.value.flightdialog = true;
    
  }
   else {
    dialog.value.optimizer = false;
    dialog.value.jboptimizer = false;
    dialog.value.Xfiol = false;
    dialog.value.lookover = false;
    dialog.value.tidu = false;
    dialog.value.CSTt = false;
    dialog.value.XfAD = false;
    dialog.value.cstffd = false;
    dialog.value.Pythonshow = false;
    dialog.value.fsidialog = false;
    dialog.value.flightdialog = false;
  }

}

// 优化器窗口初始化
const initoptimize = () => {
  const params1 = {
    transCode:'MDO0018',
    pid: pid.value,
  }
  const params2 = {
    transCode:'MDO0031',
    pid: pid.value,
  }
  const params3 = {
    transCode:'MDO0033',
    pid: pid.value,
  }
  Promise.all([
    request(params1),
    request(params2),
    request(params3)
  ]).then(([res1, res2, res3]) => {
    console.log('1:', res1.checked);
    console.log('2:', res2.checked);
    console.log('3:', res3.checked);

    if(res1.hasOwnProperty('eid')){
      Joptimizeref.value.getoptimizeAssign(res1);
      console.log('fuz1:');
    }
    if(res3.hasOwnProperty('grid')){
      Toptimizeref.value.getToptimizeAssign(res3);
      console.log('fuz2:');
    }
    if(res2.hasOwnProperty('suid')){
      Doptimizeref.value.getDoptimizeAssign(res2);
      console.log('fuz3:');
    }
    
    // 根据返回值来设置 activeadf
    if (res1.checked === 1) {
      activeadf.value = '进化优化器';
    } else if (res2.checked === 1) {
      activeadf.value = '代理优化器';
    } else if (res3.checked === 1) {
      activeadf.value = '梯度优化器';
    }
    console.log('Updated activeadf:', activeadf.value);
  }).catch((err) => {
    console.error('请求失败:', err);
  });
}

// CST/FFD窗口初始化
const initcstffds = () => {
  const params1 = {
    transCode:'MDO0040',
    pid: pid.value,
  }
  const params2 = {
    transCode:'MDO0043',
    pid: pid.value,
  }
  Promise.all([
    request(params1),
    request(params2),
  ]).then(([res1, res2]) => {
    console.log('1:', res1.checked);
    console.log('2:', res2.checked);

    if(res1.hasOwnProperty('cstid')){
      Cstref.value.getcstAssign(res1);
    }else if(res2.hasOwnProperty("ffdid")){
      Ffdref.value.getffdsAssign(res2);
    }
    
    // 根据返回值来设置 activeadf
    if (res1.checked === 1) {
      activeadf.value = 'CST';
    } else if (res2.checked === 1) {
      activeadf.value = 'FFD';
    }
    console.log('Updated activeadf:', activeadf.value);
  }).catch((err) => {
    console.error('请求失败:', err);
  });
}

// Xfoil/ADflow窗口初始化
const intxfoiladflow = () => {
  const params1 = {
    transCode:'MDO0046',
    pid: pid.value,
  }
  const params2 = {
    transCode:'MDO0049',
    pid: pid.value,
  }
  Promise.all([
    request(params1),
    request(params2),
  ]).then(([res1, res2]) => {
    console.log('1:', res1.checked);
    console.log('2:', res2.checked);

    if(res1.hasOwnProperty("xfid")){
      Xfoilref.value.getxfoilAssign(res1);
    }else if(res2.hasOwnProperty("adid")){
      ADflowref.value.getadflowAssign(res2);
    }
    
    // 根据返回值来设置 activeadf
    if (res1.checked === 1) {
      activeadf.value = 'Xfoil';
    } else if (res2.checked === 1) {
      activeadf.value = 'ADflow';
    }
    console.log('Updated activeadf:', activeadf.value);
  }).catch((err) => {
    console.error('请求失败:', err);
  });
}

// Python窗口初始化
const initPython = () => {
  console.log('Pythonchushihua');
  const param = {
    transCode: 'MDO0036',
    pid: pid.value,
  };
  
  request(param).then((res) => {
    console.log('Python:', res);
    
    // 判断 res.ptython 是否为空，若不为空则赋值
    if (res.ptython) {
      textarea1.value = res.ptython;
    }
  }).catch((err) => {
    console.error('请求失败:', err);
  });
};

// Python确认按钮提交
const pythonSubmit = () => {
  console.log('Python确认按钮提交');
  const param = {
    transCode:'MDO0037',
    pid: pid.value,
    python: textarea1.value,
  }
  request(param).then((res) => {
    console.log('Python确认按钮提交:', res);
  }).catch((err) => {
    console.error('请求失败:', err);
  });
}

// python处理编辑器内容变化的方法
const handleEditorChange = (value) => {
  console.log('Editor content changed in parent component:', value);
};

// 模块选择
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;
    case "选择连线颜色":
      showTrigger.value = true;
      break;
    case "逻辑流连线":
      vuefval.value.linestrokeWidth(1);
      break;
    case "数据流连线":
      vuefval.value.linestrokeWidth(3);
      break;
      case "模块组合":
      vuefval.value.bgcolorfunc(colortier.value);
      vuefval.value.onSelection();
      break;
    case "开始":
      // optmonitor1.value.echatinit();
      // processMonitor1ref.value.echatinit();
      // processMonitor1ref.value.echatinit();
      runok();
      break;
    case "列表监控":
      ifjiankong();
      listtableInit();
      break;
    case "曲线监控":
      ifjiankong()
      curveLine();
      break;
    case "过程监控":
      ifjiankong()
      curveLine2();
      curveLine3();
      break;
    case "列表":
      echatsfunc();
      dialog.value.listdialog = true;
      break;
    case "面积图":
      echatsfunc();
      break;
    case "饼状图":
      echatsfunc();
      break;
    case "柱状图":
      echatsfunc();
      break;
    case "折线图":
      dialog.value.echartLinedialog = true;
      echatsfunc();
      break;
    case "散点图":
      // logsget();
      dialog.value.scatterdialog = true;
      echatsfunc();
      break;
    case "横条图":
      echatsfunc();
      break;
    case "雷达图":
      //logsget();
      echatsfunc();
      break;
    case "帕雷托图":
      dialog.value.paretodialog = true;
      echatsfunc();
      break;
    case "云图/等值线":
      dialog.value.clouddialog = true;
      break;  
    case "查看报告":
      echatsfunc();
      dialog.value.lookover = true;
      break;
    case "导出报告":
      dialog.value.exportreport = true;
      break;
    default:
  }
}

//  可视化清空
const echartclear = () => {
  arearef.value.echatinit();
  bargraphref.value.echatinit();
  echartLineref.value.echatinit();
  BarChartref.value.echatinit();
  radarref.value.echatinit();
  scatterref.value.echatinit();
  pieref.value.echatinit();
  paretoref.value.echatinit();
}
const echatsfunc = () => {
  //echartzongshow.value=true;
  // echartclear();
  switch (tabactive.value) {
    case "面积图":
      areashow.value = true;
      bargraphshow.value = false;
      echartLineshow.value = false;
      BarChartshow.value = false;
      radarshow.value = false;
      scattershow.value = false;
      pieshow = false;
      paretoshow =false;
      break;
    case "柱状图":
      areashow.value = false;
      bargraphshow.value = true;
      echartLineshow.value = false;
      BarChartshow.value = false;
      radarshow.value = false;
      scattershow.value = false;
      pieshow = false;
      paretoshow = false;
      break;
    case "饼状图":
      areashow.value = false;
      bargraphshow.value = false;
      echartLineshow.value = false;
      BarChartshow.value = false;
      radarshow.value = false;
      scattershow.value = false;
      pieshow = true;
      paretoshow = false;
      break;
    case "折线图":
      areashow.value = false;
      bargraphshow.value = false;
      echartLineshow.value = true;
      BarChartshow.value = false;
      radarshow.value = false;
      scattershow.value = false;
      pieshow = false;
      paretoshow = false;
      break;
    case "散点图":
      areashow.value = false;
      bargraphshow.value = false;
      echartLineshow.value = false;
      BarChartshow.value = false;
      radarshow.value = false;
      scattershow.value = true;
      pieshow = false;
      paretoshow = false;
      break
    case "横条图":
      areashow.value = false;
      bargraphshow.value = false;
      echartLineshow.value = false;
      BarChartshow.value = true;
      radarshow.value = false;
      scattershow.value = false;
      pieshow = false;
      paretoshow = false;
      break
    case "雷达图":
      areashow.value = false;
      bargraphshow.value = false;
      echartLineshow.value = false;
      BarChartshow.value = false;
      radarshow.value = true;
      scattershow.value = false;
      pieshow = false;
      paretoshow = false;
      break
    case "帕雷托图":
      areashow.value = false;
      bargraphshow.value = false;
      echartLineshow.value = false;
      BarChartshow.value = false;
      radarshow.value = false;
      scattershow.value = false;
      pieshow = false;
      paretoshow = true;
      break
    default:
      areashow.value = false;
      bargraphshow.value = false;
      echartLineshow.value = false;
      BarChartshow.value = false;
      radarshow.value = false;
      scattershow.value = false;
      pieshow = false;
      paretoshow = false;
      break

  }

}
// 可视化结束
//  ||activeName.value=='Three'&&tabactive.value=='开始'
const ifjiankong = () => {
  if (activeName.value == 'Three' && tabactive.value == '列表监控' || activeName.value == 'Three' && tabactive.value == '开始') {
    jiankong.value = true;

  } else {
    jiankong.value = false;
  }
  if (activeName.value == 'Three' && tabactive.value == '曲线监控' ) {
    echartshow.value = true;

  } else {
    echartshow.value = false;
  }
  if (activeName.value == 'Three' && tabactive.value == '过程监控' ) {
    echartshow2.value = true;

  } else {
    echartshow2.value = false;
  }
}
//  求解
const runok = () => {
  if(echartshow.value){
    optmonitor1.value.echatinit();
  }else if(echartshow2.value){
    processMonitor1ref.value.echatinit();
    processMonitor2ref.value.echatinit();
  }
  const params = {
    transCode: 'MDO0039',
    pid: pid.value,

  }
  request(params)
    .then((res) => {
      logs.value = '';
      arrobj.value = [];
      tabarr.value = [];
      tableDatalieb.value = [];
      tableHeaders.value = [];
      ElMessage({
        message: "开始运行",
        type: 'success',
      })
    })
    .catch((err) => {
      ElMessage.error(err.returnMsg)
    })
}
const tableKey = ref(0);
const listtableInit = () => {
  const params = {
    transCode: 'MDO0021',
    pid: pid.value,
    type: 1,
  }
  request(params)
    .then((res) => {
      tableDatalieb.value = [];
      tableKey.value++;
      if (res.rows && res.rows.length > 0) {
        // 遍历所有返回的条目
        res.rows.forEach((row) => {
        const { vars, vals } = row;  // 获取每一行的 vars 和 vals

        // 调用 tablefun 函数更新表格
        tablefun1(vars, vals);
        });
      }
      
    })
    .catch((err) => {
      ElMessage.error(err.returnMsg)
    })
}  

/**
 * 解析 vals 数据，将 [ ] 解析成数组，其他数据保持原样
 */
 function parseVals(vals) {
  let result = [];
  let temp = "";
  let inArray = false;

  for (let char of vals) {
    if (char === "[") {
      inArray = true;
      temp += char;
    } else if (char === "]") {
      inArray = false;
      temp += char;
      result.push(JSON.parse(temp.trim())); // 确保去除首尾空格后转换
      temp = "";
    } else if (char === " " && !inArray) {
      if (temp.trim() !== "") {  // 避免空字符串被加入
        result.push(temp.trim());
      }
      temp = "";
    } else {
      temp += char;
    }
  }

  if (temp.trim() !== "") {
    result.push(temp.trim());
  }

  return result.filter(item => item !== ""); // 过滤掉空字符串
}

//曲线监控
const curveLine = () => {
  const params = {
    transCode: 'MDO0021',
    pid: pid.value,
    type: 1,
  }
  request(params)
    .then((res) => {
      curvedata.value = JSON.stringify(res.rows);
      // console.log(curvedata.value);
      optmonitor1.value.getshuju(curvedata.value);
      //  optmonitor1.value.getsockechart();
      // arearef.value.getsockechart(curvedata.value);
      // bargraphref.value.getsockechart(curvedata.value);
      // echartLineref.value.getsockechart(curvedata.value);
      // BarChartref.value.getsockechart(curvedata.value);
      // radarref.value.getsockechart(curvedata.value);
      // scatterref.value.getsockechart(curvedata.value);
      // pieref.value.getsockechart(curvedata.value);
      // paretoref.value.getsockechart(curvedata.value);
      // optmonitor1.value.getecharts();

    })
    .catch((err) => {
      ElMessage.error(err.returnMsg)
    })
}

const curveLine2 = () => {
  const params = {
    transCode: 'MDO0021',
    pid: pid.value,
    type: 2,
  }
  request(params)
    .then((res) => {
      if (res.rows && res.rows.length > 0) {
        curvedata.value = JSON.stringify(res.rows);
        // console.log(curvedata.value);
        processMonitor1ref.value.getshuju(curvedata.value);
      } 
    })
    .catch((err) => {
      ElMessage.error(err.returnMsg)
    })
}
const curveLine3 = () => {
  const params = {
    transCode: 'MDO0021',
    pid: pid.value,
    type: 3,
  }
  request(params)
    .then((res) => {
      // 检查返回的数据是否为空
      if (res.rows && res.rows.length > 0) {
        curvedata.value = JSON.stringify(res.rows);
        // console.log(curvedata.value);
        processMonitor2ref.value.getshuju(curvedata.value);
      } 
    })
    .catch((err) => {
      // 错误处理
      ElMessage.error(err.returnMsg);
    })
}

//进化优化器

//选择颜色改变线的颜色
const colorpicker = (e) => {
  console.log("color change:",vuefval.value);
  vuefval.value.changeAllEdgesColor(color1.value);

}
//选择颜色改变tuceng的颜色
const colorpickertier = (e) => {
  //vuefval.value.changeAllEdgesColor(color1.value);
  vuefval.value.bgcolorfunc(colortier.value);

}
const deviceSelectChange = () => {

}
const handleClose = (done) => {
  console.log(111)
  dialog.value.newdialog = false;
  done();
};
const targetclick = () => {
  console.log(tableData.value)
}
// 模块组合
const modelgroup=()=>{

}
//新增
const onAddItem = () => {
  let tablevalnum = Number(tableval.value) > 1 ? Number(tableval.value) : 1

  if (activeIndex2.value == 0) {
    for (let i = 0; i < tablevalnum; i++) {
      designtable.value.push({
        name: `x${i + 1}`,
        upper: null,
        lower: null,
        reference: null,
        remark: ''

      })
    }
  } else if (activeIndex2.value == 1) {
    for (let i = 0; i < tablevalnum; i++) {
      tableData.value.push({
        name: `g${i + 1}`,
        con: -1,
        reference: null,
        upper: 0,
        lower: 0,

      })
    }
  } else if (activeIndex2.value == 2) {
    for (let i = 0; i < tablevalnum; i++) {
      eloptimize.value.push({
        name: `c${i + 1}`,
        optdir: 1,
        weight: 0,
        scaling: 0,
        factor: 0,
        reference: null,
        remark: '',
      })

    }
  }

}
const xxclick = (index) => {
  activeIndex.value = index
  if (activeIndex.value == 0) {

  } else if (activeIndex.value == 1) {
    getissue();

  }
}
//底部优化问题
const issueclick = (index) => {
  activeIndex2.value = index;

  if (activeIndex2.value == 0) {
    getissue();
  } else if (activeIndex2.value == 1) {
    getyueshu();

  } else if (activeIndex2.value == 2) {
    getmub();
  }
}
//设计变量查询
const getissue = () => {

  //let  childernarr=[];
  const params = {
    transCode: 'MDO0022',
    pid: pid.value,
  }
  request(params)
    .then((res) => {
      if (res.rows.length === 0) {
      } else {
        let item1 = {
          id: "1-1-" + 1,
          label: '设计变量',
          img: q2,
          children: []
        }
        let arr = Sidebarref.value.datatree[0].children[0].children;
        let result = arr.find(element => element.id === item1.id);
        console.log(result);
        if (!result) {
          Sidebarref.value.datatree[0].children[0].children.push(item1);
        }
        let  childernarr=Sidebarref.value.datatree[0].children[0].children
     Sidebarref.value.datatree[0].children[0].children.forEach((item,index)=>{
      if(item.label=='设计变量'){
          Sidebarref.value.datatree[0].children[0].children[index].children=[];
      }
        })
        res.rows = res.rows.map((item, index) => {
          item.lower = item.lower ?? 'none'
          item.upper = item.upper ?? 'none'
          item.reference = item.reference ?? 'none'
          item.name = item.name ?? 'none'
          item.remark = item.remark ?? 'none'

          treeitem.value = {
            id: "1-1-1-" + index,
            label: item.name,
            img: f21,
          }
          // console.log(Sidebarref.value.datatree[0].children[0].children[0].children)
         childernarr.forEach((item,index)=>{
          if(item.label=='设计变量'){
            let addnode = Sidebarref.value.datatree[0].children[0].children[index].children.push(treeitem.value);
          }
         })
         return item;
        })
        designtable.value = res.rows;
    
      }
    })
    .catch((err) => {
      ElMessage.error(err.returnMsg)
    })
  // }
  //  })
}
//约束条件查询
const getyueshu = () => {
  const params = {
    transCode: 'MDO0023',
    pid: pid.value,
  }
  request(params)
    .then((res) => {
      if (res.rows.length === 0) {
      } else {
        let item2 = {
          id: "1-2-" + 2,
          label: '约束条件',
          img: f22,
          children: []
        }
        let arr = Sidebarref.value.datatree[0].children[0].children;
        let result = arr.find(element => element.id === item2.id);
        if (!result) {
          Sidebarref.value.datatree[0].children[0].children.push(item2);
        }
        Sidebarref.value.datatree[0].children[0].children.forEach((item, index) => {
          if (item.label == '约束条件') {
            Sidebarref.value.datatree[0].children[0].children[index].children = [];
          }
        });

        let childernarr = Sidebarref.value.datatree[0].children[0].children;
        res.rows = res.rows.map((item, index) => {
          // 确保转换为数字
          item.con = item.con ?? 'none';
          item.reference = item.reference ?? 'none';
          item.upper =item.upper ?? 'none';
          item.lower = item.lower ?? 'none'; 
          console.log('item:', item);

          treeitem2.value = {
            id: "1-2-2-" + index,
            label: item.name,
            img: f21,
          }

          childernarr.forEach((item, index) => {
            if (item.label == '约束条件') {
              let addnode = Sidebarref.value.datatree[0].children[0].children[index].children.push(treeitem2.value);
            }
          });

          return item;
        });
        
        tableData.value = res.rows; // 更新表格数据
      }
    })
    .catch((err) => {
      ElMessage.error(err.returnMsg);
    })
}

//目标函数查询
const getmub = () => {
  const params = {
    transCode: 'MDO0024',
    pid: pid.value,
  }
  request(params)
    .then((res) => {
      if (res.rows.length === 0) {
      } else {
        let item2 = {
          id: "1-3-" + 3,
          label: '目标函数',
          img: f41,
          children: []
        }
        let arr = Sidebarref.value.datatree[0].children[0].children;
        let result = arr.find(element => element.id === item2.id);
        if (!result) {
          Sidebarref.value.datatree[0].children[0].children.push(item2);
        }
        Sidebarref.value.datatree[0].children[0].children.forEach((item,index)=>{
          if(item.label=='目标函数'){
          Sidebarref.value.datatree[0].children[0].children[index].children=[];
          }
        })
 let   childernarr=Sidebarref.value.datatree[0].children[0].children
        res.rows = res.rows.map((item, index) => {
          item.optdir = item.optdir ?? 'none'; 
          item.weight = item.weight ?? 'none';
          item.scaling = item.scaling ?? 'none';
          item.factor = item.factor ?? 'none';
          item.reference = item.reference ?? 'none';
          item.remark = item.remark ?? 'none';
          item.name = item.name ?? 'none';

          treeitem3.value = {
            id: "1-3-3-" + index,
            label: item.name,
            img: f21,
          }
          childernarr.forEach((item,index)=>{
          if(item.label=='目标函数'){
            let addnode = Sidebarref.value.datatree[0].children[0].children[index].children.push(treeitem3.value);
     }
    })
       
          // console.log(11111)
          // let addnode = Sidebarref.value.datatree[0].children[0].children[3].children.push(treeitem3.value);
          return item;
        })
        eloptimize.value = res.rows;
      }
    })
    .catch((err) => {
      ElMessage.error(err.returnMsg)
    })
}

//对象数组转化字符串
const getarr = (name, arrays) => {
  console.log(arrays)
  for (let i = 0; i < arrays.length; i++) {
    let arr = [];
    let att = [];
    for (const key in arrays[i]) {
      if (arrays[i].hasOwnProperty(key)) {
        arr.push(arrays[i][key]);
      }

    }
    for (let j = 0; j < arr.length; j++) {
      if (typeof arr[j] === 'string' && arr[j] == "") {
        console.log(11111)
        arr[j] = " ";
      }
    }
    if (arrays[i].hasOwnProperty('pid') == true) {
      att = arr.slice(1, -1);
    } else {
      att = arr;
    }
    const valuesWithSemiColons = att.join(',');
    name += valuesWithSemiColons + ';';

  }
  console.log('conlist',name)
  return name;
}

const convertToStringArray = (result, Data) => {
  console.log('Data:', Data);
  result = Data.map(row => {
    
    const vid = row.vid || ' ';
    const name = row.name || ' ';
    const upper = row.upper ?? ' ';
    const lower = row.lower ?? ' ';
    const reference = row.reference ?? ' ';
    const remark = row.remark || ' ';

    // 将字段连接为一个以逗号分隔的字符串
    return `${vid},${name},${upper},${lower},${reference},${remark}`;
  }).join(';');  // 每行之间用分号分隔
  return result;
}

const convertToStringArray1 = (result, Data) => {
  console.log('Data:', Data);
  result = Data.map(row => {
    
    const conid = row.conid || ' ';
    const name = row.name || ' ';
    const upper = row.upper ?? ' ';
    const lower = row.lower ?? ' ';
    const reference = row.reference ?? ' ';

    // 将字段连接为一个以逗号分隔的字符串
    return `${conid},${name},${reference},${upper},${lower}`;
  }).join(';');  // 每行之间用分号分隔
  return result;
}

const convertToStringArray2 = (result, Data) => {
  console.log('Data:', Data);
  result = Data.map(row => {
    
    const fid = row.fid || ' ';
    const name = row.name || ' ';
    const optdir = row.optdir ?? ' ';
    const weight = row.weight ?? ' ';
    const reference = row.reference ?? ' ';
    const remark = row.remark || ' ';

    // 将字段连接为一个以逗号分隔的字符串
    return `${fid},${name},${optdir},${weight},${reference},${remark}`;
  }).join(';');  // 每行之间用分号分隔
  return result;
}

//保存优化问题
const onokItem = () => {
  console.log(activeIndex2.value);
  if (activeIndex2.value == 0) {
    svarlist.value = '';
    console.log("designtable:",designtable.value)
    svarlist.value = convertToStringArray(svarlist.value, designtable.value)
    devise();

  } else if (activeIndex2.value == 1) {
    conlist.value = '';
    console.log("tabledata:",tableData.value)
    conlist.value = convertToStringArray1(conlist.value, tableData.value)
    restrain();

  } else if (activeIndex2.value == 2) {
    funlist.value = '';
    console.log("eloptimize:",eloptimize.value)
    funlist.value = convertToStringArray2(funlist.value, eloptimize.value)
    funlistaa();

  }
}

//设计变量的添加
const devise = () => {
  const params = {
    transCode: 'MDO0054',
    pid: pid.value,
    vartr: svarlist.value
  }
  request(params)
    .then((res) => {
      ElMessage({
        message: res.returnMsg,
        type: 'success',
      })
      getissue();
    })
    .catch((err) => {
      ElMessage.error(err.returnMsg)
    })
}
//约束的添加restrain
const restrain = () => {
  const params = {
    transCode: 'MDO0055',
    pid: pid.value,
    vartr: conlist.value
  }
  request(params)
    .then((res) => {
      ElMessage({
        message: res.returnMsg,
        type: 'success',
      })
      getyueshu();
    })
    .catch((err) => {
      ElMessage.error(err.returnMsg)
    })
}
//优化目标接口
const funlistaa = () => {
  const params = {
    transCode: 'MDO0056',
    pid: pid.value,
    vartr: funlist.value
  }
  request(params)
    .then((res) => {
      ElMessage({
        message: res.returnMsg,
        type: 'success',
      })
      getmub();
    })
    .catch((err) => {
      ElMessage.error(err.returnMsg)
    })
}
//初始化
const initialize = () => {
  const params = {
    transCode: 'MDO0011',
    pid: pid.value,
  }
  request(params)
    .then((res) => {
      // ElMessage({
      //         message: res.returnMsg,
      //         type: 'success',
      //     })
      importget();
    })
    .catch((err) => {
      ElMessage.error(err.returnMsg)
    })
}
// new输入参数
const changecheck = (val,row) => {
  console.log(val);
  console.log(row);

}
//输入参数查询
const importget = () => {
  const params = {
    transCode: 'MDO0012',
    pid: pid.value,
  }
  request(params)
    .then((res) => {
      srtable.value = res.rows;
    })
    .catch((err) => {
      ElMessage.error(err.returnMsg)
    })
}
//输入保存
const susave = (index, row) => {
  console.log(row);
  const params = {
    transCode: 'MDO0013',
    pid: pid.value,
    inid: row.inid,
    vid: row.vid,
    enable: row.enable,
    name: row.name,
    v1: row.v1,
    v2: row.v2
  }
  request(params)
    .then((res) => {
      ElMessage({
        message: '保存成功',
        type: 'success',
      })
    })
    .catch((err) => {
      ElMessage.error(err.returnMsg)
    })
}
// 输入的删除

const sudelete = (index, row) => {
  if (row.hasOwnProperty('outid') == false) {
    srtable.value.splice(index, 1)
  } else {

    const params = {
      transCode: 'MDO0014',
      inid: row.inid,
    }
    request(params)
      .then((res) => {
        importget();
        ElMessage({
          message: " 删除成功",
          type: 'success',
        })
      })
      .catch((err) => {
        ElMessage.error(err.returnMsg)
      })
  }
}
//输入输出的新建
const newxfiol = () => {
  if (activeIndex3.value == 0) {
    srtable.value.push({
      name: "",
      v1: '0',
      v2: '0',
      enable: '0'
    })
  } else if (activeIndex3.value == 2) {
    sctable.value.push({
      name: "",
      v1: '',
      v2: '',
      enable: '0'
    })
  }


}


// 点击掉查询接口
const dianjia = (index) => {
  activeIndex3.value = index;
  if (activeIndex3.value == 0) {
    importget()
  } else if (activeIndex3.value == 2) {
    console.log(11111)
    exportget();
  }
}

//输出参数查询
const exportget = () => {
  const params = {
    transCode: 'MDO0015',
    pid: pid.value,
  }
  request(params)
    .then((res) => {
      sctable.value = res.rows;
    })
    .catch((err) => {
      ElMessage.error(err.returnMsg)
    })
}
// 输出保存
const scsave = (index, row) => {
  if (row.hasOwnProperty('fid') == true) {
    fid.value = row.fid;
  }
  if (row.hasOwnProperty('conid') == true) {
    conid.value = row.conid;
  }
  const params = {
    transCode: 'MDO0016',
    pid: pid.value,
    outid: row.outid,
    fid: fid.value,
    conid: conid.value,
    enable: row.enable,
    name: row.name,
    v1: row.v1,
    v2: row.v2
  }
  request(params)
    .then((res) => {
      ElMessage({
        message: '保存成功',
        type: 'success',
      })
      exportget();
    })
    .catch((err) => {
      ElMessage.error(err.returnMsg)
    })
}
//输出删除scdelete
const scdelete = (index, row) => {
  console.log(row);
  if (row.hasOwnProperty('outid') == false) {
    sctable.value.splice(index, 1)
  } else {
    const params = {
      transCode: 'MDO0017',
      outid: row.outid,
    }
    request(params)
      .then((res) => {
        exportget();
        ElMessage({
          message: " 删除成功",
          type: 'success',
        })
      })
      .catch((err) => {
        ElMessage.error(err.returnMsg)
      })
  }
}
// 表格
function tablefun(vars, vals) {
    console.log('表格更新');
    
    // 解析列名，vars 以空格分隔
    let headers = vars.split(" ");  

    // 更新表头
    tableHeaders.value = headers.map(item => ({ label: item, prop: item }));

    // 构造表格数据对象
    let rowData = {};
    headers.forEach((key, index) => {
      rowData[key] = vals[index] !== undefined ? vals[index] : ""; // 处理数据长度不匹配情况
    });

    // 更新表格数据
    tableDatalieb.value.push(rowData);
  }

const tablefun1 = (vars, vals) => {
  console.log('表格更新');
  
  // 解析列名，vars 以空格分隔
  let headers = vars.split(" ");

  // 更新表头
  tableHeaders.value = headers.map(item => ({ label: item, prop: item }));

  // 解析 vals 为数组（假设 vals 是一个字符串）
  let values = vals.split(" ");

  // 构造表格数据对象
  let rowData = {};
  headers.forEach((key, index) => {
    rowData[key] = values[index] !== undefined ? values[index] : ""; // 处理数据长度不匹配情况
  });

  // 更新表格数据
  tableDatalieb.value.push(rowData);
};

//获取日志
const logsget = () => {

  const params = {
    transCode: 'MDO0025',
    pid: pid.value,
  }
  request(params)
    .then((res) => {
      // 去除空行
      console.log('日志接口赋值')
      logs.value = res.logs.split('\n').filter(line => line.trim() !== '').join('\n');
      const results = extractBracesContent(logs.value);
      for (let i = 0; i < results.length; i++) {
        arrobj.value.push(results[i]);
        let vals = (results[i].vals).split(" ");
        tablefun(vals);
        let echarr = [];
        echarr.push(results[i])
        optmonitor1.value.getsockechart(echarr);
        processMonitor1ref.value.getsockechart(echarr);
        processMonitor2ref.value.getsockechart(echarr);
        // arearef.value.getsockechart(echarr);
        // bargraphref.value.getsockechart(echarr);
        // echartLineref.value.getsockechart(echarr);
        // BarChartref.value.getsockechart(echarr);
        // radarref.value.getsockechart(echarr);
        // scatterref.value.getsockechart(echarr);
      }
    })
    .catch((err) => {
      ElMessage.error(err.returnMsg)
    })
}
// 字符串截取
function extractBracesContent(str) {
  const objectRegex = /\{[^}]+\}/g; // 匹配大括号对象
  const matches = str.match(objectRegex);
  if (!matches) return [];
  return matches.map(match => {
    try {
      return JSON.parse(match);
    } catch (e) {
      console.error('Failed to parse object:', match);
      return null;
    }
  }).filter(Boolean); // 过滤掉解析失败的对象
}
function convertToPercentage(number) {
  return (number * 100);
}

//websockct的连接
function initWebSocket() {

  //初始化weosocket
  // const wsuri = "ws://192.168.0.43:8087//websocket?projectId="+this.pid; ws://192.168.0.131/diswebsocket?projectId=5
 // const wsurl = "ws://192.168.108:8188//websocket?projectId=" + pid.value;
 const wsurl = import.meta.env.VITE_WEBSOCKET_URL + pid.value;
  // const wsurl =
  //   "ws://" +
  //   process.env.VUE_APP_BASE_websokt +
  //   "/diswebsocket?projectId=" +'5'
  // aid.value;
  websock = new WebSocket(wsurl);
  websock.onopen = websocketonopen;
  websock.onmessage = websocketonmessage;
  websock.onerror = websocketonerror;
  websock.onclose = websocketclose;
}

// Websoket连接成功事件
const websocketonopen = (res) => {
  console.log("WebSocket连接成功", res);

  console.log()
  start();
};
// Websoket接收消息事件
const websocketonmessage = (res) => {
  // console.log('websocket接受消息:',res.data)
  arrobj.value = [];
  if (res.data.indexOf('{') !== -1) {
    progressshow.value = true;
    console.log('websocket接受消息:',res.data)
    // 解析 WebSocket 接收到的消息数据
    let parsedData = JSON.parse(res.data);
    let step = Number(parsedData.step);
    if(parsedData.type === 1){
      percentage.value = Math.round((step / 30) * 100);
    }

    console.log("进度:", percentage.value);

    echartdata.value = res.data;
    arrobj.value.push(parsedData);
    console.log('tabactive:',tabactive.value)
    if(jiankong.value && parsedData.type === 1){
      console.log('列表监控')
      tablefun1(parsedData.vars, parsedData.vals);  // 传递 vars 和 vals 更新表格
    }else if(echartshow.value&&parsedData.type === 1){
      optmonitor1.value.getsockechart(arrobj.value);
    }else if(echartshow2.value&&parsedData.type === 2){
      processMonitor1ref.value.getsockechart(arrobj.value);
    }else if(echartshow2.value&&parsedData.type === 3){
      processMonitor2ref.value.getsockechart(arrobj.value);
    }
    
    // optmonitor1.value.getsockechart(arrobj.value);
    // processMonitor1ref.getsockechart(arrobj.value);
    // processMonitor2ref.getsockechart(arrobj.value);
    // arearef.value.getsockechart(arrobj.value);
    // bargraphref.value.getsockechart(arrobj.value);
    // echartLineref.value.getsockechart(arrobj.value);
    // BarChartref.value.getsockechart(arrobj.value);
    // radarref.value.getsockechart(arrobj.value);
    // scatterref.value.getsockechart(arrobj.value);
    // pieref.value.getsockechart(arrobj.value);
    // paretoref.value.getsockechart(arrobj.value);
  } else {
    if (res.data.indexOf('——成功') !== -1) {
      const timer = setTimeout(function () {
        progressshow.value = false;
        console.log('关闭定时器')
      }, 10000)
      //   console.log(22222)
      //   clearTimeout(timer);

    }
    if (res.data.indexOf('msg=heartChec') == -1) {
      // 去除空行
      const cleanedLog = res.data.split('\n').filter(line => line.trim() !== '').join('\n');
      logs.value = logs.value + '\n' + cleanedLog;
      let textarea = document.getElementById("textarea_id");
      textarea.scrollTop = textarea.scrollHeight;

      
    }


  }

  reset();
};

// Websoket连接错误事件
const websocketonerror = (res) => {
  console.log("连接错误", res);
  websock.close();
  reconnect();
};
// Websoket断开事件
const websocketclose = (res) => {
  console.log("断开连接", res);
};
// 创建 websocket 的实例

// 心跳包
const reconnect = () => {
  if (times.value.lockReconnect) return;
  times.value.lockReconnect = true;
  //没连接上会一直重连，设置延迟避免请求过多
  times.value.timeoutnum && clearTimeout(times.value.timeoutnum);
  times.value.timeoutnum = setTimeout(function () {
    //新连接
    initWebSocket();
    times.value.lockReconnect = false;
  }, 10000);
}
const reset = () => {
  //重置心跳
  clearTimeout(times.value.timeoutObj);
  clearTimeout(times.value.serverTimeoutObj);
  start();
}
const start = () => {
  //开启心跳
  times.value.timeoutObj && clearTimeout(times.value.timeoutObj);
  times.value.serverTimeoutObj && clearTimeout(times.value.serverTimeoutObj);
  times.value.timeoutObj = setTimeout(function () {
    //这里发送一个心跳，后端收到后，返回一个心跳消息
    if (websock.readyState == 1) {
      //如果连接正常
      websock.send("heartCheck");
    } else {
      //否则重连
      reconnect();
    }
    times.value.serverTimeoutObj = setTimeout(function () {
      // 超时关闭
      websock.close(); //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
    }, times.value.timeout);
  }, times.value.timeout);
}
// 日志框
// 日志的文本框
const footerShows = (evt) => {
  if (evt == "claer") {
    logs.value = "";
  } else {
    footerShow.value = !footerShow.value;
  }
}

//   watch(() =>echartdata.value, (newValue, oldValue) => {
//   // 这里处理 echartData 变化的逻辑
//   console.log('echartData changed:', newValue);
// //  console.log(optmonitor1.value);
// });
// 选项卡
const selectTab=(index)=>{
  currentTab.value = index;
}


const adfhandleClick=(tab,event)=>{
  console.log('表单切换',tab.props.label);
  activeadf.value=tab.props.label;

  if(tab.props.name === '进化优化器'){
    nextTick(() => {
      // 确保 ref 已经初始化
      if (Joptimizeref.value) {
        // 调用 Joptimize 的 getoptimize 方法
        Joptimizeref.value.getoptimize(pid.value);
      }
    });
  }else if(tab.props.name === '代理优化器'){
    nextTick(() => {
      // 确保 ref 已经初始化
      if (Doptimizeref.value) {
        Doptimizeref.value.getDoptimize(pid.value);
      }
    });
  }else if(tab.props.name === '梯度优化器'){
    nextTick(() => {
      // 确保 ref 已经初始化
      if (Toptimizeref.value) {
        Toptimizeref.value.getToptimize(pid.value);
      }
    });
  }
}

const getaddsave = () => {
  if (Joptimizeref.value && typeof Joptimizeref.value.getaddsave === 'function') {
    Joptimizeref.value.getaddsave();
  }
}

const getDaddsave = () => {
  if (Doptimizeref.value && typeof Doptimizeref.value.getaddDsave === 'function') {
    Doptimizeref.value.getaddDsave();
  }
}

const getTaddsave = () => {
  if (Toptimizeref.value && typeof Toptimizeref.value.getaddTsave === 'function') {
    Toptimizeref.value.getaddTsave();
  }
}


const getSave = (ref) => {
  if (ref == '进化优化器'){
    getaddsave();
  }else if(ref == '代理优化器'){
    getDaddsave();
  }else if(ref == '梯度优化器'){
    getTaddsave();
  }
}

// 参数化
const adfhandleClick2=(tab,event)=>{
  console.log('表单切换',tab.props.label);
  activeadf.value=tab.props.label;

  if(tab.props.name === 'CST'){
    nextTick(() => {
      // 确保 ref 已经初始化
      if (Cstref.value) {
        Cstref.value.getcst(pid.value);
      }
    });
  }else if(tab.props.name === 'FFD'){
    nextTick(() => {
      // 确保 ref 已经初始化
      if (Ffdref.value) {
        Ffdref.value.getffds(pid.value);
      }
    });
  }
}


// 单独cst保存
const cstok=()=>{
 // cstnum.value='';
 if(Cstref.value){
  Cstref.value.getcstsave();
  }
  dialog.value.CSTt = false;

}
// 单独ffd保存
const ffdok=()=>{

   if(Ffdref.value){
    Ffdref.value.getffdsave();
    }
    dialog.value.ffdt = false;
  
}
// cstffd保存
const getCstFfdsave = (activeadf) => {
  if (activeadf == 'CST') {
    cstok();
  } else if (activeadf == 'FFD') {
    ffdok();
  }
}

const adfhandleClick3=(tab,event)=>{
  console.log('表单切换',tab.props.label);
  activeadf.value=tab.props.label;

  if(tab.props.name === 'Xfoil'){
    nextTick(() => {
      // 确保 ref 已经初始化
      if (Xfoilref.value) {
        console.log('pid-0:',pid.value)
        Xfoilref.value.getxfoil(pid.value);
      }
    });
  }else if(tab.props.name === 'ADflow'){
    nextTick(() => {
      // 确保 ref 已经初始化
      if (ADflowref.value) {
        ADflowref.value.getadflow(pid.value);
      }
    });
  }
}

// xfoil保存
const xfoilok=()=>{
  if(Xfoilref.value){
    Xfoilref.value.getxfoilsave();
  }
}

// adflow保存
const adflowok=()=>{
  if(ADflowref.value){
    ADflowref.value.getadflowsave();
  }
}

// xfoiladflow保存
const getXfoilAdflowsave = (activeadf) => {
  if (activeadf == 'Xfoil') {
    xfoilok();
  } else if (activeadf == 'ADflow') {
    adflowok();
  }
}


// 云图打开二级弹窗
let seconddialogshow = ref(false)
let activesd = ref ({
  fileselect:false,
  domain:false,
  cloud:false,
  colorchart:false,
  isoline:false
})
let cloudsedtitle = ref('')
const openSeconddialog = (name) => {
  // 设置 activesd 中的值来控制不同内容的显示
  activesd.value.fileselect = false;
  activesd.value.domain = false;
  activesd.value.cloud = false;
  activesd.value.colorchart = false;
  activesd.value.isoline = false;

  switch (name) {
    case '文件选择':
      activesd.value.fileselect = true;
      cloudsedtitle.value = "文件选择";
      break;
    case '域':
      activesd.value.domain = true;
      cloudsedtitle.value = "域";
      break;
    case '云图':
      activesd.value.cloud = true;
      cloudsedtitle.value = "云图";
      break;
    case '色卡':
      activesd.value.colorchart = true;
      cloudsedtitle.value = "色卡";
      break;
    case '等值线':
      activesd.value.isoline = true;
      cloudsedtitle.value = "等值线";
      break;
    default:
      break;
  }
  seconddialogshow.value = true
};


const lbjkheaderCellClassName = ({ columnIndex }) => {
  if( columnIndex === 0 ) return '';
  let dynamicColumnIndex = columnIndex - 1;
  let totalColumns = tableHeaders.value.length;
  let partsize = Math.ceil( totalColumns/3 );

  if( dynamicColumnIndex < partsize ) {
    return 'header-first';
  }else if( dynamicColumnIndex < partsize*2 ) {
    return 'header-second';
  }else {
    return 'header-third';
  }
}


</script>
<style lang="scss" scoped>
.conter_flex {
  display: flex;

  .ech {
    flex: 1;
    
  }
}

//有子节点 且未展开
.left_main_content :deep(.el-icon svg) {
  display: block;
}

.footerTitle {
  display: flex;
  justify-content: space-between;
  padding: 5px 0px;
  font-size: 20px;
  height: 32px !important;
  z-index: 99;;
  // border-radius: 5px 5px 0px 0px;
  // overflow: hidden;
  border-top: 1px solid #B3B3B3;
  border-bottom: 1px solid #B3B3B3;
}
.footerTitle .el-image{
  width:24px;
}
.footerTitle div {
  display: flex;
  // justify-content:center ;
  align-items: center;
  font-size: 14px;
}

.kongzhit {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.footerTitle p {
  margin: 0;
}

.footerTitle .span {
  width: 150px;
  height: 32px;
  line-height: 40px;
  padding: 0 20px;
  box-sizing: border-box;
  cursor: default;
  position: relative;
  font-size: 14px;
  color: #333333;
  font-family: 'Source Sans-Regular';
}
.footerTitle .span span{
  padding-left:20px;
}
.footerText .el-textarea__inner {
  width: 100%;
  height: 178px !important;
  border: 0;
  font-size: 12px;
  color: #333;
  padding: 2px;
  box-shadow:none;
}

.custom-button{
  color: #333333;
  background-color: #DCEAFF;
  border: 1px solid #2267B1 ;
}

//没有子节点
</style>
<style>
.wentsd {
  padding: 0 8px;
}

/* .el-treeicon .el-tree-node__expand-icon.is-leaf{
   display: none !important;
  } */
.custom-text {
  font-family: 'Source Sans-Regular';
  font-size: 16px;
  color: rgba(51, 51, 51, 1);
  line-height: 24px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  padding-left: 8px;
}

.el-tree .el-tree-node__children .custom-text {
  font-family: 'Source Sans-Regular';
  font-size: 14px;
  /* 这里设置为20px，你可以根据需求调整大小 */
color: rgba(51, 51, 51, 0.8);

}

/* .el-tree  .el-tree-node.is-current>.el-tree-node__content img{
 display: none; 
} */
.custom-tree {
  overflow: auto;
}

.custom-tree1>.el-tree-node>.el-tree-node__content>div img {
  display: none;
  /* 隐藏一级节点复选框 */
}

.footerTitle {
  background: #eee;
  border-radius: 0px 0px 0px 0px;
}

.footer-tab .el-tabs__item {
  color: #333333;
}

.footerTitle .active {
  background-color: #fff;
   border-left:1px solid #B3B3B3;
   border-right:1px solid #B3B3B3;
   /* border-bottom:4px solid #fff; */

}
.footerTitle .active::before{
  content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: #2267B1;
    border-radius: 0px 0px 0px 0px;
    top: 0px;
    left:0px;
    position: absolute;
}
.footerTitle .active::after{
   content: "";
    display: block;
    width: 100%;
    height:4px;
    background: #fff;
    border-radius: 0px 0px 0px 0px;
    bottom: 0px;
    left:0px;
    position: absolute;
}
.youhualog {
  width: 100%;
  height: 195px;
  overflow-y: auto;
  background: #fff;
}

.youhualog .active2 {
color: #2267B1;
}
.youhualog ul {
  /* width:482px; */
  display: flex;
  align-items: center;
}
.youhualog ul li {
  font-family: 'Source Sans-Regular';
  /* flex: 1; */
  /* border-left: 1px solid #B3B3B3; */
  font-size: 14px;
  height: 32px;
  /* line-height: 40px; */
  width: 140px;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  padding:0 10px;
}

.youhualog ul li span {
  margin-left: 20px;
}

.footer-content {
  /* // padding: 15px 24px; */
  padding: 5px;
  border: 1px solid #B3B3B3;
  /* margin-right: 119px; */
}

.footer-add {
  width: 600px;
}

.flexend {
  display: flex;
  justify-content: flex-end;
}

.dibu {
  margin-top: 5px;
  display: flex;
  justify-content: flex-end;
  height: 35px;
  overflow: hidden;
}

.dibu .el-input__wrapper {
  width: 226px;
}

.dibu .el-form-item_label {
  color: #333333;
  font-size: 14px;
  font-family: 'Source Sans Pro-Regular';
}

.dibu .btncolor {
  margin-top: 2px;
  height: 27px;
  width: 70px;
  background: #FFFFFF;
  box-shadow: 0px 2px 2px 0px #B3B3B3;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #B3B3B3;
}

.classtable .el-table td.el-table__cell div .el-input__wrapper {
  box-shadow: none !important;
  padding: 0;
}

.classtable .el-table .el-table__cell {
  padding: 0;
}

.gooterpading {
  /* border: 1px solid #2267B1; */

}

.classtable .el-table th .cell {
 /* background: #fff; */
 /* line-height: 31px; */
}

.classtable .el-table td.el-table__cell, .classtable .el-table th.el-table__cell{
  color: #333333;
  font-size: 16px;
  font-family: 'Source Sans Pro-Regular';
}

.footer-content .classtable .el-table td.el-table__cell,.footer-content .classtable .el-table th.el-table__cell {
  color: #333333;
  font-size: 14px;
  font-family: 'Source Sans Pro-Regular';
}

.classtable .el-table td.el-table__cell div {
  height: 31px;
  overflow: hidden;
  /* display: flex; */
  align-items: center; /* 垂直居中 */
}

.classtable .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf,
.eldesign {
  /* border: 1px solid #000000; */
}



/* .el-color-picker__trigger {
  //display: none;
} */

/* 使颜色选择器的触发器可点击，但不显示 */
.el-color-picker__trigger.is-show-panel {
  display: block;
}

.conter_mian {
  padding: 1px;
}

.summary-dlg2 .el-dialog__body {
  padding: 0;
}

.summary-dlg .el-dialog__wrapper {
  pointer-events: none;
}

.summary-dlg .el-dialog {
  pointer-events: auto;
}
.summary-dlgPdf .el-dialog__body{
  padding: 5px;
}

.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
  background-color: #fff;
}

.youhualog1 {
  position: relative;
}

.chushij {
  position: absolute;
  right: 13px;
  top: 5px;
}

.jindutiao {

  padding: 0 0 2px 0px;
  background: #9FCDFF;
}

.jindutiao .demo-progress {
  width: 100%;
}

.jindutiao .percentage-value {
  font-size: 13px;
  color: #333333;
  font-family: 'Source Sans Pro-Regular';
}
.cstleft{
  width:50%;
  flex: 1;
   
}
.XFpdding{
  /* height: 425px; */
}

.dialog_class {
  color: #333333;
  font-size: 16px;
  font-family: 'Source Sans Pro-Regular';
}

</style>