CMVR-IOT-UI/src/views/flow/nodes/function/sleep.vue

<template>
  <div class="node__container" :class="props.model.id">
    <NodeState :state="nodeOperatingStatus">
      <template #input>
        <JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
      </template>
      <template #output>
        <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" />
      </template>
    </NodeState>
    <NodeTitle
      :icon="props.properties.icon"
      :nodeId="props.model.id"
      :nodeProperties="props.properties"
      :nodeName="props.properties.name"
      :nodeDesc="props.properties.desc"
      :zoom-state="nodeZoom"
      @zoom="zoom"
      @setNodeName="setNodeName"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, nextTick } from "vue";
import { getInput, initNodeZoom } from "@/utils/flow";
import { useFlowStore } from "@/store/modules/flow";
import NodeTitle from "../../components/NodeTitle.vue";
import NodeState from "../../components/NodeState.vue";
import "vue3-json-viewer/dist/index.css";
import { emitter } from "@/utils/eventBus";
import IPlayer from "@/views/device/register/components/LogicFlow/IPlayer/index.vue";

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

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

const formData = reactive({
  nodeParams: [],
});


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

const nodeOperatingStatus = ref("NORMAL");
const inputJsonData = ref({});
const outputJsonData = ref({});

onMounted(() => {
  emitter.on("changeNodeState", (data) => {
    if (data.nodeId === props.model.id) {
      nodeOperatingStatus.value = data.status;
      let inputData = {};
      let output = {};
      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");
});

</script>

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