You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
483 lines
14 KiB
JavaScript
483 lines
14 KiB
JavaScript
import { useVueFlow } from '@vue-flow/core';
|
|
import { ref, watch } from 'vue';
|
|
import { v4 as uuidv4 } from 'uuid';
|
|
|
|
|
|
const getId = (type) => {
|
|
return `${type}_${uuidv4().replaceAll('-', '_')}`;
|
|
};
|
|
|
|
|
|
const getOption = (e) => {
|
|
if (e === 'line' || e === 'multiLines') {
|
|
return {
|
|
title: '',
|
|
yNames: [],
|
|
gridTop: 30,
|
|
gridLeft: 5,
|
|
gridBottom: 10,
|
|
gridRight: 10,
|
|
boundaryGap: true,
|
|
xName: '',
|
|
xNameLocation: 'end',
|
|
xAxisLineShow: true,
|
|
xAxisLineColor: '#DCE2E8',
|
|
xAxisTickShow: true,
|
|
xAxisTickInside: false,
|
|
xAxisTickColor: '#DCE2E8',
|
|
xAxisLabelShow: true,
|
|
xAxisLabelInterval: false,
|
|
xAxisLabelInside: false,
|
|
xAxisLabelRotate: 0,
|
|
xAxisLabelFormatter: '',
|
|
xAxisLabelColor: '#fff',
|
|
xAxisLabelFontSize: 12,
|
|
xAxisLabelMargin: 3,
|
|
xAxisSplitLineShow: false,
|
|
xAxisSplitLineColor: '#DCE2E8',
|
|
xAxisSplitLineType: 'solid',
|
|
yName: '',
|
|
yNameLocation: 'end',
|
|
yAxisLineShow: true,
|
|
yAxisLineColor: '#DCE2E8',
|
|
yAxisTickShow: true,
|
|
yAxisTickInside: false,
|
|
yAxisTickColor: '#DCE2E8',
|
|
yAxisLabelShow: true,
|
|
yAxisLabelInterval: false,
|
|
yAxisLabelInside: false,
|
|
yAxisLabelRotate: 0,
|
|
yAxisLabelFormatter: '',
|
|
yAxisLabelColor: '#fff',
|
|
yAxisLabelFontSize: 12,
|
|
yAxisLabelMargin: 3,
|
|
yAxisSplitLineShow: false,
|
|
yAxisSplitLineColor: '#DCE2E8',
|
|
yAxisSplitLineType: 'solid',
|
|
lineSymbolShow: false,
|
|
lineSymbolSize: 5,
|
|
lineSymbolType: 'circle',
|
|
seriesColor: '#9E87FF',
|
|
tooltip: true,
|
|
legend: true
|
|
};
|
|
} else if (e === 'bar' || e === 'multiBars') {
|
|
return {
|
|
title: '',
|
|
yNames: [],
|
|
gridTop: 30,
|
|
gridLeft: 5,
|
|
gridBottom: 10,
|
|
gridRight: 10,
|
|
boundaryGap: true,
|
|
xName: '',
|
|
xNameLocation: 'end',
|
|
xAxisLineShow: true,
|
|
xAxisLineColor: '#DCE2E8',
|
|
xAxisTickShow: true,
|
|
xAxisTickInside: false,
|
|
xAxisTickColor: '#DCE2E8',
|
|
xAxisLabelShow: true,
|
|
xAxisLabelInterval: false,
|
|
xAxisLabelInside: false,
|
|
xAxisLabelRotate: 0,
|
|
xAxisLabelFormatter: '',
|
|
xAxisLabelColor: '#fff',
|
|
xAxisLabelFontSize: 12,
|
|
xAxisLabelMargin: 3,
|
|
xAxisSplitLineShow: false,
|
|
xAxisSplitLineColor: '#DCE2E8',
|
|
xAxisSplitLineType: 'solid',
|
|
yName: '',
|
|
yNameLocation: 'end',
|
|
yAxisLineShow: true,
|
|
yAxisLineColor: '#DCE2E8',
|
|
yAxisTickShow: true,
|
|
yAxisTickInside: false,
|
|
yAxisTickColor: '#DCE2E8',
|
|
yAxisLabelShow: true,
|
|
yAxisLabelInterval: false,
|
|
yAxisLabelInside: false,
|
|
yAxisLabelRotate: 0,
|
|
yAxisLabelFormatter: '',
|
|
yAxisLabelColor: '#fff',
|
|
yAxisLabelFontSize: 12,
|
|
yAxisLabelMargin: 3,
|
|
yAxisSplitLineShow: false,
|
|
yAxisSplitLineColor: '#DCE2E8',
|
|
yAxisSplitLineType: 'solid',
|
|
seriesColor: '#9E87FF',
|
|
tooltip: true,
|
|
legend: true
|
|
};
|
|
} else if (e === 'backgroundBar') {
|
|
return {
|
|
title: '',
|
|
yNames: [],
|
|
gridTop: 30,
|
|
gridLeft: 5,
|
|
gridBottom: 10,
|
|
gridRight: 10,
|
|
boundaryGap: true,
|
|
xName: '',
|
|
xNameLocation: 'end',
|
|
xAxisLineShow: true,
|
|
xAxisLineColor: '#DCE2E8',
|
|
xAxisTickShow: true,
|
|
xAxisTickInside: false,
|
|
xAxisTickColor: '#DCE2E8',
|
|
xAxisLabelShow: true,
|
|
xAxisLabelInterval: false,
|
|
xAxisLabelInside: false,
|
|
xAxisLabelRotate: 0,
|
|
xAxisLabelFormatter: '',
|
|
xAxisLabelColor: '#fff',
|
|
xAxisLabelFontSize: 12,
|
|
xAxisLabelMargin: 3,
|
|
xAxisSplitLineShow: false,
|
|
xAxisSplitLineColor: '#DCE2E8',
|
|
xAxisSplitLineType: 'solid',
|
|
yName: '',
|
|
yNameLocation: 'end',
|
|
yAxisLineShow: true,
|
|
yAxisLineColor: '#DCE2E8',
|
|
yAxisTickShow: true,
|
|
yAxisTickInside: false,
|
|
yAxisTickColor: '#DCE2E8',
|
|
yAxisLabelShow: true,
|
|
yAxisLabelInterval: false,
|
|
yAxisLabelInside: false,
|
|
yAxisLabelRotate: 0,
|
|
yAxisLabelFormatter: '',
|
|
yAxisLabelColor: '#fff',
|
|
yAxisLabelFontSize: 12,
|
|
yAxisLabelMargin: 3,
|
|
yAxisSplitLineShow: false,
|
|
yAxisSplitLineColor: '#DCE2E8',
|
|
yAxisSplitLineType: 'solid',
|
|
tooltip: true,
|
|
legend: true,
|
|
seriesColor: '#9E87FF',
|
|
backgroundColor: 'rgba(180, 180, 180, 0.2)'
|
|
};
|
|
} else if (e === 'curve' || e === 'multiCurves') {
|
|
return {
|
|
title: '',
|
|
yNames: [],
|
|
gridTop: 30,
|
|
gridLeft: 5,
|
|
gridBottom: 10,
|
|
gridRight: 10,
|
|
boundaryGap: true,
|
|
xName: '',
|
|
xNameLocation: 'end',
|
|
xAxisLineShow: true,
|
|
xAxisLineColor: '#DCE2E8',
|
|
xAxisTickShow: true,
|
|
xAxisTickInside: false,
|
|
xAxisTickColor: '#DCE2E8',
|
|
xAxisLabelShow: true,
|
|
xAxisLabelInterval: false,
|
|
xAxisLabelInside: false,
|
|
xAxisLabelRotate: 0,
|
|
xAxisLabelFormatter: '',
|
|
xAxisLabelColor: '#fff',
|
|
xAxisLabelFontSize: 12,
|
|
xAxisLabelMargin: 3,
|
|
xAxisSplitLineShow: false,
|
|
xAxisSplitLineColor: '#DCE2E8',
|
|
xAxisSplitLineType: 'solid',
|
|
yName: '',
|
|
yNameLocation: 'end',
|
|
yAxisLineShow: true,
|
|
yAxisLineColor: '#DCE2E8',
|
|
yAxisTickShow: true,
|
|
yAxisTickInside: false,
|
|
yAxisTickColor: '#DCE2E8',
|
|
yAxisLabelShow: true,
|
|
yAxisLabelInterval: false,
|
|
yAxisLabelInside: false,
|
|
yAxisLabelRotate: 0,
|
|
yAxisLabelFormatter: '',
|
|
yAxisLabelColor: '#fff',
|
|
yAxisLabelFontSize: 12,
|
|
yAxisLabelMargin: 3,
|
|
yAxisSplitLineShow: false,
|
|
yAxisSplitLineColor: '#DCE2E8',
|
|
yAxisSplitLineType: 'solid',
|
|
lineSymbolShow: false,
|
|
lineSymbolSize: 5,
|
|
lineSymbolType: 'circle',
|
|
seriesColor: '#9E87FF',
|
|
tooltip: true,
|
|
legend: true
|
|
};
|
|
} else if (e === 'lineBar') {
|
|
return {
|
|
title: '',
|
|
yNames: [],
|
|
gridTop: 30,
|
|
gridLeft: 5,
|
|
gridBottom: 10,
|
|
gridRight: 10,
|
|
xName: '',
|
|
xNameLocation: 'end',
|
|
xAxisLineShow: true,
|
|
xAxisLineColor: '#DCE2E8',
|
|
xAxisTickShow: true,
|
|
xAxisTickInside: false,
|
|
xAxisTickColor: '#DCE2E8',
|
|
xAxisLabelShow: true,
|
|
xAxisLabelInterval: false,
|
|
xAxisLabelInside: false,
|
|
xAxisLabelRotate: 0,
|
|
xAxisLabelFormatter: '',
|
|
xAxisLabelColor: '#fff',
|
|
xAxisLabelFontSize: 12,
|
|
xAxisLabelMargin: 3,
|
|
xAxisSplitLineShow: false,
|
|
xAxisSplitLineColor: '#DCE2E8',
|
|
xAxisSplitLineType: 'solid',
|
|
yName: '',
|
|
yNameLocation: 'end',
|
|
yAxisLineShow: true,
|
|
yAxisLineColor: '#DCE2E8',
|
|
yAxisTickShow: true,
|
|
yAxisTickInside: false,
|
|
yAxisTickColor: '#DCE2E8',
|
|
yAxisLabelShow: true,
|
|
yAxisLabelInterval: false,
|
|
yAxisLabelInside: false,
|
|
yAxisLabelRotate: 0,
|
|
yAxisLabelFormatter: '',
|
|
yAxisLabelColor: '#fff',
|
|
yAxisLabelFontSize: 12,
|
|
yAxisLabelMargin: 3,
|
|
yAxisSplitLineShow: false,
|
|
yAxisSplitLineColor: '#DCE2E8',
|
|
yAxisSplitLineType: 'solid',
|
|
lineSymbolShow: false,
|
|
lineSymbolSize: 5,
|
|
lineSymbolType: 'circle',
|
|
tooltip: true,
|
|
legend: true,
|
|
seriesColor: '#9E87FF'
|
|
};
|
|
} else if (e === 'radar') {
|
|
return {
|
|
title: '',
|
|
seriesColor: '#9E87FF',
|
|
yNames: [],
|
|
gridTop: 30,
|
|
gridLeft: 5,
|
|
gridBottom: 10,
|
|
gridRight: 10,
|
|
tooltip: true,
|
|
legend: true
|
|
};
|
|
} else if (e === 'pie' || e === 'nightingaleRoseDiagram') {
|
|
return {
|
|
title: '',
|
|
yNames: [],
|
|
tooltip: true,
|
|
legend: true,
|
|
label: true,
|
|
pieCenter: 50,
|
|
pieLabelFormatter: '',
|
|
legendColor: '#fff'
|
|
};
|
|
} else if (e === 'annular') {
|
|
return {
|
|
title: '', yNames: [], tooltip: true, legend: true, label: true, pieCenter: 50, pieRadius: [30, 70]
|
|
};
|
|
} else if (e === 'dashboard') {
|
|
return { title: '', yNames: [], tooltip: true, legend: true, label: true };
|
|
} else if (e === 'customBoard') {
|
|
return { title: '', yNames: [] };
|
|
} else if (e === 'data') {
|
|
return { timeout: 5000 };
|
|
} else if (e === 'staticData') {
|
|
return { defaultInputArea: '', field: 'input', defaultDataType: '' };
|
|
} else if (e === 'customData') {
|
|
return { timeout: 5000 };
|
|
} else if (e === 'map') {
|
|
return { dataMap: [] };
|
|
} else if (e === 'inputNode') {
|
|
return { field: 'input', defaultInput: '' };
|
|
} else if (e === 'time') {
|
|
return { startTimeId: 'startTime', endTimeId: 'endTime', defaultTime: [], format: '' };
|
|
} else if (e === 'text') {
|
|
return { text: '文字', align: '', color: '#fff' };
|
|
} else if (e === 'img') {
|
|
return { imgSrc: '' };
|
|
} else if (e === 'icon') {
|
|
return { icon: '', iconSrc: '' };
|
|
} else if (e === 'video') {
|
|
return { videoSrc: '' };
|
|
} else if (e === 'timeline') {
|
|
return { color: '#fff', timestampColor: '#fff', field: 'content', timestampField: 'timestamp', isTimestamp: true };
|
|
} else if (e === 'scrollTable' || e === 'table') {
|
|
return {
|
|
tableOptions: [],
|
|
tableCellOptions: [],
|
|
tableClassOption: {}, isThShow: true,
|
|
thHeight: '32px',
|
|
tdHeight: '28px',
|
|
thColor: '#D6F4FF',
|
|
tdColor: ['#D6F4FF', '#D6F4FF', '#D6F4FF', '#D6F4FF'],
|
|
thBgColor: '#1E90FF',
|
|
tdBgColor: ['#0D2B3D', '#103B4C', '#14576B', '#187E99']
|
|
};
|
|
} else if (e === 'customTable') {
|
|
return {
|
|
tableOptions: [],
|
|
tableCellOptions: [],
|
|
cellNum: 2,
|
|
dataNum: 2,
|
|
tdHeight: '28px',
|
|
tdColor: ['#D6F4FF', '#D6F4FF', '#D6F4FF', '#D6F4FF'],
|
|
tdBgColor: ['#0D2B3D', '#103B4C', '#14576B', '#187E99']
|
|
};
|
|
} else if (e === 'carousel') {
|
|
return { swiperOptions: {}, imageFit: 'contain', carouselImages: [] };
|
|
} else if (e === 'background') {
|
|
return { backgroundColor: '#fff', isBorder: true, borderColor: '#fff', backgroundImage: '' };
|
|
} else if (e === 'pagination') {
|
|
return { pageSizeField: 'pageSize', currentPageField: 'pageNum' };
|
|
} else if (e === 'digitalFlop') {
|
|
return {
|
|
field: '', number: 1111, backgroundColor: 'rgba(180, 180, 180, 0.2)', isBorder: true, borderColor: '#fff'
|
|
};
|
|
} else {
|
|
return {};
|
|
}
|
|
};
|
|
const getNodeSize = (e) => {
|
|
if (e === 'line' || e === 'multiLines' || e === 'bar' || e === 'multiBars' || e === 'curve' || e === 'multiCurves' || e === 'customBoard' || e === 'pie' || e === 'annular' || e === 'dashboard' || e === 'radar') {
|
|
return { width: 300, height: 150 };
|
|
} else if (e === 'data' || e === 'customData') {
|
|
return { width: 150, height: 50 };
|
|
} else if (e === 'inputNode') {
|
|
return { width: 100, height: 30 };
|
|
} else if (e === 'staticData') {
|
|
return { width: 100, height: 60 };
|
|
} else if (e === 'text') {
|
|
return { width: 100, height: 30 };
|
|
} else if (e === 'time') {
|
|
return { width: 200, height: 30 };
|
|
} else if (e === 'img') {
|
|
return { width: 300, height: 300 };
|
|
} else if (e === 'map') {
|
|
return { width: 100, height: 30 };
|
|
} else if (e === 'scrollTable' || e === 'table') {
|
|
return { width: 500, height: 300 };
|
|
} else {
|
|
return { width: 100, height: 100 };
|
|
}
|
|
};
|
|
const nameEnum = {
|
|
line: '折线',
|
|
multiLines: '多折线',
|
|
curve: '曲线',
|
|
multiCurves: '多曲线',
|
|
lineBar: '双轴图',
|
|
bar: '柱状图',
|
|
backgroundBar: '背景柱状图',
|
|
multiBars: '多柱状图',
|
|
pie: '饼图',
|
|
annular: '中空饼图',
|
|
dashboard: '仪表盘',
|
|
radar: '雷达图',
|
|
nightingaleRoseDiagram: '南丁格尔玫瑰图',
|
|
carousel: '轮播图',
|
|
map: '映射',
|
|
staticData: '静态数据',
|
|
customData: '自定义数据',
|
|
text: '文字',
|
|
inputNode: '输入框',
|
|
time: '时间',
|
|
img: '图片',
|
|
icon: '图标',
|
|
video: '视频',
|
|
timeline: '时间线',
|
|
digitalFlop: '数字翻牌器',
|
|
scrollTable: '滚动表格',
|
|
background: '背景'
|
|
};
|
|
const tool = () => {
|
|
const nodeType = ref('');
|
|
const customData = ref({ script: '' });
|
|
const { addNodes, screenToFlowCoordinate, onNodesInitialized, updateNode } = useVueFlow();
|
|
const onDragStart = (event, type, data) => {
|
|
if (event.dataTransfer) {
|
|
event.dataTransfer.setData('application/vueflow', type);
|
|
event.dataTransfer.effectAllowed = 'move';
|
|
}
|
|
|
|
nodeType.value = type;
|
|
customData.value = { ...customData.value, ...(data || {}) };
|
|
document.addEventListener('drop', onDragEnd);
|
|
};
|
|
const onDragEnd = () => {
|
|
nodeType.value = null;
|
|
document.removeEventListener('drop', onDragEnd);
|
|
};
|
|
const onDrop = (event) => {
|
|
const dimensions = getNodeSize(nodeType.value);
|
|
|
|
const position = screenToFlowCoordinate({
|
|
x: event.clientX, y: event.clientY
|
|
});
|
|
|
|
const nodeId = getId(nodeType.value);
|
|
const newNode = {
|
|
id: nodeId,
|
|
name: nameEnum[nodeType.value],
|
|
draggable: true,
|
|
type: nodeType.value,
|
|
dimensions,
|
|
position,
|
|
data: { options: getOption(nodeType.value), outputData: {}, customData: customData.value }
|
|
};
|
|
|
|
|
|
const { off } = onNodesInitialized(() => {
|
|
updateNode(nodeId, (node) => ({
|
|
position: { x: node.position.x - node.dimensions.width / 2, y: node.position.y - node.dimensions.height / 2 }
|
|
}));
|
|
|
|
off();
|
|
});
|
|
|
|
addNodes(newNode);
|
|
|
|
};
|
|
const onDragOver = (event) => {
|
|
event.preventDefault();
|
|
|
|
if (nodeType.value) {
|
|
|
|
if (event.dataTransfer) {
|
|
event.dataTransfer.dropEffect = 'move';
|
|
}
|
|
}
|
|
};
|
|
return {
|
|
onDragStart, onDragEnd, onDrop, onDragOver
|
|
};
|
|
};
|
|
export default tool;
|
|
export const options = {
|
|
isD: true, isJSON: (str) => {
|
|
if (typeof str === 'string') {
|
|
try {
|
|
JSON.parse(str);
|
|
return true;
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
}
|
|
return false;
|
|
}, getId
|
|
};
|