87 lines
2.3 KiB
Vue
87 lines
2.3 KiB
Vue
|
<template>
|
||
|
|
<div class="node-panel">
|
||
|
|
<el-tabs type="border-card">
|
||
|
|
<el-tab-pane label="前处理算子">
|
||
|
|
<div v-for="(it1, idx1) in list1" :key="idx1" class="div-item" @mousedown="dragNode(it1, 1)" v-show="it1.show">
|
||
|
|
{{ it1.text }}
|
||
|
|
</div>
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="后处理算子">
|
||
|
|
<div v-for="(it2, idx2) in list2" :key="idx2" class="div-item item2" @mousedown="dragNode(it2, 2)" v-show="it2.show">
|
||
|
|
{{ it2.text }}
|
||
|
|
</div>
|
||
|
|
</el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
const props = defineProps({
|
||
|
|
lf: {
|
||
|
|
type: Object,
|
||
|
|
require: true,
|
||
|
|
default: null
|
||
|
|
}
|
||
|
|
})
|
||
|
|
const dragNode = (it, t) => {
|
||
|
|
props.lf.dnd.startDrag({
|
||
|
|
type: 'ai-node',
|
||
|
|
text: it.text,
|
||
|
|
fill: t == 1 ? '#409effaa' : '#ccccccaa',
|
||
|
|
properties:{
|
||
|
|
node:it.id
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
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);
|
||
|
|
list2.forEach(d=>{
|
||
|
|
d.show=nds.indexOf(d.id)==-1
|
||
|
|
})
|
||
|
|
list1.forEach(d=>{
|
||
|
|
d.show=nds.indexOf(d.id)==-1
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
defineExpose({
|
||
|
|
updateNode
|
||
|
|
})
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style lang='scss'>
|
||
|
|
.node-panel {
|
||
|
|
.div-item {
|
||
|
|
font-size: 12px;
|
||
|
|
border: solid 1px #888;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
line-height: 30px;
|
||
|
|
text-align: center;
|
||
|
|
border-radius: 4px;
|
||
|
|
background: #409effaa;
|
||
|
|
user-select: none;
|
||
|
|
cursor: move;
|
||
|
|
|
||
|
|
&.item2 {
|
||
|
|
background: #ccccccaa;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|