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" v-for="(item, index) in Rolelist" :key="'Role-' + index"
                      :class="{ activeOrange: active == 'Role-' + index }"
                      @click="clickgeometry($event, index, 'Role-' + 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 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="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" v-for="(item, index) in question" :key="'Config-' + index"
                    :class="{ activeOrange: active == 'Config-' + index }"
                    @click="clickgeometry($event, index, 'Config-' + index, item.titlie)">
                    <div class="item2 ">
                      <el-image :src="getImgPath(item.url)" fit="cover" />
                      <span>{{ item.titlie }}</span>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="数据库管理" name="Seven">
                <div class="imgzong">
                  <div class="listitem lbg_color3 bkcolor3" v-for="(item, index) in Sevenlist" :key="'Seven' + index"
                    :class="{ activeOrange: active == 'Seven' + index }"
                    @click="clickgeometry($event, index, 'Seven' + index, item.titlie)">
                    <div class="item2 ">
                      <el-image :src="getImgPath(item.url)" fit="cover" />
                      <span>{{ item.titlie }}</span>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="帮助" name="eight">
                <div class="imgzong">
                  <div class="listitem lbg_color3 bkcolor3" v-for="(item, index) in eightlist" :key="'eight' + index"
                    :class="{ activeOrange: active == 'eight' + index }"
                    @click="clickgeometry($event, index, 'eight' + index, item.titlie)">
                    <div class="item2 ">
                      <el-image :src="getImgPath(item.url)" fit="cover" />
                      <span>{{ item.titlie }}</span>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <!-- 新建任务 -->
          <el-dialog v-model="dialog.newdialog" v-if="tabactive == '新建任务'" align-center :modal="false"
            :close-on-click-modal="true" :append-to-body="true" draggable :fullscreen="false"
            :modal-append-to-body="false" modal-class="summary-dlg" :before-close="handleClose" width="480"
            class="dialog_class bgcolor tianjia">

            <template #header="{ titleId, titleClass }">
              <div class="my-header ">
                <el-image :src="getImgPath('s0.png')" fit="contain"></el-image>
                <h4 :id="titleId" :class="titleClass">新建任务</h4>
              </div>
            </template>
            <div>
              <el-form>
                <el-form-item label="任务编号：" :label-width="formLabelWidth6">
                  <el-input v-model="name" maxlength="18"
                    oninput="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" class="w-50 m-2"
                    placeholder="请输入" />
                </el-form-item>
                <el-form-item label="任务名称：" :label-width="formLabelWidth6">
                  <el-input v-model="name" maxlength="18"
                    oninput="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" class="w-50 m-2"
                    placeholder="请输入" />
                </el-form-item>
                <el-form-item label="任务类型：" :label-width="formLabelWidth6">
                  <el-input v-model="name" maxlength="18"
                    oninput="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" class="w-50 m-2"
                    placeholder="请输入" />
                </el-form-item>
                <el-form-item label="备注：" :label-width="formLabelWidth6">
                  <el-input v-model="name" maxlength="18" type="textarea"
                    oninput="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" class="w-50 m-2"
                    placeholder="请输入" />
                </el-form-item>
              </el-form>
            </div>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialog.newdialog = false">取消</el-button>
                <el-button type="primary" @click="dialog.newdialog = false">
                  确定
                </el-button>
              </div>
            </template>
          </el-dialog>
          <!-- 问题设定 -->
          <el-dialog v-model="dialog.setdialog" v-if="tabactive == '问题设定'" align-center :modal="false"
            :close-on-click-modal="true" :append-to-body="true" draggable :fullscreen="false"
            :modal-append-to-body="false" modal-class="summary-dlg" :before-close="handleClose" width="480"
            class="dialog_class bgcolor tianjia">

            <template #header="{ titleId, titleClass }">
              <div class="my-header ">
                <el-image :src="getImgPath('q0.png')" fit="contain"></el-image>
                <h4 :id="titleId" :class="titleClass">问题设定</h4>
              </div>
            </template>
            <div class="numberinput">
              <el-form>
                <el-form-item label="目标函数个数：" :label-width="formLabelWidth1">
                  <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
                </el-form-item>
                <el-form-item label="建立代理模型约束个数：" :label-width="formLabelWidth1">
                  <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
                </el-form-item>
                <el-form-item label="不建立代理模型约束个数：" :label-width="formLabelWidth1">
                  <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
                </el-form-item>
              </el-form>
            </div>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialog.setdialog = false">取消</el-button>
                <el-button type="primary" @click="dialog.setdialog = false">
                  确定
                </el-button>
              </div>
            </template>
          </el-dialog>
          <!-- 外形参数化 -->
          <el-dialog v-model="dialog.parameter" v-if="tabactive == 'Task-11'" align-center :modal="false"
            :close-on-click-modal="true" :append-to-body="true" draggable :fullscreen="false"
            :modal-append-to-body="false" modal-class="summary-dlg" :before-close="handleClose" width="480"
            class="dialog_class bgcolor tianjia sel">

            <template #header="{ titleId, titleClass }">
              <div class="my-header ">
                <el-image :src="getImgPath('t0.png')" fit="contain"></el-image>
                <h4 :id="titleId" :class="titleClass">外形参数化</h4>
              </div>
            </template>
            <div class="numberinput">
              <el-form>
                <el-form-item label="参数化方法：" :label-width="formLabelWidth6">
                  <el-select v-model="canshu" :suffix-icon="CaretBottom" placeholder="请选择">
                    <el-option v-for="item in canshulist" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialog.parameter = false">取消</el-button>
                <el-button type="primary" @click="dialog.parameter = false">
                  确定
                </el-button>
              </div>
            </template>
          </el-dialog>
          <!-- 代理模型 -->
          <el-dialog v-model="dialog.agency" v-if="tabactive == '代理模型'" align-center :modal="false"
            :close-on-click-modal="true" :append-to-body="true" draggable :fullscreen="false"
            :modal-append-to-body="false" modal-class="summary-dlg" :before-close="handleClose" width="480"
            class="dialog_class bgcolor tianjia sel">

            <template #header="{ titleId, titleClass }">
              <div class="my-header ">
                <el-image :src="getImgPath('t2.png')" fit="contain"></el-image>
                <h4 :id="titleId" :class="titleClass">代理模型</h4>
              </div>
            </template>
            <div class="numberinput">
              <el-form>
                <el-form-item label="代理模型类型：" :label-width="formLabelWidth2">
                  <el-select v-model="agval" :suffix-icon="CaretBottom" placeholder="请选择">
                    <el-option v-for="item in agelist" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="设计空间类型：" :label-width="formLabelWidth2">
                  <el-select v-model="agval1" :suffix-icon="CaretBottom" placeholder="请选择">
                    <el-option v-for="item in agelist1" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="试验设计方法：" :label-width="formLabelWidth2">
                  <el-select v-model="agval2" :suffix-icon="CaretBottom" placeholder="请选择">
                    <el-option v-for="item in agelist2" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="初始样本点数：" :label-width="formLabelWidth2">
                  <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
                </el-form-item>
              </el-form>
            </div>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialog.agency = false">取消</el-button>
                <el-button type="primary" @click="dialog.agency = false">
                  确定
                </el-button>
              </div>
            </template>
          </el-dialog>
          <!-- 终止条件 -->
          <el-dialog v-model="dialog.enddialog" v-if="tabactive == '终止条件 '" align-center :modal="false"
            :close-on-click-modal="true" :append-to-body="true" draggable :fullscreen="false"
            :modal-append-to-body="false" modal-class="summary-dlg" :before-close="handleClose" width="480"
            class="dialog_class bgcolor tianjia sel">

            <template #header="{ titleId, titleClass }">
              <div class="my-header ">
                <el-image :src="getImgPath('t4.png')" fit="contain"></el-image>
                <h4 :id="titleId" :class="titleClass">终止条件</h4>
              </div>
            </template>
            <div class="numberinput">
              <el-form>
                <el-form-item label="EI最小值：" :label-width="formLabelWidth1">
                  <el-input v-model="name" maxlength="18"
                    oninput="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" class="w-50 m-2"
                    placeholder="请输入" />
                </el-form-item>
                <el-form-item label="目标函数收敛误差：" :label-width="formLabelWidth1">
                  <el-input v-model="name" maxlength="18"
                    oninput="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" class="w-50 m-2"
                    placeholder="请输入" />
                </el-form-item>
                <el-form-item label="优化解收敛精度：" :label-width="formLabelWidth1">
                  <el-input v-model="name" maxlength="18"
                    oninput="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" class="w-50 m-2"
                    placeholder="请输入" />
                </el-form-item>
                <el-form-item label="真实函数约束精度：" :label-width="formLabelWidth1">
                  <el-input v-model="name" maxlength="18"
                    oninput="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" class="w-50 m-2"
                    placeholder="请输入" />
                </el-form-item>
                <el-form-item label="代理模型约束精度：" :label-width="formLabelWidth1">
                  <el-input v-model="name" maxlength="18"
                    oninput="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" class="w-50 m-2"
                    placeholder="请输入" />
                </el-form-item>
              </el-form>
            </div>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialog.enddialog = false">取消</el-button>
                <el-button type="primary" @click="dialog.enddialog = false">
                  确定
                </el-button>
              </div>
            </template>
          </el-dialog>
          <!-- 优化算法 -->
          <el-dialog v-model="dialog.sufun" v-if="tabactive == '优化算法'" align-center :modal="false"
            :close-on-click-modal="true" :append-to-body="true" draggable :fullscreen="false"
            :modal-append-to-body="false" modal-class="summary-dlg" :before-close="handleClose" width="480"
            class="dialog_class sel bgcolor tianjia sel">

            <template #header="{ titleId, titleClass }">
              <div class="my-header ">
                <el-image :src="getImgPath('Framem.png')" fit="contain"></el-image>
                <h4 :id="titleId" :class="titleClass">优化算法</h4>
              </div>
            </template>
            <div class="numberinput">
              <!-- class="border2" -->
              <div>
                <!-- <div class="title2">GA遗传算法</div> -->
                <el-form-item label="优化算法" :label-width="formLabelWidth1">
                  <el-select v-model="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="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="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>
          <!-- 进步优化器 -->
          <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">

            <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>
                <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" :step="100" :min="0" :max="1000" controls-position="right" />
                </el-form-item>
                <el-form-item label="迭代次数:" :label-width="formLabelWidth1">
                  <el-input-number v-model="youhua.epoch" :step="100" :min="0" :max="1000" controls-position="right" />
                </el-form-item>
                <el-form-item label="交叉概率：" :label-width="formLabelWidth1">
                  <el-input-number v-model="youhua.probcrossover" :step="0.1" :min="0" :max="1000"
                    controls-position="right" />
                </el-form-item>
                <el-form-item label="变异概率：" :label-width="formLabelWidth1">
                  <el-input-number v-model="youhua.probmut" :step="0.1" :min="0" :max="1000" 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="0" :max="100" 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>
              </el-form>
            </div>
            <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>
          <!-- 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="500"
            class="dialog_class bgcolor tianjia sel">

            <template #header="{ titleId, titleClass }">
              <div class="my-header ">
                <el-image :src="getImgPath('xuek9.png')" fit="contain"></el-image>
                <h4 :id="titleId" :class="titleClass">Xfiol</h4>
              </div>
            </template>
            <div class="youhualog youhualog1" style="height: 480px;">
              <ul>
                <li v-for="(tab, index) in xfoil" :key="index" :class="{ 'active2': activeIndex3 === index }"
                  @click="dianjia(index)">{{ tab }}</li>
              </ul>
              <div class="chushij">
                <el-button type="info" size="small" @click="initialize()">初始化</el-button>
              </div> -->
              <!-- 输入 -->
              <!-- <div class="eldesign classtable" style="margin-top: 10px;" v-if="activeIndex3 == 0">
                <el-table :data="srtable" border style="width: 100%" height="400">
                  <el-table-column prop="enable" label="启用" width="50">
                    <template v-slot="scope">
                      <el-checkbox :false-label="'0'" :true-label="'1'" :label="false" v-model="scope.row.enable" />
                    </template>
                  </el-table-column>
                  <el-table-column prop="name" label="参数">
                    <template #default="{ row }">
                      <el-input v-model="row.name" @change="handleEdit(row)" />
                    </template>
                  </el-table-column>
                  <el-table-column prop="v1" label="参数值1">
                    <template #default="{ row }">
                      <el-input v-model.number="row.v1" @change="handleEdit(row)" />
                    </template>
                  </el-table-column>
                  <el-table-column prop="v2" label="参数值2" width="100">
                    <template #default="{ row }">
                      <el-input v-model.number="row.v2" @change="handleEdit(row)" />
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="140">
                    <template #default="scope">
                      <el-button size="small" type="success" @click.stop="susave(scope.$index, scope.row)">保存</el-button>
                      <el-button size="small" type="danger" @click.stop="sudelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div> -->
              <!-- 执行 -->
              <!-- <div class="eldesign classtable" style="margin-top: 10px;" v-if="activeIndex3 == 1">
                <div style="display: flex;">
                  <el-form-item label="执行路径">
                    <el-select v-model="zhixing" :suffix-icon="CaretBottom" placeholder="请选择">
                      <el-option label="Rosenbrock" value="Rosenbrock">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-button type="primary" style="margin-left: 10px;">选择路径</el-button>
                </div>
              </div> -->
              <!-- 输出 -->
              <!-- <div class="eldesign classtable" style="margin-top: 10px;" v-if="activeIndex3 == 2">
                <el-table :data="sctable" border style="width: 100%" height="400">
                  <el-table-column prop="enable" label="启用" width="50">
                    <template v-slot="scope">
                      <el-checkbox :false-label="'0'" :true-label="'1'" :label="false" v-model="scope.row.enable" />
                    </template>
                  </el-table-column>
                  <el-table-column prop="name" label="参数">
                    <template #default="{ row }">
                      <el-input v-model="row.name" @change="handleEdit(row)" />
                    </template>
                  </el-table-column>
                  <el-table-column prop="v1" label="参数值1">
                    <template #default="{ row }">
                      <el-input v-model="row.v1" @change="handleEdit(row)" />
                    </template>
                  </el-table-column>
                  <el-table-column prop="v2" label="参数值2" width="100">
                    <template #default="{ row }">
                      <el-input v-model="row.v2" @change="handleEdit(row)" />
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="140">
                    <template #default="scope">
                      <el-button size="small" type="success" @click.stop="scsave(scope.$index, scope.row)">保存</el-button>
                      <el-button size="small" type="danger" @click.stop="scdelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <template #footer>
              <div class="dialog-footer">
                <el-button type="info" @click="newxfiol">新建 </el-button>
                <el-button type="info" @click="dialog.Xfiol = false">取消</el-button>
                <el-button type="primary" @click="dialog.Xfiol = 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="500"
            class="dialog_class bgcolor tianjia sel">

            <template #header="{ titleId, titleClass }">
              <div class="my-header ">
                <el-image :src="getImgPath('xuek9.png')" fit="contain"></el-image>
                <h4 :id="titleId" :class="titleClass">Xfiol</h4>
              </div>
            </template>
            <div class="youhualog youhualog1" style="height: 480px;">
              <ul>
                <li v-for="(tab, index) in newxfoil" :key="index" :class="{ 'active2': activeIndex3 === index }"
                  @click="dianjia(index)">{{ tab }}</li>
              </ul>
              <div class="chushij">
                <el-button type="info" size="small" @click="initialize()">初始化</el-button>
              </div>
              <!-- 输入 -->
              <div class="eldesign classtable" style="margin-top: 10px;" v-if="activeIndex3 == 0">
                <el-table :data="srnewtable" border style="width: 100%" height="400">
                 
                  <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="v1" label="参数值">
                    <template #default="{ row }">
                      <el-input v-model.number="row.v1" @change="handleEdit(row)" />
                    </template>
                  </el-table-column>
                 <el-table-column prop="enable" label="启用" width="100">
                    <template v-slot="scope">
                      <el-checkbox :false-label="'0'" :true-label="'1'" :label="false" v-model="scope.row.enable"  @change="changecheck($event,scope.row)"/>
                    </template>
                  </el-table-column> 
              
                </el-table>
              </div>
                   <!-- 输出 -->
                   <div class="eldesign classtable" style="margin-top: 10px;" v-if="activeIndex3 == 1">
                <el-table :data="scnewtable" border style="width: 100%" height="400">
                  <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="v1" label="参数值">
                    <template #default="{ row }">
                      <el-input v-model="row.v1" @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 shuxingopt" :key="item.value" :label="item.label"
                                      :value="item.value">
                                    </el-option>
                                  </el-select>

                                </template>
                              </el-table-column>
                  <el-table-column prop="enable" label="启用" width="100">
                    <template v-slot="scope">
                      <el-checkbox :false-label="'0'" :true-label="'1'" :label="false" v-model="scope.row.enable"  @change="changecheck($event,scope.row)"/>
                    </template>
                  </el-table-column> 
                </el-table>
              </div>
              <!-- 中间参数 -->
              <div class="eldesign classtable" style="margin-top: 10px;" v-if="activeIndex3 == 2">
                <el-form-item label="计算完成">
                 <el-radio-group v-model="resource">
                  <el-radio label="0">是</el-radio>
                  <el-radio label="1">否</el-radio>
                </el-radio-group> 
             
              </el-form-item>
              <div style="display:flex">
              <div class="cstleft">
                <el-form-item label="迭代次数:">
                  <el-input v-model="youhua.popsize" :step="100" :min="0" :max="1000" controls-position="right" />
                </el-form-item>

              </div>
              <div class="cstleft">
                <el-form-item label="表面求解点个数:" >
                  <el-input v-model="youhua.popsize" :step="100" :min="0" :max="1000" controls-position="right" />
                </el-form-item>

              </div>
            </div>
              </div>
         
            </div>
            <template #footer>
              <div class="dialog-footer">
                <el-button type="info" @click="newxfiol">新建 </el-button>
                <el-button type="info" @click="dialog.Xfiol = false">取消</el-button>
                <el-button type="primary" @click="dialog.Xfiol = false">
                  确定
                </el-button>
              </div>
            </template>
          </el-dialog>
          <!--梯度优化器  -->
          <el-dialog v-model="dialog.tidu" 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('xuek12.png')" fit="contain"></el-image>
                <h4 :id="titleId" :class="titleClass">梯度优化器</h4>
              </div>
            </template>
            <div class="numberinput lefttext">
              <el-form>
                <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 v-model="youhua.popsize" :step="100" :min="0" :max="1000" controls-position="right" />
                </el-form-item>
                <el-form-item label="输出精度等级:" :label-width="formLabelWidth1">
                  <el-input v-model="youhua.epoch" :step="100" :min="0" :max="1000" controls-position="right" />
                </el-form-item>
                <el-form-item label="线性约束容差:" :label-width="formLabelWidth1">
                  <el-input v-model="youhua.epoch" :step="100" :min="0" :max="1000" controls-position="right" />
                </el-form-item>
                <el-form-item label="非线性约束容差:" :label-width="formLabelWidth1">
                  <el-input v-model="youhua.epoch" :step="100" :min="0" :max="1000" controls-position="right" />
                </el-form-item>
                <el-form-item label="最优性度量容差::" :label-width="formLabelWidth1">
                  <el-input v-model="youhua.epoch" :step="100" :min="0" :max="1000" controls-position="right" />
                </el-form-item>
                <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>
            </div>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialog.tidu = false">取消</el-button>
                <el-button type="primary" @click=" dialog.tidu = 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="900" class="dialog_class bgcolor 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>
            <div class="numberinput lefttext ">
              <el-form>
                <div style="width: 49%;">
                <el-form-item label="CST阶数:" :label-width="formLabelWidth3">
                  <el-input v-model="cstnum" :max="20" controls-position="right" @keydown.enter='keydownenter'/>
                </el-form-item>
              </div>
                <div style="display: flex;">
                <div class="cstleft ">
                <el-form-item label="上表面类函数参数N1:" :label-width="formLabelWidth1">
                  <el-input v-model="youhua.popsize" :step="100" :min="0" :max="1000" controls-position="right" />
                </el-form-item>
                <el-form-item label="下表面类函数参数N1:" :label-width="formLabelWidth1">
                  <el-input v-model="youhua.popsize" :step="100" :min="0" :max="1000" controls-position="right" />
                </el-form-item>
              </div>
              <div class="cstleft " style="margin-left: 20px;">
                <el-form-item label="上表面类函数参数N2:" :label-width="formLabelWidth1">
                  <el-input v-model="youhua.popsize" :step="100" :min="0" :max="1000" controls-position="right" />
                </el-form-item>
                <el-form-item label="下表面类函数参数N2:" :label-width="formLabelWidth1">
                  <el-input v-model="youhua.popsize" :step="100" :min="0" :max="1000" controls-position="right" />
                </el-form-item>
              </div>
            </div>
            <div class="classtable">
            <el-table :data="tableDatacst" style="width: 100%" border>
              <el-table-column prop="date" label="" width="180" />
              <el-table-column
                v-for="(item,index) in tablecstHeaders" :key="index"
                :prop="item.prop"
                :label="item.label">
                  <template #default="{ row }"> 
                      <el-input v-model="row[item.prop]"  @change="handleEdit(row)"/>
                    </template>
              </el-table-column>
          </el-table>
        </div>
              </el-form>
            </div>
            <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>
          <!-- 查看报告 -->
          <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-dlg"
            :before-close="handleClose" width="500" class="dialog_class bgcolor tianjia sel" style="max-height: 70%;">

            <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>
            <div class="numberinput lefttext">
              <el-form>
                <!-- <el-input
                  v-model="looktext"
                  style="width: 460px"
                  :rows="2"
                  type="textarea"
                /> -->
                <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>
          <!-- 内容区 -->
          <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'>
                  <!-- //v-if="activeName=='Role'" -->
                  <vuefindex ref="vuefval" :Xfiol="dialog.Xfiol" :jboptimizer="dialog.jboptimizer"
                    :optimizer="dialog.optimizer" @optimizerfalse="optimizerfalse($event)"></vuefindex>
                </div>
                <div class="maxh221">
                  <!-- 中间部分 -->
                  <div class="conter_mian classtable " v-show="jiankong">
                    <el-table :data="tableDatalieb" border style="display: flex; flex: 1; overflow: auto;" height="500">
                      <el-table-column type="index" width="50"></el-table-column>
                      <el-table-column v-for="(header, index) in tableHeaders" :key="index" :prop="header.prop"
                        :label="header.label">
                      </el-table-column>
                    </el-table>
                  </div>
                  <!--   曲线监控 -->
                  <div class="conter_mian classtable " v-show="echartshow">
                    <!-- <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="activeName == 'Three' && tabactive == '过程监控'">
                    <!-- <div class="echart_left  ech">left</div>
              <div class="echart_right ech">right</div> -->
                  </div>
                  <!-- 可视化开始 -->
                  <div class="conter_mian classtable" v-show="echartzongshow">
                    <echartarea ref="arearef" v-show="areashow" />
                    <bargraph ref="bargraphref" v-show="bargraphshow" />
                    <echartLine ref="echartLineref" v-show="echartLineshow" />
                    <BarChart ref="BarChartref" v-show="BarChartshow" />
                    <scatter ref="scatterref" v-show="scattershow" />
                    <radar ref="radarref" v-show="radarshow" />
                  </div>
                  <!-- 可视化结束 -->
                  <!-- 右侧边栏开始 -->
                  <!-- 结束 -->
                </div>
                <el-footer class="femFooter">
                  <div class="gooterpading">
                    <div class="footerTitle   el-tag--primary">
                      <div>
                        <span v-for="(tab, index) in tabs" :key="index" :class="{ 'active': activeIndex === index }"
                          @click="xxclick(index)">{{ tab }}</span>
                      </div>
                      <div>
                        <!-- <li
                    class="exloadbox"
                    v-show="elodingfalse"
                  >
                    <span>正在求解中</span>
                    <i class="el-icon-loading"></i>
                  </li> -->
                        <!-- <li>
                    <span >清空</span>
                  </li> -->
                        <li>
                          <span @click="footerShows('foot')">&#9650;&#9660;</span>
                        </li>
                      </div>
                    </div>
                    <div 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>
                          <li v-for="(tab, index) in listli" :key="index" :class="{ 'active2': activeIndex2 === index }"
                            @click="issueclick(index)">{{ tab }}</li>
                        </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" oninput="value=value.replace(/^|[^0-9]/g,'')"
                                    @change="handleEdit(row)" />
                                </template>
                              </el-table-column>
                              <el-table-column prop="lower" label="下限值">
                                <template #default="{ row }">
                                  <el-input v-model.Number="row.lower" oninput="value=value.replace(/^|[^0-9]/g,'')"
                                    @change="handleEdit(row)" />
                                </template>
                              </el-table-column>
                              <el-table-column prop="reference" label="基准值" width="100">
                                <template #default="{ row }">
                                  <el-input v-model.Number="row.reference" oninput="value=value.replace(/^|[^0-9]/g,'')"
                                    @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" stripe 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.Number="row.reference" oninput="value=value.replace(/^|[^0-9]/g,'')"
                                    @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" stripe style="width: 100%" height="100">
                              <el-table-column type="index" label="编号" width="70" />
                              <!-- <el-table-column prop="qi" label="启用" width="70">
                  <template v-slot="scope">
                    <el-checkbox :label="false" v-model="scope.row.qi" />
                  </template>
                </el-table-column> -->
                              <!-- <el-table-column prop="data" label="目标类型" width="120">
                  <template v-slot="scope">
                    <el-select v-model="scope.row.device"  class="no-border " :suffix-icon="CaretBottom"  placeholder="请选择">
                          <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>

                  </template>
            </el-table-column> -->
                              <el-table-column prop="name" label="目标名称">
                                <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.number="row.weight" oninput="value=value.replace(/^|[^0-9]/g,'')"
                                    @change="handleEdit(row)" />
                                </template>
                              </el-table-column>
                              <el-table-column prop="scaling" label="数据缩放">
                                <!-- :label="scope.row.s?'采用':'不采用'" -->
                                <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="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 ">
                                <el-form-item label="新增变量数：">
                                  <el-input v-model="tableval" maxlength="18"
                                    oninput="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" class="w-50 m-2"
                                    placeholder="请输入关键字" /> </el-form-item>
                                <el-button class="btncolor">导入</el-button>
                                <el-button class="btncolor" @click="onAddItem">新增</el-button>
                                <el-button class="btncolor" @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 optmonitor from './echart/optimize_monitor.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'
