131 lines
3.6 KiB
Vue
131 lines
3.6 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="!['img', 'video'].includes(props.properties.outputType)" :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"
|
||
:nodeType="props.properties.nodeType || 'NONE'"
|
||
:nodeDesc="props.properties.desc"
|
||
@setNodeName="setNodeName"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from "vue";
|
||
import NodeTitle from "../../components/NodeTitle.vue";
|
||
import NodeState from "../../components/NodeState.vue";
|
||
import "vue3-json-viewer/dist/index.css";
|
||
import { useFlowEvents } from "../../composables/useFlowEvents";
|
||
import IPlayer from "@/components/IPlayer/index.vue";
|
||
|
||
const { onFlowEvent } = useFlowEvents();
|
||
|
||
const props = defineProps({
|
||
model: Object,
|
||
properties: Object,
|
||
});
|
||
|
||
const emits = defineEmits(["contentChange"]);
|
||
|
||
/**
|
||
* 设置 setNodeName 对应的数据或交互；作用范围仅限当前组件或模块。
|
||
* @param {*} name 名称或事件名称
|
||
*/
|
||
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);
|
||
|
||
/**
|
||
* 关闭 closePopover 对应的数据或交互；作用范围仅限当前组件或模块。
|
||
*/
|
||
const closePopover = () => {
|
||
if (nodeStateRef.value) {
|
||
nodeStateRef.value.closePopover();
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
onFlowEvent("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");
|
||
}
|
||
});
|
||
|
||
onFlowEvent("contentChange", (data) => {
|
||
if (data.id === props.model.id) {
|
||
nodeOperatingStatus.value = "NORMAL";
|
||
inputJsonData.value = {};
|
||
outputJsonData.value = {};
|
||
emits("contentChange");
|
||
}
|
||
});
|
||
|
||
onFlowEvent("setProperties", (data) => {
|
||
if (data.id === props.model.id) {
|
||
emits("contentChange");
|
||
}
|
||
});
|
||
});
|
||
|
||
defineExpose({ closePopover })
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.node__container {
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
</style>
|