OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

fix: 注释打包异常问题

Browse Source
This commit is contained in:
TsMask
2023-12-15 18:23:59 +08:00
parent 44c05e964e
commit dfe06e2098
2 changed files with 230 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/components/ChartGraphG6/index.vue
View File

@@ -199,12 +199,12 @@ const data = {
{
id: '0-upf',
source: '0',
target: 'combo-upf',
target: 'combo-upf',
},
{
id: 'upf-1',
source: 'combo-upf',
target: '1',
target: '1',
},
{
@@ -235,22 +235,22 @@ const data = {
{
id: '120-180',
source: '120',
target: '180',
target: '180',
},
{
id: '130-180',
source: '130',
target: '180',
target: '180',
},
{
id: '140-150',
source: '140',
target: '150',
target: '150',
},
{
id: '140-110',
source: '140',
target: '110',
target: '110',
},
{
id: '120-150',
@@ -357,20 +357,20 @@ function initChart() {
modes: {
default: ['drag-canvas', 'zoom-canvas', 'drag-node'], // 允许拖拽画布、放缩画布、拖拽节点
},
// 布局 力向吸引
layout: {
type: 'force', // 指定为力导向布局
preventOverlap: true, // 防止节点重叠
linkDistance: 100, // 指定边距离为100
},
// 插件
plugins: [
{
// 避免文本过于密集导致的视觉混乱
type: 'lod-controller',
disableLod: true,
},
] as any,
// // 布局 力向吸引
// layout: {
// type: 'force', // 指定为力导向布局
// preventOverlap: true, // 防止节点重叠
// linkDistance: 100, // 指定边距离为100
// },
// // 插件
// plugins: [
// {
// // 避免文本过于密集导致的视觉混乱
// type: 'lod-controller',
// disableLod: true,
// },
// ] as any,
// 全局节点 矩形
defaultNode: {
type: 'rect',
@@ -401,40 +401,40 @@ function initChart() {
lineWidth: 1,
},
},
// 节点状态
nodeState: {
breathing: {
haloShape: {
opacity: 0.25,
lineWidth: 20,
visible: true,
},
keyShape: {
radius: 4,
},
},
scaling: {
keyShape: {
width: 100,
height: 60,
},
},
} as any,
edgeState: {
growing: {
keyShape: {
lineWidth: 2,
lineDash: ['100%', 0],
},
},
running: {
keyShape: {
lineWidth: 2,
lineDash: [2, 2],
// TODO: lineDashOffset
},
},
},
// // 节点状态
// nodeState: {
// breathing: {
// haloShape: {
// opacity: 0.25,
// lineWidth: 20,
// visible: true,
// },
// keyShape: {
// radius: 4,
// },
// },
// scaling: {
// keyShape: {
// width: 100,
// height: 60,
// },
// },
// } as any,
// edgeState: {
// growing: {
// keyShape: {
// lineWidth: 2,
// lineDash: ['100%', 0],
// },
// },
// running: {
// keyShape: {
// lineWidth: 2,
// lineDash: [2, 2],
// // TODO: lineDashOffset
// },
// },
// },
});
graph.data(data); // 加载数据

352
src/views/monitor/topology/index.vue
View File

@@ -492,184 +492,184 @@ function initChart() {
nodeClusterBy: 'parentId',
clusterNodeStrength: 80,
},
// 主题
theme: {
type: 'spec',
base: 'light',
specification: {
node: {
dataTypeField: 'parentId',
},
},
} as any,
// 插件
plugins: [
{
// 避免文本过于密集导致的视觉混乱
type: 'lod-controller',
disableLod: true,
},
] as any,
// 全局节点 矩形
node: model => {
const { id, data } = model;
return {
id,
data: {
type: 'rect-node',
keyShape: {
width: 80,
height: 40,
radius: 8,
},
labelShape: {
position: 'center',
text: `${id} - ${data.label}`,
fill: '#fff',
},
animates: {
update: [
{
fields: ['opacity'],
shapeId: 'haloShape',
states: ['breathing'],
iterations: Infinity,
direction: 'alternate',
duration: 500,
},
{
fields: ['lineWidth'],
shapeId: 'keyShape',
states: ['breathing'],
iterations: Infinity,
direction: 'alternate',
duration: 500,
},
{
fields: ['height', 'width'],
shapeId: 'keyShape',
states: ['scaling'],
iterations: Infinity,
direction: 'alternate',
duration: 500,
},
],
},
...data,
},
};
},
// 全局边 三次贝塞尔曲线
edge: model => {
const { id, source, target, data } = model;
return {
id,
source,
target,
data: {
type: 'polyline-edge',
animates: {
update: [
{
fields: ['lineDash'],
shapeId: 'keyShape',
states: ['growing', 'running'],
iterations: Infinity,
duration: 2000,
},
{
fields: ['offsetDistance'],
shapeId: 'buShape',
states: ['circleRunning'],
iterations: Infinity,
duration: 2000,
},
],
},
...data,
},
};
},
// 全局框节点 矩形
combo: model => {
const { id, data } = model;
return {
id,
data: {
type: 'rect-combo',
keyShape: {
opacity: 0.8,
padding: [20, 20, 20, 20],
radius: 8,
},
labelShape: {
text: data.label,
offsetY: 8,
},
labelBackgroundShape: {},
buildIn: [
{
fields: ['opacity'],
duration: 500,
delay: 500 + Math.random() * 500,
},
],
buildOut: [
{
fields: ['opacity'],
duration: 200,
},
],
animates: {
update: [
{
fields: ['width', 'height', 'x', 'y'],
shapeId: 'keyShape',
},
],
},
...data,
},
};
},
// // 主题
// theme: {
// type: 'spec',
// base: 'light',
// specification: {
// node: {
// dataTypeField: 'parentId',
// },
// },
// } as any,
// // 插件
// plugins: [
// {
// // 避免文本过于密集导致的视觉混乱
// type: 'lod-controller',
// disableLod: true,
// },
// ] as any,
// // 全局节点 矩形
// node: model => {
// const { id, data } = model;
// return {
// id,
// data: {
// type: 'rect-node',
// keyShape: {
// width: 80,
// height: 40,
// radius: 8,
// },
// labelShape: {
// position: 'center',
// text: `${id} - ${data.label}`,
// fill: '#fff',
// },
// animates: {
// update: [
// {
// fields: ['opacity'],
// shapeId: 'haloShape',
// states: ['breathing'],
// iterations: Infinity,
// direction: 'alternate',
// duration: 500,
// },
// {
// fields: ['lineWidth'],
// shapeId: 'keyShape',
// states: ['breathing'],
// iterations: Infinity,
// direction: 'alternate',
// duration: 500,
// },
// {
// fields: ['height', 'width'],
// shapeId: 'keyShape',
// states: ['scaling'],
// iterations: Infinity,
// direction: 'alternate',
// duration: 500,
// },
// ],
// },
// ...data,
// },
// };
// },
// // 全局边 三次贝塞尔曲线
// edge: model => {
// const { id, source, target, data } = model;
// return {
// id,
// source,
// target,
// data: {
// type: 'polyline-edge',
// animates: {
// update: [
// {
// fields: ['lineDash'],
// shapeId: 'keyShape',
// states: ['growing', 'running'],
// iterations: Infinity,
// duration: 2000,
// },
// {
// fields: ['offsetDistance'],
// shapeId: 'buShape',
// states: ['circleRunning'],
// iterations: Infinity,
// duration: 2000,
// },
// ],
// },
// ...data,
// },
// };
// },
// // 全局框节点 矩形
// combo: model => {
// const { id, data } = model;
// return {
// id,
// data: {
// type: 'rect-combo',
// keyShape: {
// opacity: 0.8,
// padding: [20, 20, 20, 20],
// radius: 8,
// },
// labelShape: {
// text: data.label,
// offsetY: 8,
// },
// labelBackgroundShape: {},
// buildIn: [
// {
// fields: ['opacity'],
// duration: 500,
// delay: 500 + Math.random() * 500,
// },
// ],
// buildOut: [
// {
// fields: ['opacity'],
// duration: 200,
// },
// ],
// animates: {
// update: [
// {
// fields: ['width', 'height', 'x', 'y'],
// shapeId: 'keyShape',
// },
// ],
// },
// ...data,
// },
// };
// },
// 节点状态
nodeState: {
breathing: {
haloShape: {
opacity: 0.25,
lineWidth: 20,
visible: true,
},
keyShape: {
radius: 4,
},
},
scaling: {
keyShape: {
width: 100,
height: 60,
},
},
} as any,
edgeState: {
growing: {
keyShape: {
lineWidth: 2,
lineDash: ['100%', 0],
},
},
running: {
keyShape: {
lineWidth: 2,
lineDash: [2, 2],
// TODO: lineDashOffset
},
},
},
data, //: graphData,
// nodeState: {
// breathing: {
// haloShape: {
// opacity: 0.25,
// lineWidth: 20,
// visible: true,
// },
// keyShape: {
// radius: 4,
// },
// },
// scaling: {
// keyShape: {
// width: 100,
// height: 60,
// },
// },
// } as any,
// edgeState: {
// growing: {
// keyShape: {
// lineWidth: 2,
// lineDash: ['100%', 0],
// },
// },
// running: {
// keyShape: {
// lineWidth: 2,
// lineDash: [2, 2],
// // TODO: lineDashOffset
// },
// },
// },
// data, //: graphData,
});
graph.render()
graphChart = graph;
// graph.render()
// graphChart = graph;
}
const actions = {