aidlab/FiDA_Front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
X1627315083
2026-02-04 11:13:15 +08:00
parent 92ef11cd6d
commit 653cb98045
3 changed files with 69 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/assets/css/style.css
View File

@@ -1,9 +1,12 @@
body,
html,
p,
div,
ul,
ol,
li {
li,
h1,
h2,
h3,
p {
margin: 0;
padding: 0;
}

28
src/views/home/versionTree/tree/index.vue
View File

@@ -25,28 +25,9 @@ watch(()=>props.treeState,(newVal,oldVal)=>{
const view2Ref = ref(null)
const pushView2Item = (item)=>{
// if(node)view2Ref.value.pushNode(node)
// if(edge)view2Ref.value.pushEdge(edge)
view2Ref.value.push(item)
}
function traverseArray(items, callback) {
for (let i = 0; i < items.length; i++) {
const item = items[i]
callback(item, i)
if (item.children && Array.isArray(item.children) && item.children.length > 0) {
traverseArray(item.children, callback)
}
}
}
const addView2Item = ()=>{
traverseArray(versionsList, (item, index) => {
pushView2Item(item)
})
}
const view1List = ref([
{
name:'P1',
@@ -57,7 +38,8 @@ const view1List = ref([
}
])
onMounted(()=>{
addView2Item()
// addView2Item()
view2Ref.value.init(versionsList)
})
onUnmounted(()=>{
})
@@ -66,11 +48,11 @@ const {} = toRefs(data);
</script>
<template>
<div class="tree" v-show="treeStateTime">
<div v-if="!treeState" class="box view1">
<div v-show="!treeState" class="box view1">
<view1Item v-for="item in view1List" :key="item.name" :item="item"></view1Item>
</div>
<div v-else class="box view2">
<view2 :list="view1List" ref="view2Ref"></view2>
<div v-show="treeState" class="box view2">
<view2 ref="view2Ref"></view2>
</div>
</div>
</template>

84
src/views/home/versionTree/tree/view2/index.vue
View File

@@ -16,23 +16,24 @@ const props = defineProps({
//])
let selectId = ref(2)
const isLoad = ref(false)
// 节点类型：input、output、default、custom
// input:开始点，output：结尾点，default：普通节点，custom：自定义节点
const position = { x: 0, y: 0 }
const nodes = ref<Node[]>([
{ id: '1', type: 'input', label: 'Node 1', class: 'custom-node start', position, sourcePosition: 'bottom' },
{ id: '2', type: 'PrimaryNode', class: 'custom-node', data: { id: '主 1' }, position },
{ id: '2-1', type: 'SecondaryNode', class: 'custom-node', data: { id: '分 1-1' }, position },
{ id: '3', type: 'PrimaryNode', class: 'custom-node', data: { id: '主 2' }, position },
// { id: '1', type: 'input', label: 'Node 1', class: 'custom-node start', position, sourcePosition: 'bottom' },
// { id: '2', type: 'PrimaryNode', class: 'custom-node', data: { id: '主 1' }, position },
// { id: '2-1', type: 'SecondaryNode', class: 'custom-node', data: { id: '分 1-1' }, position },
// { id: '3', type: 'PrimaryNode', class: 'custom-node', data: { id: '主 2' }, position },
])
// 边类型：custom、default
// custom：自定义边，default：普通边，step：直角边，smoothstep：平滑边
const edges = ref<Edge[]>([
{ id: 'e1-2', source: '1', target: '2', type: 'smoothstep' },
{ id: 'e1-3', source: '2', target: '2-1', type: 'smoothstep', sourceHandle:'right',},
{ id: 'e1-4', source: '2', target: '3', type: 'smoothstep',sourceHandle:'bottom', animated: true },
// { id: 'e1-2', source: '1', target: '2', type: 'smoothstep' },
// { id: 'e1-3', source: '2', target: '2-1', type: 'smoothstep', sourceHandle:'right',},
// { id: 'e1-4', source: '2', target: '3', type: 'smoothstep',sourceHandle:'bottom', animated: true },
])
const { fitView } = useVueFlow()
const { layout } = useLayout()
@@ -51,8 +52,32 @@ const push = (item)=>{
if(nodes.value.length == 0){
nodes.value.push({ id: '0', type: 'input', label: 'Node 1', class: 'custom-node start', position, sourcePosition: 'bottom' })
}
let id = item.id.split('-')[0]
nodes.value.push(item)
let className = 'custom-node'
let id = item.id
let target = edges.value.length == 0?'0':item.id.slice(0, -2)
nodes.value.push({id,type:'SecondaryNode',class:className,position,data:item})
edges.value.push({ id, source: id, target, type: 'smoothstep' })
console.log()
}
function traverseArray(items, callback) {
for (let i = 0; i < items.length; i++) {
const item = items[i]
callback(item, i)
if (item.child && Array.isArray(item.child) && item.child.length > 0) {
traverseArray(item.child, callback)
}
}
}
const init = (list)=>{
isLoad.value = false
traverseArray(list, (item, index) => {
console.log()
push(item)
})
isLoad.value = true
console.log(nodes.value,edges.value)
}
//是否可拖动节点
@@ -69,27 +94,30 @@ onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({push})
defineExpose({init,push})
// const {} = toRefs(data);
</script>
<template>
<div class="view2">
<div @click="toggleNodesDraggable">拖拽节点</div>
<VueFlow :nodes="nodes" @nodes-initialized="layoutGraph('LR')" :edges="edges" @node-click="handleVueFlowNodeClick" :nodes-draggable="nodesDraggable">
<template #node-PrimaryNode="nodeProps">
<PrimaryNode v-bind="nodeProps" />
</template>
<template #node-SecondaryNode="nodeProps">
<SecondaryNode
v-bind="nodeProps"
:selectId="selectId"
/>
</template>
<div class="vueFlowBox" v-if="isLoad">
<div @click="toggleNodesDraggable">拖拽节点</div>
<VueFlow :nodes="nodes" @nodes-initialized="layoutGraph('LR')" :edges="edges" @node-click="handleVueFlowNodeClick" :nodes-draggable="nodesDraggable">
<template #node-PrimaryNode="nodeProps">
<PrimaryNode v-bind="nodeProps" />
</template>
<template #node-SecondaryNode="nodeProps">
<SecondaryNode
v-bind="nodeProps"
:selectId="selectId"
/>
</template>
<!-- <template #edge-custom="edgeProps">
<SpecialEdge v-bind="edgeProps" />
</template> -->
</VueFlow>
<!-- <template #edge-custom="edgeProps">
<SpecialEdge v-bind="edgeProps" />
</template> -->
</VueFlow>
</div>
</div>
</template>
<style lang="less">
@@ -101,7 +129,11 @@ defineExpose({push})
width: 100%;
height: 100%;
overflow: hidden;
>.vueFlowBox{
width: 100%;
height: 100%;
overflow: hidden;
}
:deep(.custom-node){
--vf-handle: #000;
--vf-node-color: #000;