看板问题修改

master
yesg 2 months ago
parent 861dba3309
commit bf61506e69

@ -0,0 +1,133 @@
import request from '@/utils/request';
import { getDataSourceList, querySql, querySql1 } from '@/views/boardGenerate/api/dataSource.js';
import { options } from '@/views/boardGenerate/tool.js';
import axios from 'axios';
import { ref } from 'vue';
let apiList = [];
let getDataFlag = false;
const waitReq = () => {
return new Promise((resolve, reject) => {
let times = null;
times = setInterval(() => {
if (apiList.length > 0) {
clearInterval(times);
times = null;
resolve(true);
}
}, 100);
})
};
const getApiList = async () => {
if (!getDataFlag) {
getDataFlag = true;
await getDataSourceList({
pageNum: 1,
pageSize: 9999999
}).then((res) => {
apiList = res.rows.map((e) => {
return {
id: e.dataSourceId,
name: e.dataSourceName,
url: e.requestUrl,
method: e.requestMethod,
outputData: e.designDataFieldList,
type: e.responseType,
db: e.fieldOne,
SQL: e.fieldTwo,
isPage: e.fieldThree === 'true'
};
});
return true;
});
} else {
await waitReq();
return true;
}
};
const anyFun = (data, fun, key) => {
switch (fun) {
case 'map':
return data.map((e) => e[key]);
default:
return null;
}
};
const parseData = (data, rule) => {
let resData = data;
let step = rule.split(',');
step.forEach((item) => {
if (resData) {
let fun = item.split('%');
if (fun.length === 1) {
resData = resData[fun[0]];
}
if (fun.length === 2) {
resData = anyFun(resData, fun[0], fun[1]);
}
}
});
return resData;
};
const formulaFun = (formula, inputData) => {
let data = formula.replace(/\$\{\s*([^}]+?)\s*\}/g, (_, key) => {
let infos = key.split(',');
if (infos.length === 1) {
return inputData[infos[0]] || '%%';
}
if (infos.length === 2) {
return `AND ${infos[0]} = ${inputData[infos[1]] || '%%'}`;
}
});
return data;
};
export const getData = async (res) => {
await getApiList();
let outputData = {};
const tasks = (res.request||[]).map(async (e) => {
let api = apiList.find((v) => v.id === e.dataSource);
let params = { ...res.inputData };
if (api.type === '1' || !api.type) {
const result = await (options.isD ? request : axios.request)({
method: api.method,
url: api.url,
params: api.method === 'get' ? params : undefined,
data: api.method === 'post' ? params : undefined
});
let data = options.isD ? result : result.data || result.rows;
api.outputData.forEach((item) => {
outputData[item.fieldOne] = parseData(data, item.fieldTwo);
});
}
if (api.type === '2') {
let data;
if (api.isPage) {
data = await querySql1({
sql: formulaFun(api.SQL, res.inputData),
linkId: api.db,
pageSize: res.inputData.pageSize,
pageNum: res.inputData.pageNum
});
} else {
data = await querySql(formulaFun(api.SQL, res.inputData), api.db);
}
api.outputData.forEach((item) => {
outputData[item.fieldOne] = parseData(data, item.fieldTwo);
});
}
});
await Promise.all(tasks);
return outputData;
};

