Newer
Older
import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {TopologyService} from '../../netTopology/topology.service';
declare let editor: any;
@Component({
selector: 'smart-topology-view',
templateUrl: './topology-view.component.html',
styles: [
`
.topology-context {
background: rgba(0, 0, 0, 0.2);
}`
]
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
})
export class TopologyViewComponent implements OnInit, AfterViewInit {
@ViewChild('topologyCanvas') topologyCanvas: ElementRef;
@ViewChild('topologyBody') topologyBody: ElementRef;
isLoading = false;
constructor(private topologySer: TopologyService) {
}
ngOnInit() {
}
ngAfterViewInit() {
const canvasWidth = this.topologyBody.nativeElement.clientWidth;
const canvasHeight = this.topologyBody.nativeElement.clientHeight;
let myCanvas = this.topologyCanvas.nativeElement;
let context = myCanvas.getContext('2d');
let ratio = this.getPixelRatio(context);
myCanvas.style.width = canvasWidth + 'px';
myCanvas.style.height = canvasHeight + 'px';
myCanvas.width = myCanvas.width * ratio;
myCanvas.height = myCanvas.height * ratio;
context.scale(ratio, ratio);
editor.loadTopology('', '', 'img/backimg.png', canvasWidth, canvasHeight);
}
// 获取像素比
getPixelRatio(context) {
const backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
}
//查询单个
getDetail(topoId) {
this.isLoading = true;
this.topologySer.findItem(topoId).subscribe(
(res) => {
if (res.errCode == 10000) {
if (res.data.json.length > 0) {
let json = JSON.parse(res.data.json);
if (json.topology) {
this.viewTopology(JSON.parse(json.topology));
} else {
this.isLoading = false;
editor.utils.clearTopology();
}
} else {
this.isLoading = false;
editor.utils.clearTopology();
}
this.findItemStatus();
}
}
);
}
//回显拓扑图
viewTopology(topologyJson) {
const arr = topologyJson.childs[0].childs;
const list = [];
const hostIds = [];
arr.forEach(e => {
if (e.elementType == 'link' && e.itemId && e.itemId.length > 2) {
const data = {
itemIdIn: e.itemId.split(',')[0],
itemIdOut: e.itemId.split(',')[1],
linkId: e.id
};
list.push(data);
}
});
arr.forEach(e => {
if (e.elementType == 'node' && e.hostId) {
hostIds.push(e.hostId);
}
});
//危险对象
//故障对象
const glist = [];
//删除对象
const dlist = [];
if (hostIds.length > 0) {
const res = {
hostIds: hostIds
};
this.topologySer.findElementStatus(res).subscribe(
(res) => {
//status -1=未监控, 0=正常, 1=危险, 2=故障, 3=未分类
const resData = res.data;
resData.forEach(e1 => {
arr.forEach(e2 => {
if (e1.elementId == e2.hostId) {
// if(e1.status == -2){
// e2.alarm = "主机被删除，请及时清理";
// e2.fontColor='0,0,0';
// e2.alarmAlpha=0.9;
// }
if (e1.status == 1) {
e2.alarm = '危险';
e2.fontColor = '0,0,0';
e2.alarmColor = '255,153,18';
e2.alarmAlpha = 0.9;
}
if (e1.status == 2) {
e2.alarm = '故障';
e2.fontColor = '0,0,0';
e2.alarmAlpha = 0.9;
}
}
});
});
editor.loadTopologyByJson(topologyJson, 'img/backimg.png');
this.isLoading = false;
}
);
}
//流量数据
if (list.length > 0) { //有流量监控-->查询流量监控
const data = {
'list': list
};
this.topologySer.findFlow(data).subscribe(
(res) => {
const response = res.data;
response.forEach(e1 => {
arr.forEach(e2 => {
if (e1.linkId == e2.id) {
}
});
});
this.isLoading = false;
editor.loadTopologyByJson(topologyJson, 'img/backimg.png');
}
);
} else { //无流量监控
this.isLoading = false;
editor.loadTopologyByJson(topologyJson, 'img/backimg.png');
}
}
//查询监控点状态
findItemStatus() {
}
}