126 lines
3.5 KiB
Vue
126 lines
3.5 KiB
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>
|
|
<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, onMounted, onUnmounted } from "vue";
|
|
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 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 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;
|
|
}
|
|
</style>
|