feat: 视频播放器
This commit is contained in:
parent
6dfa2be64e
commit
5be800e579
@ -1,103 +0,0 @@
|
||||
|
||||
import { GroupNodeModel, GroupNode } from '@logicflow/extension'
|
||||
import { recursiveFilter } from "@/utils/convertNodeRedToLogicFlow";
|
||||
|
||||
class CustomGroupModel extends GroupNodeModel {
|
||||
initNodeData(data) {
|
||||
super.initNodeData(data);
|
||||
this.children = new Set(data.children || [])
|
||||
this.zIndex = 0;
|
||||
|
||||
this.width = data.w + 80; // 增加内边距
|
||||
this.height = data.h + 80;
|
||||
this.x = data.x;
|
||||
this.y = data.y;
|
||||
|
||||
setTimeout(() => {
|
||||
this.updateSize()
|
||||
const nodes = this.graphModel.nodes;
|
||||
const arr = recursiveFilter(nodes, this.id)
|
||||
arr.forEach((item) => {
|
||||
item.updateSize()
|
||||
})
|
||||
}, 0)
|
||||
}
|
||||
|
||||
setAttributes() {
|
||||
this.text.editable = false;
|
||||
}
|
||||
|
||||
getTextStyle() {
|
||||
const style = super.getTextStyle();
|
||||
style.fill = this.properties.style?.color || '#333';
|
||||
style.fontSize = 16;
|
||||
return style;
|
||||
}
|
||||
|
||||
updateSize() {
|
||||
const children = []
|
||||
this.children.forEach((id) => {
|
||||
children.push(this.graphModel.getNodeModelById(id))
|
||||
});
|
||||
if (children.length === 0) return;
|
||||
|
||||
let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
|
||||
children.forEach((node) => {
|
||||
minX = Math.min(minX, node.x - node.width / 2);
|
||||
maxX = Math.max(maxX, node.x + node.width / 2);
|
||||
minY = Math.min(minY, node.y - node.height / 2);
|
||||
maxY = Math.max(maxY, node.y + node.height / 2);
|
||||
});
|
||||
|
||||
this.width = maxX - minX + 80; // 增加内边距
|
||||
this.height = maxY - minY + 80;
|
||||
this.x = (minX + maxX) / 2;
|
||||
this.y = (minY + maxY) / 2;
|
||||
this.setTextCoordinate(this.width, this.height, this.x, this.y)
|
||||
}
|
||||
|
||||
setTextCoordinate(width, height, x, y) {
|
||||
const strategies = {
|
||||
"n": () => {
|
||||
this.text.x = x
|
||||
this.text.y = y - height / 2 + 20
|
||||
},
|
||||
"ne": () => {
|
||||
this.text.x = x + width / 2 - 20
|
||||
this.text.y = y - height / 2 + 20
|
||||
},
|
||||
"sw": () => {
|
||||
this.text.x = x - width / 2 + 20
|
||||
this.text.y = y + height / 2 - 20
|
||||
},
|
||||
"s": () => {
|
||||
this.text.x = x
|
||||
this.text.y = y + height / 2 - 20
|
||||
},
|
||||
"se": () => {
|
||||
this.text.x = x + width / 2 - 20
|
||||
this.text.y = y + height / 2 - 20
|
||||
},
|
||||
"default": () => {
|
||||
this.text.x = x - width / 2 + 20
|
||||
this.text.y = y - height / 2 + 20
|
||||
}
|
||||
};
|
||||
const labelPosition = this.properties.style?.['label-position'] || 'default'
|
||||
const action = strategies[labelPosition]
|
||||
action();
|
||||
}
|
||||
|
||||
removeChild(id) {
|
||||
this.children.delete(id) // 现在可安全调用
|
||||
}
|
||||
}
|
||||
|
||||
// 导出方法注册
|
||||
export function registerCustomGroup(lf) {
|
||||
lf.register({
|
||||
type: "customGroup",
|
||||
view: GroupNode,
|
||||
model: CustomGroupModel
|
||||
})
|
||||
}
|
||||
@ -1,238 +0,0 @@
|
||||
<template>
|
||||
<div class="custom_element" :class="props.properties.state">
|
||||
<div class="custom_element__header">
|
||||
<div class="custom_element__title">
|
||||
{{ props.text || "--" }}
|
||||
</div>
|
||||
<el-button v-if="showDetailTypeList.includes(props.properties.type)" v-popover="popoverRef" class="custom_element__btn" link @click="openPop"
|
||||
>详情</el-button
|
||||
>
|
||||
</div>
|
||||
<div class="nodeType">节点类型: {{ props.properties.type }}</div>
|
||||
<div class="nodeState">
|
||||
<div>状态：{{ stateMap[props.properties.state] }}</div>
|
||||
</div>
|
||||
<el-popover
|
||||
ref="popoverRef"
|
||||
virtual-triggering
|
||||
persistent
|
||||
placement="right-start"
|
||||
:visible="popoverVisible"
|
||||
popper-class="popover__container"
|
||||
>
|
||||
<template #default>
|
||||
<div class="popover__header">
|
||||
<div>{{ props.text || "--" }}</div>
|
||||
<div class="closeBtn" @click="popoverVisible = !popoverVisible">
|
||||
<el-icon><CircleClose /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="popover__context">
|
||||
<div class="container">
|
||||
<div class="title">输入参数</div>
|
||||
<el-input
|
||||
v-if="getTypeByParams(props.properties.input) === 0"
|
||||
v-model="props.properties.input"
|
||||
:readonly="true"
|
||||
:autosize="{ minRows: 2, maxRows: 6 }"
|
||||
type="textarea"
|
||||
/>
|
||||
<div v-if="getTypeByParams(props.properties.input) === 2">
|
||||
<el-image
|
||||
style="width: 200px; height: 100px"
|
||||
:src="getUrlByParams(props.properties.input)"
|
||||
:zoom-rate="2"
|
||||
:max-scale="7"
|
||||
:min-scale="0.2"
|
||||
:preview-src-list="[getUrlByParams(props.properties.input)]"
|
||||
show-progress
|
||||
:initial-index="4"
|
||||
fit="cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="title">输出参数</div>
|
||||
<el-input
|
||||
v-if="getTypeByParams(props.properties.output) === 0"
|
||||
v-model="props.properties.output"
|
||||
:readonly="true"
|
||||
:autosize="{ minRows: 2, maxRows: 6 }"
|
||||
type="textarea"
|
||||
/>
|
||||
<div v-if="getTypeByParams(props.properties.output) === 2" class="imageContainer">
|
||||
<el-image
|
||||
v-for="item in getUrlByParams(props.properties.output)"
|
||||
style="width: 60px; height: 60px"
|
||||
:src="item"
|
||||
:preview-src-list="getUrlByParams(props.properties.output)"
|
||||
show-progress
|
||||
fit="fill"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="getTypeByParams(props.properties.output) === 4" class="videoContainer">
|
||||
<IPlayer v-for="item in getUrlByParams(props.properties.output)" :videoUrl="item" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { watch } from "vue";
|
||||
import { CircleClose } from '@element-plus/icons-vue'
|
||||
import IPlayer from './IPlayer/index.vue'
|
||||
|
||||
const props = defineProps({
|
||||
model: Object,
|
||||
graphModel: Object,
|
||||
properties: Object,
|
||||
text: String,
|
||||
});
|
||||
|
||||
const stateMap = {
|
||||
success: "已执行",
|
||||
unexecuted: "未执行",
|
||||
running: "执行中",
|
||||
failed: "异常",
|
||||
paused: "暂停",
|
||||
stopped: "停止"
|
||||
};
|
||||
|
||||
const showDetailTypeList = ['inject', 'startCamera', 'getImage', 'stopCamera', 'process', 'end', 'stopVideo']
|
||||
|
||||
const popoverVisible = ref(false);
|
||||
const popoverRef = ref();
|
||||
|
||||
const openPop = (e) => {
|
||||
popoverVisible.value = true;
|
||||
};
|
||||
|
||||
const getTypeByParams = (str) => {
|
||||
let type = 0;
|
||||
try {
|
||||
const data = JSON.parse(str);
|
||||
type = data?.type || 0;
|
||||
} catch {
|
||||
type = 0;
|
||||
}
|
||||
return type;
|
||||
};
|
||||
|
||||
const propertiesTypeMap = {
|
||||
'2': 'imageUrl',
|
||||
'4': 'videoUrl',
|
||||
'default': ''
|
||||
}
|
||||
|
||||
const getUrlByParams = (str) => {
|
||||
let url = [];
|
||||
try {
|
||||
const data = JSON.parse(str);
|
||||
url = data?.[propertiesTypeMap[data?.type || 'default']] || 0;
|
||||
} catch {
|
||||
url = [];
|
||||
}
|
||||
return url;
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.properties.nowTime,
|
||||
() => {
|
||||
popoverVisible.value = false;
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom_element {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
color: skyblue;
|
||||
}
|
||||
}
|
||||
|
||||
.running, .paused, .stopped {
|
||||
background-color: #8bbf86;
|
||||
}
|
||||
|
||||
.unexecuted {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.success {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.failed {
|
||||
background-color: rgb(128, 41, 0);
|
||||
}
|
||||
|
||||
.nodeType {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.nodeState {
|
||||
margin: 8px 0;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.popover__container {
|
||||
width: 300px !important;
|
||||
|
||||
.popover__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.closeBtn {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.popover__context {
|
||||
.container {
|
||||
display: flex;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.title {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
width: 260px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.videoContainer {
|
||||
width: 260px;
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,134 +0,0 @@
|
||||
// 导入 HtmlNode 及其模型，为后续继承做准备
|
||||
import { HtmlNode, HtmlNodeModel } from '@logicflow/core';
|
||||
// 导入 Vue 相关方法，用于渲染组件
|
||||
import { createApp, h } from 'vue';
|
||||
import ElementPlus from 'element-plus'
|
||||
// 导入 Vue 组件
|
||||
import CustomFlow from './customFlow.vue';
|
||||
|
||||
/**
|
||||
* 定义一个 元素的 HTML 节点类，继承自 HtmlNode
|
||||
* 该类负责在 HTML 中渲染 元素，并处理其交互逻辑
|
||||
*/
|
||||
class CustomFlowHtmlNode extends HtmlNode {
|
||||
isMounted; // 标记组件是否已挂载
|
||||
r; // 渲染函数
|
||||
app; // Vue 应用实例
|
||||
|
||||
/**
|
||||
* 构造函数
|
||||
* @param props 传递给节点的属性，包括模型、图模型等
|
||||
*/
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.isMounted = false;
|
||||
// 创建 元素的渲染函数
|
||||
this.r = h(CustomFlow, {
|
||||
model: props.model,
|
||||
graphModel: props.graphModel,
|
||||
properties: {
|
||||
...props.model.getProperties(),
|
||||
},
|
||||
text: props.model.text.value,
|
||||
});
|
||||
|
||||
// 创建 Vue 应用实例，并指定渲染函数
|
||||
this.app = createApp({
|
||||
render: () => this.r
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 将 HTML 内容设置到指定的根元素上
|
||||
* @param rootEl 根元素
|
||||
*/
|
||||
setHtml(rootEl) {
|
||||
if (!this.isMounted) {
|
||||
this.isMounted = true;
|
||||
const node = document.createElement('div');
|
||||
node.style.width = '100%'
|
||||
node.style.height = '100%'
|
||||
rootEl.appendChild(node);
|
||||
this.app.use(ElementPlus) // 关键：单独注册ElementPlus
|
||||
this.app.mount(node);
|
||||
} else {
|
||||
this.r.component.props.properties = this.props.model.getProperties();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取节点文本内容
|
||||
* 对于元素，返回 null，因为其内容由特定组件渲染
|
||||
* @returns {null}
|
||||
*/
|
||||
getText() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 定义一个元素的 HTML 模型类，继承自 HtmlNodeModel
|
||||
* 该类主要设置节点的属性和样式
|
||||
*/
|
||||
class CustomFlowHtmlModel extends HtmlNodeModel {
|
||||
initNodeData(data) {
|
||||
super.initNodeData(data);
|
||||
// 仅允许从底部锚点连出
|
||||
this.sourceRules.push({
|
||||
message: '只能从输出锚点连线',
|
||||
validate: (sourceNode, targetNode, sourceAnchor) =>
|
||||
// sourceAnchor.name === 'right'
|
||||
sourceAnchor.properties.connectionType === 'source'
|
||||
});
|
||||
|
||||
// 仅允许连接到顶部锚点
|
||||
this.targetRules.push({
|
||||
message: '只能连接到输入锚点',
|
||||
validate: (sourceNode, targetNode, targetAnchor) =>
|
||||
// targetAnchor.name === 'left'
|
||||
targetAnchor.properties.connectionType === 'target'
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置节点属性
|
||||
* 包括宽度、高度、文本编辑属性等
|
||||
*/
|
||||
setAttributes() {
|
||||
this.width = 200;
|
||||
this.height = 100;
|
||||
this.text.editable = false;
|
||||
}
|
||||
|
||||
// 定义节点只有左右两个锚点. 锚点位置通过中心点和宽度算出来。
|
||||
getDefaultAnchor() {
|
||||
let _a = this, x = _a.x, y = _a.y, width = _a.width, height = _a.height;
|
||||
return [
|
||||
// { x: x, y: y - height / 2, id: "".concat(this.id, "_0") },
|
||||
{ x: x + width / 2, y: y, name: 'left', id: "".concat(this.id, "_1"), properties: { connectionType: 'target' } },
|
||||
// { x: x, y: y + height / 2, id: "".concat(this.id, "_2") },
|
||||
{ x: x - width / 2, y: y, name: 'right', id: "".concat(this.id, "_3"), properties: { connectionType: 'source' } },
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取节点轮廓样式
|
||||
* 覆盖父类方法，设置 stroke 属性为 none，以适应特定的视觉效果
|
||||
* @returns {object} 节点轮廓样式
|
||||
*/
|
||||
getOutlineStyle() {
|
||||
const style = super.getOutlineStyle();
|
||||
style.stroke = 'none';
|
||||
style.hover.stroke = 'none';
|
||||
return style;
|
||||
}
|
||||
}
|
||||
|
||||
// 导出方法注册
|
||||
export function registerCustomNode(lf) {
|
||||
lf.register({
|
||||
type: "CustomNode",
|
||||
view: CustomFlowHtmlNode,
|
||||
model: CustomFlowHtmlModel
|
||||
})
|
||||
}
|
||||
@ -1,294 +0,0 @@
|
||||
<template>
|
||||
<div class="flow_container">
|
||||
<div class="btn_container">
|
||||
<div class="instState">实例状态：<span :class="instStatus">{{ stateMap[instStatus]}}</span></div>
|
||||
<el-button key=" translateCenter" type="primary" @click="() => lfRef.translateCenter()">居中</el-button>
|
||||
<el-button key="fitView" type="primary" @click="() => lfRef.fitView()">适应屏幕</el-button>
|
||||
<el-button v-if="['RUNNING','PAUSED'].includes(instStatus)" type="primary" @click="stopFlow">停止</el-button>
|
||||
<el-button v-if="instStatus === 'RUNNING'" type="primary" @click="pauseFlow">暂停</el-button>
|
||||
<el-button v-if="instStatus === 'PAUSED'" type="primary" @click="restartFlow">恢复</el-button>
|
||||
</div>
|
||||
<div ref="containerRef" class="containerRef"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import LogicFlow from "@logicflow/core";
|
||||
import { Group } from "@logicflow/extension";
|
||||
import "@logicflow/core/es/index.css";
|
||||
import { convertNodeRedToLogicFlow, recursiveFilter, changeOtherNodeState } from '@/utils/convertNodeRedToLogicFlow'
|
||||
import { registerCustomNode } from "./customFlowNode";
|
||||
import { registerCustomGroup } from "./CustomGroup";
|
||||
import { getLogicFlow } from '@/api/test/log'
|
||||
import { pauseInst, resumeInst, stopInst } from '@/api/device/terminal'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const containerRef = ref(null);
|
||||
const lfRef = ref(null);
|
||||
// 在新窗口的脚本中
|
||||
const queryParams = new URLSearchParams(window.location.search);
|
||||
const instId = queryParams.get('instId') || '';
|
||||
const taskId = queryParams.get('taskId') || '';
|
||||
const itemId = queryParams.get('itemId') || '03e0842c2fd7ab7575636a473aeefc89';
|
||||
|
||||
const data = {
|
||||
nodes: [
|
||||
{
|
||||
id: "custom-node-1",
|
||||
text: "node-1",
|
||||
type: "CustomNode",
|
||||
x: 100,
|
||||
y: 100,
|
||||
},
|
||||
{
|
||||
id: 'custom-node-2',
|
||||
type: 'CustomNode',
|
||||
x: 300,
|
||||
y: 300,
|
||||
text: 'node-2',
|
||||
},
|
||||
],
|
||||
// 边
|
||||
edges: [
|
||||
{
|
||||
type: 'polyline',
|
||||
sourceNodeId: 'custom-node-1',
|
||||
targetNodeId: 'custom-node-2',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const dataNodes = ref([])
|
||||
|
||||
const loadNodeRedData = async () => {
|
||||
const {nodes, edges} = await convertNodeRedToLogicFlow(itemId)
|
||||
lfRef.value.render({
|
||||
nodes,
|
||||
edges
|
||||
})
|
||||
dataNodes.value = nodes
|
||||
setTimeout(() => {
|
||||
lfRef.value.fitView()
|
||||
}, 20)
|
||||
getLog()
|
||||
}
|
||||
|
||||
const getLog = async () => {
|
||||
const res = await getLogicFlow({
|
||||
instId,
|
||||
taskId,
|
||||
itemId
|
||||
})
|
||||
if (res.code === 200) {
|
||||
const arr = res.data.filter(item => {
|
||||
return item.nodeType
|
||||
})
|
||||
const map = new Map()
|
||||
arr.forEach(item => {
|
||||
if (['inject', 'start'].includes(item.nodeType)) { // , 'end'
|
||||
map.set(item.nodeId, {
|
||||
state: 'success',
|
||||
nodeType: item.nodeType,
|
||||
input: item.params
|
||||
})
|
||||
} else {
|
||||
let obj
|
||||
if (map.has(item.nodeId)) {
|
||||
obj = map.get(item.nodeId)
|
||||
} else {
|
||||
obj = {
|
||||
nodeType: item.nodeType,
|
||||
}
|
||||
}
|
||||
if (item.paramsType === 'INPUT') {
|
||||
obj.state = item.instStatus.toLowerCase(),
|
||||
obj.input = item.instStatus === 'FAILED' ? item.params : item.message
|
||||
} else {
|
||||
obj.state = item.instStatus.toLowerCase() === 'running' ? 'success' : item.instStatus.toLowerCase(),
|
||||
obj.output = item.instStatus === 'FAILED' ? item.message : item.params
|
||||
}
|
||||
map.set(item.nodeId, obj)
|
||||
}
|
||||
});
|
||||
|
||||
for (const [key, value] of map) {
|
||||
lfRef.value.setProperties(key, value)
|
||||
}
|
||||
changeOtherNodeState(dataNodes.value, lfRef.value)
|
||||
if (arr[arr.length - 1].nodeType !== 'end' && arr[arr.length - 1].instStatus !== 'FAILED') {
|
||||
setTimeout(() => {
|
||||
getLog()
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const stopFlow = async () => {
|
||||
const res = await stopInst(instId)
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('停止成功')
|
||||
getInstDetail()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
}
|
||||
|
||||
const pauseFlow = async () => {
|
||||
const res = await pauseInst(instId)
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('暂停成功')
|
||||
getInstDetail()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
}
|
||||
|
||||
const restartFlow = async () => {
|
||||
const res = await resumeInst(instId)
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('恢复成功')
|
||||
getInstDetail()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
}
|
||||
|
||||
const instStatus = ref('RUNNING')
|
||||
const stateMap = {
|
||||
SUCCESS: "已完成",
|
||||
RUNNING: "执行中",
|
||||
FAILED: "失败",
|
||||
PAUSED: "已暂停",
|
||||
STOPPED: "已终止"
|
||||
};
|
||||
|
||||
const getInstDetail = async () => {
|
||||
const res = await getLogicFlow({
|
||||
instId,
|
||||
taskId,
|
||||
itemId
|
||||
})
|
||||
if (res.code === 200) {
|
||||
const item = res.data[res.data.length - 1]
|
||||
instStatus.value = item.instStatus
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (containerRef.value) {
|
||||
const lf = new LogicFlow({
|
||||
container: containerRef.value,
|
||||
isSilentMode: true,
|
||||
adjustNodePosition: true,
|
||||
stopZoomGraph: false,
|
||||
stopScrollGraph: false,
|
||||
stopMoveGraph: false,
|
||||
autoExpand: true,
|
||||
adjustEdgeStartAndEnd: true,
|
||||
allowRotate: false,
|
||||
edgeTextEdit: false,
|
||||
keyboard: {
|
||||
enabled: true,
|
||||
},
|
||||
partial: true,
|
||||
background: {
|
||||
color: "#FFFFFF",
|
||||
},
|
||||
grid: true,
|
||||
edgeTextDraggable: false,
|
||||
nodeTextEdit: false, //节点是否可编辑。false不可编辑
|
||||
textEdit: false, //是否开启文本编辑
|
||||
style: {
|
||||
inputText: {
|
||||
background: "black",
|
||||
color: "white",
|
||||
},
|
||||
},
|
||||
idGenerator(type) {
|
||||
return type + "_" + Math.random();
|
||||
},
|
||||
plugins: [Group],
|
||||
group: {
|
||||
foldable: true, // 启用折叠功能
|
||||
foldSize: 30, // 折叠后显示的图标尺寸
|
||||
},
|
||||
});
|
||||
|
||||
// 注册自定义节点
|
||||
registerCustomNode(lf)
|
||||
registerCustomGroup(lf)
|
||||
// 渲染数据 data
|
||||
lf.render(data);
|
||||
|
||||
lf.on('node:dragstart', (data, e) => {
|
||||
lfRef.value.setProperties(data.data.id, {
|
||||
nowTime: new Date().getTime()
|
||||
})
|
||||
})
|
||||
|
||||
// 监听子节点拖动事件
|
||||
lf.on("node:mousemove", ({ data, e }) => {
|
||||
const { nodes } = lf.getGraphData();
|
||||
const arr = recursiveFilter(nodes, data.id)
|
||||
arr.forEach(item => {
|
||||
lf.getNodeModelById(item.id).updateSize()
|
||||
})
|
||||
});
|
||||
|
||||
// 监听子节点拖动事件
|
||||
lf.on("blank:drop", () => {
|
||||
getLog()
|
||||
});
|
||||
|
||||
lfRef.value = lf;
|
||||
}
|
||||
loadNodeRedData()
|
||||
getInstDetail()
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.flow_container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.btn_container {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
|
||||
.instState {
|
||||
margin-right: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
|
||||
.RUNNING, .PAUSED, .STOPPED {
|
||||
color: #8bbf86;
|
||||
}
|
||||
|
||||
.SUCCESS {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.FAILED {
|
||||
color: rgb(128, 41, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.containerRef) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.lf-graph {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -54,7 +54,7 @@ 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";
|
||||
import IPlayer from "@/components/IPlayer/index.vue";
|
||||
|
||||
const props = defineProps({
|
||||
model: Object,
|
||||
|
||||
@ -50,7 +50,7 @@ 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 "@/views/device/register/components/LogicFlow/IPlayer/index.vue";
|
||||
import IPlayer from "@/components/IPlayer/index.vue";
|
||||
|
||||
const props = defineProps({
|
||||
model: Object,
|
||||
|
||||
@ -37,7 +37,7 @@ 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";
|
||||
import IPlayer from "@/components/IPlayer/index.vue";
|
||||
|
||||
const props = defineProps({
|
||||
model: Object,
|
||||
|
||||
@ -53,7 +53,7 @@ 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";
|
||||
import IPlayer from "@/components/IPlayer/index.vue";
|
||||
|
||||
const props = defineProps({
|
||||
model: Object,
|
||||
|
||||
@ -37,7 +37,7 @@ 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";
|
||||
import IPlayer from "@/components/IPlayer/index.vue";
|
||||
|
||||
const props = defineProps({
|
||||
model: Object,
|
||||
|
||||
@ -38,7 +38,7 @@ 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";
|
||||
import IPlayer from "@/components/IPlayer/index.vue";
|
||||
|
||||
const props = defineProps({
|
||||
model: Object,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user