AIManage/src/views/connection/nodePanel.vue

<template>
    <div class="node-panel">
        <el-tabs type="border-card">
            <el-tab-pane label="前处理算子">
                <div v-for="(it1, idx1) in info.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 info.list2" :key="idx2" class="div-item item2" @mousedown="dragNode(it2, 2)"
                    v-show="it2.show">
                    {{ it2.text }}
                </div>
            </el-tab-pane>
            <el-tab-pane label="数据源算子">
                <div v-for="(it2, idx2) in info.list3" :key="idx2" class="div-item item3" @mousedown="dragNode(it2, 3)"
                    v-show="it2.show">
                    {{ it2.text }}
                </div>
            </el-tab-pane>
            <el-tab-pane label="数据报告算子">
                <div v-for="(it2, idx2) in info.list4" :key="idx2" class="div-item item4" @mousedown="dragNode(it2, 4)"
                    v-show="it2.show">
                    {{ it2.text }}
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import OperApi from '@/api/operator'
const props = defineProps({
    lf: {
        type: Object,
        require: true,
        default: null
    }
})
const dragNode = (it, t) => {
    let color = '#409effaa';
    if (t == 2) {
        color = '#ccccccaa';
    }
    if (t == 3) {
        color = '#038181aa';
    }
    if (t == 4) {
        color = '#eeb806aa';
    }
    props.lf.dnd.startDrag({
        type: 'ai-node',
        text: it.text,       
        properties: {
            fill: color,
            node: it.id,
            data: it
        }
    })
}
const info = reactive({
    list1: [],
    list2: [],
    list3: [],
    list4: []
})
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);
    if (info.all) {
        info.all.forEach(d => {
            d.show = nds.indexOf(d.id) == -1
        });
    }

}

const doEdit = (nd) => {    
    let tmps = info.all.filter(d => d.id == nd.id);
    if (tmps.length > 0) {
        tmps[0].inputs = nd.inputs;
        tmps[0].outputs = nd.outputs;
        tmps[0].process = nd.process;
    }
}
defineExpose({
    updateNode,
    doEdit,
})

const initData = () => {
    OperApi.list().then(d => {
        let tmps = (d.data?.data?.operator_list || []).map(it => {
            it.show = true;
            it.text = it.operator_name;
            it.id = it.operator_id
            if (!it.parameters) {
                it.parameters = {
                    inputs: [{
                        input_id: 1,
                        oper_inout_data_type: "image_rgb24,image_gray8",
                        size_x: {
                            type: "int", // 代表输入是一个整数
                            value: 480, // 这是具体输入的数值
                        },
                        size_y: {
                            type: "int",
                            value: 480,
                        }
                    },],
                    outputs: [{
                        output_id: 1,
                        oper_inout_data_type: "same_as_input", // 这是固定参数，表示与输入图像格式相同
                        size_x: {
                            type: "int", // 代表输入是一个整数
                            value: 580, // 这是具体输入的数值
                        },
                        size_y: {
                            type: "int",
                            value: 580,
                        },
                        scale: {
                            type: "float", // 代表输入是一个浮点数
                            value: 1.0, // 这是具体输入的数值
                        }
                    },],
                    process: {
                        method: {
                            type: "nearest/bilinear",
                            value: "nearest",
                        },
                    }
                }
            }
            return it;
        });
        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");
    });
}
onMounted(() => {
    initData();
});

</script>
<style lang='scss'>
.node-panel {
    .el-tabs__item {
        padding: 0px 8px !important;
    }

    .div-item {
        font-size: 12px;
        border: solid 1px #888;
        margin: 0px 40px 10px;
        line-height: 30px;
        text-align: center;
        border-radius: 4px;
        background: #409effaa;
        user-select: none;
        cursor: move;

        &.item2 {
            background: #ccccccaa;
        }

        &.item3 {
            background: #038181aa;
        }

        &.item4 {
            background: #eeb806aa;
        }
    }
}
</style>