let Sidebarref = ref();
let resource=ref(0);
let cstnum=ref('');
let formLabelWidth3=ref(100)
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 areashow = ref(false);
let echartLineshow = ref(false);
let BarChartshow = ref(false);
let bargraphshow = ref(false);
let scattershow = ref(false);
let radarshow = ref(false);
let bargraphref = ref();
let echartLineref = ref();
let BarChartref = ref();
let radarref = 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 arearef = ref();
let tableHeaders = ref([
  // { label: '日期', prop: 'date' },
  // { label: '姓名', prop: 'name' },
  // 可以根据需要动态添加或删除表头信息
])
let varsobj = ref({});
let valsobj = ref({});
let tabarr = ref([]);
let arrobj = ref([]);
let tableDatalieb = ref([
  // { date: '2016-05-02', name: '王小虎' },
])
let curvedata = ref('');
let websock = ref(null);
let times = ref({
  lockReconnect: false, //是否真正建立连接
  timeout: 28 * 1000, //30秒一次心跳
  timeoutObj: null, //心跳倒计时
  serverTimeout0bj: null, //
  timeoutnum: null, //断开重连倒计时
})
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 = ['信息栏', '优化问题'];
const listli = ['设计变量', '约束条件', '优化目标'];
const xfoil = ['输入', '执行', '输出'];
const newxfoil = ['输入参数', '输出参数', '中间参数'];
let srtable = ref([]);
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 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);
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: 'k1.png', titlie: "面积图" },
  { url: 'k2.png', titlie: "柱状图" },
  { url: 'k3.png', titlie: "饼状图" },
  { url: 'k4.png', titlie: "折线图" },
  { url: 'k5.png', titlie: "散点图" },
  { url: 'k6.png', titlie: "横条图" },
  { url: 'k7.png', titlie: "雷达图" },
  { url: 'k8.png', titlie: "查看报告" },
  { url: 'k9.png', titlie: "导出报告" },
])
let roletion = ref([
  { url: 'f41.png', titlie: "测试函数模板" },
  { url: 'r1.png', titlie: "工程优化模板" },
  { url: 'r2.png', titlie: "自定义" },
])
let tasktion = ref([
  { url: 't0.png', titlie: "外形参数化" },
])
let Rolelist = ref([
  { url: 'w1.png', titlie: "优化问题组件" },
  { url: 'w2.png', titlie: "学科分析组件" },
  { url: 'w3.png', titlie: "优化器组件" },
])
let Rolelist1 = ref([
  { url: 'w4.png', titlie: "逻辑流连线" },
  { url: 'w5.png', titlie: "数据流连线" },
])
let Rolelist11 = ref([{ url: 'w6.png', titlie: "选择连线颜色" }])
let Rolelist2 = ref([
  { url: 'w7.png', titlie: "模块组合" },
  { url: 'w8.png', titlie: "模块拆分" },
])
let Rolelist22 = ref([{ url: 'w9.png', titlie: "选择图框颜色" }])
let Rolelist3 = ref([
  { url: 'w10.png', titlie: "添加注释" },
])
let Threelist = ref([
  { url: 'tt.png', titlie: "开始" },
  { url: 'tt1.png', titlie: "暂停" },
  { url: 'tt2.png', titlie: "续算" },
  { url: 'tts.png', titlie: "结束" },
])
let Threelist1 = ref([
  { url: 'yh1.png', titlie: "列表监控" },
  { url: 'yh2.png', titlie: "曲线监控" },
  { url: 'yh3.png', titlie: "过程监控" },
])

