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

update code

main
haha 2024-07-16 00:24:51 +08:00
parent 4060da1afb
commit 04a44952e7
3 changed files with 66 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/flow/nodes/BaseNode.js
View File

@ -20,7 +20,7 @@ class RedNodeModel extends RectNodeModel {
initNodeData(data) {
super.initNodeData(data);
this.width = 200;
this.height = 60;
this.height = 70;
this.radius = 5;
this.text.x = this.x + 10;
this.defaultFill = data.fill || "rgb(253, 208, 162)";
@ -119,7 +119,7 @@ class RedNode extends RectNode {
y: y - 0,
},
h("circle", {
r: 10,
r: 9,
cx: 10,
cy: 10,
fill: "#0bdd0b",
@ -127,11 +127,11 @@ class RedNode extends RectNode {
h(
"text",
{
x: 10,
y: 16,
style: "text-anchor:middle;fill:#000;font-size:16px;",
x: 9,
y: 14,
style: "text-anchor:middle;fill:#fff;font-size:12px;",
},
"i" + idx
"" + idx
)
);
}
@ -144,7 +144,7 @@ class RedNode extends RectNode {
y: y - 20,
},
h("circle", {
r: 10,
r: 9,
cx: 10,
cy: 10,
fill: "#ffb01f",
@ -152,11 +152,11 @@ class RedNode extends RectNode {
h(
"text",
{
x: 10,
y: 16,
style: "text-anchor:middle;fill:#000;font-size:16px;",
x: 9,
y: 14,
style: "text-anchor:middle;fill:#fff;font-size:12px;",
},
"o" + idx
"" + idx
)
);
}
@ -165,12 +165,18 @@ class RedNode extends RectNode {
const { text, x, y, width, height, radius } = this.props.model;
const style = this.props.model.getNodeStyle();
const fillColor=this.props.model.properties.fill||"#FFA726";
let subText=(this.props.model.properties?.data?.oper_sub_type_name||"");
let subType = (this.props.model.properties?.data?.oper_sub_type_name||"").split("").filter(t=>t.length>0).map((t,idx)=>{
let subText=(this.props.model.properties?.data?.oper_main_type_name||"");
let subType = (this.props.model.properties?.data?.oper_main_type_name||"").split("").filter(t=>t.length>0).map((t,idx)=>{
let txtY=y+idx*13-14;
if(subText.length==3){
txtY=y+idx*16-10;
}else if(subText.length==2){
txtY=y+idx*22-5;
}
return h("text",{
x:x-width/2+8,
y:y+idx*13-(subText.length==3?8:14),
style: "text-anchor:left;fill:#FFCDD2;font-size:12px;",
y:txtY,
style: "text-anchor:left;fill:#fff;font-size:12px;",
},t)
});
@ -185,7 +191,7 @@ class RedNode extends RectNode {
y: y - height / 2 - 0,
},
h("circle", {
r: 10,
r: 9,
cx: 10,
cy: 10,
fill: "#0bdd0b",
@ -193,11 +199,11 @@ class RedNode extends RectNode {
h(
"text",
{
x: 10,
y: 16,
style: "text-anchor:middle;fill:#000;font-size:16px;",
x: 9,
y: 14,
style: "text-anchor:middle;fill:#fff;font-size:12px;",
},
"i" + (idx + 1)
"" + (idx + 1)
)
)
);
@ -211,7 +217,7 @@ class RedNode extends RectNode {
y: y + height / 2 - 20,
},
h("circle", {
r: 10,
r: 9,
cx: 10,
cy: 10,
fill: "#ffb01f",
@ -219,11 +225,11 @@ class RedNode extends RectNode {
h(
"text",
{
x: 10,
y: 16,
style: "text-anchor:middle;fill:#000;font-size:16px;",
x: 9,
y: 14,
style: "text-anchor:middle;fill:#fff;font-size:12px;",
},
"o" + (idx + 1)
"" + (idx + 1)
)
)
);
@ -245,7 +251,7 @@ class RedNode extends RectNode {
ry: radius,
}),
h("rect",{
fill: "#C62828",
fill: "#45C4DD",
x: x - width / 2,
y: y - height / 2,
width:30,
@ -254,7 +260,7 @@ class RedNode extends RectNode {
ry: radius,
}),
h("rect",{
fill: "#C62828",
fill: "#45C4DD",
x: x - width / 2+20,
y: y - height / 2,
width:10,

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

@ -190,6 +190,10 @@ const doOutputSelected=idx=>{
}
.detail-content {
.sp-text{
display: inline-block;
margin-left:4px;
}
.sp-paramter {
height: 100px;
border: solid 1px #409EFF;

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

@ -1,30 +1,36 @@
<template>
<div class="node-panel">
<el-tabs type="border-card">
<el-tab-pane label="前处理算子">
<el-tab-pane label="前处理">
<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="后处理算子">
<el-tab-pane label="后处理">
<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="数据源算子">
<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="数据报告算子">
<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>
<el-tab-pane label="数据报告">
<div v-for="(it2, idx2) in info.list5" :key="idx2" class="div-item item5" @mousedown="dragNode(it2, 5)"
v-show="it2.show">
{{ it2.text }}
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
@ -39,15 +45,18 @@ const props = defineProps({
}
})
const dragNode = (it, t) => {
let color = '#409effaa';
let color = '#83BBF0';
if (t == 2) {
color = '#ccccccaa';
color = '#20C2F9';
}
if (t == 3) {
color = '#038181aa';
color = '#82DFE7';
}
if (t == 4) {
color = '#eeb806aa';
color = '#A7BEE7';
}
if (t == 5) {
color = '#4C8DD1';
}
props.lf.dnd.startDrag({
type: 'ai-node',
@ -63,24 +72,9 @@ const info = reactive({
list1: [],
list2: [],
list3: [],
list4: []
list4: [],
list5: [],
})
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);
@ -154,8 +148,9 @@ const initData = () => {
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");
info.list3 = tmps.filter(d => d.oper_main_type == "inference");
info.list4 = tmps.filter(d => d.oper_main_type == "data_source");
info.list5 = tmps.filter(d => d.oper_main_type == "data_report");
});
}
onMounted(() => {
@ -176,20 +171,23 @@ onMounted(() => {
line-height: 30px;
text-align: center;
border-radius: 4px;
background: #409effaa;
background: #83BBF0;
user-select: none;
cursor: move;
&.item2 {
background: #ccccccaa;
background: #20C2F9;
}
&.item3 {
background: #038181aa;
background: #82DFE7;
}
&.item4 {
background: #eeb806aa;
background: #A7BEE7;
}
&.item5 {
background: #4C8DD1;
}
}
}