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-tab-pane label="数据报告">
        <div v-for="(it2, idx2) in info.list5" :key="idx2" class="div-item item5" @mousedown="dragNode(it2, 5)"
          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 = '#83BBF0';
  if (t == 2) {
    color = '#20C2F9';
  }
  if (t == 3) {
    color = '#82DFE7';
  }
  if (t == 4) {
    color = '#A7BEE7';
  }
  if (t == 5) {
    color = '#4C8DD1';
  }
  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: [],
  list5: [],
})

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({ page_num: 1, page_size: 100 }).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 == "inference");
    info.list4 = tmps.filter(d => d.oper_main_type == "data_source");
    info.list5 = 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: #83BBF0;
    user-select: none;
    cursor: move;

    &.item2 {
      background: #20C2F9;
    }

    &.item3 {
      background: #82DFE7;
    }

    &.item4 {
      background: #A7BEE7;
    }

    &.item5 {
      background: #4C8DD1;
    }
  }
}
</style>