From 04a44952e7b4f3482d82f980d50bb775f180331f Mon Sep 17 00:00:00 2001 From: haha Date: Tue, 16 Jul 2024 00:24:51 +0800 Subject: [PATCH] update code --- src/components/flow/nodes/BaseNode.js | 60 +++++++++++++++------------ src/views/connection/detail.vue | 4 ++ src/views/connection/nodePanel.vue | 60 +++++++++++++-------------- 3 files changed, 66 insertions(+), 58 deletions(-) diff --git a/src/components/flow/nodes/BaseNode.js b/src/components/flow/nodes/BaseNode.js index 89eddd2..5b04dc3 100644 --- a/src/components/flow/nodes/BaseNode.js +++ b/src/components/flow/nodes/BaseNode.js @@ -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, diff --git a/src/views/connection/detail.vue b/src/views/connection/detail.vue index b8c7d7c..ed6d50d 100644 --- a/src/views/connection/detail.vue +++ b/src/views/connection/detail.vue @@ -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; diff --git a/src/views/connection/nodePanel.vue b/src/views/connection/nodePanel.vue index 88c3cea..49ab599 100644 --- a/src/views/connection/nodePanel.vue +++ b/src/views/connection/nodePanel.vue @@ -1,30 +1,36 @@ @@ -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; } } }