let Sevenlist = ref([
  { url: 's11.png', titlie: '任务管理' },
  { url: 's12.png', titlie: '任务检索' },
  { url: 's13.png', titlie: '备份与恢复' },
])
let eightlist = ref([
  { url: 'e1.png', titlie: '快速入门' },
  { url: 'e2.png', titlie: '帮助文档' },
  { url: 'e3.png', titlie: '关于软件' },
])
let canshulist = ref([
  { label: 'CST参数化', value: 'CST参数化' },
  { label: 'FFD参数化', value: 'FFD参数化' },
])
let sevlist = ref([
  { label: '任务编号', value: '任务编号' },
  { label: '任务名称', value: '任务名称' },
  { label: '任务类型', value: '任务类型' },
  { label: '创建时间', value: '创建时间' },
])
let seval4 = ref('任务名称');
let agelist = ref([
  { label: 'Kriging模型', value: 'Kriging模型' },
  { label: '相关函数类型', value: '相关函数类型' },
  { label: '超参数优化方法', value: '超参数优化方法' },
  { label: 'Hooke Jeeves方法循环次数', value: 'Hooke Jeeves方法循环次数' },
])
let agval = ref("Kriging模型")
let agval1 = ref("固定设计空间")
let agval2 = ref("拉丁超立方")
let agelist1 = ref([
  { label: '固定设计空间', value: '固定设计空间' },
])
let agelist2 = ref([
  { label: '拉丁超立方', value: '拉丁超立方' },
])
let addval = ref("EI + MSP")
let addlist = ref([
  { label: 'EI + MSP', value: 'EI + MSP' },
])

