sxyanzhu
/
AIManage
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update code

main
haha 2024-06-20 23:49:38 +08:00
parent 2ae303912d
commit fcd15af223
12 changed files with 1044 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/api/menu/index.ts
View File

@ -74,13 +74,39 @@ class MenuAPI {
roles: ["GUEST", "ADMIN", "ADMIN6"],
alwaysShow: false,
},
children: [
children: [
{
path: "index",
component: "protocol/index",
name: "protocolIndex",
meta: {
title: "互联协议1",
title: "互联协议",
icon: "user",
hidden: true,
roles: ["ADMIN", "GUEST"],
keepAlive: true,
alwaysShow: false,
},
},
{
path: "edit",
component: "protocol/edit",
name: "protocolEdit",
meta: {
title: "互联协议修改",
icon: "user",
hidden: true,
roles: ["ADMIN", "GUEST"],
keepAlive: true,
alwaysShow: false,
},
},
{
path: "detail",
component: "protocol/detail",
name: "protocolDetail",
meta: {
title: "互联协议详情",
icon: "user",
hidden: true,
roles: ["ADMIN", "GUEST"],

2
src/views/flow/demo/index.vue
View File

@ -41,7 +41,7 @@ const themeApprove = {
},
polyline: {
strokeWidth: 1,
stroke: '#3CB371'
stroke: 'red'
},
edgeText: {
background: {

8
src/views/flow/demo/nodePanel.vue
View File

@ -45,10 +45,10 @@ const list1 = reactive([
const list2 = reactive([
{ text: "VIT推理算子1", id: 301,show:true },
{ text: "VIT推理算子2", id: 301,show:true },
{ text: "VIT后处理算子1", id: 301,show:true },
{ text: "VIT后处理算子2", id: 301,show:true },
{ text: "VIT后处理算子3", id: 301,show:true },
{ text: "VIT推理算子2", id: 302,show:true },
{ text: "VIT后处理算子1", id: 303,show:true },
{ text: "VIT后处理算子2", id: 304,show:true },
{ text: "VIT后处理算子3", id: 305,show:true },
]);
const updateNode=(nodes)=>{

2
src/views/model/index.vue
View File

@ -32,7 +32,7 @@
<el-button text type="primary" size="small"
@click="doShowModelDetail(scope.row)"><i-ep-edit />查看</el-button>
<el-button text type="primary" size="small"
@click="openDialog('user-form', scope.row.id)"><i-ep-link/>互联</el-button>
@click="doUploadModel()"><i-ep-link/>互联</el-button>
<el-button text type="primary" size="small" @click="handleDelete(scope.row)"><i-ep-delete />删除</el-button>
</template>
</el-table-column>

20
src/views/model/modelDetail.vue
View File

@ -67,7 +67,7 @@
<el-button>前处理-GRAY图像格式</el-button>
<el-button>前处理-RGB24图像格式</el-button>
</el-card>
<el-card style="margin-top: 12px;">
<el-card style="margin-top: 12px;margin-bottom:60px;">
<template #header>
<svg-icon icon-class="pause" style="width:20px;height:20px;" />
模型结构</template>
@ -75,14 +75,21 @@
<iframe frameborder="0" scrolling="no" :src="url" style="width:100%;height:100%;position: absolute;top:0px;"></iframe>
</div>
</el-card>
<el-card class="card-footer">
<el-button type="primary" @click="doBack">返回</el-button>
</el-card>
</div>
</template>
<script setup>
const router = useRouter();
let url=ref("")
onMounted(()=>{
url.value="./onnx/onnx.html?url=/ai/siamRPN_192.onnx"
});
const doBack=()=>{
router.replace({path:"/modelMgr/index"})
}
</script>
<style scoped lang='scss'>
.model-detail{
@ -101,4 +108,15 @@ onMounted(()=>{
:deep(.svg-icon){
margin-right:8px;
}
.card-footer{
position: fixed;
width: calc(100% - 215px);
bottom: 0px;
:deep(.el-card__body){
padding:10px;
.el-pagination{
justify-content: end;
}
}
}
</style>

11
src/views/model/uploadModel.vue
View File

@ -123,14 +123,21 @@
</el-card>
</div>
<el-card class="card-footer">
<el-button type="primary">分割</el-button>
<el-button>取消</el-button>
<el-button type="primary" @click="doSave">分割</el-button>
<el-button @click="doBack">取消</el-button>
</el-card>
</div>
</template>
<script setup>
const router = useRouter();
const doSave=()=>{
router.replace({path:"/modelMgr/index"})
}
const doBack=()=>{
router.replace({path:"/modelMgr/index"})
}
const uploadForm=ref(ElForm)
const upForm=reactive({
name:''

175
src/views/protocol/detail.vue 100644
View File

@ -0,0 +1,175 @@
<template>
<div class="app-container protocol-detail">
<el-card>
<template #header>
<svg-icon icon-class="pause" style="width:20px;height:20px;" />
互联协议信息</template>
<table style="width:100%" class="tb-base-info">
<tr>
<td style="width: 50%;">
<span class="sp-title">模型名称:</span>
<span class="sp-text">目标分类模型</span>
</td>
<td style="width: 50%;">
<span class="sp-title">模型版本:</span>
<span class="sp-text">1.0</span>
</td>
</tr>
<tr>
<td style="width: 50%;">
<span class="sp-title">互联名称:</span>
<span class="sp-text">我的互联名称</span>
</td>
<td style="width: 50%;">
<span class="sp-title">标签:</span>
<span class="sp-text">标分类模型</span>
</td>
</tr>
<tr>
<td style="width: 50%;">
<span class="sp-title">创建用户:</span>
<span class="sp-text">USER</span>
</td>
<td style="width: 50%;">
<span class="sp-title">创建时间:</span>
<span class="sp-text">2024-02-02 12:12:12</span>
</td>
</tr>
<tr>
<td style="width: 100%;" colspan="2">
<span class="sp-title">互联说明:</span>
<span class="sp-text">进行10种类型 的目标分类模型查看</span>
</td>
</tr>
</table>
</el-card>
<el-card style="margin-top: 12px;">
<template #header>
<svg-icon icon-class="pause" style="width:20px;height:20px;" />
算子互联信息</template>
<div class="detail-content">
<div class="item">
<div class="div-title">
<i-ep-setting/><span>互联设置</span>
</div>
<div class="div-chart">
<detailFlow/>
</div>
</div>
<div class="item" style="margin-left: 100px;">
<div class="div-title">
<i-ep-document/><span>算子基本信息</span>
</div>
<div class="div-info">
<div class="row">
<span class="sp-label">算子名称:</span>
<span class="sp-text">图像缩放</span>
</div>
<div class="row">
<span class="sp-label">算子版本:</span>
<span class="sp-text">1.0</span>
</div>
<div class="row">
<span class="sp-label">算子说明:</span>
<span class="sp-text">算子说明算子说明算子说明算子说明算子说明算子说明算子说明算子说明</span>
</div>
<div class="row">
<span class="sp-label">输入参数:</span>
<span class="sp-text">
size(1024,1080)
</span>
</div>
<div class="row">
<span class="sp-label">输出参数:</span>
<span class="sp-text">
<div>size:(1024,1080)</div>
<div>type:nearest</div>
</span>
</div>
</div>
</div>
</div>
</el-card>
<el-card class="card-footer">
<el-button type="primary" @click="doBack">返回</el-button>
</el-card>
</div>
</template>
<script lang='ts' setup>
import detailFlow from './detailFlow.vue';
const router = useRouter();
const doBack=()=>{
router.replace({path:"/protocol/index"})
}
</script>
<style scoped lang='scss'>
.protocol-detail {
:deep(.el-card__header) {
padding: 8px 4px;
display: flex;
align-items: center
}
.detail-content{
display: flex;
justify-content: center;
.item{
width:300px;
.div-title{
color:#409EFF;
display: flex;
align-items: center;
font-size: 12px;
}
.div-chart{
border:solid 1px #409EFF;
min-height: 400px;
height: 400px;
}
.div-info{
border:dotted 1px #409EFF;
min-height: 400px;
padding:10px;
font-size: 12px;
.row{
display: flex;
.sp-label{
color:#888;
display: block;
white-space: nowrap;
}
.sp-text{
flex-grow: 1;
display: block;
}
}
}
}
}
}
.tb-base-info {
line-height: 30px;
}
:deep(.svg-icon) {
margin-right: 8px;
}
.card-footer{
position: fixed;
width: calc(100% - 215px);
bottom: 0px;
:deep(.el-card__body){
padding:10px;
.el-pagination{
justify-content: end;
}
}
}
</style>

123
src/views/protocol/detailFlow.vue 100644
View File

@ -0,0 +1,123 @@
<template>
<div class="flow-demo1">
<div ref="flow" class="viewport" id="flowMain" />
</div>
</template>
<script lang='ts' setup>
import LogicFlow from '@logicflow/core';
// 引入整体背景的样式
import '@logicflow/core/dist/style/index.css';
import { Menu } from "@logicflow/extension";
import AiNodeExtension from '@/components/flow/index'
import RegisteMenu from '@/components/flow/menu.js'
const themeApprove = {
rect: { // 矩形样式
radius: 8,
stroke: '#3CB371'
},
circle: {
r: 25,
stroke: '#FF6347'
},
polygon: {
stroke: '#6495ED',
},
polyline: {
strokeWidth: 1,
stroke: '#6495ED'
},
edgeText: {
background: {
fill: 'white',
},
},
}
const flow = ref()
let lf = ref(null)
const config = {
stopScrollGraph: true,
stopZoomGraph: true,
isSilentMode: true,
grid: {
size: 10,
visible: false,
type: 'mesh',
config: {
color: '#DCDCDC',
}
},
keyboard: { enabled: false },
style: themeApprove,
plugins: [AiNodeExtension, Menu]
};
onMounted(() => {
const logicFlow = new LogicFlow({
...config,
container: flow.value
})
lf.value = logicFlow
window.lf = lf;
const data = { "nodes": [{ "id": "node_1", "type": "ai-node",
fill:'#409effaa',
"x": 150, "y": 20, "properties": { "node": 201, "ui": "node-ai" },
"text": { "x": 160, "y": 20, "value": "图像缩放" } },
{ "id": "node_2", "type": "ai-node",fill:'#3CB371', "x": 150, "y": 290, "properties": { "node": 900, "ui": "node-ai" }, "text": { "x": 160, "y": 290, "value": "目标绘图" } },
{ "id": "a758b24e-6a3f-4652-b7ea-4b844bf5d44a", fill:'#409effaa',"type": "ai-node", "x": 150, "y": 90, "properties": { "node": 202, "ui": "node-ai" }, "text": { "x": 160, "y": 90, "value": "RGB12图像格式转换" } },
{ "id": "ea1ec036-7fe4-4e2d-8e17-1840647c6cb3",fill:'#ccccccaa', "type": "ai-node", "x": 150, "y": 150, "properties": { "node": 301, "ui": "node-ai" }, "text": { "x": 160, "y": 150, "value": "VIT推理算子1" } },
{ "id": "3a03b42c-bc46-4eab-aac6-e2f2b9c83736", fill:'#ccccccaa',"type": "ai-node", "x": 150, "y": 220, "properties": { "node": 302, "ui": "node-ai" }, "text": { "x": 160, "y": 220, "value": "VIT推理算子2" } }], "edges": [{ "id": "54555484-e393-4a43-8b51-1f407dd42c11", "type": "polyline", "sourceNodeId": "node_1", "targetNodeId": "a758b24e-6a3f-4652-b7ea-4b844bf5d44a", "startPoint": { "x": 150, "y": 35 }, "endPoint": { "x": 150, "y": 75 }, "properties": {}, "pointsList": [{ "x": 150, "y": 35 }, { "x": 150, "y": 65 }, { "x": 150, "y": 65 }, { "x": 150, "y": 45 }, { "x": 150, "y": 45 }, { "x": 150, "y": 75 }] }, { "id": "46e53f10-8997-42fc-9107-9e0083670ce8", "type": "polyline", "sourceNodeId": "a758b24e-6a3f-4652-b7ea-4b844bf5d44a", "targetNodeId": "ea1ec036-7fe4-4e2d-8e17-1840647c6cb3", "startPoint": { "x": 150, "y": 105 }, "endPoint": { "x": 150, "y": 135 }, "properties": {}, "pointsList": [{ "x": 150, "y": 105 }, { "x": 150, "y": 135 }, { "x": 150, "y": 135 }, { "x": 150, "y": 105 }, { "x": 150, "y": 105 }, { "x": 150, "y": 135 }] }, { "id": "7d5407fa-01f5-457c-8504-f5f464dd254f", "type": "polyline", "sourceNodeId": "ea1ec036-7fe4-4e2d-8e17-1840647c6cb3", "targetNodeId": "3a03b42c-bc46-4eab-aac6-e2f2b9c83736", "startPoint": { "x": 150, "y": 165 }, "endPoint": { "x": 150, "y": 205 }, "properties": {}, "pointsList": [{ "x": 150, "y": 165 }, { "x": 150, "y": 195 }, { "x": 150, "y": 195 }, { "x": 150, "y": 175 }, { "x": 150, "y": 175 }, { "x": 150, "y": 205 }] }, { "id": "4ece042b-faf1-4e95-8213-ee1c9b6060c5", "type": "polyline", "sourceNodeId": "3a03b42c-bc46-4eab-aac6-e2f2b9c83736", "targetNodeId": "node_2", "startPoint": { "x": 150, "y": 235 }, "endPoint": { "x": 150, "y": 275 }, "properties": {}, "pointsList": [{ "x": 150, "y": 235 }, { "x": 150, "y": 265 }, { "x": 150, "y": 265 }, { "x": 150, "y": 245 }, { "x": 150, "y": 245 }, { "x": 150, "y": 275 }] }] }
logicFlow.render(data)
});
</script>
<style scoped lang='scss'>
.flow-demo1 {
height: 100%;
overflow: hidden;
padding: 20px 0px 10px;
.viewport {
height: 100%;
overflow: hidden;
}
.custom-anchor {
stroke: #999;
stroke-width: 1;
fill: #d9d9d9;
cursor: crosshair;
rx: 3;
ry: 3;
}
.custom-anchor:hover {
fill: #ff7f0e;
stroke: #ff7f0e;
}
.flow-card {
height: 80%;
width: calc(100% - 450px);
.el-card__body {
height: 100%;
padding: 4px;
}
margin: 0px 12px;
}
.node-panel {
width: 240px;
.el-tabs__item {
padding: 0px 10px !important;
}
}
.card-prop {
height: 300px;
width: 200px;
min-width: 200px;
}
}
</style>

196
src/views/protocol/edit.vue 100644
View File

@ -0,0 +1,196 @@
<template>
<div class="app-container protocol-edit">
<el-card>
<template #header>
互联信息</template>
<el-form ref="uploadForm" :model="upForm" label-width="120">
<el-row>
<el-col :span="12">
<el-form-item label="模型名称">
<el-input disabled v-model="upForm.name" placeholder="目标分类模型" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="模型版本">
<el-input disabled v-model="upForm.ver" placeholder="v1.0" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="互联名称">
<el-input v-model="upForm.netName" placeholder="请输入互联名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="标签">
<el-input v-model="upForm.label" placeholder="请输入标签" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="互联说明">
<el-input v-model="upForm.netName" type="textarea" style="width:100%;" :rows="4"
placeholder="请输入互联说明" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
<el-card style="margin-top: 12px;margin-bottom: 80px;">
<template #header>算子互联</template>
<div class="edit-content">
<div class="item" style="position: relative;">
<div class="line-arrow" style="position: absolute;left: 270px;width: 80px;border-bottom: solid 1px #409eff;top: 250px;">
<i-ep-arrow-right style="color:#409eff;position: absolute;right: -7px;top: -9px;"/>
</div>
<div class="div-title">
<i-ep-office-building/><span>可用算子</span>
</div>
<div class="div-nodes">
<nodePanel :lf="lf" ref="ndPanel"/>
</div>
</div>
<div class="item" style="margin-left: 100px;">
<div class="div-title">
<i-ep-setting/><span>互联设置</span>
</div>
<div class="div-chart">
<editFlow @initLf="doInitLf" @updateNode="doUpdateNode"/>
</div>
</div>
<div class="item" style="margin-left: 100px;">
<div class="div-title">
<i-ep-document/><span>算子基本信息</span>
</div>
<div class="div-info">
<div class="row">
<span class="sp-label">算子名称:</span>
<span class="sp-text">图像缩放</span>
</div>
<div class="row">
<span class="sp-label">算子版本:</span>
<span class="sp-text">1.0</span>
</div>
<div class="row">
<span class="sp-label">算子说明:</span>
<span class="sp-text">算子说明算子说明算子说明算子说明算子说明算子说明算子说明算子说明</span>
</div>
<div class="row">
<span class="sp-label">输入参数:</span>
<span class="sp-text">
size(1024,1080)
</span>
</div>
<div class="row">
<span class="sp-label">输出参数:</span>
<span class="sp-text">
<div>size:(1024,1080)</div>
<div>type:nearest</div>
</span>
</div>
</div>
</div>
</div>
</el-card>
<el-card class="card-footer">
<el-button type="primary" @click="doSave">保存</el-button>
<el-button @click="doCancel">取消</el-button>
</el-card>
</div>
</template>
<script lang='ts' setup>
import nodePanel from './nodePanel.vue'
import editFlow from './editFlow.vue'
const router = useRouter();
const uploadForm = ref(ElForm)
const upForm = reactive({
name: ''
})
let lf = ref(null)
const ndPanel=ref()
const doUpdateNode=(data:any)=>{
ndPanel.value.updateNode(data)
}
const doInitLf=(o:any)=>{
lf.value=o.value
}
const doSave=()=>{
router.replace({path:"/protocol/index"})
}
const doCancel=()=>{
router.replace({path:"/protocol/index"})
}
</script>
<style scoped lang='scss'>
.protocol-edit{
:deep(.el-card__header) {
padding: 8px 12px;
display: flex;
align-items: center;
font-weight: bold;
}
}
.card-footer{
position: fixed;
width: calc(100% - 215px);
bottom: 0px;
:deep(.el-card__body){
padding:10px;
.el-pagination{
justify-content: end;
}
}
}
.edit-content{
display: flex;
justify-content: center;
.item{
width:300px;
.div-title{
color:#409EFF;
display: flex;
align-items: center;
font-size: 12px;
}
.div-nodes{
border:solid 1px #409EFF;
min-height: 600px;
height: 600px;
:deep(.el-tabs--border-card){
border:none;
}
}
.div-chart{
border:solid 1px #409EFF;
min-height: 600px;
height: 600px;
}
.div-info{
border:dotted 1px #409EFF;
min-height: 600px;
height:600px;
padding:10px;
font-size: 12px;
.row{
display: flex;
.sp-label{
color:#888;
display: block;
white-space: nowrap;
}
.sp-text{
flex-grow: 1;
display: block;
}
}
}
}
}
</style>

187
src/views/protocol/editFlow.vue 100644
View File

@ -0,0 +1,187 @@
<template>
<div class="flow-demo1">
<div ref="flow" class="viewport" id="flowMain" />
</div>
</template>
<script lang='ts' setup>
import LogicFlow from '@logicflow/core';
// 引入整体背景的样式
import '@logicflow/core/dist/style/index.css';
import { Menu } from "@logicflow/extension";
import AiNodeExtension from '@/components/flow/index'
import RegisteMenu from '@/components/flow/menu.js'
const emit=defineEmits(["initLf","updateNode"])
const themeApprove = {
rect: { // 矩形样式
radius: 8,
stroke: '#3CB371'
},
circle: {
r: 25,
stroke: '#FF6347'
},
polygon: {
stroke: '#6495ED',
},
polyline: {
strokeWidth: 1,
stroke: '#6495ED'
},
edgeText: {
background: {
fill: 'white',
},
},
}
const config = {
stopScrollGraph: true,
stopZoomGraph: true,
grid: {
size: 10,
visible: true,
type: 'mesh',
config: {
color: '#DCDCDC',
}
},
keyboard: { enabled: true },
style: themeApprove,
plugins: [AiNodeExtension,Menu]
};
const flow = ref()
let lf = ref(null)
let showProp=ref(false)
let nodeData=reactive(null)
let nodePropKey=ref(1)
const initEvent=(lf)=>{
lf.on("element:click",node=>{
nodeData=node.data
showProp.value=true
nodePropKey.value++
console.log("-->",nodeData)
});
lf.on("node:dnd-add",data=>{
nodeData=data.data;
showProp.value=true
nodePropKey.value++
doUpdateState()
});
lf.on("node:delete",data=>{
if(data.data.text.value=="目标绘图"){
ElMessage.error("目标绘图节点不能删除");
setTimeout(() => {
lf.undo();
}, 400);
return;
}
doUpdateState()
});
lf.on("node:contextmenu",(d,e,p)=>{
if(d.data.text.value=="目标绘图"){
setTimeout(()=>{
document.querySelector(".lf-menu").style.display="none";
},0)
}
});
}
const doUpdateState=()=>{
//nodePanel.value.updateNode(lf.value.getGraphData());
emit("updateNode",lf.value.getGraphData())
}
onMounted(() => {
const logicFlow = new LogicFlow({
...config,
container: flow.value
})
lf.value = logicFlow
RegisteMenu(logicFlow)
initEvent(logicFlow);
emit("initLf",lf);
window.lf = lf;
logicFlow.render({
nodes: [
{
id: 'node_1',
type: 'ai-node',
x: 150,
y: 40,
fill:'#409effaa',
text: '图像缩放',
properties:{
node:201
}
},
{
id: 'node_2',
type: 'ai-node',
x: 150,
y: 540,
fill:'#3CB371',
text: '目标绘图',
properties:{
node:900
}
}
],
edges: [
]
})
doUpdateState();
});
</script>
<style scoped lang='scss'>
.flow-demo1 {
height: 100%;
overflow: hidden;
padding: 0px;
.viewport {
height: 100%;
overflow: hidden;
}
.custom-anchor {
stroke: #999;
stroke-width: 1;
fill: #d9d9d9;
cursor: crosshair;
rx: 3;
ry: 3;
}
.custom-anchor:hover {
fill: #ff7f0e;
stroke: #ff7f0e;
}
.flow-card {
height: 80%;
width: calc(100% - 450px);
.el-card__body {
height: 100%;
padding: 4px;
}
margin: 0px 12px;
}
.node-panel {
width: 240px;
.el-tabs__item {
padding: 0px 10px !important;
}
}
.card-prop {
height: 300px;
width: 200px;
min-width: 200px;
}
}
</style>

219
src/views/protocol/index.vue
View File

@ -1,11 +1,220 @@
<!-- 用户管理 -->
<template>
<div>
2222222
<div class="app-container">
<div class="search-container">
<el-form ref="queryFormRef" :model="queryParams" :inline="true" style="flex-grow: 1;text-align: right;">
<el-form-item label="" prop="keywords">
<el-input v-model="queryParams.keywords" placeholder="请输入互联名将，标签，模型名称" clearable style="width: 250px"
@keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
<el-button @click="resetQuery">
<i-ep-refresh />
重置</el-button>
</el-form-item>
</el-form>
</div>
<el-card shadow="never" class="table-container">
<el-table v-loading="loading" :data="tableData" stripe @selection-change="handleSelectionChange">
<el-table-column label="模型名称" align="left" prop="name" />
<el-table-column label="网络名称" align="left" prop="netName" width="120"/>
<el-table-column label="模型类型" align="left" prop="modelType" />
<el-table-column label="版本" align="left" prop="ver" />
<el-table-column label="互联名称" align="left" prop="netName" width="120"/>
<el-table-column label="互联说明" align="left" prop="desc" />
<el-table-column label="互联创建时间" width="120" align="left" prop="upTime" />
<el-table-column label="创建用户" width="100" align="left" prop="upUser" />
<el-table-column label="状态" width="100" align="left" prop="state">
<template #default="scope">
<el-button type="success" size="small" v-if="scope.row.state==1">已互联</el-button>
<el-button type="info" size="small" v-else plain>未互联</el-button>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" align="center" width="270">
<template #default="scope">
<template v-if="scope.row.state==1">
<el-button text type="primary" size="small"
@click="doShowDetail(scope.row)"><i-ep-edit />查看</el-button>
<el-button text type="primary" size="small"
@click="doEdit('user-form', scope.row.id)"><i-ep-link/>修改互联</el-button>
<el-button text type="primary" size="small" @click="handleDelete(scope.row)"><i-ep-delete />删除</el-button>
</template>
<template v-else>
<el-button text type="primary" size="small"
@click="doAdd(scope.row)">新建互联</el-button>
</template>
</template>
</el-table-column>
</el-table>
</el-card>
<el-card class="card-footer">
<pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
</el-card>
</div>
</template>
<script setup>
<script setup lang="ts">
import { UserQuery } from "@/api/user/model";
const queryFormRef = ref(ElForm); // 查询表单
const router = useRouter();
const loading = ref(false); // 加载状态
const removeIds = ref([]); // 删除用户ID集合 用于批量删除
const queryParams = reactive<UserQuery>({
pageNum: 1,
pageSize: 10,
});
const dateTimeRange = ref("");
const total = ref(100); // 数据总数
watch(dateTimeRange, (newVal) => {
if (newVal) {
queryParams.startTime = newVal[0];
queryParams.endTime = newVal[1];
}
});
const tableData = [
{
id:"1",
name: "模型名称模型名称模型名称查看",
netName: "VIT",
modelType: "图像分类",
ver: "1.0",
netName:'我的互联名称',
desc:'进行10种类型 的目标分类模型查看',
upTime: "2024-02-02",
upUser:'USER',
state:'1'
},
{
id:"2",
name: "模型名称模型名称模型名称查看",
netName: "Mobile-VIT",
modelType: "图像分类",
ver: "1.0",
netName:'我的互联名称',
desc:'进行10种类型 的目标分类模型查看',
upTime: "2024-02-02",
upUser:'USER' ,
state:'1'
},
{
id:"3",
name: "模型名称模型名称模型名称查看",
netName: "VIT",
modelType: "图像分类",
ver: "1.0",
netName:'我的互联名称',
desc:'进行人员检测的模型',
upTime: "2024-02-02",
upUser:'USER' ,
state:'1'
},
{
id:"4",
name: "模型名称模型名称模型名称查看",
netName: "Mobile-VIT",
modelType: "图像分类",
ver: "1.0",
netName:'我的互联名称',
desc:'进行10种类型 的目标分类模型查看',
upTime: "2024-02-02",
upUser:'USER' ,
state:'0'
},
{
id:"5",
name: "模型名称模型名称模型名称查看",
netName: "VIT",
modelType: "图像分类",
ver: "1.0",
netName:'我的互联名称',
desc:'进行人员检测的模型',
upTime: "2024-02-02",
upUser:'USER' ,
state:'0'
}
];
/** 查询 */
function handleQuery() {
loading.value = true;
ElMessage.success("查询成功");
loading.value = false;
}
function doUploadModel(){
router.replace({ path: "/modelMgr/uploadModel" });
}
/** 重置查询 */
function resetQuery() {
queryFormRef.value.resetFields();
dateTimeRange.value = "";
queryParams.pageNum = 1;
queryParams.deptId = undefined;
queryParams.startTime = undefined;
queryParams.endTime = undefined;
handleQuery();
}
/** 行选中 */
function handleSelectionChange(selection: any) {
removeIds.value = selection.map((item: any) => item.id);
}
/** 删除数据 */
function handleDelete(row: { [key: string]: any }) {
ElMessageBox.confirm("确认删除算子?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(function () {
ElMessage.success("删除成功");
});
}
const doShowDetail=(row:any)=>{
router.replace({path:"/protocol/detail",query:{id:row.id}})
}
const doEdit=(row:any)=>{
router.replace({path:"/protocol/edit",query:{id:row.id,type:'edit'}})
}
const doAdd=(row:any)=>{
router.replace({path:"/protocol/edit",query:{id:row.id,type:'add'}})
}
onMounted(() => {
//handleQuery();
});
</script>
<style scoped lang='less'>
</style>
<style scoped lang='scss'>
.search-container{
display:flex;
}
.card-footer{
position: fixed;
width: calc(100% - 215px);
bottom: 0px;
:deep(.el-card__body){
padding:0px;
.el-pagination{
justify-content: end;
}
}
}
</style>

87
src/views/protocol/nodePanel.vue 100644
View File

@ -0,0 +1,87 @@
<template>
<div class="node-panel">
<el-tabs type="border-card">
<el-tab-pane label="前处理算子">
<div v-for="(it1, idx1) in list1" :key="idx1" class="div-item" @mousedown="dragNode(it1, 1)" v-show="it1.show">
{{ it1.text }}
</div>
</el-tab-pane>
<el-tab-pane label="后处理算子">
<div v-for="(it2, idx2) in list2" :key="idx2" class="div-item item2" @mousedown="dragNode(it2, 2)" v-show="it2.show">
{{ it2.text }}
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script setup>
const props = defineProps({
lf: {
type: Object,
require: true,
default: null
}
})
const dragNode = (it, t) => {
props.lf.dnd.startDrag({
type: 'ai-node',
text: it.text,
fill: t == 1 ? '#409effaa' : '#ccccccaa',
properties:{
node:it.id
}
})
}
const list1 = reactive([
{ text: "图像缩放", id: 201,show:true },
{ text: "RGB12图像格式转换", id: 202,show:true },
{ text: "RGB24图像格式转换", id: 203,show:true },
{ text: "RGB36图像格式转换", id: 204,show:true },
{ text: "RGB48图像格式转换", id: 205,show:true },
{ text: "RGB72图像格式转换", id: 206,show:true }
])
const list2 = reactive([
{ text: "VIT推理算子1", id: 301,show:true },
{ text: "VIT推理算子2", id: 302,show:true },
{ text: "VIT后处理算子1", id: 303,show:true },
{ text: "VIT后处理算子2", id: 304,show:true },
{ text: "VIT后处理算子3", id: 305,show:true },
]);
const updateNode=(nodes)=>{
let nds=nodes.nodes.map(d=>d.properties.node);
list2.forEach(d=>{
d.show=nds.indexOf(d.id)==-1
})
list1.forEach(d=>{
d.show=nds.indexOf(d.id)==-1
})
}
defineExpose({
updateNode
})
</script>
<style lang='scss'>
.node-panel {
.div-item {
font-size: 12px;
border: solid 1px #888;
margin-bottom: 10px;
line-height: 30px;
text-align: center;
border-radius: 4px;
background: #409effaa;
user-select: none;
cursor: move;
&.item2 {
background: #ccccccaa;
}
}
}
</style>