xins
/
hwmom-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

看板问题修改

Browse Source
master
yesg 2 months ago
parent 861dba3309
commit bf61506e69
10 changed files with 593 additions and 245 deletions
Show Stats Download Patch File Download Diff File

133
src/views/boardGenerate/api/getData.js
Unescape Escape View File

@ -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;
};

93
src/views/boardGenerate/nodes/board/annularNode.vue
Unescape Escape View File

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

288
src/views/boardGenerate/nodes/board/barNode.vue
Unescape Escape View File

@ -1,12 +1,16 @@
<template>
<div
: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" />
<div :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" />
<div class="custom-node"
: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
class="custom-node"
: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>
<Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
</div>
@ -16,6 +20,7 @@ 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';
import { getData } from '@/views/boardGenerate/api/getData.js';
const props = defineProps({
ratioWidth: {
@ -59,6 +64,7 @@ const props = defineProps({
});
const chartRef = ref();
let chart = null;
let optionData = {};
const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
const defaultOption = {
title: {
@ -206,123 +212,124 @@ const defaultOption = {
};
const getOption = () => {
const chartOption = {
title: {
text: props.data.options.title || ''
},
legend: {
show: props.data?.options?.legend || false
},
tooltip: {
show: props.data?.options?.tooltip || false
},
grid: {
top: props.data?.options?.gridTop + '%' || '20%',
left: props.data?.options?.gridLeft + '%' || '20%',
bottom: props.data?.options?.gridBottom + '%' || '20%',
right: props.data?.options?.gridRight + '%' || '20%'
},
xAxis: [
{
name: props.data?.options?.xName || '',
type: props.data?.options?.isHorizontal ? 'value' : 'category',
nameLocation: props.data?.options?.xNameLocation || 'end',
boundaryGap: true,
axisLine: {
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: [
{
title: {
text: props.data.options.title || ''
},
legend: {
show: props.data?.options?.legend || false
},
tooltip: {
show: props.data?.options?.tooltip || false
},
grid: {
top: props.data?.options?.gridTop + '%' || '20%',
left: props.data?.options?.gridLeft + '%' || '20%',
bottom: props.data?.options?.gridBottom + '%' || '20%',
right: props.data?.options?.gridRight + '%' || '20%'
},
xAxis: [
{
name: props.data?.options?.xName || '',
type: props.data?.options?.isHorizontal ? 'value' : 'category',
nameLocation: props.data?.options?.xNameLocation || 'end',
boundaryGap: true,
axisLine: {
show: props.data?.options?.xAxisLineShow || false,
lineStyle: {
color: props.data?.options?.seriesColor || colorList[0]
},
label: {
position: props.data?.options?.isHorizontal ? 'right' : 'top'
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'
}
}
]
}
;
console.log(props.data?.options?.seriesColor);
let xData = [props.inputData?.x1 || []];
let yData = [props.inputData?.y1 || []];
let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length));
}
],
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: [
{
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] || '数量']]];
Array(length).fill(0).forEach((_, i) => {
let item = [];
xData.forEach(e => {
item.push(e[i]);
Array(length)
.fill(0)
.forEach((_, 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 {
...chartOption,
dataset: {
@ -337,16 +344,38 @@ onMounted(() => {
chart.setOption(defaultOption, true);
chart && chart.setOption(getOption(), false);
});
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.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 resize = (e) => {
chart.resize();
@ -358,5 +387,4 @@ const resize = (e) => {
width: 100%;
height: 100%;
}
</style>

105
src/views/boardGenerate/nodes/board/lineNode.vue
Unescape Escape View File

@ -1,12 +1,16 @@
<template>
<div
: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" />
<div :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" />
<div class="custom-node"
: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
class="custom-node"
: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>
<Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
</div>
@ -16,6 +20,7 @@ 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';
import { getData } from '@/views/boardGenerate/api/getData.js';
const props = defineProps({
ratioWidth: {
@ -32,6 +37,10 @@ const props = defineProps({
type: Boolean,
required: false
},
colors: {
type: Array,
required: false
},
inputData: {
type: Object,
required: false
@ -59,6 +68,7 @@ const props = defineProps({
});
const chartRef = ref();
let chart = null;
let optionData = {};
const colorList = ref(['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']);
const defaultOption = {
title: {
@ -115,7 +125,7 @@ const defaultOption = {
{
name: props.data?.options?.xName || '',
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,
axisLine: {
show: props.data?.options?.xAxisLineShow || false,
@ -230,6 +240,7 @@ const getOption = () => {
},
xAxis: [
{
type: 'category',
name: props.data?.options?.xName || '',
nameLocation: props.data?.options?.xNameLocation || 'end',
boundaryGap: props.data?.options?.boundaryGap || false,
@ -267,6 +278,7 @@ const getOption = () => {
],
yAxis: [
{
type: 'value',
name: props.data?.options?.yName || '',
nameLocation: props.data?.options?.yNameLocation || 'end',
axisLine: {
@ -303,6 +315,7 @@ const getOption = () => {
],
series: [
{
type: 'line',
showSymbol: props.data?.options?.lineSymbolShow || false,
symbolSize: props.data?.options?.lineSymbolSize || 5,
symbol: props.data?.options?.lineSymbolType || 'circle',
@ -312,20 +325,22 @@ 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 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] || '数量']]];
Array(length).fill(0).forEach((_, i) => {
let item = [];
xData.forEach(e => {
item.push(e[i]);
Array(length)
.fill(0)
.forEach((_, 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 {
...chartOption,
dataset: {
@ -340,16 +355,45 @@ onMounted(() => {
chart.setOption(defaultOption, true);
chart && chart.setOption(getOption(), false);
});
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.colors))],
(obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
colorList.value = props.colors
}
},
{ 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 resize = (e) => {
chart.resize();
@ -361,5 +405,4 @@ const resize = (e) => {
width: 100%;
height: 100%;
}
</style>

15
src/views/boardGenerate/nodes/board/multiBarsNode.vue
Unescape Escape View File

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

21
src/views/boardGenerate/nodes/board/pieNode.vue
Unescape Escape View File

@ -16,6 +16,7 @@ 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';
import { getData } from '@/views/boardGenerate/api/getData.js';
const props = defineProps({
ratioWidth: {
@ -59,6 +60,7 @@ const props = defineProps({
});
const chartRef = ref();
let chart = null;
let optionData = {}
const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
const getOption = () => {
const chartOption = {
@ -128,8 +130,8 @@ const getOption = () => {
}
]
};
let xData = [props.inputData?.x1 || []];
let yData = [props.inputData?.y1 || []];
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] || '数量']]];
console.log(source);
@ -166,6 +168,21 @@ watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, 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 resize = (e) => {
chart.resize();

25
src/views/boardGenerate/nodes/board/radarNode.vue
Unescape Escape View File

@ -16,6 +16,7 @@ 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';
import { getData } from '@/views/boardGenerate/api/getData.js';
const props = defineProps({
ratioWidth: {
@ -59,6 +60,7 @@ const props = defineProps({
});
const chartRef = ref();
let chart = null;
let optionData = {};
const getOption = () => {
const chartOption = {
title: {
@ -129,7 +131,7 @@ const getOption = () => {
fontSize: 8,
color: '#ddd'
},
indicator: (props.inputData?.x1 || [' ']).map(e => {
indicator: (optionData.x1 || props.inputData?.x1 || [' ']).map(e => {
return {
name: e
};
@ -158,7 +160,7 @@ const getOption = () => {
data: [
{
// value: [98,95,93,95,93,97],
value: props.inputData?.y1,
value: optionData.y1 || props.inputData?.y1,
name: 'Allocated Budget',
areaStyle: {
color: {
@ -177,8 +179,8 @@ const getOption = () => {
}
]
};
let xData = [props.inputData?.x1 || []];
let yData = [props.inputData?.y1 || []];
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] || ' ']]];
Array(length).fill(0).forEach((_, i) => {
@ -191,7 +193,6 @@ const getOption = () => {
});
source.push(item);
});
console.log(source);
return {
...chartOption,
dataset: {
@ -215,6 +216,20 @@ watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, 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 resize = (e) => {
chart.resize();

78
src/views/boardGenerate/nodes/form/digitalFlopNode.vue
Unescape Escape View File

@ -1,17 +1,28 @@
<template>
<div
: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" />
<div class="custom-node"
: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'}">
<div :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" />
<div
class="custom-node"
: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'
}"
>
<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"
:height="props.dimensions.height*props.ratioHeight"
:height="props.dimensions.height * props.ratioHeight"
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"
></vue-number-roll-plus>
</div>
@ -19,12 +30,12 @@
</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 VueNumberRollPlus from 'vue3-number-roll-plus';
import 'vue3-number-roll-plus/main.css';
import { getData } from '@/views/boardGenerate/api/getData.js';
const list = ref([]);
const props = defineProps({
@ -72,10 +83,10 @@ const emit = defineEmits(['resize']);
const resize = (e) => {
emit('resize', e, props.id);
};
const padArray = (arr,x,value=0)=>{
const padArray = (arr, x, value = 0) => {
if (arr.length > x) {
// return arr.slice(-x);
return arr.slice(0,x);
return arr.slice(0, x);
} else if (arr.length < x) {
const padding = new Array(x - arr.length).fill(value);
return [...padding, ...arr];
@ -83,21 +94,42 @@ const padArray = (arr,x,value=0)=>{
// 正好 x 位
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) => {
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?.numQuantity)),
JSON.parse(JSON.stringify(props.data?.options?.number)),
JSON.parse(JSON.stringify(props.inputData?.value || ''))
],
(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>
<style scoped>
.custom-node {
position: absolute;
}
:deep(.real-time-num) {
margin-left: 0;
vertical-align: top;
@ -107,10 +139,8 @@ watch(() => [JSON.parse(JSON.stringify(props.data?.options?.numQuantity)),JSON.p
}
</style>
<style>
:root {
--number-roll-plus-width: 30px;
--number-roll-plus-height: 40px;
}
</style>

32
src/views/boardGenerate/nodes/form/scrollTableNode.vue
Unescape Escape View File

@ -26,7 +26,7 @@
</div>
<vue3ScrollSeamless
:classOptions="props.data.options.tableClassOption || {}"
:dataList="props.inputData.tableData"
:dataList="optionData.tableData || props.inputData.tableData"
v-if="scrollShow"
style="overflow: hidden"
:style="{ height: `calc(100% - ${props.data.options.thHeight || '0px'})` }"
@ -37,7 +37,7 @@
color: props.data.options.tdColor[index % props.data.options.tdColor?.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"
>
<div
@ -53,7 +53,7 @@
>
<div style="white-space: nowrap;width:100%;height:100%;overflow: hidden;position: relative;">
<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>
<el-progress
@ -61,23 +61,23 @@
v-else-if="i.type === '进度条'"
:text-inside="true"
: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 === '标签'">
{{ setText(((props.inputData.tableData || [])[index] || {})[i.field], i.formula) }}
{{ setText(((optionData.tableData || props.inputData.tableData || [])[index] || {})[i.field], i.formula) }}
</el-tag>
<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 === '图片'"
style="width: 100%"
: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"
/>
<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>
@ -91,6 +91,7 @@ import { defineEmits, defineProps, ref } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer';
import { Handle, Position } from '@vue-flow/core';
import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
import { getData } from '@/views/boardGenerate/api/getData.js';
const scrollShow = ref(true);
@ -137,7 +138,7 @@ const props = defineProps({
required: true
}
});
console.log(props.inputData);
const optionData = ref({})
const setText = (value, formula) => {
if (!formula) {
return value;
@ -156,6 +157,19 @@ watch(
},
{ 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 resize = (e) => {
emit('resize', e, props.id);

48
src/views/boardGenerate/nodes/form/textNode.vue
Unescape Escape View File

@ -1,14 +1,25 @@
<template>
<div
: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" />
<div :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" />
<div 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'}">
<div
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
: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
}}</span>
:style="{
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>
<Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
</div>
@ -17,6 +28,7 @@
import { defineEmits, defineProps, ref } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer';
import { Handle, Position } from '@vue-flow/core';
import { getData } from '../../api/getData.js';
const props = defineProps({
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 resize = (e) => {
emit('resize', e, props.id);
@ -69,4 +100,3 @@ const resize = (e) => {
position: absolute;
}
</style>

Write Preview
Loading…
Cancel
Save