You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
782 lines
26 KiB
Vue
782 lines
26 KiB
Vue
<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>
|
|
<template v-for="i in customData">
|
|
<el-card style="width: 80px" shadow="never" :draggable="true"
|
|
@dragstart="onDragStart($event, 'customData',i)"
|
|
:style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
|
:body-style="{padding:'4px 0'}">
|
|
<template #header>
|
|
<StarFilled />
|
|
</template>
|
|
{{ i.name }}
|
|
</el-card>
|
|
</template>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="表单组件" name="3">
|
|
<el-card style="width: 80px" shadow="never" :draggable="true"
|
|
@dragstart="onDragStart($event, 'map')" :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, '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-customData="customDataNodeProps">
|
|
<CustomDataNode :inputData=getInputData(customDataNodeProps.id) v-bind="customDataNodeProps"
|
|
@resize="resize"></CustomDataNode>
|
|
</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>
|
|
<template #node-map="mapNodeProps">
|
|
<MapNode :inputData=getInputData(mapNodeProps.id) v-bind="mapNodeProps"
|
|
@resize="resize"></MapNode>
|
|
</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-item label="数据映射" v-if="Object.keys(nodeAttrForm).includes('dataMap')">
|
|
<el-table :data="nodeAttrForm.dataMap" style="width: 100%">
|
|
<el-table-column label="源字段" min-width="120">
|
|
<template #default="scope">
|
|
<el-input v-model="scope.row.source" style="width: 100%" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="映射字段" min-width="120">
|
|
<template #default="scope">
|
|
<el-input v-model="scope.row.target" style="width: 100%" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" min-width="120">
|
|
<template #default="scope">
|
|
<el-button link type="primary" size="small" @click="nodeAttrForm.dataMap.splice(scope.$index, 1)">
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-button style="width: 100%" @click="nodeAttrForm.dataMap.push({})">
|
|
添加映射
|
|
</el-button>
|
|
</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 CustomDataNode from './nodes/data/customDataNode.vue';
|
|
import MapNode from './nodes/form/mapNode.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_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b',
|
|
'type': 'time',
|
|
'dimensions': { 'width': 100, 'height': 100 },
|
|
'computedPosition': { 'x': 30.66721629102227, 'y': 21.424672395499982, 'z': 0 },
|
|
'handleBounds': {
|
|
'source': [{
|
|
'id': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b.-s',
|
|
'type': 'source',
|
|
'nodeId': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b',
|
|
'position': 'right',
|
|
'x': 97,
|
|
'y': 47,
|
|
'width': 6,
|
|
'height': 6
|
|
}],
|
|
'target': [{
|
|
'id': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b.-t',
|
|
'type': 'target',
|
|
'nodeId': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b',
|
|
'position': 'left',
|
|
'x': -3,
|
|
'y': 47,
|
|
'width': 6,
|
|
'height': 6
|
|
}]
|
|
},
|
|
'selected': false,
|
|
'dragging': false,
|
|
'resizing': false,
|
|
'initialized': false,
|
|
'isParent': false,
|
|
'position': { 'x': 30.66721629102227, 'y': 21.424672395499982 },
|
|
'data': {
|
|
'label': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b',
|
|
'options': { 'startTimeId': 'startTime', 'endTimeId': 'endTime' },
|
|
'outputData': {}
|
|
},
|
|
'events': {},
|
|
'name': 'time'
|
|
}, {
|
|
'id': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
|
|
'type': 'customData',
|
|
'dimensions': { 'width': 100, 'height': 100 },
|
|
'computedPosition': { 'x': 202.86901500385937, 'y': -165.53728049272314, 'z': 0 },
|
|
'handleBounds': {
|
|
'source': [{
|
|
'id': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699.-s',
|
|
'type': 'source',
|
|
'nodeId': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
|
|
'position': 'right',
|
|
'x': 97,
|
|
'y': 47,
|
|
'width': 6,
|
|
'height': 6
|
|
}],
|
|
'target': [{
|
|
'id': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699.-t',
|
|
'type': 'target',
|
|
'nodeId': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
|
|
'position': 'left',
|
|
'x': -3,
|
|
'y': 47,
|
|
'width': 6,
|
|
'height': 6
|
|
}]
|
|
},
|
|
'selected': false,
|
|
'dragging': false,
|
|
'resizing': false,
|
|
'initialized': false,
|
|
'isParent': false,
|
|
'position': { 'x': 202.86901500385937, 'y': -165.53728049272314 },
|
|
'data': {
|
|
'label': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
|
|
'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]
|
|
},
|
|
'customData': {
|
|
'inputData': [{ 'name': 'startTime' }, { 'name': 'endTime' }],
|
|
'outputData': [{ 'name': 'time', 'remark': '时间', 'tier': 'data,map%time' }, {
|
|
'name': 'value',
|
|
'remark': '值',
|
|
'tier': 'data,map%value'
|
|
}],
|
|
'name': '测试2',
|
|
'url': 'http://localhost:3000/test/getDevice',
|
|
'method': 'post'
|
|
}
|
|
},
|
|
'events': {},
|
|
'name': 'customData'
|
|
}, {
|
|
'id': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3',
|
|
'type': 'map',
|
|
'dimensions': { 'width': 100, 'height': 30 },
|
|
'computedPosition': { 'x': 384.9109165002872, 'y': -88.45647535459605, 'z': 1000 },
|
|
'handleBounds': {
|
|
'source': [{
|
|
'id': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3.-s',
|
|
'type': 'source',
|
|
'nodeId': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3',
|
|
'position': 'right',
|
|
'x': 97,
|
|
'y': 12,
|
|
'width': 6,
|
|
'height': 6
|
|
}],
|
|
'target': [{
|
|
'id': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3.-t',
|
|
'type': 'target',
|
|
'nodeId': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3',
|
|
'position': 'left',
|
|
'x': -3,
|
|
'y': 12,
|
|
'width': 6,
|
|
'height': 6
|
|
}]
|
|
},
|
|
'selected': true,
|
|
'dragging': false,
|
|
'resizing': false,
|
|
'initialized': false,
|
|
'isParent': false,
|
|
'position': { 'x': 384.9109165002872, 'y': -88.45647535459605 },
|
|
'data': {
|
|
'label': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3',
|
|
'options': { 'dataMap': [{ 'source': 'value', 'target': 'y1' }, { 'source': 'time', 'target': 'x1' }] },
|
|
'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': 'map'
|
|
}, {
|
|
'id': 'line_650b8add_cbce_402a_a8e5_2c5769526772',
|
|
'type': 'line',
|
|
'dimensions': { 'width': 300, 'height': 150 },
|
|
'computedPosition': { 'x': 144.31114508758668, 'y': 202.1298087493107, 'z': 0 },
|
|
'handleBounds': {
|
|
'source': null,
|
|
'target': [{
|
|
'id': 'line_650b8add_cbce_402a_a8e5_2c5769526772.-t',
|
|
'type': 'target',
|
|
'nodeId': 'line_650b8add_cbce_402a_a8e5_2c5769526772',
|
|
'position': 'left',
|
|
'x': -3,
|
|
'y': 71.99951171875,
|
|
'width': 6,
|
|
'height': 6
|
|
}]
|
|
},
|
|
'selected': false,
|
|
'dragging': false,
|
|
'resizing': false,
|
|
'initialized': false,
|
|
'isParent': false,
|
|
'position': { 'x': 144.31114508758668, 'y': 202.1298087493107 },
|
|
'data': { 'label': 'line_650b8add_cbce_402a_a8e5_2c5769526772', 'options': {}, 'outputData': {} },
|
|
'events': {},
|
|
'name': 'line'
|
|
}]);
|
|
const edges = ref([
|
|
{
|
|
'id': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b---customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
|
|
'type': 'bezier',
|
|
'source': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b',
|
|
'target': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
|
|
'sourceHandle': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b.-s',
|
|
'data': {},
|
|
'events': {},
|
|
'label': '',
|
|
'animated': true,
|
|
'markerEnd': 'arrowclosed',
|
|
'style': { 'stroke': '#409EFF' },
|
|
'sourceNode': {
|
|
'id': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b',
|
|
'type': 'time',
|
|
'dimensions': { 'width': 100, 'height': 100 },
|
|
'computedPosition': { 'x': 30.66721629102227, 'y': 21.424672395499982, 'z': 0 },
|
|
'handleBounds': {
|
|
'source': [{
|
|
'id': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b.-s',
|
|
'type': 'source',
|
|
'nodeId': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b',
|
|
'position': 'right',
|
|
'x': 97,
|
|
'y': 47,
|
|
'width': 6,
|
|
'height': 6
|
|
}],
|
|
'target': [{
|
|
'id': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b.-t',
|
|
'type': 'target',
|
|
'nodeId': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b',
|
|
'position': 'left',
|
|
'x': -3,
|
|
'y': 47,
|
|
'width': 6,
|
|
'height': 6
|
|
}]
|
|
},
|
|
'selected': false,
|
|
'dragging': false,
|
|
'resizing': false,
|
|
'initialized': false,
|
|
'isParent': false,
|
|
'position': { 'x': 30.66721629102227, 'y': 21.424672395499982 },
|
|
'data': {
|
|
'label': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b',
|
|
'options': { 'startTimeId': 'startTime', 'endTimeId': 'endTime' },
|
|
'outputData': {}
|
|
},
|
|
'events': {},
|
|
'name': 'time'
|
|
},
|
|
'targetNode': {
|
|
'id': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
|
|
'type': 'customData',
|
|
'dimensions': { 'width': 100, 'height': 100 },
|
|
'computedPosition': { 'x': 202.86901500385937, 'y': -165.53728049272314, 'z': 0 },
|
|
'handleBounds': {
|
|
'source': [{
|
|
'id': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699.-s',
|
|
'type': 'source',
|
|
'nodeId': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
|
|
'position': 'right',
|
|
'x': 97,
|
|
'y': 47,
|
|
'width': 6,
|
|
'height': 6
|
|
}],
|
|
'target': [{
|
|
'id': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699.-t',
|
|
'type': 'target',
|
|
'nodeId': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
|
|
'position': 'left',
|
|
'x': -3,
|
|
'y': 47,
|
|
'width': 6,
|
|
'height': 6
|
|
}]
|
|
},
|
|
'selected': false,
|
|
'dragging': false,
|
|
'resizing': false,
|
|
'initialized': false,
|
|
'isParent': false,
|
|
'position': { 'x': 202.86901500385937, 'y': -165.53728049272314 },
|
|
'data': {
|
|
'label': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
|
|
'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]
|
|
},
|
|
'customData': {
|
|
'inputData': [{ 'name': 'startTime' }, { 'name': 'endTime' }],
|
|
'outputData': [{ 'name': 'time', 'remark': '时间', 'tier': 'data,map%time' }, {
|
|
'name': 'value',
|
|
'remark': '值',
|
|
'tier': 'data,map%value'
|
|
}],
|
|
'name': '测试2',
|
|
'url': 'http://localhost:3000/test/getDevice',
|
|
'method': 'post'
|
|
}
|
|
},
|
|
'events': {},
|
|
'name': 'customData'
|
|
},
|
|
'sourceX': 133.66721629102227,
|
|
'sourceY': 71.42467239549998,
|
|
'targetX': 199.86901500385937,
|
|
'targetY': -115.53728049272314
|
|
}, {
|
|
'id': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699---map_54688bd0_db73_4f96_be55_c72beb0b33d3',
|
|
'type': 'bezier',
|
|
'source': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
|
|
'target': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3',
|
|
'sourceHandle': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699.-s',
|
|
'data': {},
|
|
'events': {},
|
|
'label': '',
|
|
'animated': true,
|
|
'markerEnd': 'arrowclosed',
|
|
'style': { 'stroke': '#409EFF' },
|
|
'sourceNode': {
|
|
'id': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
|
|
'type': 'customData',
|
|
'dimensions': { 'width': 100, 'height': 100 },
|
|
'computedPosition': { 'x': 202.86901500385937, 'y': -165.53728049272314, 'z': 0 },
|
|
'handleBounds': {
|
|
'source': [{
|
|
'id': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699.-s',
|
|
'type': 'source',
|
|
'nodeId': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
|
|
'position': 'right',
|
|
'x': 97,
|
|
'y': 47,
|
|
'width': 6,
|
|
'height': 6
|
|
}],
|
|
'target': [{
|
|
'id': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699.-t',
|
|
'type': 'target',
|
|
'nodeId': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
|
|
'position': 'left',
|
|
'x': -3,
|
|
'y': 47,
|
|
'width': 6,
|
|
'height': 6
|
|
}]
|
|
},
|
|
'selected': false,
|
|
'dragging': false,
|
|
'resizing': false,
|
|
'initialized': false,
|
|
'isParent': false,
|
|
'position': { 'x': 202.86901500385937, 'y': -165.53728049272314 },
|
|
'data': {
|
|
'label': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
|
|
'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]
|
|
},
|
|
'customData': {
|
|
'inputData': [{ 'name': 'startTime' }, { 'name': 'endTime' }],
|
|
'outputData': [{ 'name': 'time', 'remark': '时间', 'tier': 'data,map%time' }, {
|
|
'name': 'value',
|
|
'remark': '值',
|
|
'tier': 'data,map%value'
|
|
}],
|
|
'name': '测试2',
|
|
'url': 'http://localhost:3000/test/getDevice',
|
|
'method': 'post'
|
|
}
|
|
},
|
|
'events': {},
|
|
'name': 'customData'
|
|
},
|
|
'targetNode': {
|
|
'id': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3',
|
|
'type': 'map',
|
|
'dimensions': { 'width': 100, 'height': 30 },
|
|
'computedPosition': { 'x': 384.9109165002872, 'y': -88.45647535459605, 'z': 1000 },
|
|
'handleBounds': {
|
|
'source': [{
|
|
'id': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3.-s',
|
|
'type': 'source',
|
|
'nodeId': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3',
|
|
'position': 'right',
|
|
'x': 97,
|
|
'y': 12,
|
|
'width': 6,
|
|
'height': 6
|
|
}],
|
|
'target': [{
|
|
'id': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3.-t',
|
|
'type': 'target',
|
|
'nodeId': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3',
|
|
'position': 'left',
|
|
'x': -3,
|
|
'y': 12,
|
|
'width': 6,
|
|
'height': 6
|
|
}]
|
|
},
|
|
'selected': true,
|
|
'dragging': false,
|
|
'resizing': false,
|
|
'initialized': false,
|
|
'isParent': false,
|
|
'position': { 'x': 384.9109165002872, 'y': -88.45647535459605 },
|
|
'data': {
|
|
'label': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3',
|
|
'options': { 'dataMap': [{ 'source': 'value', 'target': 'y1' }, { 'source': 'time', 'target': 'x1' }] },
|
|
'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': 'map'
|
|
},
|
|
'sourceX': 305.8690150038594,
|
|
'sourceY': -115.53728049272314,
|
|
'targetX': 381.9109165002872,
|
|
'targetY': -73.45647535459605
|
|
}, {
|
|
'id': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3---line_650b8add_cbce_402a_a8e5_2c5769526772',
|
|
'type': 'bezier',
|
|
'source': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3',
|
|
'target': 'line_650b8add_cbce_402a_a8e5_2c5769526772',
|
|
'sourceHandle': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3.-s',
|
|
'data': {},
|
|
'events': {},
|
|
'label': '',
|
|
'animated': true,
|
|
'markerEnd': 'arrowclosed',
|
|
'style': { 'stroke': '#409EFF' },
|
|
'sourceNode': {
|
|
'id': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3',
|
|
'type': 'map',
|
|
'dimensions': { 'width': 100, 'height': 30 },
|
|
'computedPosition': { 'x': 384.9109165002872, 'y': -88.45647535459605, 'z': 1000 },
|
|
'handleBounds': {
|
|
'source': [{
|
|
'id': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3.-s',
|
|
'type': 'source',
|
|
'nodeId': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3',
|
|
'position': 'right',
|
|
'x': 97,
|
|
'y': 12,
|
|
'width': 6,
|
|
'height': 6
|
|
}],
|
|
'target': [{
|
|
'id': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3.-t',
|
|
'type': 'target',
|
|
'nodeId': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3',
|
|
'position': 'left',
|
|
'x': -3,
|
|
'y': 12,
|
|
'width': 6,
|
|
'height': 6
|
|
}]
|
|
},
|
|
'selected': true,
|
|
'dragging': false,
|
|
'resizing': false,
|
|
'initialized': false,
|
|
'isParent': false,
|
|
'position': { 'x': 384.9109165002872, 'y': -88.45647535459605 },
|
|
'data': {
|
|
'label': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3',
|
|
'options': { 'dataMap': [{ 'source': 'value', 'target': 'y1' }, { 'source': 'time', 'target': 'x1' }] },
|
|
'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': 'map'
|
|
},
|
|
'targetNode': {
|
|
'id': 'line_650b8add_cbce_402a_a8e5_2c5769526772',
|
|
'type': 'line',
|
|
'dimensions': { 'width': 300, 'height': 150 },
|
|
'computedPosition': { 'x': 144.31114508758668, 'y': 202.1298087493107, 'z': 0 },
|
|
'handleBounds': {
|
|
'source': null,
|
|
'target': [{
|
|
'id': 'line_650b8add_cbce_402a_a8e5_2c5769526772.-t',
|
|
'type': 'target',
|
|
'nodeId': 'line_650b8add_cbce_402a_a8e5_2c5769526772',
|
|
'position': 'left',
|
|
'x': -3,
|
|
'y': 71.99951171875,
|
|
'width': 6,
|
|
'height': 6
|
|
}]
|
|
},
|
|
'selected': false,
|
|
'dragging': false,
|
|
'resizing': false,
|
|
'initialized': false,
|
|
'isParent': false,
|
|
'position': { 'x': 144.31114508758668, 'y': 202.1298087493107 },
|
|
'data': { 'label': 'line_650b8add_cbce_402a_a8e5_2c5769526772', 'options': {}, 'outputData': {} },
|
|
'events': {},
|
|
'name': 'line'
|
|
},
|
|
'sourceX': 487.9109165002872,
|
|
'sourceY': -73.45647535459605,
|
|
'targetX': 141.31114508758668,
|
|
'targetY': 277.1293204680607
|
|
}]);
|
|
const customData = ref([]);
|
|
onMounted(() => {
|
|
customData.value = JSON.parse(localStorage.getItem('DATANODE') || '[]');
|
|
});
|
|
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)) {
|
|
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>
|