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

fix: 类型异常导致编译失败

Browse Source
This commit is contained in:
TsMask
2023-12-08 17:26:40 +08:00
parent f110d0e697
commit fafe604323
1 changed files with 101 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -51,26 +51,31 @@ const ExtGraph = extend(Graph, {
// },
edges: {
'polyline-edge': Extensions.PolylineEdge,
'custom-edge': Extensions.CubicEdge,
'cubic-edge': Extensions.CubicEdge,
// 'custom-edge': Extensions.CubicEdge,
},
});
const data = {
nodes: [
// 0 基站
{
id: '0',
data: {
x: 100,
y: 100,
x: 80,
y: 150,
type: 'circle-node',
color: '#5a99d5',
color: '#fffff',
keyShape: {
r: 32,
r: 24,
width: 48,
height: 48,
fill: '#9EC9FF',
stroke: '#5B8FF9',
lineWidth: 2,
},
labelShape: {
text: '基站222222222222222222',
text: '基站',
position: 'bottom',
maxWidth: '200%',
offsetY: 10,
@@ -78,39 +83,12 @@ const data = {
labelBackgroundShape: {},
iconShape: {
img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
width: 48,
height: 48,
},
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,
},
],
width: 24,
height: 24,
},
},
},
// 1 DM
{
id: '1',
data: {
@@ -119,6 +97,7 @@ const data = {
y: 350,
},
},
// 2 O&M
{
id: '2',
data: {
@@ -237,7 +216,7 @@ const data = {
source: '0',
target: 'combo-5gc',
data: {
type: 'custom-edge',
type: 'cubic-edge',
animates: {
update: [
{
@@ -468,7 +447,7 @@ function initChart() {
type: 'lod-controller',
disableLod: true,
},
],
] as any,
modes: {
default: [
{
@@ -489,7 +468,7 @@ function initChart() {
'drag-canvas',
// 'click-select',
'zoom-canvas',
],
] as any,
},
theme: {
@@ -500,73 +479,85 @@ function initChart() {
dataTypeField: 'parentId',
},
},
} 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: data.label,
},
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,
},
};
},
// node: model => {
// const { id, data } = model;
// return {
// id,
// data: {
// ...data,
// type: 'rect-node',
// keyShape: {
// width: 80,
// height: 40,
// radius: 8,
// },
// labelShape: {
// position: 'center',
// text: data.label,
// },
// 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,
// },
// ],
// },
// },
// };
// },
edge: {
animates: {
update: [
{
fields: ['lineDash'],
shapeId: 'keyShape',
states: ['growing', 'running'],
iterations: Infinity,
duration: 2000,
// 全局边 三次贝塞尔曲线
edge: model => {
const { id, source, target, data } = model;
return {
id,
source,
target,
data: {
type: 'cubic-edge',
animates: {
update: [
{
fields: ['lineDash'],
shapeId: 'keyShape',
states: ['growing', 'running'],
iterations: Infinity,
duration: 2000,
},
{
fields: ['offsetDistance'],
shapeId: 'buShape',
states: ['circleRunning'],
iterations: Infinity,
duration: 2000,
},
],
},
{
fields: ['offsetDistance'],
shapeId: 'buShape',
states: ['circleRunning'],
iterations: Infinity,
duration: 2000,
},
],
},
...data,
},
};
},
combo: model => {
const { id, data } = model;
@@ -596,6 +587,7 @@ function initChart() {
},
};
},
// 节点状态
nodeState: {
breathing: {
haloShape: {
@@ -613,7 +605,7 @@ function initChart() {
height: 60,
},
},
},
} as any,
edgeState: {
growing: {
keyShape: {
@@ -693,7 +685,7 @@ function initChart() {
const actions = {
'Enable/Disable Node States': {
Breathing: () => {
graph.getAllNodesData().forEach(node => {
graph.getAllNodesData().forEach((node:any) => {
if (graph.getItemState(node.id, 'breathing')) {
graph.setItemState(node.id, 'breathing', false);
} else {
@@ -703,7 +695,7 @@ const actions = {
});
},
Scaling: () => {
graph.getAllNodesData().forEach(node => {
graph.getAllNodesData().forEach((node:any) => {
if (graph.getItemState(node.id, 'scaling')) {
graph.setItemState(node.id, 'scaling', false);
} else {
@@ -715,7 +707,7 @@ const actions = {
},
'Enable/Disable Edge States': {
Growing: () => {
graph.getAllEdgesData().forEach(edge => {
graph.getAllEdgesData().forEach((edge:any) => {
if (graph.getItemState(edge.id, 'growing')) {
graph.setItemState(edge.id, 'growing', false);
} else {
@@ -725,7 +717,7 @@ const actions = {
});
},
Running: () => {
graph.getAllEdgesData().forEach(edge => {
graph.getAllEdgesData().forEach((edge:any) => {
if (graph.getItemState(edge.id, 'running')) {
graph.setItemState(edge.id, 'running', false);
} else {