diff --git a/src/views/connection/detail.vue b/src/views/connection/detail.vue index 308a7d5..2210650 100644 --- a/src/views/connection/detail.vue +++ b/src/views/connection/detail.vue @@ -44,25 +44,27 @@ - + -
-
+
+ + +
互联设置
- +
-
+
算子基本信息
- +
@@ -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; diff --git a/src/views/connection/detailFlow.vue b/src/views/connection/detailFlow.vue index 7794f45..8c12c98 100644 --- a/src/views/connection/detailFlow.vue +++ b/src/views/connection/detailFlow.vue @@ -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; }); \ No newline at end of file diff --git a/src/views/connection/editFlow.vue b/src/views/connection/editFlow.vue index abaef73..96762f3 100644 --- a/src/views/connection/editFlow.vue +++ b/src/views/connection/editFlow.vue @@ -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; } diff --git a/src/views/connection/nodePanel.vue b/src/views/connection/nodePanel.vue index 2d20664..bb92e56 100644 --- a/src/views/connection/nodePanel.vue +++ b/src/views/connection/nodePanel.vue @@ -2,12 +2,26 @@
-
+
{{ it1.text }}
-
+
+ {{ it2.text }} +
+ + +
+ {{ it2.text }} +
+ + +
{{ it2.text }}
@@ -16,6 +30,7 @@ \ No newline at end of file