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

上传字体包 版本树页面

Browse Source
This commit is contained in:
X1627315083@163.com
2026-02-05 10:43:18 +08:00
parent 29baa2f786
commit 58c7e4187b
48 changed files with 566 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,39 +1,40 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, nextTick } from "vue";
import { ref, onMounted, onUnmounted, reactive, nextTick, watch } from "vue";
import type { Node, Edge } from '@vue-flow/core'
import { VueFlow, useVueFlow } from '@vue-flow/core'
import SpecialEdge from './speciaiEdge.vue'
import PrimaryNode from './primaryNode.vue'//主
import InputNode from './InputNode.vue'//主
import SecondaryNode from './secondaryNode.vue'//分支
import { useLayout } from './tools/tools'
const props = defineProps({
item: {
selectItem: {
type: Object,
default: () => ({})
} as any,
treeList: {
type: Array,
default: () => []
}
})
//const emit = defineEmits([
//])
let selectId = ref(2)
const isLoad = ref(false)
const emit = defineEmits([
'setSelectItem',
])
// 节点类型：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 },
// { id: '2', type: 'SecondaryNode', class: 'custom-node', data: { id: '主 1' }, position },
// { id: '2-1', type: 'SecondaryNode', class: 'custom-node', data: { id: '主 2' }, position },
// { id: '3', type: 'SecondaryNode', class: 'custom-node', data: { id: '主 3' }, 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-3', source: '2', target: '2-1', type: 'smoothstep', },
// { id: 'e1-4', source: '2', target: '3', type: 'smoothstep', animated: true },
])
const { fitView } = useVueFlow()
const { layout } = useLayout()
@@ -47,37 +48,19 @@ async function layoutGraph(direction) {
}, 0)
}
let elIndex = 1
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' })
nodes.value.push({ id: '0', type: 'InputNode', class: 'custom-node', position })
}
let className = 'custom-node'
let className = `custom-node item${item.id.replace(/-/g, "_")}`
let id = item.id
let target = edges.value.length == 0?'0':item.id.slice(0, -2)
let source = 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()
edges.value.push({ id, target:id, source, type: 'smoothstep' })
}
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)
const initialized = ()=>{
layoutGraph('TB')
}
//是否可拖动节点
@@ -86,29 +69,39 @@ const toggleNodesDraggable = () => {
nodesDraggable.value = !nodesDraggable.value
}
const handleVueFlowNodeClick = (node: Node) => {
console.log(node)
const handleVueFlowNodeClick = ({node}) => {
if(node.data.id)emit('setSelectItem', node.data)
}
watch(()=>props.treeList.length, (newVal, oldVal) => {
nodes.value = []
edges.value = []
props.treeList.forEach(item=>{
push(item)
})
},{immediate:true})
watch(()=>props.selectItem.id, (newVal, oldVal) => {
})
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({init,push})
defineExpose({push})
// const {} = toRefs(data);
</script>
<template>
<div class="view2">
<div class="vueFlowBox" v-if="isLoad">
<div class="vueFlowBox">
<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" />
<VueFlow :nodes="nodes" @nodes-initialized="initialized" :edges="edges" @node-click="handleVueFlowNodeClick" :nodes-draggable="nodesDraggable">
<template #node-InputNode="nodeProps">
<InputNode v-bind="nodeProps" />
</template>
<template #node-SecondaryNode="nodeProps">
<SecondaryNode
v-bind="nodeProps"
:selectId="selectId"
:selectItem="props.selectItem"
/>
</template>
@@ -135,41 +128,31 @@ defineExpose({init,push})
overflow: hidden;
}
:deep(.custom-node){
--vf-handle: #000;
--vf-node-color: #000;
--vf-box-shadow: #000;
font-size: 1.2rem;
width: var(--treeItem-width);
height: var(--treeItem-height);
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--treeItem-raduis);
border: var(--treeItem-border);
color: #000;
cursor: pointer;
background-color: var(--treeItem-background);
box-sizing: border-box;
.vue-flow__handle-right{
transform: translate(calc(50% + 2px), -50%);
}
.vue-flow__handle-left{
transform: translate(calc(-50% - 2px), -50%);
}
.vue-flow__handle-top{
transform: translate(-50%, calc(-50% - 2px));
}
.vue-flow__handle-bottom{
transform: translate(-50%, calc(50% + 2px));
}
&.active{
background-color: var(--treeItem-active-background);
}
&.start{
background-color: #7A7A7A;
color: #FFF;
border: 2px solid #7A7A7A;
.node{
--vf-handle: #000;
--vf-node-color: #000;
--vf-box-shadow: #000;
font-size: 1.2rem;
width: var(--treeItem-width);
height: var(--treeItem-height);
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--treeItem-raduis);
border: var(--treeItem-border);
color: #000;
cursor: pointer;
background-color: var(--treeItem-background);
box-sizing: border-box;
&.active{
background-color: var(--treeItem-active-background);
}
&.start{
background-color: #7A7A7A;
color: #FFF;
border: 2px solid #7A7A7A;
}
}
}
}