@@ -95,6 +122,30 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 删除
+
+
+
+
+
+ 添加映射
+
+
{{ nodes }}
@@ -111,6 +162,8 @@ 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';
@@ -119,6 +172,7 @@ import tool from './tool';
// 获取tool文件提供的方法
const { onDragStart, onDrop, onDragOver } = tool();
+
// flow内置方法
const {
addEdges
@@ -153,30 +207,29 @@ const nodes = ref([
'data': { 'label': 'area_474cfc79_4011_495e_9fb3_5e268ad09cfe' },
'events': {},
'name': 'area'
- },
- {
- 'id': 'time_500c79d5_2a5a_4369_a37f_98a90f792547',
+ }, {
+ 'id': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b',
'type': 'time',
'dimensions': { 'width': 100, 'height': 100 },
- 'computedPosition': { 'x': 106.65085072834671, 'y': 39.36769433739843, 'z': 0 },
+ 'computedPosition': { 'x': 30.66721629102227, 'y': 21.424672395499982, 'z': 0 },
'handleBounds': {
'source': [{
- 'id': 'time_500c79d5_2a5a_4369_a37f_98a90f792547.-s',
+ 'id': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b.-s',
'type': 'source',
- 'nodeId': 'time_500c79d5_2a5a_4369_a37f_98a90f792547',
+ 'nodeId': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b',
'position': 'right',
- 'x': 97.00007501159526,
- 'y': 47.00005927633669,
+ 'x': 97,
+ 'y': 47,
'width': 6,
'height': 6
}],
'target': [{
- 'id': 'time_500c79d5_2a5a_4369_a37f_98a90f792547.-t',
+ 'id': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b.-t',
'type': 'target',
- 'nodeId': 'time_500c79d5_2a5a_4369_a37f_98a90f792547',
+ 'nodeId': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b',
'position': 'left',
- 'x': -2.9999932235447186,
- 'y': 47.00005927633669,
+ 'x': -3,
+ 'y': 47,
'width': 6,
'height': 6
}]
@@ -186,38 +239,37 @@ const nodes = ref([
'resizing': false,
'initialized': false,
'isParent': false,
- 'position': { 'x': 106.65085072834671, 'y': 39.36769433739843 },
+ 'position': { 'x': 30.66721629102227, 'y': 21.424672395499982 },
'data': {
- 'label': 'time_500c79d5_2a5a_4369_a37f_98a90f792547',
+ 'label': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b',
'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 },
+ }, {
+ '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': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818.-s',
+ 'id': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699.-s',
'type': 'source',
- 'nodeId': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
+ 'nodeId': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
'position': 'right',
- 'x': 197.00014324673523,
- 'y': 22.000023835240277,
+ 'x': 97,
+ 'y': 47,
'width': 6,
'height': 6
}],
'target': [{
- 'id': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818.-t',
+ 'id': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699.-t',
'type': 'target',
- 'nodeId': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
+ 'nodeId': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
'position': 'left',
- 'x': -2.9999932235447186,
- 'y': 22.000023835240277,
+ 'x': -3,
+ 'y': 47,
'width': 6,
'height': 6
}]
@@ -227,32 +279,51 @@ const nodes = ref([
'resizing': false,
'initialized': false,
'isParent': false,
- 'position': { 'x': 468.30045871559633, 'y': -251.0728211009174 },
+ 'position': { 'x': 202.86901500385937, 'y': -165.53728049272314 },
'data': {
- 'label': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
+ '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': 'data'
- },
- {
- 'id': 'line_77194e11_6df2_4e80_b9d7_816dac933f62',
- 'type': 'line',
- 'dimensions': { 'width': 300, 'height': 150 },
- 'computedPosition': { 'x': 94.76924191953978, 'y': 216.41751167721483, 'z': 1000 },
+ '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': null,
+ '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': 'line_77194e11_6df2_4e80_b9d7_816dac933f62.-t',
+ 'id': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3.-t',
'type': 'target',
- 'nodeId': 'line_77194e11_6df2_4e80_b9d7_816dac933f62',
+ 'nodeId': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3',
'position': 'left',
- 'x': -2.9999932235447186,
- 'y': 72.00005795281027,
+ 'x': -3,
+ 'y': 12,
'width': 6,
'height': 6
}]
@@ -262,19 +333,52 @@ const nodes = ref([
'resizing': false,
'initialized': false,
'isParent': false,
- 'position': { 'x': 94.76924191953978, 'y': 216.41751167721483 },
- 'data': { 'label': 'line_77194e11_6df2_4e80_b9d7_816dac933f62', 'options': {}, 'outputData': {} },
+ '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_500c79d5_2a5a_4369_a37f_98a90f792547---data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
+ 'id': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b---customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
'type': 'bezier',
- 'source': 'time_500c79d5_2a5a_4369_a37f_98a90f792547',
- 'target': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
- 'sourceHandle': 'time_500c79d5_2a5a_4369_a37f_98a90f792547.-s',
+ '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': '',
@@ -282,28 +386,28 @@ const edges = ref([
'markerEnd': 'arrowclosed',
'style': { 'stroke': '#409EFF' },
'sourceNode': {
- 'id': 'time_500c79d5_2a5a_4369_a37f_98a90f792547',
+ 'id': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b',
'type': 'time',
'dimensions': { 'width': 100, 'height': 100 },
- 'computedPosition': { 'x': 106.65085072834671, 'y': 39.36769433739843, 'z': 0 },
+ 'computedPosition': { 'x': 30.66721629102227, 'y': 21.424672395499982, 'z': 0 },
'handleBounds': {
'source': [{
- 'id': 'time_500c79d5_2a5a_4369_a37f_98a90f792547.-s',
+ 'id': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b.-s',
'type': 'source',
- 'nodeId': 'time_500c79d5_2a5a_4369_a37f_98a90f792547',
+ 'nodeId': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b',
'position': 'right',
- 'x': 97.00007501159526,
- 'y': 47.00005927633669,
+ 'x': 97,
+ 'y': 47,
'width': 6,
'height': 6
}],
'target': [{
- 'id': 'time_500c79d5_2a5a_4369_a37f_98a90f792547.-t',
+ 'id': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b.-t',
'type': 'target',
- 'nodeId': 'time_500c79d5_2a5a_4369_a37f_98a90f792547',
+ 'nodeId': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b',
'position': 'left',
- 'x': -2.9999932235447186,
- 'y': 47.00005927633669,
+ 'x': -3,
+ 'y': 47,
'width': 6,
'height': 6
}]
@@ -313,9 +417,9 @@ const edges = ref([
'resizing': false,
'initialized': false,
'isParent': false,
- 'position': { 'x': 106.65085072834671, 'y': 39.36769433739843 },
+ 'position': { 'x': 30.66721629102227, 'y': 21.424672395499982 },
'data': {
- 'label': 'time_500c79d5_2a5a_4369_a37f_98a90f792547',
+ 'label': 'time_a3f53d63_2a0c_4be6_9530_0ee8566e0e2b',
'options': { 'startTimeId': 'startTime', 'endTimeId': 'endTime' },
'outputData': {}
},
@@ -323,28 +427,28 @@ const edges = ref([
'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 },
+ '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': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818.-s',
+ 'id': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699.-s',
'type': 'source',
- 'nodeId': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
+ 'nodeId': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
'position': 'right',
- 'x': 197.00014324673523,
- 'y': 22.000023835240277,
+ 'x': 97,
+ 'y': 47,
'width': 6,
'height': 6
}],
'target': [{
- 'id': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818.-t',
+ 'id': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699.-t',
'type': 'target',
- 'nodeId': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
+ 'nodeId': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
'position': 'left',
- 'x': -2.9999932235447186,
- 'y': 22.000023835240277,
+ 'x': -3,
+ 'y': 47,
'width': 6,
'height': 6
}]
@@ -354,29 +458,39 @@ const edges = ref([
'resizing': false,
'initialized': false,
'isParent': false,
- 'position': { 'x': 468.30045871559633, 'y': -251.0728211009174 },
+ 'position': { 'x': 202.86901500385937, 'y': -165.53728049272314 },
'data': {
- 'label': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
+ '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': 'data'
+ 'name': 'customData'
},
- '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',
+ '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': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
- 'target': 'line_77194e11_6df2_4e80_b9d7_816dac933f62',
- 'sourceHandle': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818.-s',
+ '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': '',
@@ -384,28 +498,28 @@ const edges = ref([
'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 },
+ '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': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818.-s',
+ 'id': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699.-s',
'type': 'source',
- 'nodeId': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
+ 'nodeId': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
'position': 'right',
- 'x': 197.00014324673523,
- 'y': 22.000023835240277,
+ 'x': 97,
+ 'y': 47,
'width': 6,
'height': 6
}],
'target': [{
- 'id': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818.-t',
+ 'id': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699.-t',
'type': 'target',
- 'nodeId': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
+ 'nodeId': 'customData_de7fe6a5_adeb_4c96_9cf4_0c76df770699',
'position': 'left',
- 'x': -2.9999932235447186,
- 'y': 22.000023835240277,
+ 'x': -3,
+ 'y': 47,
'width': 6,
'height': 6
}]
@@ -415,32 +529,52 @@ const edges = ref([
'resizing': false,
'initialized': false,
'isParent': false,
- 'position': { 'x': 468.30045871559633, 'y': -251.0728211009174 },
+ 'position': { 'x': 202.86901500385937, 'y': -165.53728049272314 },
'data': {
- 'label': 'data_b9663ba9_503c_449a_a24b_1d2cceaa3818',
+ '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': 'data'
+ 'name': 'customData'
},
'targetNode': {
- 'id': 'line_77194e11_6df2_4e80_b9d7_816dac933f62',
- 'type': 'line',
- 'dimensions': { 'width': 300, 'height': 150 },
- 'computedPosition': { 'x': 94.76924191953978, 'y': 216.41751167721483, 'z': 1000 },
+ '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': null,
+ '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': 'line_77194e11_6df2_4e80_b9d7_816dac933f62.-t',
+ 'id': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3.-t',
'type': 'target',
- 'nodeId': 'line_77194e11_6df2_4e80_b9d7_816dac933f62',
+ 'nodeId': 'map_54688bd0_db73_4f96_be55_c72beb0b33d3',
'position': 'left',
- 'x': -2.9999932235447186,
- 'y': 72.00005795281027,
+ 'x': -3,
+ 'y': 12,
'width': 6,
'height': 6
}]
@@ -450,17 +584,115 @@ const edges = ref([
'resizing': false,
'initialized': false,
'isParent': false,
- 'position': { 'x': 94.76924191953978, 'y': 216.41751167721483 },
- 'data': { 'label': 'line_77194e11_6df2_4e80_b9d7_816dac933f62', 'options': {}, 'outputData': {} },
+ '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': 671.3006019623316,
- 'sourceY': -226.0727972656771,
- 'targetX': 91.76924869599506,
- 'targetY': 291.4175696300251
- }
-]);
+ '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) {
@@ -506,7 +738,6 @@ const getInputData = (e) => {
});
nodes.value.forEach(v => {
if (nodeIds.includes(v.id)) {
- console.log('v.data.outputData', v.data.outputData);
outputData = {
...outputData,
...v.data.outputData
diff --git a/src/views/boardGenerate/nodes/board/lineNode.vue b/src/views/boardGenerate/nodes/board/lineNode.vue
index 1fdfc01..15b23aa 100644
--- a/src/views/boardGenerate/nodes/board/lineNode.vue
+++ b/src/views/boardGenerate/nodes/board/lineNode.vue
@@ -3,7 +3,8 @@
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
-
+
@@ -48,151 +49,167 @@ const props = defineProps({
const chartRef = ref();
let chart = null;
const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
-const getOption = () => {
- return {
- title: {
- text: '设备运行数量',
- textStyle: {
- fontSize: 12,
- fontWeight: 400,
- color: '#fff'
- },
- left: '0',
- top: '5%'
+const chartOption = {
+ title: {
+ text: '设备运行数量',
+ textStyle: {
+ fontSize: 12,
+ fontWeight: 400,
+ color: '#fff'
},
- legend: {
- icon: 'circle',
- top: '5%',
- right: '5%',
- itemWidth: 6,
- itemGap: 20,
- textStyle: {
- color: '#fff'
+ left: '0',
+ top: '5%'
+ },
+ legend: {
+ icon: 'circle',
+ top: '5%',
+ right: '5%',
+ itemWidth: 6,
+ itemGap: 20,
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ label: {
+ show: true,
+ backgroundColor: '#fff',
+ color: '#000',
+ borderColor: 'rgba(0,0,0,0)',
+ shadowColor: 'rgba(0,0,0,0)',
+ shadowOffsetY: 0
+ },
+ lineStyle: {
+ width: 0
}
},
- tooltip: {
- trigger: 'axis',
+ backgroundColor: '#fff',
+ textStyle: {
+ color: '#000'
+ },
+ padding: [10, 10],
+ extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
+ },
+ grid: {
+ top: '30%',
+ bottom: '10%'
+ },
+ xAxis: [
+ {
+ type: 'category',
+ axisLine: {
+ lineStyle: {
+ color: '#DCE2E8'
+ }
+ },
+ axisTick: {
+ show: true
+ },
+ axisLabel: {
+ interval: 0,
+ textStyle: {
+ color: '#fff'
+ },
+ // 默认x轴字体大小
+ fontSize: 12,
+ // margin:文字到x轴的距离
+ margin: 3
+ },
axisPointer: {
label: {
- show: true,
- backgroundColor: '#fff',
- color: '#000',
- borderColor: 'rgba(0,0,0,0)',
- shadowColor: 'rgba(0,0,0,0)',
- shadowOffsetY: 0
- },
- lineStyle: {
- width: 0
+ padding: [0, 0, 0, 0],
+ margin: 0,
+ // 移入时的字体大小
+ fontSize: 12
}
},
- backgroundColor: '#fff',
- textStyle: {
- color: '#000'
+ boundaryGap: true
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ axisTick: {
+ show: false
},
- padding: [10, 10],
- extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
- },
- grid: {
- top: '30%',
- bottom: '10%'
- },
- xAxis: [
- {
- type: 'category',
- data: props.inputData?.time || [],
- axisLine: {
- lineStyle: {
- color: '#DCE2E8'
- }
- },
- axisTick: {
- show: true
- },
- axisLabel: {
- interval: 0,
- textStyle: {
- color: '#fff'
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#fff'
+ }
+ },
+ axisLabel: {
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ splitLine: {
+ show: false
+ }
+ }
+ ],
+ series: [
+ {
+ type: 'line',
+ symbolSize: 1,
+ symbol: 'circle',
+ smooth: true,
+ yAxisIndex: 0,
+ showSymbol: false,
+ lineStyle: {
+ width: 1,
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+ {
+ offset: 0,
+ color: '#9effff'
},
- // 默认x轴字体大小
- fontSize: 12,
- // margin:文字到x轴的距离
- margin: 3
- },
- axisPointer: {
- label: {
- padding: [0, 0, 0, 0],
- margin: 0,
- // 移入时的字体大小
- fontSize: 12
+ {
+ offset: 1,
+ color: '#9E87FF'
}
- },
- boundaryGap: true
- }
- ],
- yAxis: [
- {
- type: 'value',
- axisTick: {
- show: false
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: '#fff'
- }
- },
- axisLabel: {
- textStyle: {
- color: '#fff'
- }
- },
- splitLine: {
- show: false
+ ]),
+ shadowColor: 'rgba(158,135,255, 0.3)',
+ shadowBlur: 10,
+ shadowOffsetY: 20
+ },
+ itemStyle: {
+ normal: {
+ color: colorList[0],
+ borderColor: colorList[0]
}
}
- ],
- series: [
- {
- name: '数量',
- type: 'line',
- data: props.inputData?.value || [],
- symbolSize: 1,
- symbol: 'circle',
- smooth: true,
- yAxisIndex: 0,
- showSymbol: false,
- lineStyle: {
- width: 1,
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- {
- offset: 0,
- color: '#9effff'
- },
- {
- offset: 1,
- color: '#9E87FF'
- }
- ]),
- shadowColor: 'rgba(158,135,255, 0.3)',
- shadowBlur: 10,
- shadowOffsetY: 20
- },
- itemStyle: {
- normal: {
- color: colorList[0],
- borderColor: colorList[0]
- }
- }
- }
- ]
+ }
+ ]
+};
+const getOption = () => {
+ let xData = [props.inputData?.x1 || []];
+ let yData = [props.inputData?.y1 || []];
+ let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length));
+ let source = [['product', '数量']];
+ Array(length).fill(0).forEach((_, i) => {
+ let item = [];
+ xData.forEach(e => {
+ item.push(e[i]);
+ });
+ yData.forEach(e => {
+ item.push(e[i]);
+ });
+ source.push(item);
+ });
+ return {
+ dataset: {
+ source
+ }
};
};
onMounted(() => {
chart = echarts.init(chartRef.value, 'macarons');
- chart.setOption(getOption(), true);
+ chart.setOption(chartOption, true);
});
watch(() => props.inputData, () => {
- chart.setOption(getOption(), true);
+ chart && chart.setOption(getOption(), false);
}, { deep: true });
const emit = defineEmits(['resize']);
const resize = (e) => {
diff --git a/src/views/boardGenerate/nodes/data/customDataNode.vue b/src/views/boardGenerate/nodes/data/customDataNode.vue
index e69de29..9c97619 100644
--- a/src/views/boardGenerate/nodes/data/customDataNode.vue
+++ b/src/views/boardGenerate/nodes/data/customDataNode.vue
@@ -0,0 +1,122 @@
+
+
+
+
+
+ {{ props.data.customData.name }}
+
+
+
+
+
+
+
+
+
diff --git a/src/views/boardGenerate/nodes/data/dataNode.vue b/src/views/boardGenerate/nodes/data/dataNode.vue
index 002d933..0ed5f9b 100644
--- a/src/views/boardGenerate/nodes/data/dataNode.vue
+++ b/src/views/boardGenerate/nodes/data/dataNode.vue
@@ -3,7 +3,8 @@
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
-
+
设备运行数量
diff --git a/src/views/boardGenerate/nodes/form/mapNode.vue b/src/views/boardGenerate/nodes/form/mapNode.vue
new file mode 100644
index 0000000..17c5f5a
--- /dev/null
+++ b/src/views/boardGenerate/nodes/form/mapNode.vue
@@ -0,0 +1,84 @@
+
+
+
+
+
diff --git a/src/views/boardGenerate/nodes/form/timeNode.vue b/src/views/boardGenerate/nodes/form/timeNode.vue
index 6987c4c..8c3bce6 100644
--- a/src/views/boardGenerate/nodes/form/timeNode.vue
+++ b/src/views/boardGenerate/nodes/form/timeNode.vue
@@ -56,12 +56,12 @@ const props = defineProps({
}
});
-watch(() => value, () => {
+watch(() => value.value, () => {
if (props.data?.options?.startTimeId) {
- props.data.outputData[props.data.options.startTimeId || 'startTime'] = value.value[0];
+ props.data.outputData[props.data.options.startTimeId || 'startTime'] = value.value?.[0];
}
if (props.data?.options?.endTimeId) {
- props.data.outputData[props.data.options.endTimeId || 'endTime'] = value.value[1];
+ props.data.outputData[props.data.options.endTimeId || 'endTime'] = value.value?.[1];
}
}, { deep: true });
const emit = defineEmits(['resize']);
diff --git a/src/views/boardGenerate/tool.js b/src/views/boardGenerate/tool.js
index 9d4a00a..f5d57c4 100644
--- a/src/views/boardGenerate/tool.js
+++ b/src/views/boardGenerate/tool.js
@@ -13,22 +13,27 @@ const getOption = (e) => {
return {};
} else if (e === 'data') {
return {};
+ } else if (e === 'map') {
+ return { dataMap: [] };
} else if (e === 'inputNode') {
return { field: '' };
} else if (e === 'time') {
return { startTimeId: 'startTime', endTimeId: 'endTime' };
+ } else if (e === 'customBoard') {
+ return { option: '', xData: [], yData: [], yName: [] };
} else {
return {};
}
};
const getNodeSize = (e) => {
- console.log(e);
if (e === 'line') {
return { width: 300, height: 150 };
} else if (e === 'data') {
return { width: 200, height: 50 };
} else if (e === 'inputNode') {
return { width: 100, height: 30 };
+ } else if (e === 'map') {
+ return { width: 100, height: 30 };
} else {
return { width: 100, height: 100 };
}
@@ -36,14 +41,16 @@ const getNodeSize = (e) => {
const tool = () => {
const nodeType = ref('');
+ const customData = ref('');
const { addNodes, screenToFlowCoordinate, onNodesInitialized, updateNode } = useVueFlow();
- const onDragStart = (event, type) => {
+ const onDragStart = (event, type, data) => {
if (event.dataTransfer) {
event.dataTransfer.setData('application/vueflow', type);
event.dataTransfer.effectAllowed = 'move';
}
nodeType.value = type;
+ customData.value = data;
document.addEventListener('drop', onDragEnd);
};
const onDragEnd = () => {
@@ -51,7 +58,6 @@ const tool = () => {
document.removeEventListener('drop', onDragEnd);
};
const onDrop = (event) => {
- console.log(event);
const dimensions = getNodeSize(nodeType.value);
const position = screenToFlowCoordinate({
@@ -65,7 +71,7 @@ const tool = () => {
type: nodeType.value,
dimensions,
position,
- data: { label: nodeId, options: getOption(nodeType.value), outputData: {} }
+ data: { label: nodeId, options: getOption(nodeType.value), outputData: {}, customData: customData.value }
};
diff --git a/src/views/boardGenerate/view.vue b/src/views/boardGenerate/view.vue
index ff96192..3a13fc5 100644
--- a/src/views/boardGenerate/view.vue
+++ b/src/views/boardGenerate/view.vue
@@ -1,6 +1,12 @@
+
+
+
+
+
+
@@ -13,14 +19,22 @@
+
+
+
+