CMVR-AIMA/src/views/flow/nodes/function/codeNode.vue

<template>
  <div class="node__container" :class="props.model.id">
    <NodeState :state="nodeOperatingStatus" :runtimes="runtimes" ref="nodeStateRef">
      <template #input>
        <JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
      </template>
      <template #output>
        <div v-if="nodeOperatingStatus != 'FAILED'">
          <JsonViewer
            v-if="props.properties.outputType === 'json'"
            :value="outputJsonData"
            copyable
            boxed
            sort
            theme="light"
          />
          <el-image
            v-if="props.properties.outputType === 'img'"
            v-for="item in outputJsonData.imageUrl"
            style="width: 60px; height: 60px"
            :src="item"
            :preview-src-list="outputJsonData.imageUrl"
            :preview-teleported="true"
            show-progress
            fit="fill"
          />
          <IPlayer
            v-if="props.properties.outputType === 'video'"
            v-for="item in outputJsonData.videoUrl"
            :videoUrl="item"
          />
        </div>
        <div v-else>{{ errorInfoData }}</div>
      </template>
    </NodeState>
    <NodeTitle
      :icon="props.properties.icon"
      :nodeId="props.model.id"
      :nodeProperties="props.properties"
      :nodeType="props.properties.nodeType || 'NONE'"
      :nodeName="props.properties.name"
      :nodeDesc="props.properties.desc"
      @setNodeName="setNodeName"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import NodeTitle from "../../components/NodeTitle.vue";
import NodeState from "../../components/NodeState.vue";
import { emitter } from "@/utils/eventBus";
import IPlayer from "@/components/IPlayer/index.vue";

const props = defineProps({
  model: Object,
  properties: Object,
});

const emits = defineEmits(["contentChange"]);

const setNodeName = (name) => {
  const properties = lf.getProperties(props.model.id);
  lf.setProperties(props.model.id, {
    ...properties,
    name
  });
  emits("contentChange");
}

const nodeOperatingStatus = ref("NORMAL");
const runtimes = ref(0);
const inputJsonData = ref({});
const outputJsonData = ref({});
const errorInfoData = ref('');

const nodeStateRef = ref(null);

const closePopover = () => {
  if (nodeStateRef.value) {
    nodeStateRef.value.closePopover();
  }
}


onMounted(() => {
  emitter.on("changeNodeState", (data) => {
    if (data.nodeId === props.model.id) {
      nodeOperatingStatus.value = data.status;
      if (data.endTime && data.startTime) {
        runtimes.value = data.endTime - data.startTime;
      }
      let inputData = {};
      let output = {};
      errorInfoData.value = data?.message || ''
      try {
        inputData = JSON.parse(data.paramsIn) || {};
        output = JSON.parse(data.paramsOut) || {};
      } catch (error) {
        inputData = data.paramsIn || {};
        output = data.paramsOut || {};
      }
      inputJsonData.value = inputData;
      outputJsonData.value = output;
      emits("contentChange");
    }
  });

  emitter.on("contentChange", (data) => {
    if (data.id === props.model.id) {
      nodeOperatingStatus.value = "NORMAL";
      inputJsonData.value = {};
      outputJsonData.value = {};
      emits("contentChange");
    }
  });

  emitter.on("setProperties", (data) => {
    if (data.id === props.model.id) {
      emits("contentChange");
    }
  });
})

onUnmounted(() => {
  emitter.off("changeNodeState");
  emitter.off("contentChange");
  emitter.off("setProperties");
});

defineExpose({ closePopover })
</script>

<style lang="scss" scoped>
.node__container {
  width: 100%;
  height: auto;
}
</style>