nanjingliujinyu 5 сар өмнө
parent
commit
9d302b5975

+ 37 - 0
ruoyi-ui/src/api/register/regCom.js

@@ -229,4 +229,41 @@ export function delField(id) {
     method: 'delete',
     params: id
   })
+}
+export function getModelLiu(query) {
+  return request({
+    url: '/interfaces/cate/treeFlow',
+    method: 'get',
+    params: query
+  })
+}
+export function addLiu(data) {
+  return request({
+    url: "/model/flow",
+    method: 'post',
+    data:data
+  });
+}
+export function getFlow(id) {
+  return request.get(`/model/flow//${id}`);
+}
+export function delFlow(id) {
+  return request({
+    url: '/model/flow/' + id,
+    method: 'delete'
+  })
+}
+export function editFlow(data) {
+  return request({
+    url: '/model/flow',
+    method: 'put',
+    data: data
+  })
+}
+export function delFile(id) {
+  return request({
+    url: '/common/deleteFile',
+    method: 'delete',
+    params: id
+  })
 }

+ 1180 - 0
ruoyi-ui/src/views/platform/plugin/index.vue

@@ -0,0 +1,1180 @@
+<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" 
+        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="模型名称">
+        </el-table-column>
+        <el-table-column prop="enname" label="英文名称">
+        </el-table-column>
+        <el-table-column prop="className" label="模型类型" width="160"/>
+        <el-table-column prop="mdUnit" label="模型单位" width="160"/>
+        <el-table-column prop="mdContact" label="联系方式" width="100"/>
+        <el-table-column prop="status" label="模型状态" width="140">
+        </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="250">
+            <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: 0%;">查看</el-button>
+                    <el-button @click="showPei(scope.row)" type="warning" text size="mini" style="margin-left: 0%;">配置</el-button>
+                    <el-button type="danger" @click="delModel(scope.row)" text size="mini" style="margin-left: 0%;">删除</el-button>
+                </div>
+            </template>
+        </el-table-column>
+      </el-table>
+        <el-dialog v-model="dialogVisible" title="" width="60%" @close="clearForm" destroy-on-close>
+                <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-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>
+                    <div style="display: flex;align-items: center;width: 100%;">
+                        <el-link type="primary" @click="downIn">{{formJi.mdInName}}</el-link>
+                        <el-icon v-if="formJi.mdInName" :size="size" color="red" style="margin-left: 1%;cursor: pointer;" @click="delFileIn()" >
+                            <Delete />
+                        </el-icon>
+                    </div>
+                 </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>
+                    <div style="display: flex;align-items: center;width: 100%;">
+                        <el-link type="primary" @click="downOut">{{formJi.mdOutName}}</el-link>
+                        <el-icon :size="size" color="red" style="margin-left: 1%;cursor: pointer;" @click="delFileOut()" >
+                            <Delete />
+                        </el-icon>
+                    </div>
+                  </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.envCpuNum + '个'}}
+                </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">
+            <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: 50vh;">
+              <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"  />
+                  <el-button  @click="addCan" 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>新增参数</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-show="checked1" style="flex:1;margin-top:1%;width: 10%;background-color: #F2F6FC;height:45vh;">
+               <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-top: 10%;background-color: transparent;" default-expand-all :key="valueKet">
+                  
+              </el-tree>
+              </div>
+              <div style="width: 90%;flex: 1;">
+                <el-table 
+              style="margin-top: 1%;width: 100%;margin-left: 1%;"
+              :data="tableDataCan" 
+              :cell-style="{ textAlign: 'center',padding:'3px 0px' }"
+              :header-cell-style="{ textAlign: 'center', }"
+              :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)" text size="mini" style="margin-left: 0%;">删除</el-button>
+                    </template> 
+                  </el-table-column>
+              </el-table>
+              </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="模型状态">Role</el-tab-pane>
+            <el-tab-pane label="Task">Task</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 >
+    </div>
+  </div>
+</template>
+<script   setup>
+import { getModelList,addModel,delMdid,getModelDetail,updateModel,delFile,getParamsList,changePar,delAllPar,getModelParList } from "@/api/register/regCom";
+import { ref, onMounted, onUnmounted, nextTick } from 'vue';
+import { Search } from '@element-plus/icons-vue'
+import {
+  ArrowLeft,
+  Plus
+} 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";
+const { proxy } = getCurrentInstance();
+const dragTableRef = ref()
+const dialogVisible = ref(false)
+const dialogVisibleDe = ref(false)
+const dialogVisiblePei = ref(false)
+const active = ref(0)
+const isEdit = ref(true)
+const name = ref('')
+const isAdd = ref(true)
+const mdUnit = ref('')
+const isElse = ref(false)
+const elseLan = ref('')
+const tableDataCan = ref([])
+const groupTreeData = ref([])
+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 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 activeName = ref('first')
+
+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 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(false)
+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 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 parForm = ref('')
+onMounted(() => {
+  getModelListTable()
+  // addNewModel()
+});
+const handleChange = (file, files) => {
+  fileList.value = files;
+};
+const handleChange1 = (file, files) => {
+  fileList1.value = files;
+};
+function delFileIn(){
+    var par = {
+        filePath:formJi.value.mdInFile
+    }
+    proxy.$modal.confirm('是否确认文件?').then(function () {
+    return delFile(par);
+    }).then(() => {
+        formJi.value.mdInName = ''
+        proxy.$modal.msgSuccess("删除成功");
+    }).catch(() => {});
+}
+function delFileOut(){
+    
+}
+function delAllCan(){
+  var par = {
+        filePath:formJi.value.mdOutFile
+    }
+  proxy.$modal.confirm('是否确认删除所有参数?').then(function () {
+    return delAllPar(parForm.value.mdid);
+  }).then(() => {
+    formJi.value.mdOutName = ''
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+}
+function saveChangePar(){
+  tableDataCan.value.forEach((item, index, array) => { 
+      item.mdid = parForm.value.mdid
+      item.parGroup = 'def'
+      item.parCate = 'int'
+  })
+  changePar(tableDataCan.value).then(res=>{
+    if(res.code===200){
+      proxy.$modal.msgSuccess("修改成功");
+      dialogVisiblePei.value = false
+      getModelListTable()
+    }
+  })
+}
+async function showPei(row){
+  dialogVisiblePei.value = true
+  var par = {
+    mdid:row.mdid,
+    devkind:'SYS'
+  }
+  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
+  }) 
+  
+}
+function delCan(index){
+  tableDataCan.value.splice(index, 1)
+}
+function showDe(row){
+  dialogVisibleDe.value = true
+  getModelDetail(row.mdid).then(res=>{
+    parForm.value = res.data
+    formJi.value = res.data
+    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({
+    mdid:parForm.value.mdid
+  })
+}
+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.length>0&&fileList1.value.length===0){
+    await proxy.$refs["uploadRef"].submit();
+  }
+  else if(fileList.value.length>0&&fileList.value.length===0){
+    await proxy.$refs["uploadRef1"].submit();
+  }
+  else if(fileList.value.length>0&&fileList.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
+          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
+        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 = 'SYS'
+        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
+  formJi.value.devkind = 'SYS'
+  await formRefJi.value.validate((valid) => {
+    if(valid){
+        if(formJi.value.devlang==='1'){
+          formJi.value.devlang = elseLan.value
+        }
+        delete formJi.value.msort
+        formJi.value.devkind = 'SYS'
+        updateModel(formJi.value).then(res=>{
+        if(res.code===200){
+          proxy.$modal.msgSuccess("修改成功");
+          dialogVisible.value = false
+          getModelListTable()
+        }
+      })
+    }
+  });
+};
+function clearForm(){
+  tableDataCan.value = []
+  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
+}
+function getModelListTable(){
+  tableData.value = []
+  var par = {
+    pageNum:1,
+    pageSize:20,
+    name:name.value,
+    mdUnit:mdUnit.value,
+    devkind:'SYS'
+  }
+  getModelList(par).then(res=>{
+    tableData.value = res.rows
+    totalComReg.value = res.total
+    console.log(tableData)
+  })
+}
+const seledMo = ['primary','plain','plain','plain','plain','plain','plain']
+
+</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;            /* 图标与文字间距 */
+}
+</style>

