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

update code

main
haha 2024-07-08 00:19:00 +08:00
parent f4668da448
commit 4bcf5f9fef
5 changed files with 331 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/views/connection/detail.vue
View File

@ -44,25 +44,27 @@
</tr>
</table>
</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>
<div class="detail-content">
<div class="item">
<div class="detail-content" style="position: relative;">
<detailFlow ref="operFlow" @nodeClick="doNodeClick"/>
<div class="item" v-if="1==2">
<div class="div-title">
<i-ep-setting/><span>互联设置</span>
</div>
<div class="div-chart">
<detailFlow ref="operFlow" @nodeClick="doNodeClick"/>
</div>
</div>
<div class="item" style="margin-left: 100px;">
<div class="item node-info" style="margin-left: 100px;" v-if="info.selNode">
<div class="div-title">
<i-ep-document/><span>算子基本信息</span>
</div>
<div class="div-info">
<template v-if="info.selNode">
<div class="row">
<span class="sp-label">算子名称:</span>
<span class="sp-text">{{ info.selNode.operator_name }}</span>
@ -96,7 +98,7 @@
<span :key="it.key" style="display: block;" v-for="it in mapToArray(info.selNode.parameters)">{{ it.key }}:{{it.value }}</span>
</span>
</div>
</template>
</div>
</div>
</div>
@ -153,10 +155,21 @@ onMounted(() => {
align-items: center
}
.detail-content{
display: flex;
justify-content: center;
.item{
width:300px;
&.node-info{
position: absolute;
right:10px;
top:10px;
.div-chart{
min-height: unset;
height: auto;
}
.div-info{
min-height: unset;
height: auto;
}
}
.div-title{
color:#409EFF;
display: flex;

34
src/views/connection/detailFlow.vue
View File

@ -79,8 +79,9 @@ const showFlow=(o)=>{
let data={nodes:info.nodes,edges:info.edges};
lf.value.render(data)
}
defineExpose({
showFlow
showFlow,
})
const initEvent=(lf)=>{
lf.on("element:click",node=>{
@ -100,44 +101,19 @@ onMounted(() => {
})
initEvent(logicFlow);
lf.value = logicFlow
window.lf = lf;
/*
const data = {
"nodes": [
{ "id": "node_1", "type": "ai-node",fill:'#409effaa',"x": 150, "y": 20, "properties": { "node": 1, "ui": "node-ai" }, "text": { "x": 160, "y": 20, "value": "图像缩放" } },
{ "id": "node_2", "type": "ai-node",fill:'#3CB371', "x": 150, "y": 290, "properties": { "node": 2, "ui": "node-ai" }, "text": { "x": 160, "y": 290, "value": "目标绘图" } },
{ "id": "node_3", fill:'#409effaa',"type": "ai-node", "x": 150, "y": 90, "properties": { "node": 3, "ui": "node-ai" }, "text": { "x": 160, "y": 90, "value": "RGB12图像格式转换" } },
{ "id": "node_4",fill:'#ccccccaa', "type": "ai-node", "x": 150, "y": 150, "properties": { "node": 4, "ui": "node-ai" }, "text": { "x": 160, "y": 150, "value": "VIT推理算子1" } },
{ "id": "node_5", fill:'#ccccccaa',"type": "ai-node", "x": 150, "y": 220, "properties": { "node": 5, "ui": "node-ai" }, "text": { "x": 160, "y": 220, "value": "VIT推理算子2" } }],
"edges":
[{ "id": "54555484-e393-4a43-8b51-1f407dd42c11", "type": "polyline", "sourceNodeId": "node_1", "targetNodeId": "node_3", "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": "node_3", "targetNodeId": "node_4",
"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": "node_4", "targetNodeId": "node_5",
"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": "node_5", "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)
*/
window.lf = lf;
});
</script>
<style scoped lang='scss'>
.flow-demo1 {
height: 100%;
overflow: hidden;
padding: 20px 0px 10px;
.viewport {
height: 100%;
height: 600px;
overflow: hidden;
}

303
src/views/connection/edit.vue
View File

@ -8,31 +8,31 @@
<el-row>
<el-col :span="12">
<el-form-item label="模型名称">
<el-input disabled v-model="upForm.name" placeholder="目标分类模型" />
<el-input disabled v-model="upForm.model_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-input disabled v-model="upForm.model_version" 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-input v-model="upForm.connection_name" placeholder="请输入互联名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="标签">
<el-input v-model="upForm.label" placeholder="请输入标签" />
<el-input v-model="upForm.connection_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"
<el-input v-model="upForm.connection_desc" type="textarea" style="width:100%;" :rows="4"
placeholder="请输入互联说明" />
</el-form-item>
</el-col>
@ -40,96 +40,145 @@
</el-row>
</el-form>
</el-card>
<el-card style="margin-top: 12px;margin-bottom: 80px;">
<el-card style="margin-top: 12px;margin-bottom: 80px;" class="flow-card">
<template #header>算子互联</template>
<div class="edit-content">
<div class="item" style="position: relative;">
<div class="line-arrow" style="position: absolute;left: 100%;margin-left:10px; width: 80px;border-bottom: solid 1px #409eff;top: 250px;">
<i-ep-arrow-right style="color:#409eff;position: absolute;right: -7px;top: -9px;"/>
<div class="edit-content" style="position: relative;">
<div class="item" style="position: relative;width:380px;">
<div class="line-arrow"
style="position: absolute;left: 100%;margin-left:10px; 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 class="div-title" style="display: none;">
<i-ep-office-building /><span>可用算子</span>
</div>
<div class="div-nodes">
<nodePanel :lf="lf" ref="ndPanel"/>
<nodePanel :lf="lf" ref="ndPanel" />
</div>
</div>
<div class="item" style="margin-left: 100px;">
<div class="div-title">
<i-ep-setting/><span>互联设置</span>
<div style="flex-grow: 1;">
<editFlow ref="edFlow" @initLf="doInitLf" @updateNode="doUpdateNode" @nodeClick="doNodeClick" />
</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 class="item flow-info" style="margin-left: 100px;" v-if="selNode.info">
<div class="div-title">
<i-ep-document /><span>算子基本信息</span>
</div>
<div class="row">
<span class="sp-label">算子版本:</span>
<span class="sp-text">1.0</span>
<div class="div-info">
<div class="row">
<span class="sp-label">算子名称:</span>
<span class="sp-text">{{ selNode.info.operator_name }}</span>
</div>
<div class="row">
<span class="sp-label">算子版本:</span>
<span class="sp-text">{{ selNode.info.operator_version }}</span>
</div>
<div class="row">
<span class="sp-label">算子说明:</span>
<span class="sp-text">{{ selNode.info.operator_desc }}</span>
</div>
<div class="row">
<span class="sp-label">输入参数:</span>
<span class="sp-text">
<el-input v-model="selNode.info.inputParams" type="textarea" style="width:100%;"
:rows="4" @input="doFlowInput" />
</span>
</div>
<div class="row" style="margin-top:4px;">
<span class="sp-label">输出参数:</span>
<span class="sp-text">
<el-input v-model="selNode.info.outputParams" type="textarea" style="width:100%;"
:rows="4" @input="doFlowInput" />
</span>
</div>
</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-button @click="doCancel">取消</el-button>
</el-card>
</div>
</template>
<script lang='ts' setup>
<script setup>
import nodePanel from './nodePanel.vue'
import editFlow from './editFlow.vue'
import ConnApi from '@/api/connection'
const router = useRouter();
const uploadForm = ref(ElForm)
const route = useRoute()
const upForm = reactive({
name: ''
model_name: '',
model_version: '',
connection_name: '',
connection_label: '',
connection_desc: ''
});
const info = reactive({
connInfo: null,
nodes: [],
})
const selNode = reactive({
info: null
})
let lf = ref(null)
const ndPanel=ref()
const doUpdateNode=(data:any)=>{
ndPanel.value.updateNode(data)
let edFlow = ref()
const ndPanel = ref()
const doFlowInput = () => {
let tmps = info.nodes.filter(d => d.id == selNode.info.id);
if (tmps.length == 0) {
info.nodes.push(selNode.info)
} else {
tmps[0].inputParams = selNode.info.inputParams;
tmps[0].outputParams = selNode.info.outputParams;
}
}
const doInitLf=(o:any)=>{
lf.value=o.value
const doUpdateNode = (data) => {
if (ndPanel && ndPanel.value) {
ndPanel.value.updateNode(data)
}
}
const doSave=()=>{
router.replace({path:"/connection/index"})
const doNodeClick = (node) => {
if (node) {
selNode.info = node.data.properties.data;
let tmps = info.nodes.filter(d => d.id == selNode.info.id);
if (tmps.length == 0) {
info.nodes.push(selNode.info);
} else {
selNode.info.inputParams = tmps[0].inputParams;
selNode.info.outputParams = tmps[0].outputParams;
}
}
else {
selNode.info = null;
}
}
const doCancel=()=>{
router.replace({path:"/connection/index"})
const doInitLf = (o) => {
lf.value = o.value
}
const doSave = () => {
router.replace({ path: "/connection/index" })
}
const doCancel = () => {
router.replace({ path: "/connection/index" })
}
const initData = () => {
let id = route.query.id;
ConnApi.detail(id).then(d => {
info.connInfo = d.data?.data || {};
upForm.model_name = info.connInfo.model_name;
upForm.model_version = info.connInfo.model_version;
upForm.model_name = info.connInfo.model_name;
upForm.model_name = info.connInfo.model_name;
});
};
onMounted(() => {
initData();
window.xapp = getCurrentInstance();
});
</script>
<style scoped lang='scss'>
.connection-edit{
.connection-edit {
:deep(.el-card__header) {
padding: 8px 12px;
display: flex;
@ -137,60 +186,90 @@ const doCancel=()=>{
font-weight: bold;
}
}
.card-footer{
position: fixed;
width: calc(100% - 215px);
bottom: 0px;
:deep(.el-card__body){
padding:10px;
.el-pagination{
justify-content: end;
.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;
.flow-card {
:deep(.el-card__body) {
padding: 0px;
}
}
.edit-content {
display: flex;
.item {
width: 300px;
&.flow-info {
position: absolute;
top: 10px;
right: 10px;
background: #fff;
.div-info {
min-height: unset;
height: auto;
}
}
.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;
align-items: center;
font-size: 12px;
}
.div-nodes{
border:solid 1px #409EFF;
min-height: 600px;
height: 600px;
:deep(.el-tabs--border-card){
border:none;
.sp-label {
color: #888;
display: block;
white-space: nowrap;
}
}
.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;
}
.sp-text {
flex-grow: 1;
display: block;
}
}
}
}
}
</style>

22
src/views/connection/editFlow.vue
View File

@ -11,7 +11,7 @@ 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 emit=defineEmits(["initLf","updateNode","nodeClick"])
const themeApprove = {
rect: { // 矩形样式
radius: 8,
@ -56,13 +56,16 @@ let showProp=ref(false)
let nodeData=reactive(null)
let nodePropKey=ref(1)
const initEvent=(lf)=>{
lf.on("blank:click",node=>{
emit("nodeClick",null)
});
lf.on("element:click",node=>{
nodeData=node.data
showProp.value=true
nodePropKey.value++
console.log("-->",nodeData)
emit("nodeClick",node)
});
lf.on("node:dnd-add",data=>{
lf.on("node:dnd-add",data=>{
nodeData=data.data;
showProp.value=true
nodePropKey.value++
@ -86,11 +89,16 @@ const initEvent=(lf)=>{
}
});
}
const doEdit=(n)=>{
debugger
}
const doUpdateState=()=>{
//nodePanel.value.updateNode(lf.value.getGraphData());
emit("updateNode",lf.value.getGraphData())
}
defineExpose({
doEdit,
})
onMounted(() => {
const logicFlow = new LogicFlow({
...config,
@ -103,7 +111,7 @@ onMounted(() => {
window.lf = lf;
logicFlow.render({
nodes: [
{
/* {
id: 'node_1',
type: 'ai-node',
x: 150,
@ -124,7 +132,7 @@ onMounted(() => {
properties:{
node:900
}
}
}*/
],
edges: [
@ -140,7 +148,7 @@ onMounted(() => {
padding: 0px;
.viewport {
height: 100%;
height: 600px;
overflow: hidden;
}

123
src/views/connection/nodePanel.vue
View File

@ -2,12 +2,26 @@
<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">
<div v-for="(it1, idx1) in info.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">
<div v-for="(it2, idx2) in info.list2" :key="idx2" class="div-item item2" @mousedown="dragNode(it2, 2)"
v-show="it2.show">
{{ it2.text }}
</div>
</el-tab-pane>
<el-tab-pane label="数据源算子">
<div v-for="(it2, idx2) in info.list3" :key="idx2" class="div-item item3" @mousedown="dragNode(it2, 3)"
v-show="it2.show">
{{ it2.text }}
</div>
</el-tab-pane>
<el-tab-pane label="数据报告算子">
<div v-for="(it2, idx2) in info.list4" :key="idx2" class="div-item item4" @mousedown="dragNode(it2, 4)"
v-show="it2.show">
{{ it2.text }}
</div>
</el-tab-pane>
@ -16,6 +30,7 @@
</template>
<script setup>
import OperApi from '@/api/operator'
const props = defineProps({
lf: {
type: Object,
@ -24,54 +39,104 @@ const props = defineProps({
}
})
const dragNode = (it, t) => {
let color = '#409effaa';
if (t == 2) {
color = '#ccccccaa';
}
if (t == 3) {
color = '#038181aa';
}
if (t == 4) {
color = '#eeb806aa';
}
props.lf.dnd.startDrag({
type: 'ai-node',
text: it.text,
fill: t == 1 ? '#409effaa' : '#ccccccaa',
properties:{
node:it.id
fill: color,
properties: {
node: it.id,
data:it
}
})
}
const info = reactive({
list1: [],
list2: [],
list3: [],
list4: []
})
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 }
{ 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 },
{ 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
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
list1.forEach(d => {
d.show = nds.indexOf(d.id) == -1
})
}
const doEdit=(nd)=>{
debugger
let tmps=info.all.filter(d=>d.id==nd.id);
if(tmps.length>0){
tmps[0].inputParams=nd.inputParams;
tmps[0].outputParams=nd.inputParams;
}
}
defineExpose({
updateNode
updateNode,
doEdit,
})
const initData = () => {
OperApi.list().then(d => {
let tmps = (d.data?.data?.operator_list || []).map(it => {
it.show = true;
it.text = it.operator_name;
it.id = it.operator_id
it.inputParams="";
it.outputParams="";
return it;
});
info.all=tmps;
info.list1 = tmps.filter(d => d.oper_main_type == "pre_process");
info.list2 = tmps.filter(d => d.oper_main_type == "post_process");
info.list3 = tmps.filter(d => d.oper_main_type == "data_source");
info.list4 = tmps.filter(d => d.oper_main_type == "data_report");
});
}
onMounted(() => {
initData();
});
</script>
<style lang='scss'>
.node-panel {
.el-tabs__item {
padding: 0px 8px !important;
}
.div-item {
font-size: 12px;
border: solid 1px #888;
margin-bottom: 10px;
margin: 0px 40px 10px;
line-height: 30px;
text-align: center;
border-radius: 4px;
@ -82,6 +147,14 @@ defineExpose({
&.item2 {
background: #ccccccaa;
}
&.item3 {
background: #038181aa;
}
&.item4 {
background: #eeb806aa;
}
}
}
</style>