修改组态化
夜笙歌
2 months ago
parent
c1347b14d3
commit
320f56e77c
@ -0,0 +1,238 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
|
||||||
|
<NodeResizer color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
|
||||||
|
|
||||||
|
<div class="custom-node"
|
||||||
|
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
|
||||||
|
<div style="width: 100%;height: 100%" ref="chartRef" />
|
||||||
|
</div>
|
||||||
|
<Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
|
||||||
|
<div class="info">
|
||||||
|
<el-icon color="#fff" @click="openMsgBox">
|
||||||
|
<InfoFilled />
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
<el-dialog
|
||||||
|
v-model="MsgBoxVisible"
|
||||||
|
width="500"
|
||||||
|
title="提示"
|
||||||
|
append-to-body
|
||||||
|
>
|
||||||
|
<span>This is a message</span>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button @click="MsgBoxVisible = false">关闭</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { InfoFilled } from '@element-plus/icons-vue';
|
||||||
|
import { defineEmits, defineProps, ref } from 'vue';
|
||||||
|
import { NodeResizer } from '@vue-flow/node-resizer';
|
||||||
|
import { Handle, Position } from '@vue-flow/core';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
const MsgBoxVisible = ref(false);
|
||||||
|
const props = defineProps({
|
||||||
|
isView: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
inputData: {
|
||||||
|
type: Object,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
isHideHandle: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
dimensions: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
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%'
|
||||||
|
},
|
||||||
|
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
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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',
|
||||||
|
data: props.inputData?.time || [],
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#DCE2E8'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
// 默认x轴字体大小
|
||||||
|
fontSize: 12,
|
||||||
|
// margin:文字到x轴的距离
|
||||||
|
margin: 3
|
||||||
|
},
|
||||||
|
axisPointer: {
|
||||||
|
label: {
|
||||||
|
padding: [0, 0, 0, 0],
|
||||||
|
margin: 0,
|
||||||
|
// 移入时的字体大小
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
boundaryGap: true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
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 emit = defineEmits(['resize']);
|
||||||
|
const resize = (e) => {
|
||||||
|
chart.resize();
|
||||||
|
emit('resize', e, props.id);
|
||||||
|
};
|
||||||
|
const openMsgBox = () => {
|
||||||
|
MsgBoxVisible.value = true;
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
chart = echarts.init(chartRef.value, 'macarons');
|
||||||
|
chart.setOption(getOption(), true);
|
||||||
|
});
|
||||||
|
watch(() => props.inputData, () => {
|
||||||
|
chart.setOption(getOption(), true);
|
||||||
|
}, { deep: true });
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.custom-node {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,209 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
|
||||||
|
<NodeResizer color="#000" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
|
||||||
|
|
||||||
|
<div class="custom-node" :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
|
||||||
|
<div style="width: 100%;height: 100%" ref="chartRef" />
|
||||||
|
</div>
|
||||||
|
<Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { defineEmits, defineProps, ref } from 'vue';
|
||||||
|
import { NodeResizer } from '@vue-flow/node-resizer';
|
||||||
|
import { Handle, Position } from '@vue-flow/core';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
isView: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
inputData: {
|
||||||
|
type: Object,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
isHideHandle: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
dimensions: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
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%'
|
||||||
|
},
|
||||||
|
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
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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',
|
||||||
|
data: props.inputData?.time || [],
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#DCE2E8'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
// 默认x轴字体大小
|
||||||
|
fontSize: 12,
|
||||||
|
// margin:文字到x轴的距离
|
||||||
|
margin: 3
|
||||||
|
},
|
||||||
|
axisPointer: {
|
||||||
|
label: {
|
||||||
|
padding: [0, 0, 0, 0],
|
||||||
|
margin: 0,
|
||||||
|
// 移入时的字体大小
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
boundaryGap: true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
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]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
chart = echarts.init(chartRef.value, 'macarons');
|
||||||
|
chart.setOption(getOption(), true);
|
||||||
|
});
|
||||||
|
watch(() => props.inputData, () => {
|
||||||
|
chart.setOption(getOption(), true);
|
||||||
|
}, { deep: true });
|
||||||
|
const emit = defineEmits(['resize']);
|
||||||
|
const resize = (e) => {
|
||||||
|
chart.resize();
|
||||||
|
emit('resize', e, props.id);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.custom-node {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,94 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
|
||||||
|
<NodeResizer color="#000" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
|
||||||
|
|
||||||
|
<div class="custom-node" :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
|
||||||
|
<el-button type="primary" :style="{width:props.dimensions.width +'px',height:props.dimensions.height+'px'}"
|
||||||
|
:icon="Connection">设备运行数量
|
||||||
|
</el-button>
|
||||||
|
<span style="color:#fff">
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
|
||||||
|
<Handle v-if="!props.isView" :id="`${props.id}.-s`" type="source" :position="Position.Right" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { defineEmits, defineProps, ref } from 'vue';
|
||||||
|
import { NodeResizer } from '@vue-flow/node-resizer';
|
||||||
|
import { Connection } from '@element-plus/icons-vue';
|
||||||
|
import { Handle, Position } from '@vue-flow/core';
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
isView: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
inputData: {
|
||||||
|
type: Object,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
isHideHandle: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
dimensions: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const service = axios.create({
|
||||||
|
baseURL: 'http://localhost:3000',
|
||||||
|
timeout: 10000
|
||||||
|
});
|
||||||
|
const getOutputData = () => {
|
||||||
|
service({
|
||||||
|
method: 'post',
|
||||||
|
url: '/test/getDevice',
|
||||||
|
data: props.inputData
|
||||||
|
}).then(res => {
|
||||||
|
props.data.outputData = {
|
||||||
|
time: res.data?.data?.map(e => e.time),
|
||||||
|
value: res.data?.data?.map(e => e.value)
|
||||||
|
};
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getOutputData();
|
||||||
|
});
|
||||||
|
|
||||||
|
let interval = setInterval(() => {
|
||||||
|
getOutputData();
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
clearInterval(interval);
|
||||||
|
interval = null;
|
||||||
|
});
|
||||||
|
const emit = defineEmits(['resize']);
|
||||||
|
const resize = (e) => {
|
||||||
|
emit('resize', e, props.id);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.custom-node {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,65 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
|
||||||
|
<NodeResizer color="#000" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
|
||||||
|
|
||||||
|
<div class="custom-node" :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
|
||||||
|
<el-input v-model="input" placeholder="输入值" style="width: 100%;height: 100%" />
|
||||||
|
</div>
|
||||||
|
<Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
|
||||||
|
<Handle v-if="!props.isView" :id="`${props.id}.-s`" type="source" :position="Position.Right" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { defineEmits, defineProps, ref } from 'vue';
|
||||||
|
import { NodeResizer } from '@vue-flow/node-resizer';
|
||||||
|
import { Handle, Position } from '@vue-flow/core';
|
||||||
|
|
||||||
|
const input = ref('');
|
||||||
|
const props = defineProps({
|
||||||
|
isView: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
inputData: {
|
||||||
|
type: Object,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
isHideHandle: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
dimensions: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(() => input.value, () => {
|
||||||
|
if (props.data?.options?.field) {
|
||||||
|
props.data.outputData[props.data.options.field] = input.value;
|
||||||
|
}
|
||||||
|
}, { deep: true });
|
||||||
|
const emit = defineEmits(['resize']);
|
||||||
|
const resize = (e) => {
|
||||||
|
emit('resize', e, props.id);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.custom-node {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
@ -0,0 +1,77 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
|
||||||
|
<NodeResizer color="#000" v-if="!props.isView && !props.isHideHandle && props.selected"
|
||||||
|
@resize="resize" />
|
||||||
|
|
||||||
|
<div class="custom-node"
|
||||||
|
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="value"
|
||||||
|
type="datetimerange"
|
||||||
|
range-separator="到"
|
||||||
|
start-placeholder="开始时间"
|
||||||
|
end-placeholder="结束时间"
|
||||||
|
style="width: 100%;height: 100%"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
|
||||||
|
<Handle v-if="!props.isView" :id="`${props.id}.-s`" type="source" :position="Position.Right" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { defineEmits, defineProps, ref } from 'vue';
|
||||||
|
import { NodeResizer } from '@vue-flow/node-resizer';
|
||||||
|
import { Handle, Position } from '@vue-flow/core';
|
||||||
|
|
||||||
|
const value = ref('');
|
||||||
|
const props = defineProps({
|
||||||
|
isView: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
inputData: {
|
||||||
|
type: Object,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
isHideHandle: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
dimensions: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(() => value, () => {
|
||||||
|
if (props.data?.options?.startTimeId) {
|
||||||
|
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];
|
||||||
|
}
|
||||||
|
}, { deep: true });
|
||||||
|
const emit = defineEmits(['resize']);
|
||||||
|
const resize = (e) => {
|
||||||
|
emit('resize', e, props.id);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.custom-node {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
@ -1,151 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div :style="`transform: rotate(${props.data.options?.rotate || 0}deg);cursor: progress;`">
|
|
||||||
|
|
||||||
<div class="custom-node" :style="{width:props.width}">
|
|
||||||
</div>
|
|
||||||
<NodeResizer :color="color || '#000' " v-if="!props.isHideHandle && props.selected" @resize="resize" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { defineEmits, defineProps, ref, watch } from 'vue';
|
|
||||||
import { Handle, Position } from '@vue-flow/core';
|
|
||||||
import { NodeResizer } from '@vue-flow/node-resizer';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
color: {
|
|
||||||
type: String,
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
id: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
isAlm: {
|
|
||||||
type: Boolean,
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
isHideHandle: {
|
|
||||||
type: Boolean,
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
selected: {
|
|
||||||
type: Boolean,
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
data: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
dimensions: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
deviceData: {
|
|
||||||
type: Object,
|
|
||||||
required: false
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const emit = defineEmits(['resize']);
|
|
||||||
const resize = (e) => {
|
|
||||||
emit('resize', e, props.id);
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
.custom-node {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.counter {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tsj-div {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
align-items: center;
|
|
||||||
justify-self: center;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tsj {
|
|
||||||
height: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-tishengji1 {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 0;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.deviceIdAndName {
|
|
||||||
color: #fff;
|
|
||||||
position: absolute;
|
|
||||||
left: 100%;
|
|
||||||
width: 50%;
|
|
||||||
top: 0%;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
right: 100%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.value {
|
|
||||||
display: inline-block;
|
|
||||||
width: 2vw;
|
|
||||||
height: 0.4vw;
|
|
||||||
line-height: 0.4vw;
|
|
||||||
font-size: 0.4vw;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: top;
|
|
||||||
background-color: #00ff02;
|
|
||||||
}
|
|
||||||
|
|
||||||
.unit {
|
|
||||||
display: inline-block;
|
|
||||||
width: 0.6vw;
|
|
||||||
height: 0.4vw;
|
|
||||||
line-height: 0.4vw;
|
|
||||||
font-size: 0.4vw;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: top;
|
|
||||||
background-color: #01a098;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alarmInfo {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
width: 100%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
text-align: center;
|
|
||||||
font-size: 0.4vw;
|
|
||||||
line-height: 0.6vw;
|
|
||||||
white-space: nowrap;
|
|
||||||
animation: colourSwitching 0.5s infinite;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes colourSwitching {
|
|
||||||
0% {
|
|
||||||
color: #ffff00;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
color: #ff0000;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
color: #ffff00;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
<template>
|
||||||
|
<div style="pointer-events: none">
|
||||||
|
<div class="custom-node">
|
||||||
|
<div class="area" style="width:1910px;height:970px;border: 1px solid #fff"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { defineProps } from 'vue';
|
||||||
|
|
||||||
|
const props = defineProps({});
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,381 @@
|
|||||||
|
<template>
|
||||||
|
<div class="content" :style="{width:area.width+'px',height: area.height+'px'}">
|
||||||
|
<div v-for="i in nodes" class="node" :style="{left:i.position?.x+'px',top: i.position?.y+'px'}">
|
||||||
|
<template v-if="i.type === 'line'">
|
||||||
|
<LineNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></LineNode>
|
||||||
|
</template>
|
||||||
|
<template v-if="i.type === 'data'">
|
||||||
|
<DataNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></DataNode>
|
||||||
|
</template>
|
||||||
|
<template v-if="i.type === 'inputNode'">
|
||||||
|
<InputNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></InputNode>
|
||||||
|
</template>
|
||||||
|
<template v-if="i.type === 'time'">
|
||||||
|
<TimeNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></TimeNode>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import TimeNode from '@/views/boardGenerate/nodes/form/timeNode.vue';
|
||||||
|
import DataNode from '@/views/boardGenerate/nodes/data/dataNode.vue';
|
||||||
|
import LineNode from '@/views/boardGenerate/nodes/board/lineNode.vue';
|
||||||
|
import InputNode from '@/views/boardGenerate/nodes/form/inputNode.vue';
|
||||||
|
|
||||||
|
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 area = ref({
|
||||||
|
width: 1910,
|
||||||
|
height: 970
|
||||||
|
});
|
||||||
|
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
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
console.log(outputData);
|
||||||
|
return outputData;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.content {
|
||||||
|
position: absolute;
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.node {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue