|
|
|
|
<template>
|
|
|
|
|
<div class="leftPanel">
|
|
|
|
|
<el-tabs v-model="leftPanelState" class="demo-tabs" type="border-card">
|
|
|
|
|
<el-tab-pane label="图表组件" name="1">
|
|
|
|
|
<el-card style="width: 80px" shadow="never" :draggable="true"
|
|
|
|
|
@dragstart="onDragStart($event, 'line')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
|
|
|
|
:body-style="{padding:'4px 0'}">
|
|
|
|
|
<template #header>
|
|
|
|
|
<StarFilled />
|
|
|
|
|
</template>
|
|
|
|
|
折线
|
|
|
|
|
</el-card>
|
|
|
|
|
<el-card style="width: 80px" shadow="never" :draggable="true"
|
|
|
|
|
@dragstart="onDragStart($event, 'customBoard')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
|
|
|
|
:body-style="{padding:'4px 0'}">
|
|
|
|
|
<template #header>
|
|
|
|
|
<StarFilled />
|
|
|
|
|
</template>
|
|
|
|
|
自定义图表1
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
<el-tab-pane label="数据源" name="2">
|
|
|
|
|
<el-card style="width: 80px" shadow="never" :draggable="true"
|
|
|
|
|
@dragstart="onDragStart($event, 'data')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
|
|
|
|
:body-style="{padding:'4px 0'}">
|
|
|
|
|
<template #header>
|
|
|
|
|
<StarFilled />
|
|
|
|
|
</template>
|
|
|
|
|
设备数据
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
<el-tab-pane label="表单组件" name="3">
|
|
|
|
|
<el-card style="width: 80px" shadow="never" :draggable="true"
|
|
|
|
|
@dragstart="onDragStart($event, 'inputNode')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
|
|
|
|
:body-style="{padding:'4px 0'}">
|
|
|
|
|
<template #header>
|
|
|
|
|
<StarFilled />
|
|
|
|
|
</template>
|
|
|
|
|
输入框
|
|
|
|
|
</el-card>
|
|
|
|
|
<el-card style="width: 80px" shadow="never" :draggable="true"
|
|
|
|
|
@dragstart="onDragStart($event, 'time')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
|
|
|
|
:body-style="{padding:'4px 0'}">
|
|
|
|
|
<template #header>
|
|
|
|
|
<StarFilled />
|
|
|
|
|
</template>
|
|
|
|
|
时间
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
</el-tabs>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content" @drop="onDrop">
|
|
|
|
|
<VueFlow :min-zoom="0.01" ref="flowRef" v-model:nodes="nodes" v-model:edges="edges" fit-view-on-init
|
|
|
|
|
default-marker-color="#409EFF"
|
|
|
|
|
@connect="logEvent('connect', $event)"
|
|
|
|
|
@node-click="logEvent('click', $event)"
|
|
|
|
|
@node-contextMenu="logEvent('contextmenu', $event)"
|
|
|
|
|
@dragover="onDragOver"
|
|
|
|
|
>
|
|
|
|
|
<Background :size="1" :gap="20" pattern-color="#BDBDBD" style="background-color: #000" />
|
|
|
|
|
|
|
|
|
|
<template #node-area="areaNodeProps">
|
|
|
|
|
<AreaNode v-bind="areaNodeProps"></AreaNode>
|
|
|
|
|
</template>
|
|
|
|
|
<template #node-customBoard="customBoardNodeProps">
|
|
|
|
|
<CustomBoardNode :inputData=getInputData(customBoardNodeProps.id) v-bind="customBoardNodeProps"
|
|
|
|
|
@resize="resize"></CustomBoardNode>
|
|
|
|
|
</template>
|
|
|
|
|
<template #node-line="lineNodeProps">
|
|
|
|
|
<LineNode :inputData=getInputData(lineNodeProps.id) v-bind="lineNodeProps"
|
|
|
|
|
@resize="resize"></LineNode>
|
|
|
|
|
</template>
|
|
|
|
|
<template #node-data="dataNodeProps">
|
|
|
|
|
<DataNode :inputData=getInputData(dataNodeProps.id) v-bind="dataNodeProps"
|
|
|
|
|
@resize="resize"></DataNode>
|
|
|
|
|
</template>
|
|
|
|
|
<template #node-inputNode="inputNodeProps">
|
|
|
|
|
<InputNode :inputData=getInputData(inputNodeProps.id) v-bind="inputNodeProps"
|
|
|
|
|
@resize="resize"></InputNode>
|
|
|
|
|
</template>
|
|
|
|
|
<template #node-time="timeNodeProps">
|
|
|
|
|
<TimeNode :inputData=getInputData(timeNodeProps.id) v-bind="timeNodeProps"
|
|
|
|
|
@resize="resize"></TimeNode>
|
|
|
|
|
</template>
|
|
|
|
|
</VueFlow>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="rightPanel">
|
|
|
|
|
<el-form :model="nodeAttrForm" label-width="auto" style="max-width: 600px" v-if="nodeAttrForm">
|
|
|
|
|
<el-form-item label="输出字段名" v-if="Object.keys(nodeAttrForm).includes('field')">
|
|
|
|
|
<el-input v-model="nodeAttrForm.field" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="开始时间字段名" v-if="Object.keys(nodeAttrForm).includes('startTimeId')">
|
|
|
|
|
<el-input v-model="nodeAttrForm.startTimeId" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="结束时间字段名" v-if="Object.keys(nodeAttrForm).includes('endTimeId')">
|
|
|
|
|
<el-input v-model="nodeAttrForm.endTimeId" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
{{ nodes }}
|
|
|
|
|
<br />
|
|
|
|
|
---
|
|
|
|
|
<br />
|
|
|
|
|
{{ edges }}
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { v4 as uuidv4 } from 'uuid';
|
|
|
|
|
import { MarkerType, VueFlow, useVueFlow } from '@vue-flow/core';
|
|
|
|
|
import { Background } from '@vue-flow/background';
|
|
|
|
|
import { StarFilled } from '@element-plus/icons-vue';
|
|
|
|
|
import LineNode from './nodes/board/lineNode.vue';
|
|
|
|
|
import CustomBoardNode from './nodes/board/customBoardNode.vue';
|
|
|
|
|
import DataNode from './nodes/data/dataNode.vue';
|
|
|
|
|
import InputNode from './nodes/form/inputNode.vue';
|
|
|
|
|
import TimeNode from './nodes/form/timeNode.vue';
|
|
|
|
|
import AreaNode from './nodes/other/areaNode.vue';
|
|
|
|
|
import tool from './tool';
|
|
|
|
|
|
|
|
|
|
// 获取tool文件提供的方法
|
|
|
|
|
const { onDragStart, onDrop, onDragOver } = tool();
|
|
|
|
|
|
|
|
|
|
// flow内置方法
|
|
|
|
|
const {
|
|
|
|
|
addEdges
|
|
|
|
|
} = useVueFlow();
|
|
|
|
|
|
|
|
|
|
const leftPanelState = ref('1');
|
|
|
|
|
const areaId = `area_${uuidv4().replaceAll('-', '_')}`;
|
|
|
|
|
// const nodes = ref([{
|
|
|
|
|
// id: areaId,
|
|
|
|
|
// name: 'area',
|
|
|
|
|
// type: 'area',
|
|
|
|
|
// position: {
|
|
|
|
|
// x: 0,
|
|
|
|
|
// y: 0
|
|
|
|
|
// },
|
|
|
|
|
// data: { label: areaId }
|
|
|
|
|
// }]);
|
|
|
|
|
// const edges = ref([]);
|
|
|
|
|
const nodes = ref([
|
|
|
|
|
{
|
|
|
|
|
'id': 'area_474cfc79_4011_495e_9fb3_5e268ad09cfe',
|
|
|
|
|
'type': 'area',
|
|
|
|
|
'dimensions': { 'width': 1910, 'height': 970 },
|
|
|
|
|
'computedPosition': { 'x': 0, 'y': 0, 'z': 0 },
|
|
|
|
|
'handleBounds': { 'source': null, 'target': null },
|
|
|
|
|
'selected': false,
|
|
|
|
|
'dragging': false,
|
|
|
|
|
'resizing': false,
|
|
|
|
|
'initialized': false,
|
|
|
|
|
'isParent': false,
|
|
|
|
|
'position': { 'x': 0, 'y': 0 },
|
|
|
|
|
'data': { 'label': 'area_474cfc79_4011_495e_9fb3_5e268ad09cfe' },
|
|
|
|
|
'events': {},
|
|
|
|
|
'name': 'area'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
'id': 'time_500c79d5_2a5a_4369_a37f_98a90f792547',
|
|
|
|
|
'type': 'time',
|
|
|
|
|
'dimensions': { 'width': 100, 'height': 100 },
|
|
|
|
|
'computedPosition': { 'x': 106.65085072834671, 'y': 39.36769433739843, 'z': 0 },
|
|
|
|
|
'handleBounds': {
|
|
|
|
|
'source': [{
|
|
|
|
|
'id': 'time_500c79d5_2a5a_4369_a37f_98a90f792547.-s',
|
|
|
|
|
'type': 'source',
|
|
|
|
|
'nodeId': 'time_500c79d5_2a5a_4369_a37f_98a90f792547',
|
|
|
|
|
'position': 'right',
|
|
|
|
|
'x': 97.00007501159526,
|
|
|
|
|
'y': 47.00005927633669,
|
|
|
|
|
'width': 6,
|
|
|
|
|
'height': 6
|
|
|
|
|
}],
|
|
|
|
|
'target': [{
|
|
|
|
|
'id': 'time_500c79d5_2a5a_4369_a37f_98a90f792547.-t',
|
|
|
|
|
'type': 'target',
|
|
|
|
|
'nodeId': 'time_500c79d5_2a5a_4369_a37f_98a90f792547',
|
|
|
|
|
'position': 'left',
|
|
|
|
|
'x': -2.9999932235447186,
|
|
|
|
|
'y': 47.00005927633669,
|
|
|
|
|
'width': 6,
|
|
|
|
|
'height': 6
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
'selected': false,
|
|
|
|
|
'dragging': false,
|
|
|
|
|
'resizing': false,
|
|
|
|
|
'initialized': false,
|
|
|
|
|
'isParent': false,
|
|
|
|
|
'position': { 'x': 106.65085072834671, 'y': 39.36769433739843 },
|
|
|
|
|
'data': {
|
|
|
|
|
'label': 'time_500c79d5_2a5a_4369_a37f_98a90f792547',
|
|
|
|
|
'options': { 'startTimeId': 'startTime', 'endTimeId': 'endTime' },
|
|
|
|
|
'outputData': {}
|
|
|
|
|
},
|
|
|
|
|
'events': {},
|
|
|
|
|
'name': 'time'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
'id': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
|
|
|
|
|
'type': 'data',
|
|
|
|
|
'dimensions': { 'width': 200, 'height': 50 },
|
|
|
|
|
'computedPosition': { 'x': 468.30045871559633, 'y': -251.0728211009174, 'z': 0 },
|
|
|
|
|
'handleBounds': {
|
|
|
|
|
'source': [{
|
|
|
|
|
'id': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818.-s',
|
|
|
|
|
'type': 'source',
|
|
|
|
|
'nodeId': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
|
|
|
|
|
'position': 'right',
|
|
|
|
|
'x': 197.00014324673523,
|
|
|
|
|
'y': 22.000023835240277,
|
|
|
|
|
'width': 6,
|
|
|
|
|
'height': 6
|
|
|
|
|
}],
|
|
|
|
|
'target': [{
|
|
|
|
|
'id': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818.-t',
|
|
|
|
|
'type': 'target',
|
|
|
|
|
'nodeId': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
|
|
|
|
|
'position': 'left',
|
|
|
|
|
'x': -2.9999932235447186,
|
|
|
|
|
'y': 22.000023835240277,
|
|
|
|
|
'width': 6,
|
|
|
|
|
'height': 6
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
'selected': false,
|
|
|
|
|
'dragging': false,
|
|
|
|
|
'resizing': false,
|
|
|
|
|
'initialized': false,
|
|
|
|
|
'isParent': false,
|
|
|
|
|
'position': { 'x': 468.30045871559633, 'y': -251.0728211009174 },
|
|
|
|
|
'data': {
|
|
|
|
|
'label': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
|
|
|
|
|
'options': {},
|
|
|
|
|
'outputData': {
|
|
|
|
|
'time': ['2025-01-01 00:00:00', '2025-01-03 00:00:00', '2025-01-05 00:00:00'],
|
|
|
|
|
'value': [20, 30, 40]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
'events': {},
|
|
|
|
|
'name': 'data'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
'id': 'line_77194e11_6df2_4e80_b9d7_816dac933f62',
|
|
|
|
|
'type': 'line',
|
|
|
|
|
'dimensions': { 'width': 300, 'height': 150 },
|
|
|
|
|
'computedPosition': { 'x': 94.76924191953978, 'y': 216.41751167721483, 'z': 1000 },
|
|
|
|
|
'handleBounds': {
|
|
|
|
|
'source': null,
|
|
|
|
|
'target': [{
|
|
|
|
|
'id': 'line_77194e11_6df2_4e80_b9d7_816dac933f62.-t',
|
|
|
|
|
'type': 'target',
|
|
|
|
|
'nodeId': 'line_77194e11_6df2_4e80_b9d7_816dac933f62',
|
|
|
|
|
'position': 'left',
|
|
|
|
|
'x': -2.9999932235447186,
|
|
|
|
|
'y': 72.00005795281027,
|
|
|
|
|
'width': 6,
|
|
|
|
|
'height': 6
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
'selected': true,
|
|
|
|
|
'dragging': false,
|
|
|
|
|
'resizing': false,
|
|
|
|
|
'initialized': false,
|
|
|
|
|
'isParent': false,
|
|
|
|
|
'position': { 'x': 94.76924191953978, 'y': 216.41751167721483 },
|
|
|
|
|
'data': { 'label': 'line_77194e11_6df2_4e80_b9d7_816dac933f62', 'options': {}, 'outputData': {} },
|
|
|
|
|
'events': {},
|
|
|
|
|
'name': 'line'
|
|
|
|
|
}
|
|
|
|
|
]);
|
|
|
|
|
const edges = ref([
|
|
|
|
|
{
|
|
|
|
|
'id': 'time_500c79d5_2a5a_4369_a37f_98a90f792547---data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
|
|
|
|
|
'type': 'bezier',
|
|
|
|
|
'source': 'time_500c79d5_2a5a_4369_a37f_98a90f792547',
|
|
|
|
|
'target': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
|
|
|
|
|
'sourceHandle': 'time_500c79d5_2a5a_4369_a37f_98a90f792547.-s',
|
|
|
|
|
'data': {},
|
|
|
|
|
'events': {},
|
|
|
|
|
'label': '',
|
|
|
|
|
'animated': true,
|
|
|
|
|
'markerEnd': 'arrowclosed',
|
|
|
|
|
'style': { 'stroke': '#409EFF' },
|
|
|
|
|
'sourceNode': {
|
|
|
|
|
'id': 'time_500c79d5_2a5a_4369_a37f_98a90f792547',
|
|
|
|
|
'type': 'time',
|
|
|
|
|
'dimensions': { 'width': 100, 'height': 100 },
|
|
|
|
|
'computedPosition': { 'x': 106.65085072834671, 'y': 39.36769433739843, 'z': 0 },
|
|
|
|
|
'handleBounds': {
|
|
|
|
|
'source': [{
|
|
|
|
|
'id': 'time_500c79d5_2a5a_4369_a37f_98a90f792547.-s',
|
|
|
|
|
'type': 'source',
|
|
|
|
|
'nodeId': 'time_500c79d5_2a5a_4369_a37f_98a90f792547',
|
|
|
|
|
'position': 'right',
|
|
|
|
|
'x': 97.00007501159526,
|
|
|
|
|
'y': 47.00005927633669,
|
|
|
|
|
'width': 6,
|
|
|
|
|
'height': 6
|
|
|
|
|
}],
|
|
|
|
|
'target': [{
|
|
|
|
|
'id': 'time_500c79d5_2a5a_4369_a37f_98a90f792547.-t',
|
|
|
|
|
'type': 'target',
|
|
|
|
|
'nodeId': 'time_500c79d5_2a5a_4369_a37f_98a90f792547',
|
|
|
|
|
'position': 'left',
|
|
|
|
|
'x': -2.9999932235447186,
|
|
|
|
|
'y': 47.00005927633669,
|
|
|
|
|
'width': 6,
|
|
|
|
|
'height': 6
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
'selected': false,
|
|
|
|
|
'dragging': false,
|
|
|
|
|
'resizing': false,
|
|
|
|
|
'initialized': false,
|
|
|
|
|
'isParent': false,
|
|
|
|
|
'position': { 'x': 106.65085072834671, 'y': 39.36769433739843 },
|
|
|
|
|
'data': {
|
|
|
|
|
'label': 'time_500c79d5_2a5a_4369_a37f_98a90f792547',
|
|
|
|
|
'options': { 'startTimeId': 'startTime', 'endTimeId': 'endTime' },
|
|
|
|
|
'outputData': {}
|
|
|
|
|
},
|
|
|
|
|
'events': {},
|
|
|
|
|
'name': 'time'
|
|
|
|
|
},
|
|
|
|
|
'targetNode': {
|
|
|
|
|
'id': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
|
|
|
|
|
'type': 'data',
|
|
|
|
|
'dimensions': { 'width': 200, 'height': 50 },
|
|
|
|
|
'computedPosition': { 'x': 468.30045871559633, 'y': -251.0728211009174, 'z': 0 },
|
|
|
|
|
'handleBounds': {
|
|
|
|
|
'source': [{
|
|
|
|
|
'id': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818.-s',
|
|
|
|
|
'type': 'source',
|
|
|
|
|
'nodeId': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
|
|
|
|
|
'position': 'right',
|
|
|
|
|
'x': 197.00014324673523,
|
|
|
|
|
'y': 22.000023835240277,
|
|
|
|
|
'width': 6,
|
|
|
|
|
'height': 6
|
|
|
|
|
}],
|
|
|
|
|
'target': [{
|
|
|
|
|
'id': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818.-t',
|
|
|
|
|
'type': 'target',
|
|
|
|
|
'nodeId': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
|
|
|
|
|
'position': 'left',
|
|
|
|
|
'x': -2.9999932235447186,
|
|
|
|
|
'y': 22.000023835240277,
|
|
|
|
|
'width': 6,
|
|
|
|
|
'height': 6
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
'selected': false,
|
|
|
|
|
'dragging': false,
|
|
|
|
|
'resizing': false,
|
|
|
|
|
'initialized': false,
|
|
|
|
|
'isParent': false,
|
|
|
|
|
'position': { 'x': 468.30045871559633, 'y': -251.0728211009174 },
|
|
|
|
|
'data': {
|
|
|
|
|
'label': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
|
|
|
|
|
'options': {},
|
|
|
|
|
'outputData': {
|
|
|
|
|
'time': ['2025-01-01 00:00:00', '2025-01-03 00:00:00', '2025-01-05 00:00:00'],
|
|
|
|
|
'value': [20, 30, 40]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
'events': {},
|
|
|
|
|
'name': 'data'
|
|
|
|
|
},
|
|
|
|
|
'sourceX': 209.65092573994195,
|
|
|
|
|
'sourceY': 89.36775361373512,
|
|
|
|
|
'targetX': 465.3004654920516,
|
|
|
|
|
'targetY': -226.0727972656771
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
'id': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818---line_77194e11_6df2_4e80_b9d7_816dac933f62',
|
|
|
|
|
'type': 'bezier',
|
|
|
|
|
'source': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
|
|
|
|
|
'target': 'line_77194e11_6df2_4e80_b9d7_816dac933f62',
|
|
|
|
|
'sourceHandle': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818.-s',
|
|
|
|
|
'data': {},
|
|
|
|
|
'events': {},
|
|
|
|
|
'label': '',
|
|
|
|
|
'animated': true,
|
|
|
|
|
'markerEnd': 'arrowclosed',
|
|
|
|
|
'style': { 'stroke': '#409EFF' },
|
|
|
|
|
'sourceNode': {
|
|
|
|
|
'id': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
|
|
|
|
|
'type': 'data',
|
|
|
|
|
'dimensions': { 'width': 200, 'height': 50 },
|
|
|
|
|
'computedPosition': { 'x': 468.30045871559633, 'y': -251.0728211009174, 'z': 0 },
|
|
|
|
|
'handleBounds': {
|
|
|
|
|
'source': [{
|
|
|
|
|
'id': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818.-s',
|
|
|
|
|
'type': 'source',
|
|
|
|
|
'nodeId': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
|
|
|
|
|
'position': 'right',
|
|
|
|
|
'x': 197.00014324673523,
|
|
|
|
|
'y': 22.000023835240277,
|
|
|
|
|
'width': 6,
|
|
|
|
|
'height': 6
|
|
|
|
|
}],
|
|
|
|
|
'target': [{
|
|
|
|
|
'id': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818.-t',
|
|
|
|
|
'type': 'target',
|
|
|
|
|
'nodeId': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
|
|
|
|
|
'position': 'left',
|
|
|
|
|
'x': -2.9999932235447186,
|
|
|
|
|
'y': 22.000023835240277,
|
|
|
|
|
'width': 6,
|
|
|
|
|
'height': 6
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
'selected': false,
|
|
|
|
|
'dragging': false,
|
|
|
|
|
'resizing': false,
|
|
|
|
|
'initialized': false,
|
|
|
|
|
'isParent': false,
|
|
|
|
|
'position': { 'x': 468.30045871559633, 'y': -251.0728211009174 },
|
|
|
|
|
'data': {
|
|
|
|
|
'label': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
|
|
|
|
|
'options': {},
|
|
|
|
|
'outputData': {
|
|
|
|
|
'time': ['2025-01-01 00:00:00', '2025-01-03 00:00:00', '2025-01-05 00:00:00'],
|
|
|
|
|
'value': [20, 30, 40]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
'events': {},
|
|
|
|
|
'name': 'data'
|
|
|
|
|
},
|
|
|
|
|
'targetNode': {
|
|
|
|
|
'id': 'line_77194e11_6df2_4e80_b9d7_816dac933f62',
|
|
|
|
|
'type': 'line',
|
|
|
|
|
'dimensions': { 'width': 300, 'height': 150 },
|
|
|
|
|
'computedPosition': { 'x': 94.76924191953978, 'y': 216.41751167721483, 'z': 1000 },
|
|
|
|
|
'handleBounds': {
|
|
|
|
|
'source': null,
|
|
|
|
|
'target': [{
|
|
|
|
|
'id': 'line_77194e11_6df2_4e80_b9d7_816dac933f62.-t',
|
|
|
|
|
'type': 'target',
|
|
|
|
|
'nodeId': 'line_77194e11_6df2_4e80_b9d7_816dac933f62',
|
|
|
|
|
'position': 'left',
|
|
|
|
|
'x': -2.9999932235447186,
|
|
|
|
|
'y': 72.00005795281027,
|
|
|
|
|
'width': 6,
|
|
|
|
|
'height': 6
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
'selected': true,
|
|
|
|
|
'dragging': false,
|
|
|
|
|
'resizing': false,
|
|
|
|
|
'initialized': false,
|
|
|
|
|
'isParent': false,
|
|
|
|
|
'position': { 'x': 94.76924191953978, 'y': 216.41751167721483 },
|
|
|
|
|
'data': { 'label': 'line_77194e11_6df2_4e80_b9d7_816dac933f62', 'options': {}, 'outputData': {} },
|
|
|
|
|
'events': {},
|
|
|
|
|
'name': 'line'
|
|
|
|
|
},
|
|
|
|
|
'sourceX': 671.3006019623316,
|
|
|
|
|
'sourceY': -226.0727972656771,
|
|
|
|
|
'targetX': 91.76924869599506,
|
|
|
|
|
'targetY': 291.4175696300251
|
|
|
|
|
}
|
|
|
|
|
]);
|
|
|
|
|
const nodeAttrForm = ref({});
|
|
|
|
|
const logEvent = async (eventname, event) => {
|
|
|
|
|
switch (eventname) {
|
|
|
|
|
case 'connect':
|
|
|
|
|
console.log('connect');
|
|
|
|
|
if (!edges.value.some(r => r.id === `${event.source}---${event.target}`)) {
|
|
|
|
|
addEdges({
|
|
|
|
|
id: `${event.source}---${event.target}`,
|
|
|
|
|
source: event.source,
|
|
|
|
|
target: event.target,
|
|
|
|
|
type: 'bezier',
|
|
|
|
|
animated: true,
|
|
|
|
|
markerEnd: MarkerType.ArrowClosed,
|
|
|
|
|
sourceHandle: event.sourceHandle,
|
|
|
|
|
style: { stroke: '#409EFF' }
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
break;
|
|
|
|
|
case 'click':
|
|
|
|
|
console.log('click', event);
|
|
|
|
|
nodeAttrForm.value = event.node.data.options;
|
|
|
|
|
break;
|
|
|
|
|
case 'contextmenu':
|
|
|
|
|
console.log('contextmenu', event);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
const resize = (e, id) => {
|
|
|
|
|
nodes.value.forEach((item) => {
|
|
|
|
|
if (item.selected && item.id !== id) {
|
|
|
|
|
item.dimensions = {
|
|
|
|
|
width: e.params.width,
|
|
|
|
|
height: e.params.height
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
const getInputData = (e) => {
|
|
|
|
|
let outputData = {};
|
|
|
|
|
let nodeIds = edges.value.map(v => {
|
|
|
|
|
if (v.target === e) {
|
|
|
|
|
return v.source;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
nodes.value.forEach(v => {
|
|
|
|
|
if (nodeIds.includes(v.id)) {
|
|
|
|
|
console.log('v.data.outputData', v.data.outputData);
|
|
|
|
|
outputData = {
|
|
|
|
|
...outputData,
|
|
|
|
|
...v.data.outputData
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
return outputData;
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
:deep(.vue-flow__node-area) {
|
|
|
|
|
z-index: 0 !important;
|
|
|
|
|
pointer-events: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.leftPanel {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 300px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
border-right: 1px solid #409EFF;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.content {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 320px;
|
|
|
|
|
width: calc(100% - 320px - 320px);
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rightPanel {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
width: 300px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
border-left: 1px solid #409EFF;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
