CMVR-IOT-UI/src/views/flow/nodes/common/startNode.vue

<template>
  <div class="node__container" :class="props.model.id">
    <keep-alive>
      <NodeState :state="nodeOperatingStatus" :runtimes="runtimes" ref="nodeStateRef">
        <template #input>
          <JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
        </template>
        <!-- <template #output>
        <JsonViewer :value="outputJsonData" copyable boxed sort theme="light" />
      </template> -->
      </NodeState>
    </keep-alive>
    <div class="title__container">
      <div class="title">
       <div class="left">
         <img src="../../icon/start.svg" alt="" />
          <span class="text">Start</span>
       </div>
      </div>
      <div class="subTitle">工作流的起始节点，用于设定启动工作流需要的信息</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import NodeState from "../../components/NodeState.vue";
import "vue3-json-viewer/dist/index.css";
import { emitter } from "@/utils/eventBus";

const props = defineProps({
  model: Object,
  properties: Object,
});
const emits = defineEmits(["contentChange"]);


const nodeOperatingStatus = ref("NORMAL");
const runtimes = ref(0);
const inputJsonData = ref({});
const outputJsonData = 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 = {};
      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;

  .title__container {
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        img {
          width: 24px;
          height: 24px;
        }

        .text {
          font-size: 16px;
          font-weight: bold;
          margin-left: 12px;
        }
      }

      .right {
        .el-button {
          border: none;
          font-size: 24px;
        }
      }
    }

    .subTitle {
      color: #737a87;
      font-size: 12px;
      margin: 8px 0;
    }
  }
}
</style>

<style lang="scss">
.popover__container {
  min-width: 300px !important;

  .params__container {
    margin-bottom: 12px;

    .paramsTitle {
      color: #0c0d0e;
      font-size: 14px;
      font-weight: 500;
    }
  }
}
</style>