+ 8 - 0
ruoyi-ui/src/views/register/componentReg/index.vue

@@ -923,6 +923,8 @@ async function subEdit(){
         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("修改成功");
@@ -941,6 +943,8 @@ async function submit(){
         if(formJi.value.devlang==='1'){
           formJi.value.devlang = elseLan.value
         }
+        delete formJi.value.msort
+        formJi.value.devkind = 'APP'
         addModel(formJi.value).then(res=>{
         if(res.code===200){
           proxy.$modal.msgSuccess("新增成功");
@@ -959,6 +963,8 @@ async function handleFileSuccess1(response, file, fileList){
         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("修改成功");
@@ -977,6 +983,8 @@ async function handleFileSuccess(response, file, fileList){
         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("修改成功");

+ 0 - 2
ruoyi-ui/src/views/register/modelData/dataSource.vue

@@ -172,8 +172,6 @@ function clearForm(){
 }
 function getTable(){
   var par = {
-    pageNum:currentPage.value,
-    pageSize:15,
     dsTitle:dsTitle.value
   }
   getDataSourceList(par).then(res=>{

+ 163 - 13
ruoyi-ui/src/views/register/modelData/liucheng.vue

@@ -1,8 +1,48 @@
 <template>
-    <div>
-        <div id="tinyflow" style="height:calc(100vh - 180px);padding:1%;width:50%">
+    <div style="display: flex;height: 85vh;">
+        <el-card style="width: 18%;height: 100%;overflow: auto;height: 85vh;background-color: white;overflow-x: hidden;margin-left: 1%;" shadow="never">
+            <template #header>
+                <div class="card-header" style="display: flex;align-items: center;justify-content: space-between;">
+                    <span>目录:</span>
+                </div>
+            </template>
+            <div>
+               <el-tree :expand-on-click-node="false" ref="treeRef" :filter-node-method="filterNode" :current-node-key="currentNodeKey" class="treeLeft" 
+                :data="data" @node-click="handleNodeClick" node-key="id" style="margin-left: -15%;margin-top: 0%;width: 130%;background-color: transparent;" default-expand-all :key="valueKet">
+                    <template #default="{ node, data }">
+                        <span  style="justify-content: space-between;display: flex;width: 30%;align-items: center;margin-left: 1%;">
+                        <div class="custom-tree-node" style="align-items: center;line-height: 1.5;">
+                            <svg-icon icon-class="model"  v-if="data.nodeType=='MODEL'"/>
+                            <svg-icon icon-class="model2"  v-if="data.nodeType=='FLOW'"/>
+                            <span style="font-size: 1rem;margin-left: 2%;">{{ node.label }}</span>
+                        </div>
+                        <el-icon v-if="data.nodeType=='FLOW'&&currentNodeKey === data.id" :size="size" color="red" style="position: absolute;left: 80%;" @click="delTree(data)">
+                            <Delete />
+                        </el-icon>
+                        </span>
+                    </template>
+                </el-tree>
+            </div>
+            
+            </el-card>
+            <div style="height:85vh;margin-left:1%;width:79%">
+                <div style="display: flex;justify-content: space-between;width: 100%;align-items: center;margin-left:1%;margin-top: 1%;">
+                    <div style="display: flex;width: 50%;align-items: center;">
+                        <div>
+                            流程名称
+                        </div>
+                        <div style="color: red;margin-left: 0%;">
+                            *
+                        </div>
+                        <el-input :disabled="isSel" size="mini" placeholder="此项必填" v-model="flowName" style="width: 30%;margin-left: 1%;"/>
+                    </div>
+                    <el-button type="info" @click="showAll" plain style="margin-left: 50%;" :disabled="isSel">试运行</el-button>
+                    <el-button type="primary" style="margin-right: 1%;" @click="saveLiu" :disabled="isSel">保存</el-button>  
+                </div>
+                <div id="tinyflow" style="height:80vh;margin-top: 1%;" :key="componentKey">
 
-        </div>
+                </div>
+            </div>
     </div>
     <!-- <el-container>
         <el-header style="height:40px;padding-top:10px;">
@@ -23,9 +63,12 @@
 </template>
 
 <script setup >
+import { Plus,Delete} from '@element-plus/icons-vue'
+import { getModelLiu,addLiu,getFlow,delFlow,editFlow  } from "@/api/register/regCom.js";
 import { ref } from 'vue';
 import { Tinyflow } from '@tinyflow-ai/ui';
 import '@tinyflow-ai/ui/dist/index.css';
+import { get } from "@vueuse/core/index.cjs";
 const { proxy } = getCurrentInstance();
 
 const modelsvg = '<svg t="1754196539274" class="icon" viewBox="0 0 1061 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5812" width="64" height="64"><path d="M447.122465 467.332105L49.240301 268.161564A33.501036 33.501036 0 0 0 0.136043 300.744763v441.020484a33.042117 33.042117 0 0 0 16.06214 27.994016L413.162511 1018.034062a33.959954 33.959954 0 0 0 17.438895 5.50702 33.042117 33.042117 0 0 0 33.042117-33.042118V497.161795a33.042117 33.042117 0 0 0-17.438895-29.82969zM398.018207 931.298504l-331.339011-208.348907v-367.134638l331.339011 162.915996zM1046.010843 263.572381a33.042117 33.042117 0 0 0-31.665363 0L550.838 467.332105a33.042117 33.042117 0 0 0-19.733487 30.288608v493.33717a33.042117 33.042117 0 0 0 49.563176 28.452934l463.048562-265.254776a33.042117 33.042117 0 0 0 16.521059-28.452934V291.566398a33.042117 33.042117 0 0 0-14.685386-27.994017z m-50.939931 441.020484L596.72983 931.298504v-413.026468l397.882163-176.224626zM991.399565 178.672496a33.042117 33.042117 0 0 0-22.486996-29.829689L550.838 1.530034a32.583199 32.583199 0 0 0-19.733487 0L83.659173 158.021173a33.042117 33.042117 0 0 0-4.130264 61.036134l397.882163 199.170541a33.042117 33.042117 0 0 0 14.685386 3.212428 33.959954 33.959954 0 0 0 13.30863 0l463.966399-205.595398a33.042117 33.042117 0 0 0 22.028078-37.172382zM494.391049 349.849021L180.490934 195.193555l358.874108-125.743613 328.126583 112.434982z m0 0" fill="#0e4fe0" p-id="5813"></path></svg>';
@@ -35,7 +78,8 @@ const datasvg = '<svg t="1754196835697" class="icon" viewBox="0 0 1024 1024" ver
 const tasksvg = '<svg t="1754196908905" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9857" width="64" height="64"><path d="M585.301 680.856c59.719 0 108.13 48.386 108.13 108.072 0 59.687-48.411 108.072-108.13 108.072h-179.45c-59.72 0-108.131-48.385-108.131-108.072 0-59.686 48.412-108.072 108.13-108.072h179.451z m165.615-159.955c0.716-16.493 14.675-29.283 31.177-28.567 78.37 3.399 140.842 68.814 151.36 148 11.265 84.804-39.42 157.479-138.745 179.376l1.457 41.696a6.9 6.9 0 0 1-11.163 5.663l-82.064-64.601a6.9 6.9 0 0 1-0.368-10.533l77.344-70.152a6.9 6.9 0 0 1 11.532 4.87l1.124 31.997c61.381-17.217 88.38-59.304 81.587-110.448-6.904-51.977-47.11-94.078-94.658-96.14l-0.715-0.04c-16.155-1.081-28.574-14.866-27.868-31.12zM585.3 414.126c59.719 0 108.13 48.385 108.13 108.072 0 59.686-48.411 108.071-108.13 108.071h-179.45c-59.72 0-108.131-48.385-108.131-108.071 0-59.687 48.412-108.072 108.13-108.072h179.451z m-315.217-178.35c0.706 16.254-11.713 30.04-27.868 31.12l-0.715 0.04c-47.547 2.062-87.754 44.163-94.658 96.14-5.816 43.788 13.138 80.937 57.234 101.523l1.02-29.111a6.9 6.9 0 0 1 11.532-4.87l77.344 70.152a6.9 6.9 0 0 1-0.368 10.533l-82.063 64.601a6.9 6.9 0 0 1-11.164-5.663l1.48-42.373c-83.116-27.714-124.612-95.116-114.312-172.66 10.519-79.186 72.991-144.6 151.361-148 16.502-0.716 30.46 12.074 31.177 28.568zM585.301 129c59.719 0 108.13 48.385 108.13 108.072 0 59.686-48.411 108.072-108.13 108.072h-179.45c-59.72 0-108.131-48.386-108.131-108.072C297.72 177.385 346.132 129 405.85 129h179.451z" fill="#0e4fe0" p-id="9858"></path></svg>';
 
 const chartsvg = '<svg t="1754196518852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4747" width="64" height="64"><path d="M278.755 777.557h89.543c22.642 0 40.96-18.318 40.96-40.96v-407.211c0-22.642-18.318-40.96-40.96-40.96h-89.543c-22.642 0-40.96 18.318-40.96 40.96v407.211c0 22.528 18.432 40.96 40.96 40.96zM292.409 343.040h62.237v379.904h-62.237v-379.904zM501.191 777.557h89.543c22.642 0 40.96-18.318 40.96-40.96v-521.102c0-22.642-18.318-40.96-40.96-40.96h-89.543c-22.642 0-40.96 18.318-40.96 40.96v521.102c0 22.528 18.432 40.96 40.96 40.96zM514.845 229.149h62.237v493.795h-62.237v-493.795zM723.627 777.557h89.543c22.642 0 40.96-18.318 40.96-40.96v-257.479c0-22.642-18.318-40.96-40.96-40.96h-89.543c-22.642 0-40.96 18.318-40.96 40.96v257.479c0 22.528 18.432 40.96 40.96 40.96zM737.28 492.771h62.237v230.173h-62.237v-230.173z" fill="" p-id="4748"></path><path d="M863.687 816.242h-676.181v-633.173c0-15.133-12.174-27.307-27.307-27.307s-27.307 12.174-27.307 27.307v659.911c0 6.258 2.048 11.947 5.575 16.498 5.006 6.827 13.085 11.378 22.187 11.378h703.147c15.133 0 27.307-12.174 27.307-27.307-0.114-15.019-12.288-27.307-27.421-27.307z" fill="" p-id="4749"></path></svg>';
-
+const isSel = ref(true)
+const componentKey = ref(0);
 const customNodes = {
     'hydromodel-node': {
         title: '水文模型节点',
@@ -157,11 +201,93 @@ const customNodes = {
 
     },
 };
-
+const parTree = ref({})
 const tinyflow = ref(null);;
+const data = ref([])
+const currentNodeKey = ref('')
+const flowName = ref('')
 
+function showAll(){
+    console.log()
+}
+function delTree(data){
+    proxy.$modal.confirm('是否确认删除?').then(function () {
+    return delFlow(data.id);
+    }).then(() => {
+        getTree();
+        tinyflow.value = new Tinyflow({
+            element: '#tinyflow', 
+            data: {},
+            customNodes,
+        });
+        proxy.$modal.msgSuccess("删除成功");
+    }).catch(() => {});
+}
+function getTree(){
+  getModelLiu().then(res=>{
+    data.value = res.data
+    data.value.forEach(item=>{
+      item.value = item.id
+      item.id = item.id
+    })
+  })
+}
+function handleNodeClick(node, data){
+    isSel.value = false
+    currentNodeKey.value = data.data.id
+    parTree.value = data.data
+    if(data.data.nodeType==='FLOW'){
+        getFlow(data.data.id).then(res=>{
+            flowName.value = res.data.flowName
+            // tinyflow.value.data = JSON.parse(res.data.flowGraph)
+            tinyflow.value = new Tinyflow({
+                element: '#tinyflow', 
+                data: JSON.parse(res.data.flowGraph),
+                customNodes,
+            });
+        })
+    }
+    else{
+        flowName.value = ''
+        tinyflow.value = new Tinyflow({
+            element: '#tinyflow', 
+            data: {},
+            customNodes,
+        });
+    }
+}
+function saveLiu(){
+    if(parTree.value.nodeType==='FLOW'){
+        var par = {
+            mdid:parTree.value.pid,
+            flowId:parTree.value.id,
+            flowName:flowName.value,
+            flowGraph:JSON.stringify(tinyflow.value.getData()) 
+        }
+        editFlow(par).then(res=>{
+            if(res.code===200){
+                proxy.$modal.msgSuccess("修改成功");
+            }
+        })
+    }
+    else{
+        var par = {
+            mdid:parTree.value.id,
+            flowName:flowName.value,
+            flowGraph:JSON.stringify(tinyflow.value.getData()) 
+        }
+        addLiu(par).then(res=>{
+            if(res.code===200){
+                proxy.$modal.msgSuccess("新增成功");
+            }
+        })
+    }
+    getTree()
+     
+}
 // 初始化 Tinyflow
 onMounted(() => {
+    getTree()
     tinyflow.value = new Tinyflow({
         element: '#tinyflow', // 挂载的目标元素(支持选择器字符串或 DOM 元素)
         data: {
@@ -172,16 +298,10 @@ onMounted(() => {
         },
         customNodes,
     });
-    tinyflow.on('node:click', (event) => {
-        console.log('节点被点击', event.node);
-    });
-  
+  // 检查实例和on方法是否存在
+  console.log(tinyflow.value.svelteFlowInstance);
 });
 
-// onUpdate(() => {
-//      console.log('update')
-// });
-
 </script>
 <style>
 
@@ -204,6 +324,36 @@ onMounted(() => {
 :deep(.tf-node-wrapper-title){
     display:none
 }
+:deep(.svg-icon) {
+  outline: none;
+}
+:deep(.svg-icon svg) {
+  stroke: none;
+}
+:deep(.el-tree-node__expand-icon) {
+  margin-left:5%; /* 向右推动图标 */
+}
+:deep(.el-table__body tr:hover > td) {
+  background-color: #eaf7ff !important;
+}
+ :deep(.treeLeft) .el-tree-node__content {
+  width: 100%;
+  display: flex !important;
+  height: 35px !important;
+  align-items: center;
+  padding-top: 0 !important;
+}
+:deep(.treeLeft) .el-tree-node__content:hover {
+  background-color: #ecf5ff;
+}
+:deep(.treeLeft) .el-tree-node__content:active {
+    background-color: #d9ecff !important;
+  }
+
+  /* 选中态(Active) */
+:deep(.treeLeft) .el-tree-node.is-current > .el-tree-node__content {
+    background-color: #c6e2ff !important;
+  }
 </style>