let yslist = ref([
  { label: 'GA', value: 'GA' },
  { label: 'PSO', value: 'PSO' },
  { label: 'NSGA2', value: 'NSGA2' },
])
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 dialog = ref({
  newdialog: false,
  setdialog: false,
  targetdialog: false,
  design: false,
  constraint: false,
  parameter: false,
  agency: false,
  optimizer: false,
  jboptimizer: false,
  lookover:false,
  Xfiol: false,
  tidu:false,
  CSTt:false,
  enddialog: false,
  addfun: false,
  sufun: false,
  task: false,
  guanli: false,
})
let tableDatacst=ref([
  {date:"上表头"},{date:"下表头"}
])
// 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([])
let 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') {
    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 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();
}
// cst时间
const keydownenter=()=>{
  //cstnum.value='';
  tablecstHeaders.value=[];
  let arrheader=[];
  let tablearr=[];
  let num=Number(cstnum.value);

for(let i=1;i<=num+1;i++){
  arrheader.push('x'+i)
}
arrheader.forEach(function (item,index){

let name="x"+Number(index+1);
let obj ={ label: item,prop:name };
console.log(obj);
tablecstHeaders.value.push(obj);
});
tableDatacst.value.forEach(function (item){
  for(let j=1;j<=num+1;j++){
let name=('x'+j);
item['x' + j]=null;
}
tablearr.push(item);
});
tableDatacst.value=tablearr;
}
const cstok=()=>{
 // cstnum.value='';
  dialog.value.CSTt = false;
  //console.log(tableDatacst.value);

}
const optimizerfalse = (val) => {
  if (val == '优化器') {
    dialog.value.optimizer = true;
  } else if (val == '进化优化器') {
    dialog.value.jboptimizer = true;
    getoptimize();
  } else if (val == 'Xfiol' || val == 'Rosenbrock') {
    importget();
    dialog.value.Xfiol = true;

  }else if(val == '梯度优化器'){
    dialog.value.tidu = true;
  }else if(val == 'CST'){
    dialog.value.CSTt = 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;
  }

}

