update code
parent
4060da1afb
commit
04a44952e7
|
|
@ -20,7 +20,7 @@ class RedNodeModel extends RectNodeModel {
|
||||||
initNodeData(data) {
|
initNodeData(data) {
|
||||||
super.initNodeData(data);
|
super.initNodeData(data);
|
||||||
this.width = 200;
|
this.width = 200;
|
||||||
this.height = 60;
|
this.height = 70;
|
||||||
this.radius = 5;
|
this.radius = 5;
|
||||||
this.text.x = this.x + 10;
|
this.text.x = this.x + 10;
|
||||||
this.defaultFill = data.fill || "rgb(253, 208, 162)";
|
this.defaultFill = data.fill || "rgb(253, 208, 162)";
|
||||||
|
|
@ -119,7 +119,7 @@ class RedNode extends RectNode {
|
||||||
y: y - 0,
|
y: y - 0,
|
||||||
},
|
},
|
||||||
h("circle", {
|
h("circle", {
|
||||||
r: 10,
|
r: 9,
|
||||||
cx: 10,
|
cx: 10,
|
||||||
cy: 10,
|
cy: 10,
|
||||||
fill: "#0bdd0b",
|
fill: "#0bdd0b",
|
||||||
|
|
@ -127,11 +127,11 @@ class RedNode extends RectNode {
|
||||||
h(
|
h(
|
||||||
"text",
|
"text",
|
||||||
{
|
{
|
||||||
x: 10,
|
x: 9,
|
||||||
y: 16,
|
y: 14,
|
||||||
style: "text-anchor:middle;fill:#000;font-size:16px;",
|
style: "text-anchor:middle;fill:#fff;font-size:12px;",
|
||||||
},
|
},
|
||||||
"i" + idx
|
"" + idx
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -144,7 +144,7 @@ class RedNode extends RectNode {
|
||||||
y: y - 20,
|
y: y - 20,
|
||||||
},
|
},
|
||||||
h("circle", {
|
h("circle", {
|
||||||
r: 10,
|
r: 9,
|
||||||
cx: 10,
|
cx: 10,
|
||||||
cy: 10,
|
cy: 10,
|
||||||
fill: "#ffb01f",
|
fill: "#ffb01f",
|
||||||
|
|
@ -152,11 +152,11 @@ class RedNode extends RectNode {
|
||||||
h(
|
h(
|
||||||
"text",
|
"text",
|
||||||
{
|
{
|
||||||
x: 10,
|
x: 9,
|
||||||
y: 16,
|
y: 14,
|
||||||
style: "text-anchor:middle;fill:#000;font-size:16px;",
|
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 { text, x, y, width, height, radius } = this.props.model;
|
||||||
const style = this.props.model.getNodeStyle();
|
const style = this.props.model.getNodeStyle();
|
||||||
const fillColor=this.props.model.properties.fill||"#FFA726";
|
const fillColor=this.props.model.properties.fill||"#FFA726";
|
||||||
let subText=(this.props.model.properties?.data?.oper_sub_type_name||"");
|
let subText=(this.props.model.properties?.data?.oper_main_type_name||"");
|
||||||
let subType = (this.props.model.properties?.data?.oper_sub_type_name||"").split("").filter(t=>t.length>0).map((t,idx)=>{
|
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",{
|
return h("text",{
|
||||||
x:x-width/2+8,
|
x:x-width/2+8,
|
||||||
y:y+idx*13-(subText.length==3?8:14),
|
y:txtY,
|
||||||
style: "text-anchor:left;fill:#FFCDD2;font-size:12px;",
|
style: "text-anchor:left;fill:#fff;font-size:12px;",
|
||||||
},t)
|
},t)
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -185,7 +191,7 @@ class RedNode extends RectNode {
|
||||||
y: y - height / 2 - 0,
|
y: y - height / 2 - 0,
|
||||||
},
|
},
|
||||||
h("circle", {
|
h("circle", {
|
||||||
r: 10,
|
r: 9,
|
||||||
cx: 10,
|
cx: 10,
|
||||||
cy: 10,
|
cy: 10,
|
||||||
fill: "#0bdd0b",
|
fill: "#0bdd0b",
|
||||||
|
|
@ -193,11 +199,11 @@ class RedNode extends RectNode {
|
||||||
h(
|
h(
|
||||||
"text",
|
"text",
|
||||||
{
|
{
|
||||||
x: 10,
|
x: 9,
|
||||||
y: 16,
|
y: 14,
|
||||||
style: "text-anchor:middle;fill:#000;font-size:16px;",
|
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,
|
y: y + height / 2 - 20,
|
||||||
},
|
},
|
||||||
h("circle", {
|
h("circle", {
|
||||||
r: 10,
|
r: 9,
|
||||||
cx: 10,
|
cx: 10,
|
||||||
cy: 10,
|
cy: 10,
|
||||||
fill: "#ffb01f",
|
fill: "#ffb01f",
|
||||||
|
|
@ -219,11 +225,11 @@ class RedNode extends RectNode {
|
||||||
h(
|
h(
|
||||||
"text",
|
"text",
|
||||||
{
|
{
|
||||||
x: 10,
|
x: 9,
|
||||||
y: 16,
|
y: 14,
|
||||||
style: "text-anchor:middle;fill:#000;font-size:16px;",
|
style: "text-anchor:middle;fill:#fff;font-size:12px;",
|
||||||
},
|
},
|
||||||
"o" + (idx + 1)
|
"" + (idx + 1)
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
@ -245,7 +251,7 @@ class RedNode extends RectNode {
|
||||||
ry: radius,
|
ry: radius,
|
||||||
}),
|
}),
|
||||||
h("rect",{
|
h("rect",{
|
||||||
fill: "#C62828",
|
fill: "#45C4DD",
|
||||||
x: x - width / 2,
|
x: x - width / 2,
|
||||||
y: y - height / 2,
|
y: y - height / 2,
|
||||||
width:30,
|
width:30,
|
||||||
|
|
@ -254,7 +260,7 @@ class RedNode extends RectNode {
|
||||||
ry: radius,
|
ry: radius,
|
||||||
}),
|
}),
|
||||||
h("rect",{
|
h("rect",{
|
||||||
fill: "#C62828",
|
fill: "#45C4DD",
|
||||||
x: x - width / 2+20,
|
x: x - width / 2+20,
|
||||||
y: y - height / 2,
|
y: y - height / 2,
|
||||||
width:10,
|
width:10,
|
||||||
|
|
|
||||||
|
|
@ -190,6 +190,10 @@ const doOutputSelected=idx=>{
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-content {
|
.detail-content {
|
||||||
|
.sp-text{
|
||||||
|
display: inline-block;
|
||||||
|
margin-left:4px;
|
||||||
|
}
|
||||||
.sp-paramter {
|
.sp-paramter {
|
||||||
height: 100px;
|
height: 100px;
|
||||||
border: solid 1px #409EFF;
|
border: solid 1px #409EFF;
|
||||||
|
|
|
||||||
|
|
@ -1,30 +1,36 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="node-panel">
|
<div class="node-panel">
|
||||||
<el-tabs type="border-card">
|
<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)"
|
<div v-for="(it1, idx1) in info.list1" :key="idx1" class="div-item" @mousedown="dragNode(it1, 1)"
|
||||||
v-show="it1.show">
|
v-show="it1.show">
|
||||||
{{ it1.text }}
|
{{ it1.text }}
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</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)"
|
<div v-for="(it2, idx2) in info.list2" :key="idx2" class="div-item item2" @mousedown="dragNode(it2, 2)"
|
||||||
v-show="it2.show">
|
v-show="it2.show">
|
||||||
{{ it2.text }}
|
{{ it2.text }}
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</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)"
|
<div v-for="(it2, idx2) in info.list3" :key="idx2" class="div-item item3" @mousedown="dragNode(it2, 3)"
|
||||||
v-show="it2.show">
|
v-show="it2.show">
|
||||||
{{ it2.text }}
|
{{ it2.text }}
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</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)"
|
<div v-for="(it2, idx2) in info.list4" :key="idx2" class="div-item item4" @mousedown="dragNode(it2, 4)"
|
||||||
v-show="it2.show">
|
v-show="it2.show">
|
||||||
{{ it2.text }}
|
{{ it2.text }}
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</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>
|
</el-tabs>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -39,15 +45,18 @@ const props = defineProps({
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
const dragNode = (it, t) => {
|
const dragNode = (it, t) => {
|
||||||
let color = '#409effaa';
|
let color = '#83BBF0';
|
||||||
if (t == 2) {
|
if (t == 2) {
|
||||||
color = '#ccccccaa';
|
color = '#20C2F9';
|
||||||
}
|
}
|
||||||
if (t == 3) {
|
if (t == 3) {
|
||||||
color = '#038181aa';
|
color = '#82DFE7';
|
||||||
}
|
}
|
||||||
if (t == 4) {
|
if (t == 4) {
|
||||||
color = '#eeb806aa';
|
color = '#A7BEE7';
|
||||||
|
}
|
||||||
|
if (t == 5) {
|
||||||
|
color = '#4C8DD1';
|
||||||
}
|
}
|
||||||
props.lf.dnd.startDrag({
|
props.lf.dnd.startDrag({
|
||||||
type: 'ai-node',
|
type: 'ai-node',
|
||||||
|
|
@ -63,24 +72,9 @@ const info = reactive({
|
||||||
list1: [],
|
list1: [],
|
||||||
list2: [],
|
list2: [],
|
||||||
list3: [],
|
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) => {
|
const updateNode = (nodes) => {
|
||||||
let nds = nodes.nodes.map(d => d.properties.node);
|
let nds = nodes.nodes.map(d => d.properties.node);
|
||||||
|
|
@ -154,8 +148,9 @@ const initData = () => {
|
||||||
info.all = tmps;
|
info.all = tmps;
|
||||||
info.list1 = tmps.filter(d => d.oper_main_type == "pre_process");
|
info.list1 = tmps.filter(d => d.oper_main_type == "pre_process");
|
||||||
info.list2 = tmps.filter(d => d.oper_main_type == "post_process");
|
info.list2 = tmps.filter(d => d.oper_main_type == "post_process");
|
||||||
info.list3 = tmps.filter(d => d.oper_main_type == "data_source");
|
info.list3 = tmps.filter(d => d.oper_main_type == "inference");
|
||||||
info.list4 = tmps.filter(d => d.oper_main_type == "data_report");
|
info.list4 = tmps.filter(d => d.oper_main_type == "data_source");
|
||||||
|
info.list5 = tmps.filter(d => d.oper_main_type == "data_report");
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|
@ -176,20 +171,23 @@ onMounted(() => {
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background: #409effaa;
|
background: #83BBF0;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
cursor: move;
|
cursor: move;
|
||||||
|
|
||||||
&.item2 {
|
&.item2 {
|
||||||
background: #ccccccaa;
|
background: #20C2F9;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.item3 {
|
&.item3 {
|
||||||
background: #038181aa;
|
background: #82DFE7;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.item4 {
|
&.item4 {
|
||||||
background: #eeb806aa;
|
background: #A7BEE7;
|
||||||
|
}
|
||||||
|
&.item5 {
|
||||||
|
background: #4C8DD1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue