|
|
@@ -0,0 +1,832 @@
|
|
|
+<template>
|
|
|
+ <div style="width: 100%;background-color: #F7F7F7;padding-top: 1%;" :style="{'height':heightAll+'px'}">
|
|
|
+ <div style="display: flex;width: 100%;margin-left: 1%;">
|
|
|
+ <div style="display: flex;width: 20%;align-items: center;">
|
|
|
+ <div>
|
|
|
+ 组件名称:
|
|
|
+ </div>
|
|
|
+ <el-input v-model="input" style="width:50%;margin-left: 1%;" placeholder="" />
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;width: 20%;align-items: center;margin-left: -5%;">
|
|
|
+ <div>
|
|
|
+ 组件分类:
|
|
|
+ </div>
|
|
|
+ <el-select
|
|
|
+ v-model="value"
|
|
|
+ style="width: 50%;margin-left: 1%;"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;width: 20%;align-items: center;margin-left: -5%;">
|
|
|
+ <div>
|
|
|
+ 提供单位:
|
|
|
+ </div>
|
|
|
+ <el-input v-model="input" style="width: 50%;margin-left: 1%;" placeholder="" />
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;width: 20%;align-items: center;margin-left: -5%;">
|
|
|
+ <div>
|
|
|
+ 注册时间:
|
|
|
+ </div>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="value1"
|
|
|
+ style="width: 50%;margin-left: 1%;"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="To"
|
|
|
+ start-placeholder="Start date"
|
|
|
+ end-placeholder="End date"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;width: 20%;align-items: center;margin-left: 8%;">
|
|
|
+ <el-button type="primary" style="margin-left: 5%;" :icon="Search">查询</el-button>
|
|
|
+ <el-button type="primary" style="margin-left: 5%;" icon="Refresh">重置</el-button>
|
|
|
+ <el-button type="primary" style="margin-left:5%;" icon="Plus">注册</el-button>
|
|
|
+ <el-button type="" style="margin-left:5%;" plain icon="Plus">切换展示模式</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;align-items: center;background-color:#EFFAFF ;margin-top: 1%;width: 98%;margin-left: 1%;line-height: 1.5" :style="{'height':heightAll * 0.03+'px'}">
|
|
|
+ <div style="margin-left: 0.5%;">
|
|
|
+ 已选择
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 0.5%;">
|
|
|
+ 0
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 0.5%;">
|
|
|
+ 项
|
|
|
+ </div>
|
|
|
+ <el-button type="text" style="margin-left:1%;">清空</el-button>
|
|
|
+ </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="{ textAlign: 'center', }"
|
|
|
+ :header-cell-style="{ textAlign: 'center'}"
|
|
|
+ :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center' }"
|
|
|
+ border
|
|
|
+ :max-height="tableheight">
|
|
|
+ <el-table-column type="selection" width="55"></el-table-column>
|
|
|
+ <el-table-column type="index" label="序号"></el-table-column>
|
|
|
+ <el-table-column prop="date" label="组件名称" width="250">
|
|
|
+
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="组件分类" width="160"/>
|
|
|
+ <el-table-column prop="address1" label="提供单位" width="160"/>
|
|
|
+ <el-table-column prop="address2" label="注册人员" width="100"/>
|
|
|
+ <el-table-column prop="st3" label="模型测试" width="140">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button v-if="scope.row.st1=='1'" type="success" plain>测试完成</el-button>
|
|
|
+ <el-button v-if="scope.row.st1=='2'" type="danger" plain>测试失败</el-button>
|
|
|
+ <el-button v-if="scope.row.st1=='3'" type="" plain>不支持</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="st1" label="评价结果" width="140">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button v-if="scope.row.st2=='1'" type="success" plain>测试完成</el-button>
|
|
|
+ <el-button v-if="scope.row.st2=='2'" type="danger" plain>测试失败</el-button>
|
|
|
+ <el-button v-if="scope.row.st2=='3'" type="" plain>暂无评价</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="st2" label="是否发布" width="140">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button v-if="scope.row.st3=='1'" type="success" plain>已发布</el-button>
|
|
|
+ <el-button v-if="scope.row.st3=='2'" type="danger" plain>未发布</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="tm" label="发布时间" width="170"/>
|
|
|
+ <el-table-column prop="ver" label="版本" width="120"/>
|
|
|
+ <el-table-column prop="address" label="操作" >
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="display: flex;justify-content: space-between;width: 80%;">
|
|
|
+ <el-button type="primary" size="mini" text style="margin-left: -2%;">发布</el-button>
|
|
|
+ <el-button type="warning" size="mini" text style="margin-left: -5%;">下架</el-button>
|
|
|
+ <el-button type="warning" text size="mini" style="margin-left: -5%;">重置测试</el-button>
|
|
|
+ <el-button type="primary" text size="mini" style="margin-left: -5%;">测试</el-button>
|
|
|
+ <el-button type="primary" size="mini" text style="margin-left: -5%;">编辑</el-button>
|
|
|
+ <el-button type="danger" text size="mini" style="margin-left: -5%;">注销</el-button>
|
|
|
+ <el-button type="primary" text size="mini" style="margin-left: -5%;">查看</el-button>
|
|
|
+ <el-button type="primary" text size="mini" style="margin-left: -5%;">后处理</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div style="float: right;margin-top: 1%;margin-right: 1%;">
|
|
|
+ <el-pagination
|
|
|
+ small
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="50"
|
|
|
+ class="mt-4"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <el-dialog v-model="dialogVisible" title="组件注册" width="50%" >
|
|
|
+ <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
|
|
|
+ <el-step title="第一步"></el-step>
|
|
|
+ <el-step title="第二步"></el-step>
|
|
|
+ <el-step title="第三步"></el-step>
|
|
|
+ <el-step title="第四步"></el-step>
|
|
|
+ </el-steps>
|
|
|
+ <div v-if="active==0" style="margin-left: 1%;margin-top: 1%;display: flex;align-items: center;">
|
|
|
+ <div style="background-color: blue;width: 2px;height: 16px;"></div>
|
|
|
+ <div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">基本信息</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="active==0" style="margin-left: 1%;margin-top: 1%;">
|
|
|
+ <el-form style="margin-left: 5%;" :model="form" class="demo-form-inline" :rules="rules">
|
|
|
+ <el-row :gutter="40">
|
|
|
+ <el-col :span="9">
|
|
|
+ <el-form-item label="组件名称:" prop="name">
|
|
|
+ <el-input v-model="form.user" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="9">
|
|
|
+ <el-form-item label="版本号:" prop="name">
|
|
|
+ <el-input v-model="form.region" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="40" style="margin-top: 1%;">
|
|
|
+ <el-col :span="9" >
|
|
|
+ <el-form-item label="组件英文名称:" prop="name">
|
|
|
+ <el-input v-model="form.user" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="9">
|
|
|
+ <el-form-item label="排序:" prop="name">
|
|
|
+ <el-input v-model="form.region" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="40" style="margin-top: 1%;">
|
|
|
+ <el-col :span="9" >
|
|
|
+ <el-form-item label="模型分类:" prop="name">
|
|
|
+ <el-select
|
|
|
+ v-model="value"
|
|
|
+ style="width: 100%;margin-left: 1%;"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="9">
|
|
|
+ <el-form-item label="开发语言:">
|
|
|
+ <el-radio-group v-model="radio1" class="ml-4" size="small" style="margin-top: -10%;">
|
|
|
+ <el-radio label="1" size="large">C++</el-radio>
|
|
|
+ <el-radio label="2" size="large">.net</el-radio>
|
|
|
+ <el-radio label="2" size="large">java</el-radio>
|
|
|
+ <el-radio label="2" size="large">Python</el-radio>
|
|
|
+ <el-radio label="2" size="large">其他</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item label="组件简介:">
|
|
|
+ <el-input v-model="form.region" style="width: 30%;" :rows="2" type="textarea"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div v-if="active==0" style="margin-left: 1%;margin-top: 1%;display: flex;align-items: center;">
|
|
|
+ <div style="background-color: blue;width: 2px;height: 16px;"></div>
|
|
|
+ <div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">提供单位信息</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="active==0" style="margin-left: 1%;margin-top: 1%;">
|
|
|
+ <el-form style="margin-left: 5%;margin-top: 2%;" :model="form" class="demo-form-inline" :rules="rules">
|
|
|
+ <el-row :gutter="40">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="提供单位:" prop="name">
|
|
|
+ <el-select
|
|
|
+ v-model="value"
|
|
|
+ style="width: 65%"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <!-- <el-button type="primary" style="margin-left: 1%;">选择</el-button>
|
|
|
+ <el-button type="" style="margin-left:1%;">清空</el-button> -->
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="技术支撑单位:" prop="name">
|
|
|
+ <el-input v-model="form.region" style="width: 65%;" />
|
|
|
+ <!-- <el-button type="" style="margin-left:1%;">清空</el-button> -->
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="40" style="margin-top: 1%;">
|
|
|
+ <el-col :span="9" >
|
|
|
+ <el-form-item label="联系方式:" prop="name">
|
|
|
+ <el-input v-model="form.user" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div v-if="active==1">
|
|
|
+ <div style="margin-left: 1%;margin-top: 1%;display: flex;align-items: center;">
|
|
|
+ <div style="background-color: blue;width: 2px;height: 16px;"></div>
|
|
|
+ <div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">示例数据</div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 1%;margin-top: 1%;">
|
|
|
+ <el-form style="margin-left: 5%;margin-top: 2%;" :model="form" class="demo-form-inline" :rules="rules">
|
|
|
+ <el-row :gutter="40">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="输入示例数据:" prop="name">
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ drag
|
|
|
+ action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
|
|
+ multiple
|
|
|
+ >
|
|
|
+ <el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
|
|
+ <div class="el-upload__text">
|
|
|
+ Drop file here or <em>click to upload</em>
|
|
|
+ </div>
|
|
|
+ <template #tip>
|
|
|
+ <div class="el-upload__tip">
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-upload>
|
|
|
+ <el-input v-model="form.region" style="width: 75%;" placeholder="请输入示例" :rows="2" type="textarea"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="输入示例数据:" prop="name">
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ drag
|
|
|
+ action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
|
|
+ multiple
|
|
|
+ >
|
|
|
+ <el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
|
|
+ <div class="el-upload__text">
|
|
|
+ Drop file here or <em>click to upload</em>
|
|
|
+ </div>
|
|
|
+ <template #tip>
|
|
|
+ <div class="el-upload__tip">
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-upload>
|
|
|
+ <el-input v-model="form.region" style="width: 75%;" placeholder="请输入示例" :rows="2" type="textarea"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 1%;margin-top: 1%;display: flex;align-items: center;">
|
|
|
+ <div style="background-color: blue;width: 2px;height: 16px;"></div>
|
|
|
+ <div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">模型组件上传</div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 1%;margin-top: 1%;">
|
|
|
+ <el-form style="margin-left: 5%;margin-top: 2%;" :model="form" class="demo-form-inline" :rules="rules">
|
|
|
+ <el-form-item label="组件执行包:" prop="name">
|
|
|
+ <el-input v-model="form.region" style="width: 75%;" placeholder="请输入示例" :rows="2" type="textarea"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="组件说明文档:" prop="">
|
|
|
+ <div style="width: 60%;">
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ drag
|
|
|
+ action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
|
|
+ multiple
|
|
|
+ >
|
|
|
+ <el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
|
|
+ <div class="el-upload__text">
|
|
|
+ Drop file here or <em>click to upload</em>
|
|
|
+ </div>
|
|
|
+ <template #tip>
|
|
|
+ <div class="el-upload__tip">
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ <div style="color: #b1b3b8;">
|
|
|
+ 注:请上传后缀名为.jar、·ph、.sh、.exe、.zip、.bat的文件
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 1%;margin-top: 1%;display: flex;align-items: center;">
|
|
|
+ <div style="background-color: blue;width: 2px;height: 16px;"></div>
|
|
|
+ <div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">资源需求</div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 1%;margin-top: 1%;">
|
|
|
+ <el-form style="margin-left: 5%;margin-top: 2%;" :model="form" class="demo-form-inline" :rules="rules">
|
|
|
+ <el-row :gutter="40">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="CPU核心数:" prop="name">
|
|
|
+ <el-input v-model="form.region" style="width: 50%;" placeholder=""/>
|
|
|
+ <div style="margin-left: 2%;">
|
|
|
+ 个
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="内存:" prop="name">
|
|
|
+ <el-input v-model="form.region" style="width: 50%;" placeholder=""/>
|
|
|
+ <div style="margin-left: 2%;">
|
|
|
+ M
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="40">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="是否需要GPU:">
|
|
|
+ <el-switch v-model="value1" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="平台:" prop="name">
|
|
|
+ <el-select
|
|
|
+ v-model="value"
|
|
|
+ style="width: 50%;"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 1%;margin-top: 1%;display: flex;align-items: center;">
|
|
|
+ <div style="background-color: blue;width: 2px;height: 16px;"></div>
|
|
|
+ <div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">运行命令</div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 1%;margin-top: 1%;">
|
|
|
+ <el-form style="margin-left: 5%;margin-top: 2%;" :model="form" class="demo-form-inline" :rules="rules">
|
|
|
+ <el-form-item label="运行命令:" prop="name">
|
|
|
+ <el-input v-model="form.region" style="width: 75%;" placeholder="请输入示例" :rows="2" type="textarea"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="active==2">
|
|
|
+ <div style="margin-left: 1%;margin-top: 1%;display: flex;align-items: center;width: 98%;">
|
|
|
+ <div style="background-color: blue;width: 2px;height: 16px;"></div>
|
|
|
+ <div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">输入参数</div>
|
|
|
+ <div style="margin-left: auto">
|
|
|
+ <el-button type="primary">添加</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="tableData1"
|
|
|
+ style="width: 98%;margin-left: 1%;margin-top: 0.5%;"
|
|
|
+ :cell-style="{ textAlign: 'center', }"
|
|
|
+ :header-cell-style="{ textAlign: 'center'}"
|
|
|
+ :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center' }"
|
|
|
+ border
|
|
|
+ :max-height="tableheight">
|
|
|
+ <el-table-column type="index" label="序号"></el-table-column>
|
|
|
+ <el-table-column prop="date1" label="参数名称"></el-table-column>
|
|
|
+ <el-table-column prop="date2" label="英文名称"></el-table-column>
|
|
|
+ <el-table-column prop="date3" label="类型"></el-table-column>
|
|
|
+ <el-table-column prop="date4" label="内容" width="120">
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="display: flex; align-items: center; height: 100%;">
|
|
|
+ {{scope.row.date4}}<el-button @click="" type="text" style="margin-left: 1%;">查看</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="date5" label="必填"></el-table-column>
|
|
|
+ <el-table-column prop="date6" label="率定参数"></el-table-column>
|
|
|
+ <el-table-column prop="date7" label="创建时间"></el-table-column>
|
|
|
+ <el-table-column prop="date8" label="操作">
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="">
|
|
|
+ <el-button @click="" type="text" style="margin-left: 1%;">编辑</el-button>
|
|
|
+ <el-button @click="" type='danger' text style="margin-left: 2%;">删除</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div style="margin-left: 1%;margin-top: 1%;display: flex;align-items: center;width: 98%;">
|
|
|
+ <div style="background-color: blue;width: 2px;height: 16px;"></div>
|
|
|
+ <div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">输出参数</div>
|
|
|
+ <div style="margin-left: auto">
|
|
|
+ <el-button type="primary">添加</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="tableData1"
|
|
|
+ style="width: 98%;margin-left: 1%;margin-top: 0.5%;"
|
|
|
+ :cell-style="{ textAlign: 'center', }"
|
|
|
+ :header-cell-style="{ textAlign: 'center'}"
|
|
|
+ :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center' }"
|
|
|
+ border
|
|
|
+ :max-height="tableheight">
|
|
|
+ <el-table-column type="index" label="序号"></el-table-column>
|
|
|
+ <el-table-column prop="date1" label="参数名称"></el-table-column>
|
|
|
+ <el-table-column prop="date2" label="英文名称"></el-table-column>
|
|
|
+ <el-table-column prop="date3" label="类型"></el-table-column>
|
|
|
+ <el-table-column prop="date4" label="内容" width="120">
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="display: flex; align-items: center; height: 100%;">
|
|
|
+ {{scope.row.date4}}<el-button @click="" type="text" style="margin-left: 1%;">查看</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="date5" label="必填"></el-table-column>
|
|
|
+ <el-table-column prop="date6" label="率定参数"></el-table-column>
|
|
|
+ <el-table-column prop="date7" label="创建时间"></el-table-column>
|
|
|
+ <el-table-column prop="date8" label="操作">
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="">
|
|
|
+ <el-button @click="" type="text" style="margin-left: 1%;">编辑</el-button>
|
|
|
+ <el-button @click="" type='danger' text style="margin-left: 2%;">删除</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div v-if="active==3">
|
|
|
+ <div style="margin-left: 1%;margin-top: 1%;display: flex;align-items: center;width: 98%;">
|
|
|
+ <div style="background-color: blue;width: 2px;height: 16px;"></div>
|
|
|
+ <div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">前处理</div>
|
|
|
+ <div style="margin-left: auto">
|
|
|
+ <el-button type="primary">添加</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="tableData2"
|
|
|
+ ref="dragTableRef"
|
|
|
+ class="draggable-table"
|
|
|
+ row-key="date1"
|
|
|
+ style="width: 98%;margin-left: 1%;margin-top: 0.5%;"
|
|
|
+ :cell-style="{ textAlign: 'center', }"
|
|
|
+ :header-cell-style="{ textAlign: 'center'}"
|
|
|
+ :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center' }"
|
|
|
+ border
|
|
|
+ :max-height="tableheight">
|
|
|
+ <el-table-column label="排序">
|
|
|
+ <template #default="scope">
|
|
|
+ <div class="drag-handle">
|
|
|
+ <el-icon ><Sort /></el-icon>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="date1" label="操作名称"></el-table-column>
|
|
|
+ <el-table-column prop="date2" label="参数英文名称"></el-table-column>
|
|
|
+ <el-table-column prop="date3" label="模式"></el-table-column>
|
|
|
+ <el-table-column prop="date4" label="工具组件"></el-table-column>
|
|
|
+ <el-table-column prop="date5" label="操作">
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="">
|
|
|
+ <el-button @click="" type="text" style="margin-left: 1%;">编辑</el-button>
|
|
|
+ <el-button @click="" type='danger' text style="margin-left: 2%;">删除</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div style="margin-left: 1%;margin-top: 1%;display: flex;align-items: center;width: 98%;">
|
|
|
+ <div style="background-color: blue;width: 2px;height: 16px;"></div>
|
|
|
+ <div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">输出参数</div>
|
|
|
+ <div style="margin-left: auto">
|
|
|
+ <el-button type="primary">添加</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="tableData3"
|
|
|
+ class="draggable-table1"
|
|
|
+ row-key="date1"
|
|
|
+ style="width: 98%;margin-left: 1%;margin-top: 0.5%;"
|
|
|
+ :cell-style="{ textAlign: 'center', }"
|
|
|
+ :header-cell-style="{ textAlign: 'center'}"
|
|
|
+ :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center' }"
|
|
|
+ border
|
|
|
+ :max-height="tableheight">
|
|
|
+ <el-table-column label="排序">
|
|
|
+ <template #default="scope">
|
|
|
+ <div class="drag-handle">
|
|
|
+ <el-icon ><Sort /></el-icon>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="date1" label="操作名称"></el-table-column>
|
|
|
+ <el-table-column prop="date2" label="参数英文名称"></el-table-column>
|
|
|
+ <el-table-column prop="date3" label="模式"></el-table-column>
|
|
|
+ <el-table-column prop="date4" label="工具组件"></el-table-column>
|
|
|
+ <el-table-column prop="date5" label="操作">
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="">
|
|
|
+ <el-button @click="" type="text" style="margin-left: 1%;">编辑</el-button>
|
|
|
+ <el-button @click="" type='danger' text style="margin-left: 2%;">删除</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div style="margin-left: 1%;margin-top: 1%;display: flex;align-items: center;width: 98%;">
|
|
|
+ <div style="background-color: blue;width: 2px;height: 16px;"></div>
|
|
|
+ <div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">后处理</div>
|
|
|
+ <div style="margin-left: auto">
|
|
|
+ <el-button type="primary">添加</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="tableData2"
|
|
|
+ class="draggable-table"
|
|
|
+ row-key="date1"
|
|
|
+ style="width: 98%;margin-left: 1%;margin-top: 0.5%;"
|
|
|
+ :cell-style="{ textAlign: 'center', }"
|
|
|
+ :header-cell-style="{ textAlign: 'center'}"
|
|
|
+ :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center' }"
|
|
|
+ border
|
|
|
+ :max-height="tableheight">
|
|
|
+ <el-table-column label="排序">
|
|
|
+ <template #default="scope">
|
|
|
+ <div class="drag-handle">
|
|
|
+ <el-icon ><Sort /></el-icon>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="date1" label="操作名称"></el-table-column>
|
|
|
+ <el-table-column prop="date2" label="参数英文名称"></el-table-column>
|
|
|
+ <el-table-column prop="date3" label="模式"></el-table-column>
|
|
|
+ <el-table-column prop="date4" label="工具组件"></el-table-column>
|
|
|
+ <el-table-column prop="date5" label="操作">
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="">
|
|
|
+ <el-button @click="" type="text" style="margin-left: 1%;">编辑</el-button>
|
|
|
+ <el-button @click="" type='danger' text style="margin-left: 2%;">删除</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="forward" style="float: left;">上一步</el-button>
|
|
|
+ <el-button type="primary" @click="next">
|
|
|
+ 下一步
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script lang="ts" setup>
|
|
|
+import { ref, onMounted, onUnmounted, nextTick } from 'vue';
|
|
|
+import Sortable from 'sortablejs';
|
|
|
+import { Search } from '@element-plus/icons-vue'
|
|
|
+import {
|
|
|
+ ArrowLeft,
|
|
|
+ Plus
|
|
|
+} from '@element-plus/icons-vue'
|
|
|
+import type { FormInstance, FormRules } from 'element-plus'
|
|
|
+import { reactive } from 'vue'
|
|
|
+import { forwardRefProps } from 'element-plus/es/components/tooltip-v2/src/forward-ref.mjs';
|
|
|
+
|
|
|
+interface RuleForm {
|
|
|
+ name: string
|
|
|
+}
|
|
|
+const dragTableRef = ref()
|
|
|
+const dialogVisible = true
|
|
|
+const active = ref(3)
|
|
|
+const form = reactive({
|
|
|
+ name: '',
|
|
|
+ region: '',
|
|
|
+ date: '',
|
|
|
+})
|
|
|
+const rules = reactive<FormRules<RuleForm>>({
|
|
|
+ name: [
|
|
|
+ { required: true, message: ' ', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+})
|
|
|
+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 tableData1= [{date1:'初始状态',
|
|
|
+ date2:'sts',
|
|
|
+ date3:'数据项',
|
|
|
+ date4:'初始状态',
|
|
|
+ date5:'是',
|
|
|
+ date6:'否',
|
|
|
+ date7:'2023-09-08'
|
|
|
+}]
|
|
|
+const checkGroup = [
|
|
|
+ {label:'水文预报'},
|
|
|
+ {label:'维水动力'},
|
|
|
+ {label:'二维水动力'},
|
|
|
+ {label:'机器学习'},
|
|
|
+]
|
|
|
+const tableData = [
|
|
|
+ {
|
|
|
+ date:'基于水文响应单元的分布式模型',
|
|
|
+ name:'标准模型组件',
|
|
|
+ address1:'淮河水利委员会',
|
|
|
+ address2:'贺庭',
|
|
|
+ tm:'2023-5-15',
|
|
|
+ st1:'1',
|
|
|
+ st2:'1',
|
|
|
+ st3:'1',
|
|
|
+ ver:'V1.0.0'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date:'基于水文响应单元的分布式模型',
|
|
|
+ name:'标准模型组件',
|
|
|
+ address1:'淮河水利委员会',
|
|
|
+ address2:'贺庭',
|
|
|
+ tm:'2023-5-15',
|
|
|
+ st1:'2',
|
|
|
+ st2:'2',
|
|
|
+ st3:'2',
|
|
|
+ ver:'V1.0.0'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date:'基于水文响应单元的分布式模型',
|
|
|
+ name:'标准模型组件',
|
|
|
+ address1:'淮河水利委员会',
|
|
|
+ address2:'贺庭',
|
|
|
+ tm:'2023-5-15',
|
|
|
+ st1:'3',
|
|
|
+ st2:'3',
|
|
|
+ st3:'2',
|
|
|
+ ver:'V1.0.0'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date:'基于水文响应单元的分布式模型',
|
|
|
+ name:'标准模型组件',
|
|
|
+ address1:'淮河水利委员会',
|
|
|
+ address2:'贺庭',
|
|
|
+ tm:'2023-5-15',
|
|
|
+ st1:'1',
|
|
|
+ st2:'1',
|
|
|
+ st3:'1',
|
|
|
+ ver:'V1.0.0'
|
|
|
+ },
|
|
|
+]
|
|
|
+const heightAll = window.innerHeight
|
|
|
+const valueHelpSel = '';
|
|
|
+const tableheight = window.innerHeight*0.7
|
|
|
+const options = [
|
|
|
+ {
|
|
|
+ value: 'Option1',
|
|
|
+ label: 'Option1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Option2',
|
|
|
+ label: 'Option2',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Option3',
|
|
|
+ label: 'Option3',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Option4',
|
|
|
+ label: 'Option4',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Option5',
|
|
|
+ label: 'Option5',
|
|
|
+ },
|
|
|
+]
|
|
|
+const seledMo = ['primary','plain','plain','plain','plain','plain','plain']
|
|
|
+const next = () => {
|
|
|
+ console.log(active.value)
|
|
|
+ active.value++
|
|
|
+}
|
|
|
+const forward = () => {
|
|
|
+ console.log(active.value)
|
|
|
+ active.value--
|
|
|
+}
|
|
|
+
|
|
|
+let sortableInstance = null;
|
|
|
+
|
|
|
+// 初始化拖拽
|
|
|
+const initSortable = () => {
|
|
|
+ const tbody = document.querySelector('.draggable-table .el-table__body-wrapper tbody');
|
|
|
+
|
|
|
+ if (!tbody) return;
|
|
|
+
|
|
|
+ // 销毁旧实例避免重复绑定
|
|
|
+ if (sortableInstance) {
|
|
|
+ sortableInstance.destroy();
|
|
|
+ }
|
|
|
+
|
|
|
+ sortableInstance = Sortable.create(tbody, {
|
|
|
+ handle: '.drag-handle', // 指定拖动手柄[9](@ref)
|
|
|
+ animation: 150,
|
|
|
+ ghostClass: 'ghost',
|
|
|
+ preventOnFilter: false, // 禁用默认选中行为[7](@ref)
|
|
|
+
|
|
|
+ // 拖拽结束回调
|
|
|
+ onEnd: (event) => {
|
|
|
+ const { oldIndex, newIndex } = event;
|
|
|
+
|
|
|
+ // 深拷贝避免数据污染
|
|
|
+ const newData = [...tableData2.value];
|
|
|
+ const [movedItem] = newData.splice(oldIndex, 1);
|
|
|
+ newData.splice(newIndex, 0, movedItem);
|
|
|
+
|
|
|
+ tableData2.value = newData; // 响应式更新数据
|
|
|
+
|
|
|
+ // 等待DOM更新后重新初始化
|
|
|
+ nextTick(() => {
|
|
|
+ initSortable();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+let sortableInstance1 = null
|
|
|
+const initSortable1 = () => {
|
|
|
+ const tbody = document.querySelector('.draggable-table1 .el-table__body-wrapper tbody');
|
|
|
+
|
|
|
+ if (!tbody) return;
|
|
|
+
|
|
|
+ // 销毁旧实例避免重复绑定
|
|
|
+ if (sortableInstance1) {
|
|
|
+ sortableInstance1.destroy();
|
|
|
+ }
|
|
|
+
|
|
|
+ sortableInstance1 = Sortable.create(tbody, {
|
|
|
+ handle: '.drag-handle', // 指定拖动手柄[9](@ref)
|
|
|
+ animation: 150,
|
|
|
+ ghostClass: 'ghost',
|
|
|
+ preventOnFilter: false, // 禁用默认选中行为[7](@ref)
|
|
|
+
|
|
|
+ // 拖拽结束回调
|
|
|
+ onEnd: (event) => {
|
|
|
+ const { oldIndex, newIndex } = event;
|
|
|
+
|
|
|
+ // 深拷贝避免数据污染
|
|
|
+ const newData = [...tableData3.value];
|
|
|
+ const [movedItem] = newData.splice(oldIndex, 1);
|
|
|
+ newData.splice(newIndex, 0, movedItem);
|
|
|
+
|
|
|
+ tableData3.value = newData; // 响应式更新数据
|
|
|
+
|
|
|
+ // 等待DOM更新后重新初始化
|
|
|
+ nextTick(() => {
|
|
|
+ initSortable1();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+// 生命周期管理
|
|
|
+onMounted(() => {
|
|
|
+ nextTick(initSortable);
|
|
|
+ nextTick(initSortable1);
|
|
|
+});
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+ if (sortableInstance) {
|
|
|
+ sortableInstance.destroy(); // 组件卸载时销毁实例
|
|
|
+ }
|
|
|
+ if (sortableInstance1) {
|
|
|
+ sortableInstance1.destroy(); // 组件卸载时销毁实例
|
|
|
+ }
|
|
|
+});
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.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>
|
