TBA_GXPT/ruoyi-ui/src/views/register/componentReg/index.vue

<template>
  <div style="width: 100%;padding-top: 1%;" :style="{'height':heightAll+'px'}">
    <div style="display: flex;width: 100%;margin-left: 1%;justify-content: space-between;">
      <div style="display: flex;width: 35%;">
        <div style="display: flex;width: 100%;align-items: center;">
            <div>
                模型名称:
            </div>
            <el-input v-model="name" style="width:50%;margin-left: 1%;" placeholder="" />
        </div>
        <div style="display: flex;width: 100%;align-items: center;margin-left:-15%;">
            <div>
                模型归属单位:
            </div>
            <el-input v-model="mdUnit" style="width: 50%;margin-left: 1%;" placeholder="" />
        </div>
        <el-button type="primary" style="margin-left: -10%;" @click="getModelListTable" :icon="Search">查询</el-button>
      </div>
        <div style="display: flex;align-items: center;margin-right: 3%;">
            
            <el-button type="primary" style="margin-left:5%;" @click="reg" icon="Plus">注册</el-button>
        </div>
    </div>
    <div style="margin-top: 0%;margin-left: 0%;width: 100%;">
        <el-table 
        :data="tableData" 
        height="80vh"
        style="width: 98%;margin-left: 1%;margin-top: 0.5%;"
        :cell-style="{ padding:'5px' }"
        :header-cell-style="{height: heightAll*0.01+'px',}"
        :row-style="{ fontSize: '16px',textAlign:'center'}"
        border >
        <el-table-column type="index" label="序号" width="80">
          <template #default="{ $index }">
            <div style="text-align: center;">
              {{ $index + 1 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="模型名称">
          <template #default="scope">
            <div style="color: #409EFF;cursor: pointer;" @click="showDe(scope.row)">{{scope.row.name}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="enname" label="英文名称">
          <!-- <template #default="scope">
            <div style="color: #409EFF;cursor: pointer;" @click="showTest(scope.row)">{{scope.row.enname}}</div>
          </template> -->
        </el-table-column>
        <el-table-column prop="type" label="模型类型" width="160"/>
        <el-table-column prop="mdUnit" label="模型单位" width="220"/>
        <el-table-column prop="mdContact" label="联系方式" width="150"/>
        <el-table-column prop="audit" label="审核状态" width="140">
          <template #default="scope">
            <div>
              <div v-if="scope.row.audit === null||scope.row.audit === ''" style="color:#E6A23C">待申请</div>
              <div v-if="scope.row.audit === '0'" style="color:#909399">待审核</div>
              <div v-else-if="scope.row.audit === '1'" style="color: #67C23A">审核通过</div>
              <div v-else-if="scope.row.audit === '2'" style="color: #F56C6C">驳回</div>
              <div v-else-if="scope.row.audit === '3'" style="color: #F56C6C">更新审核</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="发布状态" width="140">
          <template #default="scope">
            <div>
              <div v-if="scope.row.publish === '0'||scope.row.publish === null" style="color:#909399">未发布</div>
              <div v-else-if="scope.row.publish === '1'" style="color: #67C23A">已发布</div>
              <div v-else-if="scope.row.publish === '3'" style="color: #F56C6C">更新发布</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="modifyby" label="注册时间" width="170"/>
        <el-table-column prop="version" label="版本" width="120"/>
        <el-table-column prop="address" label="操作" width="270">
            <template #default="scope">
                <div style="display: flex;justify-content: space-between;width: 100%;">
                    <el-button type="primary" @click="showEdit(scope.row)" size="mini" text style="margin-left: 0%;">编辑</el-button>
                    <!-- <el-button type="danger" text size="mini" style="margin-left: -5%;" @click="handleDelete(scope.row)">注销</el-button> -->
                    <!-- <el-button @click="showDe(scope.row)" type="primary" text size="mini" style="margin-left: -5%;">查看</el-button> -->
                    <el-button @click="showPei(scope.row)" type="warning" text size="mini" style="margin-left: -5%;">配置</el-button>
                    <el-button type="danger" @click="delModel(scope.row)" text size="mini" style="margin-left: -5%;">删除</el-button>
                    <el-button v-if="scope.row.audit === null||scope.row.audit === '2'||scope.row.audit === ''" type="info" @click="shenhe(scope.row)" text size="mini" style="margin-left: -5%;">审核申请</el-button>
                </div>
            </template>
        </el-table-column>
      </el-table>
        <el-dialog v-model="dialogVisible" title="" width="60%" @close="clearForm">
                <div class="card-header">
                  <span style="font-size: 20px;margin-left: 1%;">基本信息</span>
                  <el-divider style="margin-top: 1%;"/>
                </div>
              <div>
                <el-form  size="mini"  style="margin-top: 0%;width: 98%;"  :model="formJi" label-position="right" ref="formRefJi" label-width="120px" :rules="rulesJi">
                  <el-row :gutter="40">
                        <el-col :span="8">
                          <el-form-item label="模型名称:" prop="name" style="">
                              <div style="display: flex;width: 120%;justify-content: space-between;">
                                <el-input  v-model="formJi.name" style="width: 100%;"/>
                              </div>
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="英文名:" prop="enname" style="">
                            <div style="display: flex;width: 100%;justify-content: space-between;">
                              <el-input  v-model="formJi.enname" style="width: 100%;"/>
                            </div>
                          </el-form-item>
                        </el-col>
                        <el-col :span="6">
                          <el-form-item label="版本号:" prop="" style="">
                            <div style="display: flex;width: 100%;justify-content: space-between;">
                              <el-input  v-model="formJi.version" style="width: 100%;"/>
                            </div>
                          </el-form-item>
                        </el-col>
                  </el-row>
                  <el-row :gutter="48">
                    <el-col :span="8">
                      <el-form-item label="模型类型:" prop="" style="">
                        <div style="display: flex;width: 100%;justify-content: space-between;">
                          <el-input placeholder="如水利模型、排水模型、供水模型、海洋模型" v-model="formJi.type" style="width: 100%;" resize="none"/>
                        </div>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-form-item label="排序:" prop="" style="">
                      <div style="display: flex;width: 100%;justify-content: space-between;">
                        <el-input-number v-model="formJi.sort" :min="1" style="width: 22%;"/>
                      </div>
                  </el-form-item>
                  <el-row :gutter="48">
                    <el-col :span="24">
                      <el-form-item label="开发语言:">
                          <el-radio-group v-model="formJi.devlang" class="custom-radio-group" style="width: 100%;">
                            <el-radio label="java" size="large">java</el-radio>
                            <el-radio label="nodeJs" size="large">nodeJs</el-radio>
                            <el-radio label="python" size="large">python</el-radio>
                            <el-radio label="c/c++" size="large">c/c++</el-radio>
                            <el-radio label="1" size="large">
                              <div class="custom-input-wrapper">
                                <span>其它</span>
                                <el-input 
                                  v-model="elseLan"
                                  class="underline-input"
                                  v-show="isElse"
                                />
                              </div>
                            </el-radio>
                            </el-radio-group>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="48">
                        <el-col :span="16">
                          <el-form-item label="简介:">
                              <el-input  v-model="formJi.intro" style="width: 100%;" :rows="3" resize="none" type="textarea"/>
                          </el-form-item>
                        </el-col>
                  </el-row>
                </el-form>
              </div>
            
              <div class="card-header">
                <span style="font-size: 20px;margin-left: 1%;">单位</span>
                <el-divider style="margin-top: 1%;"/>
              </div>
            <div style="margin-top: 0%;">
              <el-form size="mini" :key="tableKey" style="margin-top: 0%;width: 98%;"  :model="formJi" label-position="right"  label-width="120px" :rules="rulesJi">
                <el-row :gutter="48">
                      <el-col :span="11">
                        <el-form-item label="模型归属单位:" prop="" style="">
                            <div style="display: flex;width: 100%;justify-content: space-between;">
                              <el-input  v-model="formJi.mdUnit" style="width: 100%;"/>
                            </div>
                        </el-form-item>
                      </el-col>
                      <el-col :span="11">
                        <el-form-item label="联系方式:" prop="" style="" >
                          <div style="display: flex;width: 100%;justify-content: space-between;">
                            <el-input  v-model="formJi.mdContact" style="width: 100%;"/>
                          </div>
                        </el-form-item>
                      </el-col>
                </el-row>
                <el-row :gutter="48">
                      <el-col :span="11">
                        <el-form-item label="技术支持单位:" prop="" style="">
                            <div style="display: flex;width: 100%;justify-content: space-between;">
                              <el-input  v-model="formJi.devUnit" style="width: 100%;"/>
                            </div>
                        </el-form-item>
                      </el-col>
                      <el-col :span="11">
                        <el-form-item label="联系方式:" prop="" style="">
                          <div style="display: flex;width: 100%;justify-content: space-between;">
                            <el-input  v-model="formJi.devContact" style="width: 100%;"/>
                          </div>
                        </el-form-item>
                      </el-col>
                </el-row>
              </el-form>
            </div>
            <el-tabs
            v-model="activeName"
            type="card"
            style="margin-top: 1%;"
          >
            <el-tab-pane label="部署情况" name="first">
              <el-form size="mini" :key="tableKey" style="margin-top: 0%;width: 98%;"  :model="formJi" label-position="right" label-width="120px"   :rules="rulesJi">
                <el-row :gutter="48">
                      <el-col :span="11">
                        <el-form-item label="服务器IP:" prop="" style="">
                            <div style="display: flex;width: 100%;justify-content: space-between;">
                              <el-input   v-model="formJi.deployIp" style="width: 100%;"/>
                            </div>
                        </el-form-item>
                      </el-col>
                      <el-col :span="11">
                        <el-form-item label="端口:" prop="" style="">
                          <div style="display: flex;width: 100%;justify-content: space-between;">
                            <el-input placeholder="可填写多个端口，以“,”分隔"  v-model="formJi.deployPort" style="width: 100%;"/>
                          </div>
                        </el-form-item>
                      </el-col>
                </el-row>
                <el-row :gutter="48">
                      <el-col :span="15">
                        <el-form-item label="部署位置:" prop="" style="">
                            <div style="display: flex;width: 100%;justify-content: space-between;">
                              <el-input  v-model="formJi.deployDir" style="width: 100%;"/>
                            </div>
                        </el-form-item>
                      </el-col>
                      <el-col :span="10">
                      </el-col>
                </el-row>
                <el-row :gutter="48">
                      <el-col :span="15">
                        <el-form-item label="服务访问地址:" prop="" style="">
                          <div style="display: flex;width: 100%;justify-content: space-between;">
                            <el-input  v-model="formJi.mirrorImageUrl" style="width: 100%;"/>
                          </div>
                        </el-form-item>
                      </el-col>
                </el-row>
                <el-row :gutter="48">
                      <el-col :span="15">
                        <el-form-item label="服务器运行命令:" prop="" style="">
                          <div style="display: flex;width: 100%;justify-content: space-between;">
                            <el-input  v-model="formJi.mdRunCmd" style="width: 100%;"/>
                          </div>
                        </el-form-item>
                      </el-col>
                </el-row>
              </el-form>
              <div style="display: flex;margin-top: -5%;">
                <div class="card-header" style="margin-top: 5%;display: flex;justify-content: inherit;margin-left: 2%">
                  <span style="font-size: 20px;margin-top: 5%; writing-mode: vertical-rl;position: relative;top: 15%;">运行环境</span>
                </div>
                <el-form size="mini" :key="tableKey" style="margin-top: 5%;width: 85%;"  :model="formJi" label-position="right" label-width="120px"   :rules="rulesJi">
                  <el-row :gutter="48">
                        <el-col :span="12">
                          <el-form-item label="操作系统:" prop="" style="">
                              <div style="display: flex;width: 100%;justify-content: space-between;">
                                <el-select
                                v-model="formJi.envOs"
                                
                                    style="width: 75%;margin-left: 0%;"
                                >
                                    <el-option
                                    v-for="item in optionsEnv"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    />
                                </el-select>
                              </div>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="运行架构:" prop="" style="">
                            <div style="display: flex;width: 100%;justify-content: space-between;">
                               <el-radio-group v-model="formJi.evnArmX86" class="ml-4" size="small" style="" >
                                    <el-radio label="X86" size="large">X86</el-radio>
                                    <el-radio label="ARM" size="large">ARM</el-radio>
                                </el-radio-group>
                            </div>
                          </el-form-item>
                        </el-col>
                  </el-row>
                  <el-row :gutter="24">
                        <el-col :span="8">
                          <el-form-item label="硬盘:" prop="" style="">
                              <div style="display: flex;width: 100%;" >
                                <el-input-number
                                  v-model="formJi.envDisk"
                                  :min="100"
                                  :max="2048"
                                  size="mini"
                                  controls-position="right"
                                  @change="handleChange"
                                />
                                <div style="margin-left: 4%;font-size: 15px;">
                                  G
                                </div>
                              </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="CPU核数:" prop="" style="">
                            <div style="display: flex;width: 100%;" >
                                <el-input-number
                                  v-model="formJi.envCpuNum"
                                  :max="64"
                                  :min="2"
                                  size="mini"
                                  controls-position="right"
                                  @change="handleChange"
                                />
                                <div style="margin-left: 4%;font-size: 15px;">
                                  个
                                </div>
                              </div>
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="内存:" prop="" style="">
                            <div style="display: flex;width: 100%;" >
                                <el-input-number
                                  v-model="formJi.envMem"
                                  :max="512"
                                  :min="1"
                                  size="mini"
                                  controls-position="right"
                                  @change="handleChange"
                                />
                                <div style="margin-left: 4%;font-size: 15px;">
                                  G
                                </div>
                              </div>
                          </el-form-item>
                        </el-col>
                  </el-row>
                  <el-row :gutter="24">
                        <el-col :span="8">
                          <el-form-item label="GPU型号:" prop="" style="">
                              <div style="display: flex;width: 100%;">
                                <el-input   v-model="formJi.envGpuType" style="width: 100%;"/>
                              </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="GPU数量:" prop="" style="">
                            <div style="display: flex;width: 100%;" >
                               <el-input-number
                                  v-model="formJi.envGpuNum"
                                  :min="1"
                                  :max="64"
                                  size="mini"
                                  controls-position="right"
                                  @change="handleChange"
                                />
                                <div style="margin-left: 4%;font-size: 15px;">
                                  个
                                </div>
                              </div>
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="GUP显存:" prop="" style="">
                            <div style="display: flex;width: 100%;" >
                                <el-input-number
                                  v-model="formJi.envGpuMem"
                                  :min="1"
                                  size="mini"
                                  :max="512"
                                  controls-position="right"
                                  @change="handleChange"
                                />
                                <div style="margin-left: 4%;font-size: 15px;">
                                  G
                                </div>
                              </div>
                          </el-form-item>
                        </el-col>
                  </el-row>
                </el-form>
              </div>
            </el-tab-pane>
            <el-tab-pane label="输入" name="second">
              <el-form style="margin-left: 5%;margin-top: 2%;" label-position="right" label-width="120px" :model="formZu" class="demo-form-inline" ref="formRefZu" :rules="rulesZu">
                <el-form-item label="输入文档:" prop="">
                    <div style="width: 75%;">
                      <el-upload
                          ref="uploadRef"
                          :limit="1"
                          accept=".xlsx, .xls"
                          :headers="upload.headers"
                          :on-change="handleChange"
                          :file-list="fileList"
                          :action="upload.url + '?file=' + upload.updateSupport"
                          :on-progress="handleFileUploadProgress"
                          :on-success="handleFileSuccess"
                          :auto-upload="false"
                          drag
                      >
                          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                      </el-upload>
                    </div>
                    <div style="color: #b1b3b8;width: 100%;">
                      注:请上传后缀名为.docx .pdf .txt的文件
                    </div>
                    <el-link type="primary" @click="downIn">{{formJi.mdInName}}</el-link>
                  </el-form-item>
                  <el-form-item label="说明:" prop="" style="margin-left: -1%;">
                    <el-input v-model="formJi.mdInNote" style="width: 75%;" placeholder="请输入组件执行路径" :rows="2" type="textarea" resize="none"/>
                  </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="输出" name="third">
              <el-form  style="margin-left: 5%;margin-top: 2%;" label-position="right" label-width="120px" :model="formZu" class="demo-form-inline" ref="formRefZu" :rules="rulesZu">
                <el-form-item label="输出文档:" prop="">
                    <div style="width: 75%;">
                      <el-upload
                          ref="uploadRef1"
                          :limit="1"
                          accept=".xlsx, .xls"
                          :headers="upload.headers"
                          :on-change="handleChange1"
                          :file-list="fileList1"
                          :action="upload.url + '?file=' + upload.updateSupport"
                          :on-progress="handleFileUploadProgress"
                          :on-success="handleFileSuccess1"
                          :auto-upload="false"
                          drag
                      >
                          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                      </el-upload>
                    </div>
                    <div style="color: #b1b3b8;width: 100%;">
                      注:请上传后缀名为.docx .pdf .txt的文件
                    </div>
                    <el-link type="primary" @click="downOut">{{formJi.mdOutName}}</el-link>
                  </el-form-item>
                  <el-form-item label="说明:" prop="" style="margin-left: -1%;">
                    <el-input v-model="formJi.mdOutNote" style="width: 75%;" placeholder="请输入组件执行路径" :rows="2" type="textarea" resize="none"/>
                  </el-form-item>
                </el-form>
            </el-tab-pane>
          </el-tabs>
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submit" v-if="!isEdit">
                  提交
                </el-button>
                <el-button type="primary" @click="subEdit" v-if="isEdit">
                  提交
                </el-button>
            </span>
            </template>
        </el-dialog>
        <el-dialog  v-model="dialogVisibleDe" title="" width="50%" @close="" destroy-on-close class="custom-dialog-bg">
          <el-descriptions title="基本信息" :column="3" style="margin-top: 0%;margin-left: 1%;background: transparent;">
            <el-descriptions-item label="模型名称:">{{formJi.name}}</el-descriptions-item>
            <el-descriptions-item label="英文名:">{{formJi.enname}}</el-descriptions-item>
            <el-descriptions-item label="版本号:">{{formJi.version}}</el-descriptions-item>
            <el-descriptions-item label="接口分类:">{{formJi.type}}</el-descriptions-item>
            <el-descriptions-item label="开发语言:"  span="2">{{formJi.devlang}}</el-descriptions-item>
            <el-descriptions-item label="简介:" span="3">{{formJi.intro}}</el-descriptions-item>
          </el-descriptions>
          <el-divider style="margin-top: 0%;"/>
          <el-descriptions title="单位" :column="2" style="margin-top: 1%;margin-left: 1%;background-color: transparent;">
            <el-descriptions-item label="模型归属单位:">{{formJi.mdUnit}}</el-descriptions-item>
            <el-descriptions-item label="联系方式:">{{formJi.mdContact}}</el-descriptions-item>
            <el-descriptions-item label="技术支持单位:">{{formJi.devUnit}}</el-descriptions-item>
            <el-descriptions-item label="联系方式:">{{formJi.devContact}}</el-descriptions-item>
          </el-descriptions>
          <el-tabs
            v-model="activeName"
            type="card"
            style="margin-top: 1%;background-color: transparent;"
          >
            <el-tab-pane label="部署情况" name="first" style="background-color: transparent;">
              <el-descriptions title="" :column="3" style="margin-top: 0%;margin-left: 1%;background-color: transparent;">
                <el-descriptions-item label="服务器IP:" span="2">{{formJi.deployIp}}</el-descriptions-item>
                <el-descriptions-item label="端口:">{{formJi.deployPort}}</el-descriptions-item>
                <el-descriptions-item label="部署位置:" span="2">{{formJi.deployDir}}</el-descriptions-item>
                <el-descriptions-item label="服务访问地址:">{{formJi.mirrorImageUrl}}</el-descriptions-item>
                <el-descriptions-item label="服务器运行命令:" span="3">{{formJi.mdRunCmd}}</el-descriptions-item>
                <el-descriptions-item label="操作系统:" span="2">{{formJi.envOs}}</el-descriptions-item>
                <el-descriptions-item label="运行架构:" span="3">{{formJi.evnArmX86}}</el-descriptions-item>
                <el-descriptions-item label="硬盘:" span="">
                  {{formJi.envDisk + 'G'}}
                </el-descriptions-item>
                <el-descriptions-item label="CPU核心数:">
                  {{formJi.envCpu + '个'}}
                </el-descriptions-item>
                <el-descriptions-item label="内存:">
                  {{formJi.envMem + 'G'}}
                </el-descriptions-item>
                <el-descriptions-item label="GPU型号:">{{formJi.envGpuType}}</el-descriptions-item>
                <el-descriptions-item label="GPU数量:">
                  {{formJi.envGpuNum + '个'}}
                </el-descriptions-item>
                <el-descriptions-item label="GUP显存:">
                  {{formJi.envGpuMem + 'G'}}
                </el-descriptions-item>
              </el-descriptions>
            </el-tab-pane>
            <el-tab-pane label="输入" name="second">
              <el-descriptions title="" :column="2" style="margin-top: 0%;margin-left: 1%;">
                <el-descriptions-item label="输入文档:" span="2">
                  <el-link type="primary"  @click="downIn">{{formJi.mdInName}}</el-link>
                </el-descriptions-item>
                <el-descriptions-item label="说明:">{{formJi.mdInNote}}</el-descriptions-item>
              </el-descriptions>
            </el-tab-pane>
            <el-tab-pane label="输出" name="third">
              <el-descriptions title="" :column="2" style="margin-top: 0%;margin-left: 1%;">
                <el-descriptions-item label="输出文档:" span="2">
                  <el-link type="primary" @click="downOut">{{formJi.mdOutName}}</el-link>
                </el-descriptions-item>
                <el-descriptions-item label="说明:">{{formJi.mdOutNote}}</el-descriptions-item>
              </el-descriptions>
            </el-tab-pane>
          </el-tabs>
        </el-dialog>
        <el-dialog  @close="clearForm" v-model="dialogVisiblePei" width="70%" title="模型配置">
          <el-tabs v-model="activeName" type="border-card" style="height: 50vh;">
            <el-tab-pane label="基本信息" name="first" >
              <el-descriptions title="" :column="3" style="margin-top: 0%;margin-left: 1%;background: transparent;">
                <el-descriptions-item label="模型名称:">{{formJi.name}}</el-descriptions-item>
                <el-descriptions-item label="英文名:">{{formJi.enname}}</el-descriptions-item>
                <el-descriptions-item label="版本号:">{{formJi.version}}</el-descriptions-item>
                <el-descriptions-item label="接口分类:">{{formJi.type}}</el-descriptions-item>
                <el-descriptions-item label="开发语言:"  span="2">{{formJi.devlang}}</el-descriptions-item>
                <el-descriptions-item label="简介:" span="3">{{formJi.intro}}</el-descriptions-item>
              </el-descriptions>
              <el-divider style="margin-top: 0%;"/>
              <el-descriptions title="" :column="2" style="margin-top: 1%;margin-left: 1%;background-color: transparent;">
                <el-descriptions-item label="模型归属单位:">{{formJi.mdUnit}}</el-descriptions-item>
                <el-descriptions-item label="联系方式:">{{formJi.mdContact}}</el-descriptions-item>
                <el-descriptions-item label="技术支持单位:">{{formJi.devUnit}}</el-descriptions-item>
                <el-descriptions-item label="联系方式:">{{formJi.devContact}}</el-descriptions-item>
              </el-descriptions>
            </el-tab-pane>
            <el-tab-pane label="模型参数" style="height: ;" :key="activeTabKey">
              <div style="display: flex;justify-content: space-between;margin-right: 2%;align-items: center;background-color: #e9e9eb;;width: 100%;">
                <div style="display: flex;align-items: center;margin-left: 1%;">
                  <el-checkbox v-model="checked1" label="参数是否分组" size="large"  @change="gatherTable"/>
                  <el-button  @click="showAddFenzu" style="margin-left: 10%;" type="success" size="mini" plain v-if="checked1">新增分组</el-button>
                </div>
                <div style="display: flex;justify-content: flex-end;margin-right: 1%;">
                  <el-button  @click="addCan" style="margin-left: 5%;" type="success" size="mini" plain :disabled="selFen">新增参数</el-button>
                  <el-button  @click="delAllCan" style="margin-top: 0%;" type="danger" size="mini" plain>删除</el-button>
                </div>
              </div>
              <div style="display: flex;">
                <div v-if="checked1" style="margin-top:1%;width: 10%;background-color: #F2F6FC;height:32vh;">
                  <el-tree :expand-on-click-node="false" ref="treeRef" :filter-node-method="filterNode" :current-node-key="currentNodeKey" class="treeLeft" 
                    :data="groupTreeData" @node-click="handleNodeClick" node-key="id" style="margin-left: 0%;margin-top: 1%;width: 100%;background-color: transparent;" default-expand-all :key="valueKet">
                        <template #default="{ node, data }">
                          <span  style="justify-content: space-between;display: flex;width: 100%;align-items: center;margin-left: -10%;">
                            <div class="custom-tree-node" style="align-items: center;line-height: 1.5;">
                              <span style="">{{ node.label }}</span>
                            </div>
                            <div style="margin-right: 1%;position: absolute;left:78%;">
                              <el-dropdown trigger="hover" @click.stop v-if="currentNodeKey === data.mgid">
                                  <el-icon><MoreFilled /></el-icon>
                                  <!-- <svg-icon icon-class="zhankai"/> -->
                                <template #dropdown>
                                  <el-dropdown-menu>
                                    <el-dropdown-item style="display: flex;"  @click="showEditFen">
                                      <el-icon class="el-icon--right" style="color: black;">
                                        <Connection />
                                      </el-icon>
                                      <div>
                                        编辑分组
                                      </div>
                                    </el-dropdown-item>
                                    <divider/>
                                    <el-dropdown-item style="display: flex;"  @click="delFenZu" divided>
                                      <el-icon class="el-icon--right" style="color: black;">
                                        <CircleClose />
                                      </el-icon>
                                      <div>
                                        删除分组
                                      </div>
                                    </el-dropdown-item>
                                  </el-dropdown-menu>
                                </template>
                              </el-dropdown>
                            </div>
                          </span>
                        </template>
                      </el-tree>
                </div>
                <div style="width: 90%;flex: 1;">
                  <el-table 
                style="margin-top: 1%;width: 100%;margin-left: 1%;overflow: auto;height:32vh;"
                :data="tableDataCan" 
                :cell-style="{ textAlign: 'center',padding:'3px 0px' }"
                :header-cell-style="{ textAlign: 'center', }"
                max-height="45vh"
                :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center'  }"
                border>
                    <el-table-column prop="parName" label="*参数英文名">
                      <template #default="scope" style="width: 120%;">
                          <el-input  v-model="scope.row.parEnname" style="width: 120%;margin-left: -10%;"/>
                      </template>
                    </el-table-column>
                    <el-table-column prop="parName" label="*参数名称">
                      <template #default="scope">
                          <el-input  v-model="scope.row.parName" style="width: 120%;margin-left: -10%;"/>
                      </template>
                    </el-table-column>
                    <el-table-column prop="parType" label="*参数类型" >
                      <template #default="scope">
                          <el-input  v-model="scope.row.parType" style="width: 120%;margin-left: -10%;"/>
                      </template>
                    </el-table-column>
                    <el-table-column prop="parLine" label="行号">
                      <template #default="scope">
                          <el-input  v-model="scope.row.parLine" style="width: 120%;margin-left: -10%;"/>
                      </template>
                    </el-table-column>
                    <el-table-column prop="parNote" label="维度">
                      <template #default="scope">
                          <el-input  v-model="scope.row.parDimen" style="width: 120%;margin-left: -10%;"/>
                      </template>
                    </el-table-column>
                    <el-table-column prop="parNote" label="表达式">
                      <template #default="scope">
                          <el-input  v-model="scope.row.parExpr" style="width: 120%;margin-left: -10%;"/>
                      </template>
                    </el-table-column>
                    <el-table-column prop="parNote" label="*默认值">
                      <template #default="scope">
                          <el-input  v-model="scope.row.parDefVal" style="width: 120%;margin-left: -10%;"/>
                      </template>
                    </el-table-column>
                    <el-table-column prop="parNote" label="参数范围">
                      <template #default="scope">
                          <el-input  v-model="scope.row.parRange" style="width: 120%;margin-left: -10%;"/>
                      </template>
                    </el-table-column>
                    <el-table-column prop="parNote" label="版本号">
                      <template #default="scope">
                          <el-input  v-model="scope.row.parVersion" style="width: 120%;margin-left: -10%;"/>
                      </template> 
                    </el-table-column>
                    <el-table-column prop="parNote" label="操作" width="85">
                      <template #default="scope">
                          <el-button type="danger" @click="delCan(scope.$index, scope.row)" text size="mini" style="margin-left: 0%;">删除</el-button>
                      </template> 
                    </el-table-column>
                </el-table>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="服务信息" style="" :key="activeTabKey"> 
              <el-button @click="showAddSer" type="primary" plain size="mini" style="margin-left: 1%;">新增服务</el-button>
              <el-table 
                :data="tableDataSer"
                style="width: 98%;margin-left: 1%;margin-top: 1%;height: 38vh;"
                :cell-style="{ padding:'5px' }"
                :header-cell-style="{height: heightAll*0.01+'px',}"
                :row-style="{ fontSize: '16px',textAlign:'center'}"
                border >
                <el-table-column type="index" label="序号" width="80">
                  <template #default="{ $index }">
                    <div style="text-align: center;">
                      {{ $index + 1 }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="服务名称"  width="200">
                </el-table-column>
                <el-table-column prop="type" label="接口类型"  width="200">
                </el-table-column>
                <el-table-column prop="url" label="接口地址"  show-overflow-tooltip/>
                <el-table-column prop="rqtype" label="请求方式" width="200"/>
                <el-table-column prop="rptype" label="响应类型" width="150">
                  <template #default="scope">
                    <div style="text-align: center;display: flex;" v-if="scope.row.rptype=='1'">
                      JSON
                    </div>
                    <div style="text-align: center;display: flex;" v-if="scope.row.rptype=='2'">
                      XML
                    </div>
                    <div style="text-align: center;display: flex;" v-if="scope.row.rptype=='3'">
                      HTML
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="address" label="操作" width="190">
                    <template #default="scope">
                        <div style="display: flex;justify-content: space-between;width: 100%;">
                          <el-button @click="editSer(scope.row)" type="primary" text size="mini" style="margin-left: 0%;">编辑</el-button>
                          <el-button @click="showTest(scope.row)" type="warning" text size="mini" style="margin-left:-5%;">调试</el-button>
                          <el-button type="danger" text size="mini" style="margin-left: -5%;" @click="delSer(scope.row)">注销</el-button>
                        </div>
                    </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
          <template #footer>
          <span class="dialog-footer">
              <el-button @click="dialogVisiblePei = false">取消</el-button>
              <el-button type="primary" @click="saveChangePar">
                提交
              </el-button>
          </span>
          </template>
        </el-dialog >
        <el-dialog @close="clearAdd" v-model="dialogVisibleSer" title="" width="70%" destroy-on-close
                 :key="tableKey">
        <div style="overflow: auto;height: 80vh;">
          <el-form size="mini" :key="tableKey" style="margin-top: 1%;width: 98%;" :model="formAdd"
                   label-position="right" ref="formRefAdd" label-width="120px" :rules="rulesAdd">
            <el-row :gutter="48">
              <el-col :span="10">
                <el-form-item label="服务名称:" prop="name" style="">
                  <div style="display: flex;width: 100%;justify-content: space-between;">
                    <el-input v-model="formAdd.name" style="width: 100%;"/>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="接口类型:" prop="" style="">
                  <div style="display: flex;width: 100%;justify-content: space-between;">
                    <el-select
                        v-model="formAdd.type"
                        style="width: 100%;margin-left: 0%;"
                    >
                      <el-option
                          v-for="item in optionsJieType"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                      />
                    </el-select>
                    <div style="display: flex;">

                    </div>
                  </div>

                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="48">
              <el-col :span="10">
                <el-form-item label="接口地址:" prop="url">
                  <el-input v-model="formAdd.url" style="width: 100%;" class="input-with-select">
                    <!-- <template #prepend>
                      <el-select v-model="formAdd.proxyPath" placeholder="Select" style="width: 115px;">
                        <el-option v-for="item in gatewayRouters" :key="item.id" :label="item.uri"
                                   :value="item.predicates"/>
                      </el-select>
                    </template> -->
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="请求方式:" prop="" style="">
                  <el-select
                      v-model="formAdd.rqtype"
                      style="width: 100%;margin-left: 0%;"
                  >
                    <el-option
                        v-for="item in optionsRqtype"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="48">
              <el-col :span="10">
                <el-form-item label="所属模型:" prop="mdid" style="">
                  <el-tree-select
                      v-model="formAdd.mdid"
                      :data="optionsMdid"
                      check-strictly
                      disabled
                      :render-after-expand="false"
                      style="width: 100%"
                  />
                  <!-- <el-select
                  v-model="formAdd.mdid"
                      style="width: 100%;margin-left: 0%;"
                  >
                      <el-option
                      v-for="item in optionsMdid"
                      :key="item.value"
                      :label="item.label"
                      :value="item.id"
                      />
                  </el-select> -->
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="排序:" prop="dcSort">
              <el-input-number v-model="formAdd.sort" :min="1" style="width: 15%;"/>
            </el-form-item>
            <el-row :gutter="48">
              <el-col :span="10">
                <el-form-item label="响应类型:" prop="" style="display: flex; align-items: center;">
                  <el-radio-group v-model="formAdd.rptype" class="ml-4"
                                  style="display: inline-flex; align-items: center;">
                    <el-radio label="1" size="large" style="display: inline-flex; align-items: center;">
                      <span style="position: relative; top: -1px">JSON</span> <!-- 微调文字位置 -->
                    </el-radio>
                    <el-radio label="2" size="large" style="display: inline-flex; align-items: center;">
                      <span style="position: relative; top: -1px">XML</span>
                    </el-radio>
                    <el-radio label="3" size="large" style="display: inline-flex; align-items: center;">
                      <span style="position: relative; top: -1px">HTML</span>
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <!-- <el-form-item label="服务分类:" prop="cateCode" style="">
                  <el-cascader v-model="formAdd.cateCode" :options="cascaderOptions" :props="props1" clearable
                               style="width: 100%;"></el-cascader>
                </el-form-item> -->
              </el-col>
              <!-- <el-col :span="8">
                  <el-form-item label="请求方式:" prop="name" style="">
                      <el-select
                      v-model="formJi.type"
                      :disabled="isEdit"
                          style="width: 100%;margin-left: 0%;"
                      >
                          <el-option
                          v-for="item in optionsType"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                          />
                      </el-select>
                  </el-form-item>
              </el-col> -->
            </el-row>
            <el-row :gutter="48">
              <el-col :span="13">
                <el-form-item label="服务说明:">
                  <el-input v-model="formAdd.intro" style="width: 100%;" :rows="3" resize="none" type="textarea"/>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
          <div style="margin-top: 2%;">
            <div style="display: flex;justify-content: space-between;align-items: center;">
              <div>
                请求参数
              </div>
              <div style="display: flex;justify-content: flex-end;margin-right: 2%;">
                <el-button @click="addCanAdd" style="margin-top: 1%;" type="success" size="mini" plain>新增参数
                </el-button>
              </div>
            </div>
            <div>
              <el-table
                  style="margin-top: 1%;width: 98%;"
                  :data="tableDataCanAdd"
                  :cell-style="{ textAlign: 'center',padding:'2px 0' }"
                  :header-cell-style="{ textAlign: 'center'}"
                  :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center'  }"
                  border>
                <el-table-column prop="itemName" label="参数字段(必填)">
                  <template #default="scope">
                    <div style="width: 100%;">
                      <el-input placeholder="请填写参数编码" type="primary" class="noBor" v-model="scope.row.paramCode"
                                size="mini" text style="margin-left: 0%;border: transparent;"></el-input>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="itemName" label="参数名称(必填)">
                  <template #default="scope">
                    <div style="width: 100%;">
                      <el-input placeholder="请填写参数名称" type="primary" class="noBor" v-model="scope.row.paramName"
                                size="mini" text style="margin-left: 0%;"></el-input>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="itemName" label="参数类型(必填)" width="200">
                  <template #default="scope">
                    <div style="width: 100%;">
                      <el-select
                          v-model="scope.row.paramType"
                          class="noBorSel"
                          placeholder=""
                          style="width: 100%;margin-left: 0%;"
                      >
                        <el-option
                            v-for="item in optionsCan"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                      </el-select>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="itemName" label="参数示例">
                  <template #default="scope">
                    <div style="width: 100%;">
                      <el-input placeholder="请填写参数示例" type="primary" class="noBor" v-model="scope.row.paramValue"
                                size="mini" text style="margin-left: 0%;"></el-input>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="itemName" label="参数说明">
                  <template #default="scope">
                    <div style="width: 100%;">
                      <el-input type="primary" class="noBor" v-model="scope.row.paramNote" size="mini" text
                                style="margin-left: 0%;"></el-input>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="address" label="操作" width="100">
                  <template #default="scope">
                    <div style="width: 100%;">
                      <el-button type="danger" @click="delCanAdd(scope.$index)" size="mini" text
                                 style="margin-left: 0%;">删除
                      </el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div style="margin-top: 2%;">
            <!-- <div>返回响应</div> -->
            <div style="color: #909399;margin-left: 8%;margin-top:1%;">此处填写本服务接口响应信息描述</div>
            <el-tabs type="card" style="margin-top: -2%;width: 98%;">
              <el-tab-pane label="响应内容">
                <div style="display: flex; flex-direction: column;">
                </div>
              </el-tab-pane>
            </el-tabs>
            <div style="overflow: auto;height: 20vh;margin-top: -1%;">
              <el-input placeholder="" :rows="8" type="textarea" v-model="JsonAdd" size="mini" text
                        style="margin-top: 0%;width: 98%;"></el-input>
            </div>
          </div>
          <div style="margin-top: 2.5%;margin-left: 0%;padding-bottom: 1%;">

            <el-tabs type="card" style="margin-top: -1.5%;width: 98%;">
              <el-tab-pane label="使用说明">

              </el-tab-pane>
            </el-tabs>
            <el-input placeholder="请输入示例" :rows="8" type="textarea" v-model="exampleAdd" size="mini" text
                      style="margin-top: -1%;width: 98%;"></el-input>
          </div>
        </div>
        <template #footer>
                  <span class="dialog-footer">
                    <el-button size="mini" @click="dialogVisibleSer = false">取消</el-button>
                    <el-button type="primary" v-if="isAddser" @click="addSer" size="mini">
                      提交
                    </el-button>
                    <el-button type="primary" v-if="!isAddser" @click="saveEditService" size="mini">
                      提交
                    </el-button>
                </span>
        </template>
      </el-dialog>
        <el-dialog v-model="dialogVisibleFen" :title="titleFen" width="30%" @close="clearFromTree" destroy-on-close :key="tableKey">
          <el-form :label-width="100" label-position="right" style="margin-left: 5%;margin-top: 2%;"  :model="formTree" class="demo-form-inline" ref="formRefTree" :rules="rulesTree">
            <el-form-item label="名称:" prop="parGroupName" style="">
              <el-input v-model="formTree.parGroupName" @blur="handleBlur" style="width: 75%;" placeholder=""  resize="none"/>
            </el-form-item>
            <el-form-item label="组编码:" prop="parGroupCode"  style="">
              <el-input v-model="formTree.parGroupCode" style="width: 75%;" placeholder=""  resize="none"/>
            </el-form-item>
            <el-form-item label="说明:" prop="parGroupNote">
              <el-input v-model="formTree.parGroupNote" style="width: 75%;" placeholder="" type="textarea"  resize="none"/>
            </el-form-item>
            <el-form-item label="排序:" prop="parGroupSort">
              <el-input-number v-model="formTree.parGroupSort" :min="1" style="width: 50%;"/>
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button size="mini" @click="dialogVisibleFen = false">取消</el-button>
              <el-button type="primary" @click="submitFen" size="mini">
                提交
              </el-button>
            </span>
          </template>
        </el-dialog>
        <el-dialog v-model="dialogVisibleDetail" :title="titleFen" width="80%" @close="clearFromTree" destroy-on-close :key="tableKey">
          <div ref="expandableDiv" :style="{ height: currentHeight + 'px' }" style="position: relative;width: 98%;margin-left: 1%;border: #47AFE5 1px solid;min-height: 10vh;margin-top: 1%;border-radius: 8px;">
            <div style="display: flex;margin-top: 1%;margin-left: 3%;">
              <div style="display: flex;align-items: center;width: 50%;">
                <div style="font-size: 16px;font-weight: bold;">
                  模型名称:
                </div>
                <div style="font-size: 15px;">
                  上海沿海风暴潮预报模型
                </div>
              </div>
              <div style="display: flex;align-items: center;width: 50%;">
                <div style="font-size: 16px;font-weight: bold;">
                  英文名称:
                </div>
                <div style="font-size: 15px;">
                  Shang Hai Shi Cheng Qu Hong Lao Fang Zhen Mo Xing 
                </div>
              </div>
            </div>
            <div style="display: flex;align-items: center;width: 50%;margin-top: 1%;margin-left: 3%;">
              <div style="font-size: 16px;font-weight: bold;">
                模型简介:
              </div>
              <div style="font-size: 15px;">
                Shang Hai Shi Cheng Qu Hong Lao Fang Zhen Mo Xing 
              </div>
            </div>
            <div v-if="isExpanded">
              <div style="display: flex;margin-top: 1%;margin-left: 3%;">
                <div style="display: flex;align-items: center;width: 50%;">
                  <div style="font-size: 16px;font-weight: bold;">
                    版本号:
                  </div>
                  <div style="font-size: 15px;">
                  </div>
                </div>
                <div style="display: flex;align-items: center;width: 50%;">
                  <div style="font-size: 16px;font-weight: bold;">
                    接口分类:
                  </div>
                  <div style="font-size: 15px;">
                  </div>
                </div>
              </div>
              <div style="display: flex;margin-top: 1%;margin-left: 3%;">
                <div style="display: flex;align-items: center;width: 50%;">
                  <div style="font-size: 16px;font-weight: bold;">
                    开发语言:
                  </div>
                  <div style="font-size: 15px;">
                    
                  </div>
                </div>
              </div>
              <div style="display: flex;margin-top: 1%;margin-left: 3%;">
                <div style="display: flex;align-items: center;width: 50%;">
                  <div style="font-size: 16px;font-weight: bold;">
                    模型归属单位:
                  </div>
                  <div style="font-size: 15px;">
                  </div>
                </div>
                <div style="display: flex;align-items: center;width: 50%;">
                  <div style="font-size: 16px;font-weight: bold;">
                    联系方式:
                  </div>
                  <div style="font-size: 15px;">
                  </div>
                </div>
              </div>
              <div style="display: flex;margin-top: 1%;margin-left: 3%;">
                <div style="display: flex;align-items: center;width: 50%;">
                  <div style="font-size: 16px;font-weight: bold;">
                    技术支持单位:
                  </div>
                  <div style="font-size: 15px;">
                  </div>
                </div>
                <div style="display: flex;align-items: center;width: 50%;">
                  <div style="font-size: 16px;font-weight: bold;">
                    联系方式:
                  </div>
                  <div style="font-size: 15px;">
                  </div>
                </div>
              </div>
            </div>
            <el-link :icon="isExpanded ? ArrowUp : ArrowDown"   @click="zhankai" type="primary"  size="mini" style="position: absolute;right:1%;bottom: 5%;">{{ isExpanded ? '收起' : '展开' }}</el-link >
          </div>
          <div style="position: relative;width: 98%;margin-left: 1%;border: #47AFE5 1px solid;height: 40vh;margin-top: 1%;border-radius: 8px;">
            <div style="width: 100%;height:3vh;background-color: #6CA8DB;display: flex;align-items: center;padding-left: 1%;border-top-left-radius: 8px;border-top-right-radius: 8px;color: white;font-size: 14px">
              <div @click="changeBack(0)" style="width: 5%;height: 100%;display: grid; place-items: center;cursor: pointer;" :style="{backgroundColor: activeColor[0]}">
                服务信息 
              </div>
              <div @click="changeBack(1)" style="width: 5%;height: 100%;display: grid; place-items: center;cursor: pointer;" :style="{backgroundColor: activeColor[1]}">
                数据信息 
              </div>
              <div @click="changeBack(2)" style="width: 5%;height: 100%;display: grid; place-items: center;cursor: pointer;" :style="{backgroundColor: activeColor[2]}">
                工作流程 
              </div>
              <div @click="changeBack(3)" style="width: 5%;height: 100%;display: grid; place-items: center;cursor: pointer;" :style="{backgroundColor: activeColor[3]}">
                任务信息 
              </div>
              <div @click="changeBack(4)" style="width: 5%;height: 100%;display: grid; place-items: center;cursor: pointer;" :style="{backgroundColor: activeColor[4]}">
                消息信息 
              </div>
              <div @click="changeBack(5)" style="width: 5%;height: 100%;display: grid; place-items: center;cursor: pointer;" :style="{backgroundColor: activeColor[5]}">
                日志信息 
              </div>
              <div @click="changeBack(6)" style="width: 5%;height: 100%;display: grid; place-items: center;cursor: pointer;":style="{backgroundColor: activeColor[6]}">
                访问统计 
              </div>
            </div>
          </div>
          <template #footer>
            <span class="dialog-footer">
              <el-button size="mini" @click="dialogVisibleDetail = false">取消</el-button>
              <el-button type="primary" @click="submitFen" size="mini">
                提交
              </el-button>
            </span>
          </template>
        </el-dialog>
        <el-dialog @close="clearAdd" v-model="dialogVisibleTest" :title="formJi.name" width="60%" destroy-on-close :key="tableKey">
          <div style="margin-left: 1%;">
            {{ detailJson.name }}:
          </div>
          <div style="display: flex;align-items: center;width: 98%;margin-top: 1%;">
            <div v-if="detailJson.rqtype==='GET'">
              <el-tag class="ml-2" type="warning">GET</el-tag>
            </div>
            <div v-if="detailJson.rqtype==='POST'">
              <el-tag class="ml-2" type="warning">POST</el-tag>
            </div>
            
            <div style="margin-left: 1%;">
              {{ detailJson.url }}
            </div>
            <!-- <svg-icon @click="test" icon-class="startTest" style="margin-left: 1%;width: 50px;height: 25px;cursor: pointer;"/> -->
            <el-button @click="test" size="mini" type="primary" style="margin-left: 1%;cursor: pointer;" plain>点击调试</el-button>
          </div>
          <div style="margin-top:2%;font-size: 18px;">
            请求参数
          </div>
           <el-table 
            style="margin-top: 1%;width: 98%;"
            :data="tableDataCan" 
            :cell-style="{ textAlign: 'center',padding:'2px 0' }"
            :header-cell-style="{ textAlign: 'center'}"
            :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center'  }"
            border >
                <el-table-column prop="paramCode" label="参数字段">
                </el-table-column>
                <el-table-column prop="paramName" label="参数名称">
                </el-table-column>
                <el-table-column prop="paramType" label="参数类型" width="200">
                </el-table-column>
                <el-table-column prop="paramValue" label="测试值">
                  <template #default="scope">
                      <div style="width: 100%;">
                          <el-input placeholder="请填写" type="primary" class="noBor" v-model="scope.row.paramValue" size="mini" text style="margin-left: 0%;"></el-input>
                      </div>
                  </template>
                </el-table-column>
                <el-table-column prop="paramNote" label="参数说明" show-overflow-tooltip>
                </el-table-column>
            </el-table>
            <div style="margin-top:4%;font-size: 18px;">
              测试结果
            </div>
            <el-input :style="isError ? '--el-input-text-color: red' : ''"   placeholder="" :rows="8" type="textarea" v-model="dataReturn" size="mini" text style="margin-top: 1%;width: 98%;color: red;" ></el-input>
          <template #footer>
            <span class="dialog-footer">
            </span>
          </template>
        </el-dialog>
    </div>
  </div>
</template>
<script   setup>
import { getModelList,addModel,delMdid,getModelDetail,updateModel,
  addGroup,getParamsList,changePar,delAllPar,getModelParList,delFen,changeShenhe,delModelPar } from "@/api/register/regCom";
import {getServiceInfo,addService,modelTreeSelect,getSerDe,delService,testService,
  addServiceParam,editService} from "@/api/service/info";
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import {getGatewayRouters} from "@/api/gateway/gatewayRouters.js";
import { Search } from '@element-plus/icons-vue'
import {
  ArrowLeft,
  ArrowUp,
  ArrowDown
} from '@element-plus/icons-vue'
import { reactive } from 'vue'
import { forwardRefProps } from 'element-plus/es/components/tooltip-v2/src/forward-ref.mjs';
import { getToken } from "@/utils/auth";
import { fa } from "element-plus/es/locales.mjs";
import { column } from "element-plus/es/components/table-v2/src/common.mjs";
import { TRUE } from "sass";
import { editGroup } from "../../../api/register/regCom";
import pinyin from 'pinyin';

const { proxy } = getCurrentInstance();
const dialogVisibleFen = ref(false)
const currentHeight = ref(100)
const dragTableRef = ref()
const isaddFen = ref(false)
const isAddser = ref(true)
const dialogVisibleDetail = ref(false)
const dialogVisible = ref(false)
const dialogVisibleDe = ref(false)
const dialogVisiblePei = ref(false)
const active = ref(1)
const isEdit = ref(true)
const name = ref('')
const isAdd = ref(true)
const mdUnit = ref('')
const tableDataCanAdd = ref([])
const JsonAdd = ref('')
const isElse = ref(false)
const elseLan = ref('')
const tableDataCan = ref([])
const selFen = ref(true)
const groupTreeData = ref([])
const isExpanded = ref(false)
const expandableDiv = ref(null)
const parRow = ref({})
const initialHeight = 100
const optionsMdid = ref([])
const activeColor = ref(['#6CA8DB','#6CA8DB','#6CA8DB','#6CA8DB','#6CA8DB','#6CA8DB','#6CA8DB'])
const expandedHeight = 250
const tableDataSer = ref([])
const formAdd = ref({
  name: '',
  cateCode: '',
  type: '',
  proxyPath: '',
  url: '',
  rqtype: '',
  rptype: '',
  intro: '',
  mdid: ''
});
const rulesAdd = reactive({
  mdid: [{required: true, message: '必填', trigger: 'blur'}],
  name: [{required: true, message: '必填', trigger: 'blur'}],
  url: [{required: true, message: '必填', trigger: 'blur'}],
});
const formRefAdd = ref();
const optionsRqtype = ref([
  {
    label: 'GET',
    value: 'GET'
  },
  {
    label: 'POST',
    value: 'POST'
  },
])
const formJi = ref({
  name:'',
  version:'',
  enname:'',
  devlang:'',
  intro:'',
  type:'',
  mdContact:'',
  mdUnit:'',
  devUnit:'',
  devContact:'',
  deployDir:'',
  deployIp:'',
  deployPort:'',
  mirrorImageUrl:'',
  mdRunCmd:'',
  envOs:'',
  envDisk:'',
  envGpuMem:'11',
  evnArmX86:'',
  envCpuNum:'',
  envGpuType:'',
  envGpuNum:'2',
  envMem:'',
  mdInNote:'',
  mdOutNote:''
});
const activeTabKey = ref(0)
const rulesJi = reactive({
  name: [{ required: true, message: '必填', trigger: 'blur' }],
  enname: [{ required: true, message: '必填', trigger: 'blur' }],
});
const formRefJi = ref();

const formZu = ref({
  mirrorImageEurl:'',
  mdCPU:'',
  mdGPU:''
});
const rulesZu = reactive({
  mirrorImageEurl: [{ required: true, message: '必填', trigger: 'blur' }],
  mdCPU: [{ required: true, message: '必填', trigger: 'blur' }],
});
const formRefZu = ref();

const formTree = ref({
  parGroupSort:1,
  parGroupNote:'',
  parGroupName:'',
  parGroupCode:''
});
const rulesTree = reactive({
  parGroupName: [{ required: true, message: '必填', trigger: 'blur' }],
  parGroupSort: [{ required: true, message: '必填', trigger: 'blur' }],
  parGroupCode: [{ required: true, message: '必填', trigger: 'blur' }],
});
const formRefTree = ref();
const optionsCan = ref([
  {
    label: "string",
    value: 'string'
  },
  {
    label: "int",
    value: 'int'
  },
  {
    label: "boolean",
    value: 'boolean'
  },
  {
    label: "array",
    value: 'array'
  },
  {
    label: "object",
    value: 'object'
  },
  {
    label: "number",
    value: 'number'
  },
  {
    label: "null",
    value: 'null'
  },
  {
    label: "any",
    value: 'any'
  },

])
const activeName = ref('first')
const titleFen = ref('');
const upload = reactive({
  // 是否显示弹出层（用户导入）
  open: false,
  // 弹出层标题（用户导入）
  title: "",
  // 是否禁用上传
  isUploading: false,
  // 是否更新已经存在的用户数据
  updateSupport: '',
  // 设置上传的请求头部
  headers: { Authorization: "Bearer " + getToken() },
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + "/common/upload"
});
const downUrl = ref(import.meta.env.VITE_APP_BASE_API)
const tableKey = ref(0);
const totalComReg = ref()
const parMgid = ref()
const currentPage = ref(1)
const tableData2 = ref([ 
  { date1:'流域拓扑', date2:'', date3:'single', date4:'基于水文响应' },
  { date1:'雨量站', date2:'', date3:'single', date4:'基于水文响应' },
  { date1:'水库', date2:'', date3:'single', date4:'基于水文响应' }
]);
const tableData3 = ref([
  { date1:'流域拓扑', date2:'', date3:'single', date4:'基于水文响应' },
  { date1:'水库', date2:'', date3:'single', date4:'基于水文响应' },
  { date1:'雨量站', date2:'', date3:'single', date4:'基于水文响应' }
]);
const checked1 = ref(true)
const tableData1= [{date1:'初始状态',
  date2:'sts',
  date3:'数据项',
  date4:'初始状态',
  date5:'是',
  date6:'否',
  date7:'2023-09-08'
}]
const checkGroup = [
    {label:'水文预报'},
    {label:'维水动力'},
    {label:'二维水动力'},
    {label:'机器学习'},
]
let tableData = ref([{name:'1'}])
const heightAll = window.innerHeight
const valueHelpSel = '';
const tableheight = window.innerHeight*0.8
const optionsJieType =ref([
  {
    value: 'RESTful',
    label: 'RESTful',
  },
  {
    value: 'WebService',
    label: 'WebService',
  },
  {
    value: 'HTTP',
    label: 'HTTP',
  },
  {
    value: 'WebSocket',
    label: 'WebSocket',
  },
])
const optionsType = [
  {
    value: '1',
    label: '水利专业模型',
  },
  {
    value: '2',
    label: '排水专业模型',
  },
  {
    value: '3',
    label: '供水专业模型',
  },
  {
    value: '4',
    label: '海洋专业模型',
  },
]
const optionsEnv = ref([
  {
    value: 'windwos',
    label: 'windwos',
  },
  {
    value: 'Linux',
    label: 'Linux',
  },
  {
    value: 'Ubuntu',
    label: 'Ubuntu',
  },
  {
    value: 'CentOS',
    label: 'CentOS',
  },
  {
    value: 'Debian',
    label: 'Debian',
  },
  {
    value: 'RedHat',
    label: 'RedHat',
  },
  {
    value: '统信',
    label: '统信',
  },
  {
    value: '麒麟',
    label: '麒麟',
  },
  {
    value: '欧拉',
    label: '欧拉',
  },
])
const uploadRef = ref(null);
const fileList = ref([]);
const fileList1 = ref([]);
const tableDataCanAll = ref([]);
const parForm = ref('')
const currentNodeKey = ref('')
const parTree = ref({})
onMounted(() => {
  getModelListTable()
  // addNewModel()
});

const handleChange = (file, files) => {
  fileList.value = files;
};
const handleChange1 = (file, files) => {
  fileList1.value = files;
};
function changeBack(index){
  active.value = index
  for(var i=0;i<activeColor.value.length;i++){
    if(i===index){
      activeColor.value[i] = 'rgb(51, 126, 204)'
    }
    else{
      activeColor.value[i] = ''
    }
  }
}
function zhankai(){
  isExpanded.value = !isExpanded.value
  currentHeight.value = isExpanded.value ? expandedHeight : initialHeight
}
function getChineseInitials(str) {
    if (!str || typeof str !== 'string') return '';
    
    // 拆分字符串为字符数组
    const chars = str.split('');
    const result = chars.map(char => {
        // 判断是否为中文（Unicode范围：\u4e00-\u9fa5）
        if (/[\u4e00-\u9fa5]/.test(char)) {
            // 获取中文首字母拼音（忽略多音字）
            const pinyinArr = pinyin(char, {
                style: pinyin.STYLE_FIRST_LETTER,
                heteronym: false
            });
            return pinyinArr[0][0]; // 返回首字母
        }
        return char; // 非中文字符直接保留（若需忽略英文可改为空字符串）
    });
    return result.join('');
}
function getGate(){
  getGatewayRouters().then(res => {
    gatewayRouters.value = res.data
  })
}
function shenhe(row){
  var par = {
    mdid:row.mdid,
    audit:'0',
    devkind:'APP'
  }
  changeShenhe(par).then(res=>{
    if(res.code===200){
      proxy.$modal.msgSuccess("已可测试！");
      getModelListTable()
    }
  })
}
function addCanAdd() {
  var par = {
    parName: ''
  }
  tableDataCanAdd.value.push(par)
}

function delCanAdd(index) {
  tableDataCanAdd.value.splice(index, 1)
}
const exampleAdd = ref('')
const parId = ref('')
const isError = ref(false)  
const dataReturn = ref('')
function test(){
  var par = detailJson.value
  par.params = tableDataCan.value
  testService(par).then(res=>{
    if(res.code===444){
      isError.value = true
    }else{
      isError.value = false
    }
    console.log(res)
    dataReturn.value = res.msg
  })
}
async function saveEditService() {
  console.log(tableDataCanAdd.value.length)
  var valid
  await formRefAdd.value.validate((valid1) => {
    valid = valid1
  });
  if (valid) {
    var par = formAdd.value
    par.example = exampleAdd.value
    par.rpcontent = JsonAdd.value
    var validTable = true
    for (const item of tableDataCanAdd.value) {
      if (item.paramCode.length === 0 || item.paramName.length === 0 || item.paramType.length === 0) {
        proxy.$modal.msgError("请填写必填项！");
        validTable = false
        break;
      }
    }
    if (validTable) {
      await editService(par).then(res => {
        if (res.code === 200) {
          var parCan = tableDataCanAdd.value
          if(parCan.length!== 0){
            var parRule = true
            parCan.forEach((item, index) => {
              item.srvId = res.data.srvId
              if(item.paramCode&&item.paramType&&item.paramName){
                item.parRule = true
              }
              else{
                item.parRule = false
              }
              if (item.paramName === '') {
                parCan.splice(index, 1)
              }
            });
            parCan.forEach((item, index) => {
              if(item.parRule===false){
                parRule = false
              }
            })
            if(parRule){
              addServiceParam(parCan).then(res1 => {
                if (res1.code === 200) {
                  proxy.$modal.msgSuccess("修改成功");
                  dialogVisibleSer.value = false
                  showPei(parRow.value)
                }
              })
            }
            else{
              proxy.$modal.msgError("请填写必填项！");
            }
          }
          else{
            proxy.$modal.msgSuccess("修改成功");
            dialogVisibleSer.value = false
            showPei(parRow.value)
          }
        }
      })
    }
  }
}
function clearAdd(){
  formAdd.value = {
    name: '',
    cateCode: '',
    type: '',
    proxyPath: '',
    url: '',
    rqtype: '',
    rptype: '',
    intro: '',
    mdid: parId.value
  }
  tableDataCanAdd.value = []
  JsonAdd.value = ''
  exampleAdd.value = ''
}
async function addSer() {
  var valid
  await formRefAdd.value.validate((valid1) => {
    valid = valid1
  });
  if (valid) {
    var par = formAdd.value
    par.example = exampleAdd.value
    par.rpcontent = JsonAdd.value
    console.log(par)
    await addService(par).then(res => {
      if (res.code === 200) {
        var parCan = tableDataCanAdd.value
        if (tableDataCanAdd.value.length !== 0) {
          var parRule = true
          parCan.forEach((item, index) => {
            item.srvId = res.data.srvId
            if(item.paramCode&&item.paramType&&item.paramName){
              item.parRule = true
            }
            else{
              item.parRule = false
            }
            if (item.paramName === '') {
              parCan.splice(index, 1)
            }
          });
          parCan.forEach((item, index) => {
            if(item.parRule===false){
              parRule = false
            }
          })
          if(parRule){
            addServiceParam(parCan).then(res1 => {
              if (res1.code === 200) {
                proxy.$modal.msgSuccess("新增成功");
                dialogVisibleSer.value = false
                showPei(parRow.value)
              }
            })
          }
          else{
            proxy.$modal.msgError("请填写必填项！");
          }
        }

      }
    })
  }
}
// if(tableDataCanAll.value.length>0){
//     var parRule = true
//     tableDataCanAll.value.forEach((item, index, array) => { 
//       item.mdid = parForm.value.mdid
//       item.parCate = 'int'
//       if(item.parDefVal&&item.parType&&item.parName&&item.parEnname){
//         item.parRule = true
//       }
//       else{
//         item.parRule = false
//       }
//     })
//     tableDataCanAll.value.forEach((item, index, array) => { 
//       if(item.parRule===false){
//         parRule = false
//       }
//     })
//     if(parRule === true){
//       changePar(tableDataCanAll.value).then(res=>{
//         if(res.code===200){
//           proxy.$modal.msgSuccess("修改成功");
//           dialogVisiblePei.value = false
//           getModelListTable()
//         }
//       })
//     }
//     else{
//       proxy.$modal.msgError("请填写必填项！");
//     }
//   }
function handleBlur(){
  formTree.value.parGroupCode = getChineseInitials(formTree.value.parGroupName)
}
function gatherTable(){
  if(checked1.value===false){
    var keyArray = []
    tableDataCanAll.value.forEach(item=>{
      keyArray.push(item.key)
    })
    tableDataCanAll.value.forEach(item=>{
      tableDataCan.value.forEach(item2=>{
        if(item2.key===item.key){
          item = item2
        }
      })
    })
    tableDataCan.value.forEach(item=>{
      if(!keyArray.includes(item.key)){
        tableDataCanAll.value.push(item)
      }
    })
    currentNodeKey.value = null
    selFen.value = true
    tableDataCan.value = tableDataCanAll.value
  }
}
function showAddSer(){
  dialogVisibleSer.value = true
  isAddser.value = true
}
async function editSer(row){
  dialogVisibleSer.value = true
  isAddser.value = false
  parId.value = row.srvId
  await getSerDe(row.srvId).then(res => {
    tableDataCanAdd.value = res.data.list
    JsonAdd.value = res.data.ptService.rpcontent
    formAdd.value = res.data.ptService
    exampleAdd.value = res.data.ptService.example
  })
}
const dialogVisibleSer = ref(false)
function handleNodeClick(node, data){
    console.log(node.mgid)
    parMgid.value = node.mgid
    var keyArray = []
    selFen.value = false
    tableDataCanAll.value.forEach(item=>{
      keyArray.push(item.key)
    })
    tableDataCanAll.value.forEach(item=>{
      tableDataCan.value.forEach(item2=>{
        if(item2.key===item.key){
          item = item2
        }
      })
    })
    tableDataCan.value.forEach(item=>{
      if(!keyArray.includes(item.key)){
        tableDataCanAll.value.push(item)
      }
    })
    parTree.value = data.data
    tableDataCan.value = []
    tableDataCanAll.value.forEach(item=>{
      if(item.parGroup==data.data.parGroupCode){
        tableDataCan.value.push(item)
      }
    })
    currentNodeKey.value = data.data.mgid
}
function submitFen(){
  formTree.value.mdid = parForm.value.mdid
  console.log(isaddFen.value)
  if(isaddFen.value===true){
    addGroup(formTree.value).then(res=>{
      if(res.code===200){
        var par = {
          mdid:parForm.value.mdid
        }
        getModelParList(par).then(res1=>{
          proxy.$modal.msgSuccess("新增成功");
          groupTreeData.value = res1.data
          groupTreeData.value.forEach((item, index, array) => { 
          item.label = item.parGroupName
          item.value = item.parGroupCode
          dialogVisibleFen.value = false
        })
      })
      }
    })
  }
  else{
    editGroup(formTree.value).then(res=>{
      if(res.code===200){
        var par = {
          mdid:parForm.value.mdid
        }
        getModelParList(par).then(res1=>{
          proxy.$modal.msgSuccess("修改成功");
          groupTreeData.value = res1.data
          groupTreeData.value.forEach((item, index, array) => { 
          item.label = item.parGroupName
          item.value = item.parGroupCode
          dialogVisibleFen.value = false
        })
      })
      }
    })
  }
  
}
function showEditFen(){
  isaddFen.value = false
  dialogVisibleFen.value = true
  formTree.value = parTree.value
}
function showAddFenzu(){
  isaddFen.value = true
  dialogVisibleFen.value = true
}
function delFenZu(){
  proxy.$modal.confirm('是否确认删除所有参数？').then(function () {
    return delFen(parTree.value.mgid);
  }).then(() => {
    var par = {
      mdid:parForm.value.mdid
    }
    getModelParList(par).then(res1=>{
        groupTreeData.value = res1.data
        groupTreeData.value.forEach((item, index, array) => { 
        item.label = item.parGroupName
        item.value = item.parGroupCode
        dialogVisibleFen.value = false
      })
    })
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}
function delAllCan(){
  proxy.$modal.confirm('是否确认删除所有参数？').then(function () {
    return delAllPar(parForm.value.mdid);
  }).then(() => {
    tableDataCan.value = []
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}
function saveChangePar(){
  if(checked1.value===true&&tableDataCan.value.length>0){
    tableDataCan.value.forEach((item, index, array) => { 
      tableDataCanAll.value.push(item)
    })
  }
  if(tableDataCanAll.value.length>0){
    var parRule = true
    tableDataCanAll.value.forEach((item, index, array) => { 
      item.mdid = parForm.value.mdid
      item.parCate = 'int'
      if(item.parDefVal&&item.parType&&item.parName&&item.parEnname){
        item.parRule = true
      }
      else{
        item.parRule = false
      }
    })
    tableDataCanAll.value.forEach((item, index, array) => { 
      if(item.parRule===false){
        parRule = false
      }
    })
    if(parRule === true){
      changePar(tableDataCanAll.value).then(res=>{
        if(res.code===200){
          proxy.$modal.msgSuccess("修改成功");
          dialogVisiblePei.value = false
          getModelListTable()
        }
      })
    }
    else{
      proxy.$modal.msgError("请填写必填项！");
    }
  }
  else{
    var par = {
      mdid:parForm.value.mdid
    }
    delModelPar(par).then(res=>{
      if(res.code===200){
        proxy.$modal.msgSuccess("修改成功");
        dialogVisiblePei.value = false
        getModelListTable()
      }
    })
  }
}
async function showPei(row){
  tableDataSer.value = []
  dialogVisiblePei.value = true
  parRow.value = row
  var par = {
    mdid:row.mdid
  }
  parId.value = row.mdid
  formAdd.value.mdid = row.mdid
  await getServiceInfo(par).then(res=>{
      if(res.data){
        tableDataSer.value = res.data.serviceList
      }
      var par = [
      {
        value:'1',
        label:'JSON'
      },
      {
        value:'2',
        label:'XML'
      },
      {
        value:'3',
        label:'HTML'
      }
    ]
    for(var i = 0; i < par.length; i++){
      for(var i1 = 0; i1 < tableDataSer.value.length; i1++){
        if(par[i].value === tableDataSer.value[i1].rptype){
          tableDataSer.value[i1].rptype = par[i].label
        }
      }
    }
  })
  await getModelParList(par).then(res=>{
    groupTreeData.value = res.data
    groupTreeData.value.forEach((item, index, array) => { 
      item.label = item.parGroupName
      item.value = item.parGroupCode
    })
  })
  await getModelDetail(row.mdid).then(res=>{
    parForm.value = res.data
    formJi.value = res.data
  })
  
  await getParamsList(par).then(res=>{
    tableDataCan.value = res.data
    tableDataCan.value.forEach(item=>{
      item.key = Math.random()
    })
  }) 
  tableDataCanAll.value = JSON.parse(JSON.stringify(tableDataCan.value))
}
function delCan(index,row){
  tableDataCan.value.splice(index, 1)
  tableDataCanAll.value.forEach((item,index,array)=>{
    if(item.key===row.key){
      array.splice(index,1)
    }
  })
}
const detailJson = ref({})
const dialogVisibleTest = ref(false)
function showTest(row){
  dialogVisibleTest.value = true
  dataReturn.value = ''
  getSerDe(row.srvId).then(res=>{
    if(res.code===200){
      detailJson.value = res.data.ptService
      console.log(detailJson.value)
      dialogVisibleTest.value = true
      tableDataCan.value = res.data.list
    }
  })
}
function convertNullToEmptyString(data) {
  // 如果不是对象或者是null，直接返回（基础类型）
  if (typeof data !== 'object' || data === null) {
    return data;
  }

  // 如果是数组，遍历每个元素并递归处理
  if (Array.isArray(data)) {
    return data.map(item => convertNullToEmptyString(item));
  }

  // 处理普通对象
  const result = {};
  for (let key in data) {
    if (data.hasOwnProperty(key)) {
      const value = data[key];
      
      if (value === null) {
        // 将null直接转为空字符串
        result[key] = '';
      } else if (typeof value === 'object') {
        // 递归处理嵌套对象或数组
        result[key] = convertNullToEmptyString(value);
      } else {
        // 其他类型的值直接复制
        result[key] = value;
      }
    }
  }
  return result;
}
function showDe(row){
  dialogVisibleDe.value = true
  getModelDetail(row.mdid).then(res=>{
    parForm.value = res.data
    formJi.value = res.data
    formJi.value = convertNullToEmptyString(formJi.value)
    if(formJi.value.devlang!=='java'&&formJi.value.devlang!=='nodeJs'&&formJi.value.devlang!=='python'&&formJi.value.devlang!=='c/c++'){
      isElse.value = true
      formJi.value.devlang = 1
    }
  })
}
function addCan(){
  tableDataCan.value.push({
    key:Math.random(),
    mgid:parMgid.value,
    parGroup:parTree.value.parGroupCode
  })
  console.log(tableDataCan.value)
}
function downOut(){
  var url = window.location.host + formJi.value.mdOutFile
  console.log(url)
  const link = document.createElement('a');
  link.href = 'http://' + url.toString();
  link.download = formJi.value.mdOutName; // 自定义文件名（可选）
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}
function downIn(){
  var url = window.location.host + formJi.value.mdInFile
  console.log(url)
  const link = document.createElement('a');
  link.href = 'http://' + url.toString();
  link.download = formJi.value.mdInName; // 自定义文件名（可选）
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}
function delModel(row){
  proxy.$modal.confirm('是否确认删除？').then(function () {
    return delMdid(row.mdid);
  }).then(() => {
    getModelListTable();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}
async function showEdit(row){
  dialogVisible.value = true
  isEdit.value = true
  await nextTick()
  getModelDetail(row.mdid).then(res=>{
    formJi.value = res.data
    if(formJi.value.devlang!=='java'&&formJi.value.devlang!=='nodeJs'&&formJi.value.devlang!=='python'&&formJi.value.devlang!=='c/c++'){
      console.log(formJi.value.devlang)
      isElse.value = true
      formJi.value.devlang = '1'
    }
  })
}
async function subEdit(){
  if(fileList.value&&fileList.value.length>0&&fileList1.value.length===0){
    await proxy.$refs["uploadRef"].submit();
  }
  else if(fileList1.value&&fileList1.value.length>0&&fileList1.value.length===0){
    await proxy.$refs["uploadRef1"].submit();
  }
  else if(fileList.value&&fileList1.value&&fileList.value.length>0&&fileList1.value.length>0){
    await proxy.$refs["uploadRef1"].submit();
    await proxy.$refs["uploadRef"].submit();
  }
  else{
    await formRefJi.value.validate((valid) => {
      if(valid){
        if(formJi.value.devlang==='1'){
          formJi.value.devlang = elseLan.value
        }
          delete formJi.value.msort
          formJi.value.devkind = 'APP'
          updateModel(formJi.value).then(res=>{
          if(res.code===200){
            proxy.$modal.msgSuccess("修改成功");
            dialogVisible.value = false
            getModelListTable()
          }
        })
      }
    });
  }
}
async function submit(){
  formRefJi.value.validate((valid) => {
    console.log(formJi.value,valid)
    if(valid){
        if(formJi.value.devlang==='1'){
          formJi.value.devlang = elseLan.value
        }
        delete formJi.value.msort
        formJi.value.devkind = 'APP'
        formJi.value.cateid = '776eba74-eaeb-47ca-8436-e05ed87b68ec'//区分目录
        addModel(formJi.value).then(res=>{
        if(res.code===200){
          proxy.$modal.msgSuccess("新增成功");
          dialogVisible.value = false
          getModelListTable()
        }
      })
    }
  })
}
async function handleFileSuccess1(response, file, fileList){
  formJi.value.mdOutFile = response.originalFilename
  formJi.value.mdOutName = response.fileName
  await formRefJi.value.validate((valid) => {
    if(valid){
        if(formJi.value.devlang==='1'){
          formJi.value.devlang = elseLan.value
        }
        delete formJi.value.msort
        formJi.value.devkind = 'APP'
        updateModel(formJi.value).then(res=>{
        if(res.code===200){
          proxy.$modal.msgSuccess("修改成功");
          dialogVisible.value = false
          getModelListTable()
        }
      })
    }
  });
};
async function handleFileSuccess(response, file, fileList){
  formJi.value.mdInFile = response.originalFilename
  formJi.value.mdInName = response.fileName
  await formRefJi.value.validate((valid) => {
    if(valid){
        if(formJi.value.devlang==='1'){
          formJi.value.devlang = elseLan.value
        }
        delete formJi.value.msort
        formJi.value.devkind = 'APP'
        updateModel(formJi.value).then(res=>{
        if(res.code===200){
          proxy.$modal.msgSuccess("修改成功");
          dialogVisible.value = false
          getModelListTable()
        }
      })
    }
  });
};
function clearFromTree(){
  formTree.value = {}
}
async function delSer(row) {
  proxy.$modal.confirm('是否确认删除？').then(function () {
    return delService(row.srvId);
  }).then(() => {
    showPei(parRow.value)
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {
  });
}
function clearForm(){
  tableDataCan.value = []
  formAdd.value = {
  }
  tableDataCanAdd.value = []
  checked1.value = false
  activeName.value = 'first'
  fileList.value = []
  fileList1.value = []
  formJi.value = {
    name:'',
    version:'',
    enname:'',
    devlang:'',
    intro:'',
    type:'',
    mdContact:'',
    mdUnit:'',
    devUnit:'',
    devContact:'',
    deployDir:'',
    deployIp:'',
    deployPort:'',
    mirrorImageUrl:'',
    mdRunCmd:'',
    envOs:'',
    envDisk:'',
    envGpuMem:'',
    evnArmX86:'',
    envCpuNum:'',
    envGpuType:'',
    envGpuNum:'',
    envMem:'',
    mdInNote:'',
    mdOutNote:''
  }
}
function reg(){
  isEdit.value = false
  dialogVisible.value = true
}
async function getTreeLeft() {
  var par = {
    params:{
      level:'2',
      devkind:'APP'
    }
  }
  await modelTreeSelect(par).then(res => {
    par = res.data
    optionsMdid.value = filterModelNodes(par)
  })
  
}
function filterModelNodes(nodes) {
  if (!Array.isArray(nodes)) return [];

  const result = [];
  for (const node of nodes) {
    // 递归处理子节点（如果有）
    const filteredChildren = node.children ? filterModelNodes(node.children) : [];

    if (node.nodeType === 'MODEL') {
      // 保留当前节点，并更新其子节点
      node.value = node.id
      result.push({
        ...node,
        children: filteredChildren
      });
    } else {
      // 删除当前节点，将其子节点提升到当前层级
      result.push(...filteredChildren);
    }
  }
  return result;
}
function maskString(str) {
    if (!str || str.length <= 6) {
        return str;
    }
    
    return str.replace(/^(.{3})(.*)(.{3})$/, (_, first, middle, last) => {
        return first + '*'.repeat(middle.length) + last;
    });
}
function getModelListTable(){
  tableData.value = [] 
  var par = {
    pageNum:1,
    pageSize:20,
    name:name.value,
    mdUnit:mdUnit.value,
    devkind:'APP'
  }
  getModelList(par).then(res=>{
    tableData.value = res.rows
    totalComReg.value = res.total
    formJi.value.sort = res.total+1
    tableData.value.forEach((item,index,array)=>{
      item.mdContact = maskString(item.mdContact)
    })
  })
}
const seledMo = ['primary','plain','plain','plain','plain','plain','plain']
onMounted(() => {
  getTreeLeft()
  getGate()
});
</script>
<style scoped>
:deep(.treeLeft) .el-tree-node__content {
  display: flex !important;
  height: 28px;                  /* 按设计稿调整高度 */
  align-items: center;
  padding-top: 0 !important;
}
:deep(.treeLeft) .el-tree-node__content:hover {
  background-color: #e9e9eb;
}
:deep(.treeLeft) .el-tree-node__content:active {
    background-color: rgka(69,157,255,0.1) !important;
  }

  /* 选中态（Active） */
:deep(.treeLeft) .el-tree-node.is-current > .el-tree-node__content {
    background-color: #c6e2ff !important;
  }

.tabs-wrapper {
  position: relative; /* 确保内容层在伪元素上方 */
  z-index: 1; /* 关键：高于背景图 */
}

.tabs-wrapper :deep(.el-tabs),
.tabs-wrapper :deep(.el-tabs__content) {
  background-color: red !important; 
}
:deep(.el-tabs){
  background-color: transparent !important;
}
:deep(.el-tabs__content){
  background-color: transparent !important; 
}
:deep(.custom-dialog-bg) {
  z-index: 1000;
  background-image: url('@/assets/images/backDia.jpg') !important; 
  background-position-x: left;
  background-position-y: bottom;
  background-size: initial;
  background-repeat: repeat-x;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(255, 255, 255);
}
:deep(.custom-dialog-bg .el-dialog__header) {
  
}
:deep(.custom-dialog-bg .el-dialog__body) {
  
  color: #ecf0f1 !important; ; /* 内容文字颜色 */
}
/* 横向排列单选框标签和输入框 */
.custom-input-wrapper {
  display: flex;
  align-items: center;
  gap: 10px; /* 调整间距 */
}

/* 输入框仅显示底部横线 */
.underline-input :deep(.el-input__wrapper) {
  padding: 0;
  box-shadow: none !important;
  border-bottom: 1px solid #dcdfe6; /* 横线颜色 */
  border-radius: 0;
  background: transparent;
}
.underline-input :deep(.el-input__inner) {
  height: 24px;
  padding: 0 5px;
}
:deep(.el-table__body tr:hover > td) {
  background-color: #eaf7ff !important;
}
.drag-handle {
  cursor: move;
}

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

/* 防止文字选中 */
:deep(.el-table__row) {
  user-select: none;
  -webkit-user-select: none;
}
</style>
<style scoped lang="scss">


.el-table .el-table__row td {
  height: 60px !important; /* 行高 */
}
.custom-tree-node {
  display: flex;       /* 启用 Flex 布局 */
  align-items: center; /* 垂直居中 */
  gap: 8px;            /* 图标与文字间距 */
}
:deep(.svg-icon) {
  outline: none;
}
:deep(.svg-icon svg) {
  stroke: none;
}
</style>