// 模块选择
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();
      runok();
      break;
    case "列表监控":
      ifjiankong()
      break;
    case "曲线监控":
      ifjiankong()
      curveLine();
    case "面积图":
      echatsfunc();
      break;
    case "柱状图":
      echatsfunc();
      break;
    case "折线图":
      echatsfunc();
      break;
    case "散点图":
      // logsget();
      echatsfunc();
      break;
    case "横条图":
      echatsfunc();
      break;
    case "雷达图":
      //logsget();
      echatsfunc();
      break;
      case "查看报告":
      echatsfunc();
      dialog.value.lookover = true;
      break;
    default:
  }
}

//  可视化清空
const echartclear = () => {
  arearef.value.echatinit();
  bargraphref.value.echatinit();
  echartLineref.value.echatinit();
  BarChartref.value.echatinit();
  radarref.value.echatinit();
  scatterref.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;
      break;
    case "柱状图":
      areashow.value = false;
      bargraphshow.value = true;
      echartLineshow.value = false;
      BarChartshow.value = false;
      radarshow.value = false;
      scattershow.value = false;
      break;
    case "饼状图":
      areashow.value = false;
      bargraphshow.value = false;
      echartLineshow.value = false;
      BarChartshow.value = false;
      radarshow.value = false;
      scattershow.value = false;
      break;
    case "折线图":
      areashow.value = false;
      bargraphshow.value = false;
      echartLineshow.value = true;
      BarChartshow.value = false;
      radarshow.value = false;
      scattershow.value = false;
      break;
    case "散点图":
      areashow.value = false;
      bargraphshow.value = false;
      echartLineshow.value = false;
      BarChartshow.value = false;
      radarshow.value = false;
      scattershow.value = true;
      break
    case "横条图":
      areashow.value = false;
      bargraphshow.value = false;
      echartLineshow.value = false;
      BarChartshow.value = true;
      radarshow.value = false;
      scattershow.value = false;
      break
    case "雷达图":
      areashow.value = false;
      bargraphshow.value = false;
      echartLineshow.value = false;
      BarChartshow.value = false;
      radarshow.value = true;
      scattershow.value = false;
      break
    default:
    areashow.value = false;
      bargraphshow.value = false;
      echartLineshow.value = false;
      BarChartshow.value = false;
      radarshow.value = false;
      scattershow.value = 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 == '曲线监控' || activeName.value == 'Three' && tabactive.value == '曲线监控') {
    echartshow.value = true;

  } else {
    echartshow.value = false;
  }
}
//  求解
const runok = () => {
  const params = {
    transCode: 'MDO0020',
    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 curveLine = () => {
  const params = {
    transCode: 'MDO0021',
    pid: pid.value,
  }
  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);

      // optmonitor1.value.getecharts();

    })
    .catch((err) => {
      ElMessage.error(err.returnMsg)
    })
}
//进化优化器
const getoptimize = () => {
  const params = {
    transCode: 'MDO0018',
    pid: pid.value,
  }
  request(params)
    .then((res) => {

      if (res.hasOwnProperty('eid')) {

        eid.value = res.eid;
        youhua.value.algorithm = res.algorithm
        youhua.value.popsize = Number(res.popsize); // 将id属性转换为数字
        youhua.value.epoch = Number(res.epoch);
        youhua.value.probcrossover = Number(res.probcrossover);
        youhua.value.probmut = Number(res.probmut);
        youhua.value.probscale = Number(res.probscale);
        youhua.value.proboperator = res.proboperator;
        youhua.value.strategy = res.strategy;
        youhua.value.operator = res.operator;
        youhua.value.gpu = res.gpu;

        // youhua=res;

      } else {
        //  youhua=res;
      }

    })
    .catch((err) => {
      ElMessage.error(err.returnMsg)
    })
}
//进化优化器 添加保存
const getaddsave = () => {
  const params = {
    transCode: 'MDO0019',
    pid: pid.value,
    eid: eid.value,
    algorithm: youhua.value.algorithm,
    popsize: youhua.value.popsize,
    epoch: youhua.value.epoch,
    probcrossover: youhua.value.probcrossover,
    probmut: youhua.value.probmut,
    proboperator: youhua.value.proboperator,
    probscale: youhua.value.probscale,
    strategy: youhua.value.strategy,
    operator: youhua.value.operator,
    gpu: youhua.value.gpu

  }
  request(params)
    .then((res) => {
      ElMessage({
        message: res.returnMsg,
        type: 'success',
      })
    })
    .catch((err) => {
      ElMessage.error(err.returnMsg)
    })
}
//选择颜色改变线的颜色
const colorpicker = (e) => {
  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)

  if (activeIndex2.value == 0) {
    for (let i = 0; i < tablevalnum; i++) {
      designtable.value.push({
        name: "x1",
        upper: null,
        lower: null,
        reference: null,
        remark: ''

      })
    }
  } else if (activeIndex2.value == 1) {
    for (let i = 0; i < tablevalnum; i++) {
      tableData.value.push({
        name: 'g1',
        con: -1,
        reference: ''

      })
    }
  } else if (activeIndex2.value == 2) {
    for (let i = 0; i < tablevalnum; i++) {
      eloptimize.value.push({
        name: "",
        optdir: 1,
        weight: 0,
        scaling: 0,
        factor: 0,
        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 = Number(item.lower); // 将属性转换为数字
          item.upper = Number(item.upper);
          item.reference = Number(item.reference);
          //console.log(index);

          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 = Number(item.con); // 将id属性转换为数字
          item.reference = Number(item.reference);
          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 = Number(item.optdir); // 将id属性转换为数字
          item.weight = Number(item.weight);
          item.scaling = Number(item.scaling);
          item.factor = Number(item.factor);
          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(name)
  return name;
}
//保存优化问题
const onokItem = () => {
  console.log(activeIndex2.value);
  if (activeIndex2.value == 0) {
    svarlist.value = '';
    svarlist.value = getarr(svarlist.value, designtable.value)
    devise();

  } else if (activeIndex2.value == 1) {
    conlist.value = '';
    conlist.value = getarr(conlist.value, tableData.value)
    restrain();

  } else if (activeIndex2.value == 2) {
    funlist.value = '';
    funlist.value = getarr(funlist.value, eloptimize.value)
    funlistaa();

  }
}

//设计变量的添加
const devise = () => {
  const params = {
    transCode: 'MDO0008',
    pid: pid.value,
    varlist: 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: 'MDO0009',
    pid: pid.value,
    conlist: conlist.value
  }
  request(params)
    .then((res) => {
      ElMessage({
        message: res.returnMsg,
        type: 'success',
      })
      getyueshu();
    })
    .catch((err) => {
      ElMessage.error(err.returnMsg)
    })
}
//进度条percentage
//优化目标接口
const funlistaa = () => {
  const params = {
    transCode: 'MDO0010',
    pid: pid.value,
    funlist: 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(vals) {
  let arrtable = vals;
  //console.log(arrtable);
  let obj2 = {}
  let heaarr = arrobj.value[0].vars.split(",");
  //let heaarr=['x1', 'x2', 'x3', 'x4', 'x5', 'f1']
  tableHeaders.value = [];
  heaarr.forEach(function (item) {
    let obj = { label: item, prop: item }; // 创建新对象
    tableHeaders.value.push(obj);
  });
  let result = heaarr.map((key, index) => {
    return { [key]: arrtable[index] };
  });

  const mergedObject = result.reduce((accumulator, currentValue) => {
    return { ...accumulator, ...currentValue };
  }, {});
  tableDatalieb.value.push(mergedObject);


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

  const params = {
    transCode: 'MDO0025',
    pid: pid.value,
  }
  request(params)
    .then((res) => {
      logs.value = res.logs;
      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);
        // 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 = "ws://192.168.0.131:8188//websocket?projectId=" + 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) => {

  arrobj.value = [];
  if (res.data.indexOf('{') !== -1) {
    progressshow.value = true;
    // return (number * 100) + '%';
    // =(Number(JSON.parse(res.data).step))* 100;
    let step = Number(JSON.parse(res.data).step);
    percentage.value = Number((step / 20) * 100);
    console.log(percentage.value);
    //percentage.value = convertToPercentage((Number(JSON.parse(res.data).step)));
    echartdata.value = res.data;
    arrobj.value.push(JSON.parse(res.data));
    let vals = (JSON.parse(res.data).vals).split(" ");
    tablefun(vals);
    optmonitor1.value.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);
  } 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) {

      logs.value = logs.value + '"\n"' + res.data;
      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);
// });
</script>
<style lang="scss" scoped>
.conter_flex {
  display: flex;

  .ech {
    flex: 1;
    border: 1px solid;
  }
}

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

.footerTitle {
  display: flex;
  justify-content: space-between;
  padding: 5px 0px;
  font-size: 20px;
  height: 25px !important;
  z-index: 99;
  ;
  border-radius: 5px 5px 0px 0px;
  overflow: hidden;
}

.footerTitle div {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 14px;
}

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

.footerTitle p {
  margin: 0;
}

.footerTitle span {
  padding: 5px 10px;
  cursor: default;
}

.footerText .el-textarea__inner {
  width: 100%;
  height: 178px !important;
  border: 0;
  font-size: 12px;
  color: #333;
  padding: 2px;
}

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

/* .el-treeicon .el-tree-node__expand-icon.is-leaf{
   display: none !important;
  } */
.custom-text {
  font-family: Inter, Inter;
  font-weight: 600;
  font-size: 16px;
  color: #383838;
  line-height: 24px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.el-tree .el-tree-node__children .custom-text {
  font-size: 13px;
  /* 这里设置为20px，你可以根据需求调整大小 */
  font-weight: 400;
}

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

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

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

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

.footerTitle .active {
  background-color: #f0f0f0;
}

.youhualog {
  width: 100%;
  height: 178px;
  overflow-y: auto;
  background: #fff;
}

.youhualog .active2 {
  background-color: #f0f0f0;
}

.youhualog ul {
  width: 320px;
  display: flex;
}

.youhualog ul li {
  flex: 1;
  background: #DFDFDF;
  border: 1px solid #2267B1;
  font-size: 14px;
  text-align: center;

}

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

.footer-add {
  width: 530px;
}

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

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

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

.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: #D8D8D8;
}

.classtable .el-table .cell {
  font-size: 12px;
}

.classtable .el-table td.el-table__cell div {
  height: 24px;
  overflow: hidden;
}

.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;
}

.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: 80%;
}

.jindutiao .percentage-value {
  font-size: 13px;
}
.cstleft{
  width:50%;
  flex: 1;
   
}
</style>