@ -1,11 +1,16 @@
<template> <template>
<div <div :style="{ width: props.dimensions.width * props.ratioWidth + 'px', height: props.dimensions.height * props.ratioHeight + 'px' }">
:style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
<NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" /> <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
<div class="custom-node" <div
:style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}"> class="custom-node"
<div style="width: 100%;height: 100%" ref="chartRef" /> :style="{
width: props.dimensions.width * props.ratioWidth + 'px',
height: props.dimensions.height * props.ratioHeight + 'px',
pointerEvents: props.isView ? 'auto' : 'none'
}"
>
<div style="width: 100%; height: 100%" ref="chartRef" />
</div> </div>
<Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" /> <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
</div> </div>
@ -15,6 +20,7 @@ import { defineEmits, defineProps, ref } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer'; import { NodeResizer } from '@vue-flow/node-resizer';
import { Handle, Position } from '@vue-flow/core'; import { Handle, Position } from '@vue-flow/core';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { getData } from '@/views/boardGenerate/api/getData.js';
const props = defineProps({ const props = defineProps({
ratioWidth: { ratioWidth: {
@ -59,6 +65,7 @@ const props = defineProps({
const chartRef = ref(); const chartRef = ref();
let chart = null; let chart = null;
const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']; const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
let optionData = {}
const getOption = () => { const getOption = () => {
const chartOption = { const chartOption = {
title: { title: {
@ -114,10 +121,10 @@ const getOption = () => {
type: 'pie', type: 'pie',
itemStyle: { itemStyle: {
color: (a) => { color: (a) => {
if(props.data?.options?.colorList?.length){ if (props.data?.options?.colorList?.length) {
return props.data?.options?.colorList?.[a.dataIndex % props.data?.options?.colorList?.length]; return props.data?.options?.colorList?.[a.dataIndex % props.data?.options?.colorList?.length];
}else{ } else {
return colorList[a.dataIndex %colorList.length] return colorList[a.dataIndex % colorList.length];
} }
} }
}, },
@ -130,22 +137,22 @@ const getOption = () => {
} }
] ]
}; };
let xData = [props.inputData?.x1 || []]; let xData = [optionData.x1 || props.inputData?.x1 || []];
let yData = [props.inputData?.y1 || []]; let yData = [optionData.y1 ||props.inputData?.y1 || []];
console.log(chartOption); let length = Math.min(...xData.map((e) => e.length), ...yData.map((e) => e.length));
let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length));
let source = [['product', ...[props.data.options?.yNames?.[0] || '数量']]]; let source = [['product', ...[props.data.options?.yNames?.[0] || '数量']]];
Array(length).fill(0).forEach((_, i) => { Array(length)
let item = []; .fill(0)
xData.forEach(e => { .forEach((_, i) => {
item.push(e[i]); let item = [];
xData.forEach((e) => {
item.push(e[i]);
});
yData.forEach((e) => {
item.push(e[i]);
});
source.push(item);
}); });
yData.forEach(e => {
item.push(e[i]);
});
source.push(item);
});
console.log(source);
return { return {
...chartOption, ...chartOption,
dataset: { dataset: {
@ -159,16 +166,37 @@ onMounted(() => {
}); });
chart.setOption(getOption(), true); chart.setOption(getOption(), true);
}); });
watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => { watch(
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) { () => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))],
chart && chart.setOption(getOption(), true); (obj1, obj2) => {
} if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
}, { deep: true, immediate: true }); chart && chart.setOption(getOption(), true);
watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => { }
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) { },
chart?.resize(); { deep: true, immediate: true }
} );
}, { deep: true, immediate: true }); watch(
() => JSON.parse(JSON.stringify(props.dimensions)),
(obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
chart?.resize();
}
},
{ deep: true, immediate: true }
);
watch(
() => [JSON.parse(JSON.stringify(props.data.options.request ||'[]')), JSON.parse(JSON.stringify(props.inputData || ''))],
async (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
await getData({ request: props.data.options.request ||[], inputData: props.inputData }).then((e) => {
optionData = e
chart && chart.setOption(getOption(), true);
});
}
},
{ deep: true, immediate: true }
);
const emit = defineEmits(['resize']); const emit = defineEmits(['resize']);
const resize = (e) => { const resize = (e) => {
chart.resize(); chart.resize();
@ -180,5 +208,4 @@ const resize = (e) => {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>

@ -1,12 +1,16 @@
<template> <template>
<div <div :style="{ width: props.dimensions.width * props.ratioWidth + 'px', height: props.dimensions.height * props.ratioHeight + 'px' }">
:style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}"> <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
<NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff"
v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
<div class="custom-node" <div
:style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}"> class="custom-node"
<div style="width: 100%;height: 100%" ref="chartRef" /> :style="{
width: props.dimensions.width * props.ratioWidth + 'px',
height: props.dimensions.height * props.ratioHeight + 'px',
pointerEvents: props.isView ? 'auto' : 'none'
}"
>
<div style="width: 100%; height: 100%" ref="chartRef" />
</div> </div>
<Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" /> <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
</div> </div>
@ -16,6 +20,7 @@ import { defineEmits, defineProps, ref } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer'; import { NodeResizer } from '@vue-flow/node-resizer';
import { Handle, Position } from '@vue-flow/core'; import { Handle, Position } from '@vue-flow/core';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { getData } from '@/views/boardGenerate/api/getData.js';
const props = defineProps({ const props = defineProps({
ratioWidth: { ratioWidth: {
@ -59,6 +64,7 @@ const props = defineProps({
}); });
const chartRef = ref(); const chartRef = ref();
let chart = null; let chart = null;
let optionData = {};
const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']; const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
const defaultOption = { const defaultOption = {
title: { title: {
@ -206,123 +212,124 @@ const defaultOption = {
}; };
const getOption = () => { const getOption = () => {
const chartOption = { const chartOption = {
title: { title: {
text: props.data.options.title || '' text: props.data.options.title || ''
}, },
legend: { legend: {
show: props.data?.options?.legend || false show: props.data?.options?.legend || false
}, },
tooltip: { tooltip: {
show: props.data?.options?.tooltip || false show: props.data?.options?.tooltip || false
}, },
grid: { grid: {
top: props.data?.options?.gridTop + '%' || '20%', top: props.data?.options?.gridTop + '%' || '20%',
left: props.data?.options?.gridLeft + '%' || '20%', left: props.data?.options?.gridLeft + '%' || '20%',
bottom: props.data?.options?.gridBottom + '%' || '20%', bottom: props.data?.options?.gridBottom + '%' || '20%',
right: props.data?.options?.gridRight + '%' || '20%' right: props.data?.options?.gridRight + '%' || '20%'
}, },
xAxis: [ xAxis: [
{ {
name: props.data?.options?.xName || '', name: props.data?.options?.xName || '',
type: props.data?.options?.isHorizontal ? 'value' : 'category', type: props.data?.options?.isHorizontal ? 'value' : 'category',
nameLocation: props.data?.options?.xNameLocation || 'end', nameLocation: props.data?.options?.xNameLocation || 'end',
boundaryGap: true, boundaryGap: true,
axisLine: { axisLine: {
show: props.data?.options?.xAxisLineShow || false, show: props.data?.options?.xAxisLineShow || false,
lineStyle: {
color: props.data?.options?.xAxisLineColor || '#DCE2E8'
}
},
axisTick: {
show: props.data?.options?.xAxisTickShow || false,
inside: props.data?.options?.xAxisTickInside || false,
lineStyle: {
color: props.data?.options?.xAxisTickColor || '#DCE2E8'
}
},
axisLabel: {
show: props.data?.options?.xAxisLabelShow || false,
interval: props.data?.options?.xAxisLabelInterval ? 0 : 'auto',
inside: props.data?.options?.xAxisLabelInside || false,
formatter: props.data?.options?.xAxisLabelFormatter || null,
rotate: props.data?.options?.xAxisLabelRotate || 0,
color: props.data?.options?.xAxisLabelColor || '#fff',
fontSize: props.data?.options?.xAxisLabelFontSize || 12,
margin: props.data?.options?.xAxisLabelMargin || 3
},
splitLine: {
show: props.data?.options?.xAxisSplitLineShow || false,
lineStyle: {
color: props.data?.options?.xAxisSplitLineColor || '#DCE2E8',
type: props.data?.options?.xAxisSplitLineType || 'solid'
}
}
}
],
yAxis: [
{
name: props.data?.options?.yName || '',
type: props.data?.options?.isHorizontal ? 'category' : 'value',
nameLocation: props.data?.options?.yNameLocation || 'end',
axisLine: {
show: props.data?.options?.yAxisLineShow || false,
lineStyle: {
color: props.data?.options?.yAxisLineColor || '#DCE2E8'
}
},
axisTick: {
show: props.data?.options?.yAxisTickShow || false,
inside: props.data?.options?.yAxisTickInside || false,
lineStyle: {
color: props.data?.options?.yAxisTickColor || '#DCE2E8'
}
},
axisLabel: {
show: props.data?.options?.yAxisLabelShow || false,
interval: props.data?.options?.yAxisLabelInterval ? 0 : 'auto',
inside: props.data?.options?.yAxisLabelInside || false,
formatter: props.data?.options?.yAxisLabelFormatter || null,
rotate: props.data?.options?.yAxisLabelRotate || 0,
color: props.data?.options?.yAxisLabelColor || '#fff',
fontSize: props.data?.options?.yAxisLabelFontSize || 12,
margin: props.data?.options?.yAxisLabelMargin || 3
},
splitLine: {
show: props.data?.options?.yAxisSplitLineShow || false,
lineStyle: {
color: props.data?.options?.yAxisSplitLineColor || '#DCE2E8',
type: props.data?.options?.yAxisSplitLineType || 'solid'
}
}
}
],
series: [
{
lineStyle: { lineStyle: {
color: props.data?.options?.seriesColor || colorList[0] color: props.data?.options?.xAxisLineColor || '#DCE2E8'
}, }
label: { },
position: props.data?.options?.isHorizontal ? 'right' : 'top' axisTick: {
show: props.data?.options?.xAxisTickShow || false,
inside: props.data?.options?.xAxisTickInside || false,
lineStyle: {
color: props.data?.options?.xAxisTickColor || '#DCE2E8'
}
},
axisLabel: {
show: props.data?.options?.xAxisLabelShow || false,
interval: props.data?.options?.xAxisLabelInterval ? 0 : 'auto',
inside: props.data?.options?.xAxisLabelInside || false,
formatter: props.data?.options?.xAxisLabelFormatter || null,
rotate: props.data?.options?.xAxisLabelRotate || 0,
color: props.data?.options?.xAxisLabelColor || '#fff',
fontSize: props.data?.options?.xAxisLabelFontSize || 12,
margin: props.data?.options?.xAxisLabelMargin || 3
},
splitLine: {
show: props.data?.options?.xAxisSplitLineShow || false,
lineStyle: {
color: props.data?.options?.xAxisSplitLineColor || '#DCE2E8',
type: props.data?.options?.xAxisSplitLineType || 'solid'
} }
} }
] }
} ],
; yAxis: [
console.log(props.data?.options?.seriesColor); {
let xData = [props.inputData?.x1 || []]; name: props.data?.options?.yName || '',
let yData = [props.inputData?.y1 || []]; type: props.data?.options?.isHorizontal ? 'category' : 'value',
let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length)); nameLocation: props.data?.options?.yNameLocation || 'end',
axisLine: {
show: props.data?.options?.yAxisLineShow || false,
lineStyle: {
color: props.data?.options?.yAxisLineColor || '#DCE2E8'
}
},
axisTick: {
show: props.data?.options?.yAxisTickShow || false,
inside: props.data?.options?.yAxisTickInside || false,
lineStyle: {
color: props.data?.options?.yAxisTickColor || '#DCE2E8'
}
},
axisLabel: {
show: props.data?.options?.yAxisLabelShow || false,
interval: props.data?.options?.yAxisLabelInterval ? 0 : 'auto',
inside: props.data?.options?.yAxisLabelInside || false,
formatter: props.data?.options?.yAxisLabelFormatter || null,
rotate: props.data?.options?.yAxisLabelRotate || 0,
color: props.data?.options?.yAxisLabelColor || '#fff',
fontSize: props.data?.options?.yAxisLabelFontSize || 12,
margin: props.data?.options?.yAxisLabelMargin || 3
},
splitLine: {
show: props.data?.options?.yAxisSplitLineShow || false,
lineStyle: {
color: props.data?.options?.yAxisSplitLineColor || '#DCE2E8',
type: props.data?.options?.yAxisSplitLineType || 'solid'
}
}
}
],
series: [
{
type: 'bar',
lineStyle: {
color: props.data?.options?.seriesColor || colorList[0]
},
label: {
position: props.data?.options?.isHorizontal ? 'right' : 'top'
}
}
]
};
let xData = [optionData.x1 || props.inputData?.x1 || []];
let yData = [optionData.y1 || props.inputData?.y1 || []];
let length = Math.min(...xData.map((e) => e.length), ...yData.map((e) => e.length));
let source = [['product', ...[props.data.options?.yNames?.[0] || '数量']]]; let source = [['product', ...[props.data.options?.yNames?.[0] || '数量']]];
Array(length).fill(0).forEach((_, i) => { Array(length)
let item = []; .fill(0)
xData.forEach(e => { .forEach((_, i) => {
item.push(e[i]); let item = [];
xData.forEach((e) => {
item.push(e[i]);
});
yData.forEach((e) => {
item.push(parseFloat(e[i]));
});
source.push(item);
}); });
yData.forEach(e => {
item.push(parseFloat(e[i]));
});
source.push(item);
});
return { return {
...chartOption, ...chartOption,
dataset: { dataset: {
@ -337,16 +344,38 @@ onMounted(() => {
chart.setOption(defaultOption, true); chart.setOption(defaultOption, true);
chart && chart.setOption(getOption(), false); chart && chart.setOption(getOption(), false);
}); });
watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => { watch(
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) { () => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))],
chart && chart.setOption(getOption(), false); (obj1, obj2) => {
} if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
}, { deep: true, immediate: true }); chart && chart.setOption(getOption(), false);
watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => { }
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) { },
chart?.resize(); { deep: true, immediate: true }
} );
}, { deep: true, immediate: true }); watch(
() => JSON.parse(JSON.stringify(props.dimensions)),
(obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
chart?.resize();
}
},
{ deep: true, immediate: true }
);
watch(
() => [JSON.parse(JSON.stringify(props.data.options.request || '[]')), JSON.parse(JSON.stringify(props.inputData || ''))],
async (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
await getData({ request: props.data.options.request || [], inputData: props.inputData }).then((e) => {
optionData = e;
chart && chart.setOption(getOption(), false);
});
}
},
{ deep: true, immediate: true }
);
const emit = defineEmits(['resize']); const emit = defineEmits(['resize']);
const resize = (e) => { const resize = (e) => {
chart.resize(); chart.resize();
@ -358,5 +387,4 @@ const resize = (e) => {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>

@ -1,12 +1,16 @@
<template> <template>
<div <div :style="{ width: props.dimensions.width * props.ratioWidth + 'px', height: props.dimensions.height * props.ratioHeight + 'px' }">
:style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}"> <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
<NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff"
v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
<div class="custom-node" <div
:style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}"> class="custom-node"
<div style="width: 100%;height: 100%" ref="chartRef" /> :style="{
width: props.dimensions.width * props.ratioWidth + 'px',
height: props.dimensions.height * props.ratioHeight + 'px',
pointerEvents: props.isView ? 'auto' : 'none'
}"
>
<div style="width: 100%; height: 100%" ref="chartRef" />
</div> </div>
<Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" /> <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
</div> </div>
@ -16,6 +20,7 @@ import { defineEmits, defineProps, ref } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer'; import { NodeResizer } from '@vue-flow/node-resizer';
import { Handle, Position } from '@vue-flow/core'; import { Handle, Position } from '@vue-flow/core';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { getData } from '@/views/boardGenerate/api/getData.js';
const props = defineProps({ const props = defineProps({
ratioWidth: { ratioWidth: {
@ -32,6 +37,10 @@ const props = defineProps({
type: Boolean, type: Boolean,
required: false required: false
}, },
colors: {
type: Array,
required: false
},
inputData: { inputData: {
type: Object, type: Object,
required: false required: false
@ -59,6 +68,7 @@ const props = defineProps({
}); });
const chartRef = ref(); const chartRef = ref();
let chart = null; let chart = null;
let optionData = {};
const colorList = ref(['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']); const colorList = ref(['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']);
const defaultOption = { const defaultOption = {
title: { title: {
@ -115,7 +125,7 @@ const defaultOption = {
{ {
name: props.data?.options?.xName || '', name: props.data?.options?.xName || '',
nameLocation: props.data?.options?.xNameLocation || 'end', nameLocation: props.data?.options?.xNameLocation || 'end',
type: props.data?.options?.isHorizontal ?'value':'category', type: props.data?.options?.isHorizontal ? 'value' : 'category',
boundaryGap: props.data?.options?.boundaryGap || false, boundaryGap: props.data?.options?.boundaryGap || false,
axisLine: { axisLine: {
show: props.data?.options?.xAxisLineShow || false, show: props.data?.options?.xAxisLineShow || false,
@ -230,6 +240,7 @@ const getOption = () => {
}, },
xAxis: [ xAxis: [
{ {
type: 'category',
name: props.data?.options?.xName || '', name: props.data?.options?.xName || '',
nameLocation: props.data?.options?.xNameLocation || 'end', nameLocation: props.data?.options?.xNameLocation || 'end',
boundaryGap: props.data?.options?.boundaryGap || false, boundaryGap: props.data?.options?.boundaryGap || false,
@ -267,6 +278,7 @@ const getOption = () => {
], ],
yAxis: [ yAxis: [
{ {
type: 'value',
name: props.data?.options?.yName || '', name: props.data?.options?.yName || '',
nameLocation: props.data?.options?.yNameLocation || 'end', nameLocation: props.data?.options?.yNameLocation || 'end',
axisLine: { axisLine: {
@ -303,6 +315,7 @@ const getOption = () => {
], ],
series: [ series: [
{ {
type: 'line',
showSymbol: props.data?.options?.lineSymbolShow || false, showSymbol: props.data?.options?.lineSymbolShow || false,
symbolSize: props.data?.options?.lineSymbolSize || 5, symbolSize: props.data?.options?.lineSymbolSize || 5,
symbol: props.data?.options?.lineSymbolType || 'circle', symbol: props.data?.options?.lineSymbolType || 'circle',
@ -312,20 +325,22 @@ const getOption = () => {
} }
] ]
}; };
let xData = [props.inputData?.x1 || []]; let xData = [optionData.x1 || props.inputData?.x1 || []];
let yData = [props.inputData?.y1 || []]; let yData = [optionData.y1 || props.inputData?.y1 || []];
let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length)); let length = Math.min(...xData.map((e) => e.length), ...yData.map((e) => e.length));
let source = [['product', ...[props.data.options?.yNames?.[0] || '数量']]]; let source = [['product', ...[props.data.options?.yNames?.[0] || '数量']]];
Array(length).fill(0).forEach((_, i) => { Array(length)
let item = []; .fill(0)
xData.forEach(e => { .forEach((_, i) => {
item.push(e[i]); let item = [];
xData.forEach((e) => {
item.push(e[i]);
});
yData.forEach((e) => {
item.push(parseFloat(e[i]));
});
source.push(item);
}); });
yData.forEach(e => {
item.push(parseFloat(e[i]));
});
source.push(item);
});
return { return {
...chartOption, ...chartOption,
dataset: { dataset: {
@ -340,16 +355,45 @@ onMounted(() => {
chart.setOption(defaultOption, true); chart.setOption(defaultOption, true);
chart && chart.setOption(getOption(), false); chart && chart.setOption(getOption(), false);
}); });
watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => { watch(
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) { () => [JSON.parse(JSON.stringify(props.colors))],
chart && chart.setOption(getOption(), false); (obj1, obj2) => {
} if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
}, { deep: true, immediate: true }); colorList.value = props.colors
watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => { }
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) { },
chart?.resize(); { deep: true, immediate: true }
} );
}, { deep: true, immediate: true }); watch(
() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))],
(obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
chart && chart.setOption(getOption(), false);
}
},
{ deep: true, immediate: true }
);
watch(
() => JSON.parse(JSON.stringify(props.dimensions)),
(obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
chart?.resize();
}
},
{ deep: true, immediate: true }
);
watch(
() => [JSON.parse(JSON.stringify(props.data.options.request || '')), JSON.parse(JSON.stringify(props.inputData || ''))],
async (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
await getData({ request: props.data.options.request, inputData: props.inputData }).then((e) => {
optionData = e;
chart && chart.setOption(getOption(), false);
});
}
},
{ deep: true, immediate: true }
);
const emit = defineEmits(['resize']); const emit = defineEmits(['resize']);
const resize = (e) => { const resize = (e) => {
chart.resize(); chart.resize();
@ -361,5 +405,4 @@ const resize = (e) => {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>

@ -27,6 +27,10 @@ const props = defineProps({
required: false, required: false,
default: 1 default: 1
}, },
colors: {
type: Array,
required: false
},
isView: { isView: {
type: Boolean, type: Boolean,
required: false required: false
@ -173,12 +177,12 @@ const getOption = () => {
show: false show: false
} }
}, },
series: (props.data.options?.yNames || []).map(() => { series: (props.data.options?.yNames || []).map((_,k) => {
return { return {
type: 'bar', type: 'bar',
itemStyle: { itemStyle: {
normal: { normal: {
color: props.data?.options?.seriesColor || colorList[0], color: props.colors[k % props.colors.length],
} }
}, },
barMaxWidth: 50, barMaxWidth: 50,
@ -215,6 +219,13 @@ onMounted(() => {
}); });
chart && chart.setOption(getOption(), true); chart && chart.setOption(getOption(), true);
}); });
watch(() => [JSON.parse(JSON.stringify(props.colors))], (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
console.log(123);
chart && chart.setOption(getOption(), true);
}
}, { deep: true, immediate: true });
watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => { watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) { if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
chart && chart.setOption(getOption(), true); chart && chart.setOption(getOption(), true);

@ -16,6 +16,7 @@ import { defineEmits, defineProps, ref } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer'; import { NodeResizer } from '@vue-flow/node-resizer';
import { Handle, Position } from '@vue-flow/core'; import { Handle, Position } from '@vue-flow/core';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { getData } from '@/views/boardGenerate/api/getData.js';
const props = defineProps({ const props = defineProps({
ratioWidth: { ratioWidth: {
@ -59,6 +60,7 @@ const props = defineProps({
}); });
const chartRef = ref(); const chartRef = ref();
let chart = null; let chart = null;
let optionData = {}
const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']; const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
const getOption = () => { const getOption = () => {
const chartOption = { const chartOption = {
@ -128,8 +130,8 @@ const getOption = () => {
} }
] ]
}; };
let xData = [props.inputData?.x1 || []]; let xData = [optionData.x1 || props.inputData?.x1 || []];
let yData = [props.inputData?.y1 || []]; let yData = [optionData.y1 || props.inputData?.y1 || []];
let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length)); let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length));
let source = [['product', ...[props.data.options?.yNames?.[0] || '数量']]]; let source = [['product', ...[props.data.options?.yNames?.[0] || '数量']]];
console.log(source); console.log(source);
@ -166,6 +168,21 @@ watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
chart?.resize(); chart?.resize();
} }
}, { deep: true, immediate: true }); }, { deep: true, immediate: true });
watch(
() => [JSON.parse(JSON.stringify(props.data.options.request || '')), JSON.parse(JSON.stringify(props.inputData || ''))],
async (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
await getData({ request: props.data.options.request, inputData: props.inputData }).then((e) => {
optionData = e;
chart && chart.setOption(getOption(), true);
});
}
},
{ deep: true, immediate: true }
);
const emit = defineEmits(['resize']); const emit = defineEmits(['resize']);
const resize = (e) => { const resize = (e) => {
chart.resize(); chart.resize();

@ -16,6 +16,7 @@ import { defineEmits, defineProps, ref } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer'; import { NodeResizer } from '@vue-flow/node-resizer';
import { Handle, Position } from '@vue-flow/core'; import { Handle, Position } from '@vue-flow/core';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { getData } from '@/views/boardGenerate/api/getData.js';
const props = defineProps({ const props = defineProps({
ratioWidth: { ratioWidth: {
@ -59,6 +60,7 @@ const props = defineProps({
}); });
const chartRef = ref(); const chartRef = ref();
let chart = null; let chart = null;
let optionData = {};
const getOption = () => { const getOption = () => {
const chartOption = { const chartOption = {
title: { title: {
@ -129,7 +131,7 @@ const getOption = () => {
fontSize: 8, fontSize: 8,
color: '#ddd' color: '#ddd'
}, },
indicator: (props.inputData?.x1 || [' ']).map(e => { indicator: (optionData.x1 || props.inputData?.x1 || [' ']).map(e => {
return { return {
name: e name: e
}; };
@ -158,7 +160,7 @@ const getOption = () => {
data: [ data: [
{ {
// value: [98,95,93,95,93,97], // value: [98,95,93,95,93,97],
value: props.inputData?.y1, value: optionData.y1 || props.inputData?.y1,
name: 'Allocated Budget', name: 'Allocated Budget',
areaStyle: { areaStyle: {
color: { color: {
@ -177,8 +179,8 @@ const getOption = () => {
} }
] ]
}; };
let xData = [props.inputData?.x1 || []]; let xData = [optionData.x1 || props.inputData?.x1 || []];
let yData = [props.inputData?.y1 || []]; let yData = [optionData.y1 || props.inputData?.y1 || []];
let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length)); let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length));
let source = [['product', ...[props.data.options?.yNames?.[0] || ' ']]]; let source = [['product', ...[props.data.options?.yNames?.[0] || ' ']]];
Array(length).fill(0).forEach((_, i) => { Array(length).fill(0).forEach((_, i) => {
@ -191,7 +193,6 @@ const getOption = () => {
}); });
source.push(item); source.push(item);
}); });
console.log(source);
return { return {
...chartOption, ...chartOption,
dataset: { dataset: {
@ -215,6 +216,20 @@ watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
chart?.resize(); chart?.resize();
} }
}, { deep: true, immediate: true }); }, { deep: true, immediate: true });
watch(
() => [JSON.parse(JSON.stringify(props.data.options.request || '')), JSON.parse(JSON.stringify(props.inputData || ''))],
async (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
await getData({ request: props.data.options.request, inputData: props.inputData }).then((e) => {
optionData = e;
chart && chart.setOption(getOption(), true);
});
}
},
{ deep: true, immediate: true }
);
const emit = defineEmits(['resize']); const emit = defineEmits(['resize']);
const resize = (e) => { const resize = (e) => {
chart.resize(); chart.resize();

@ -1,17 +1,28 @@
<template> <template>
<div <div :style="{ width: props.dimensions.width * props.ratioWidth + 'px', height: props.dimensions.height * props.ratioHeight + 'px' }">
:style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}"> <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
<NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" <div
v-if="!props.isView && !props.isHideHandle && props.selected" class="custom-node"
@resize="resize" /> :style="{
<div class="custom-node" backgroundColor: props.data.options.backgroundColor,
:style="{backgroundColor:props.data.options.backgroundColor,color:'#fff',width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}"> color: '#fff',
width: props.dimensions.width * props.ratioWidth + 'px',
height: props.dimensions.height * props.ratioHeight + 'px',
pointerEvents: props.isView ? 'auto' : 'none'
}"
>
<vue-number-roll-plus <vue-number-roll-plus
style="display: inline-block; text-align: center;position: relative;top: 50%;transform: translateY(-50%)" style="display: inline-block; text-align: center; position: relative; top: 50%; transform: translateY(-50%)"
:number="item" :number="item"
:height="props.dimensions.height*props.ratioHeight" :height="props.dimensions.height * props.ratioHeight"
background="#fff0" background="#fff0"
:style="{fontSize:props.data.options.fontSize+'px',color:props.data.options.color,'--number-roll-plus-width':((props.dimensions.width*props.ratioWidth) / props.data.options.numQuantity) - (props.data.options.isBorder? 2:0) +'px',border:props.data.options.isBorder? ` 1px solid ${props.data.options.borderColor}` :''}" :style="{
fontSize: props.data.options.fontSize + 'px',
color: props.data.options.color,
'--number-roll-plus-width':
(props.dimensions.width * props.ratioWidth) / props.data.options.numQuantity - (props.data.options.isBorder ? 2 : 0) + 'px',
border: props.data.options.isBorder ? ` 1px solid ${props.data.options.borderColor}` : ''
}"
v-for="(item, index) in list" v-for="(item, index) in list"
></vue-number-roll-plus> ></vue-number-roll-plus>
</div> </div>
@ -19,12 +30,12 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { defineEmits, defineProps, ref } from 'vue'; import { defineEmits, defineProps, ref } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer'; import { NodeResizer } from '@vue-flow/node-resizer';
import { Handle, Position } from '@vue-flow/core'; import { Handle, Position } from '@vue-flow/core';
import VueNumberRollPlus from 'vue3-number-roll-plus'; import VueNumberRollPlus from 'vue3-number-roll-plus';
import 'vue3-number-roll-plus/main.css'; import 'vue3-number-roll-plus/main.css';
import { getData } from '@/views/boardGenerate/api/getData.js';
const list = ref([]); const list = ref([]);
const props = defineProps({ const props = defineProps({
@ -72,10 +83,10 @@ const emit = defineEmits(['resize']);
const resize = (e) => { const resize = (e) => {
emit('resize', e, props.id); emit('resize', e, props.id);
}; };
const padArray = (arr,x,value=0)=>{ const padArray = (arr, x, value = 0) => {
if (arr.length > x) { if (arr.length > x) {
// return arr.slice(-x); // return arr.slice(-x);
return arr.slice(0,x); return arr.slice(0, x);
} else if (arr.length < x) { } else if (arr.length < x) {
const padding = new Array(x - arr.length).fill(value); const padding = new Array(x - arr.length).fill(value);
return [...padding, ...arr]; return [...padding, ...arr];
@ -83,21 +94,42 @@ const padArray = (arr,x,value=0)=>{
// x // x
return arr; return arr;
} }
} };
watch(() => [JSON.parse(JSON.stringify(props.data?.options?.numQuantity)),JSON.parse(JSON.stringify(props.data?.options?.number)), JSON.parse(JSON.stringify(props.inputData?.value || ''))], (obj1, obj2) => { watch(
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) { () => [
let value = props.inputData?.value || props.data.options.number || ''; JSON.parse(JSON.stringify(props.data?.options?.numQuantity)),
value = Math.ceil(parseFloat(value)) JSON.parse(JSON.stringify(props.data?.options?.number)),
list.value = padArray(value.toString().split(''),props.data.options.numQuantity) JSON.parse(JSON.stringify(props.inputData?.value || ''))
} ],
}, { deep: true, immediate: true }); (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
let value = props.inputData?.value || props.data.options.number || '';
value = Math.ceil(parseFloat(value));
list.value = padArray(value.toString().split(''), props.data.options.numQuantity);
}
},
{ deep: true, immediate: true }
);
watch(
() => [JSON.parse(JSON.stringify(props.data.options.request || '')), JSON.parse(JSON.stringify(props.inputData || ''))],
async (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
await getData({ request: props.data.options.request, inputData: props.inputData }).then((e) => {
let value = e.value || '';
value = Math.ceil(parseFloat(value));
list.value = padArray(value.toString().split(''), props.data.options.numQuantity);
});
}
},
{ deep: true, immediate: true }
);
</script> </script>
<style scoped> <style scoped>
.custom-node { .custom-node {
position: absolute; position: absolute;
} }
:deep(.real-time-num) { :deep(.real-time-num) {
margin-left: 0; margin-left: 0;
vertical-align: top; vertical-align: top;
@ -107,10 +139,8 @@ watch(() => [JSON.parse(JSON.stringify(props.data?.options?.numQuantity)),JSON.p
} }
</style> </style>
<style> <style>
:root { :root {
--number-roll-plus-width: 30px; --number-roll-plus-width: 30px;
--number-roll-plus-height: 40px; --number-roll-plus-height: 40px;
} }
</style> </style>

@ -26,7 +26,7 @@
</div> </div>
<vue3ScrollSeamless <vue3ScrollSeamless
:classOptions="props.data.options.tableClassOption || {}" :classOptions="props.data.options.tableClassOption || {}"
:dataList="props.inputData.tableData" :dataList="optionData.tableData || props.inputData.tableData"
v-if="scrollShow" v-if="scrollShow"
style="overflow: hidden" style="overflow: hidden"
:style="{ height: `calc(100% - ${props.data.options.thHeight || '0px'})` }" :style="{ height: `calc(100% - ${props.data.options.thHeight || '0px'})` }"
@ -37,7 +37,7 @@
color: props.data.options.tdColor[index % props.data.options.tdColor?.length], color: props.data.options.tdColor[index % props.data.options.tdColor?.length],
backgroundColor: (props.data.options?.tdBgColor || [])[index % props.data.options.tdBgColor?.length] backgroundColor: (props.data.options?.tdBgColor || [])[index % props.data.options.tdBgColor?.length]
}" }"
v-for="(data, index) in props.inputData.tableData" v-for="(data, index) in (optionData.tableData||props.inputData.tableData)"
:key="index" :key="index"
> >
<div <div
@ -53,7 +53,7 @@
> >
<div style="white-space: nowrap;width:100%;height:100%;overflow: hidden;position: relative;"> <div style="white-space: nowrap;width:100%;height:100%;overflow: hidden;position: relative;">
<span v-if="i.type === '文本'" id="autoScroll"> <span v-if="i.type === '文本'" id="autoScroll">
{{ setText(((props.inputData.tableData || [])[index] || {})[i.field], i.formula) }} {{ setText(((optionData.tableData || props.inputData.tableData || [])[index] || {})[i.field], i.formula) }}
</span> </span>
<el-progress <el-progress
@ -61,23 +61,23 @@
v-else-if="i.type === '进度条'" v-else-if="i.type === '进度条'"
:text-inside="true" :text-inside="true"
:stroke-width="26" :stroke-width="26"
:percentage="parseFloat(setText(((props.inputData.tableData || [])[index] || {})[i.field], i.formula))" :percentage="parseFloat(setText(((optionData.tableData || props.inputData.tableData || [])[index] || {})[i.field], i.formula))"
/> />
<el-tag type="primary" v-else-if="i.type === ''"> <el-tag type="primary" v-else-if="i.type === ''">
{{ setText(((props.inputData.tableData || [])[index] || {})[i.field], i.formula) }} {{ setText(((optionData.tableData || props.inputData.tableData || [])[index] || {})[i.field], i.formula) }}
</el-tag> </el-tag>
<el-image <el-image
:preview-src-list="[((props.inputData.tableData || [])[index] || {})[i.field]]" :preview-src-list="[((optionData.tableData || props.inputData.tableData || [])[index] || {})[i.field]]"
v-else-if="i.type === '图片'" v-else-if="i.type === '图片'"
style="width: 100%" style="width: 100%"
:style="{ height: props.data.options.tdHeight }" :style="{ height: props.data.options.tdHeight }"
:src="setText(((props.inputData.tableData || [])[index] || {})[i.field], i.formula)" :src="setText(((optionData.tableData || props.inputData.tableData || [])[index] || {})[i.field], i.formula)"
fit="contain" fit="contain"
/> />
<span id="autoScroll" <span id="autoScroll"
v-else>{{ setText(((props.inputData.tableData || [])[index] || {})[i.field], i.formula) }}</span> v-else>{{ setText(((optionData.tableData || props.inputData.tableData || [])[index] || {})[i.field], i.formula) }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -91,6 +91,7 @@ import { defineEmits, defineProps, ref } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer'; import { NodeResizer } from '@vue-flow/node-resizer';
import { Handle, Position } from '@vue-flow/core'; import { Handle, Position } from '@vue-flow/core';
import { vue3ScrollSeamless } from 'vue3-scroll-seamless'; import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
import { getData } from '@/views/boardGenerate/api/getData.js';
const scrollShow = ref(true); const scrollShow = ref(true);
@ -137,7 +138,7 @@ const props = defineProps({
required: true required: true
} }
}); });
console.log(props.inputData); const optionData = ref({})
const setText = (value, formula) => { const setText = (value, formula) => {
if (!formula) { if (!formula) {
return value; return value;
@ -156,6 +157,19 @@ watch(
}, },
{ deep: true, immediate: true } { deep: true, immediate: true }
); );
watch(
() => [JSON.parse(JSON.stringify(props.data.options.request || '[]')), JSON.parse(JSON.stringify(props.inputData || ''))],
async (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
await getData({ request: props.data.options.request||[], inputData: props.inputData }).then((e) => {
optionData.value = e;
});
}
},
{ deep: true, immediate: true }
);
const emit = defineEmits(['resize']); const emit = defineEmits(['resize']);
const resize = (e) => { const resize = (e) => {
emit('resize', e, props.id); emit('resize', e, props.id);

@ -1,14 +1,25 @@
<template> <template>
<div <div :style="{ width: props.dimensions.width * props.ratioWidth + 'px', height: props.dimensions.height * props.ratioHeight + 'px' }">
:style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}"> <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
<NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected"
@resize="resize" />
<div class="custom-node" <div
:style="{textAlign:props.data.options.align,width:props.dimensions.width*props.ratioWidth+'px',lineHeight:props.dimensions.height*props.ratioHeight+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}"> class="custom-node"
:style="{
textAlign: props.data.options.align,
width: props.dimensions.width * props.ratioWidth + 'px',
lineHeight: props.dimensions.height * props.ratioHeight + 'px',
height: props.dimensions.height * props.ratioHeight + 'px',
pointerEvents: props.isView ? 'auto' : 'none'
}"
>
<span <span
:style="{whiteSpace:props.data.options.whiteSpace,color:props.data.options.color,fontSize:props.dimensions.height*props.ratioHeight+'px'}">{{ props.inputData?.text || props.data.options.text :style="{
}}</span> whiteSpace: props.data.options.whiteSpace || 'nowrap',
color: props.data.options.color,
fontSize: props.dimensions.height * props.ratioHeight + 'px'
}"
>{{ apiData.text || props.inputData?.text || props.data.options.text }}</span
>
</div> </div>
<Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" /> <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
</div> </div>
@ -17,6 +28,7 @@
import { defineEmits, defineProps, ref } from 'vue'; import { defineEmits, defineProps, ref } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer'; import { NodeResizer } from '@vue-flow/node-resizer';
import { Handle, Position } from '@vue-flow/core'; import { Handle, Position } from '@vue-flow/core';
import { getData } from '../../api/getData.js';
const props = defineProps({ const props = defineProps({
ratioWidth: { ratioWidth: {
@ -59,6 +71,25 @@ const props = defineProps({
} }
}); });
const apiData = ref({})
onMounted(async () => {
await getData({ request: props.data.options.request, inputData: props.inputData }).then((e) => {
apiData.value =e
});
});
watch(
() => [JSON.parse(JSON.stringify(props.data.options.request ||'[]')), JSON.parse(JSON.stringify(props.inputData || ''))],
async (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
await getData({ request: props.data.options.request||[], inputData: props.inputData }).then((e) => {
apiData.value =e
});
}
},
{ deep: true, immediate: true }
);
const emit = defineEmits(['resize']); const emit = defineEmits(['resize']);
const resize = (e) => { const resize = (e) => {
emit('resize', e, props.id); emit('resize', e, props.id);
@ -69,4 +100,3 @@ const resize = (e) => {
position: absolute; position: absolute;
} }
</style> </style>

Loading…
Cancel
Save