dcim-topology2d 1.1.6 → 2.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/chart-diagram/src/echarts/index.js +88 -96
- package/chart-diagram/src/register.js +3 -3
- package/chart-diagram/src/utils/changeOptions.d.ts +4 -4
- package/chart-diagram/src/utils/changeOptions.js +172 -144
- package/chart-diagram/src/utils/conversion.d.ts +12 -12
- package/chart-diagram/src/utils/conversion.js +278 -137
- package/chart-diagram/src/utils/render.d.ts +5 -0
- package/chart-diagram/src/utils/render.js +107 -0
- package/core/index.d.ts +1 -0
- package/core/index.js +1 -0
- package/core/src/activeLayer.js +0 -6
- package/core/src/canvas.js +1 -0
- package/core/src/common.d.ts +1 -2
- package/core/src/common.js +123 -540
- package/core/src/core.js +61 -46
- package/core/src/divLayer.d.ts +0 -3
- package/core/src/divLayer.js +13 -34
- package/core/src/element/common.d.ts +5 -0
- package/core/src/element/common.js +52 -0
- package/core/src/element/iframe.d.ts +3 -0
- package/core/src/element/iframe.js +12 -0
- package/core/src/element/index.d.ts +4 -0
- package/core/src/element/index.js +4 -0
- package/core/src/element/select.d.ts +11 -0
- package/core/src/element/select.js +199 -0
- package/core/src/element/tab.d.ts +1 -0
- package/core/src/element/tab.js +22 -0
- package/core/src/healps/changeData.d.ts +1 -2
- package/core/src/healps/changeData.js +16 -122
- package/core/src/middles/default.js +3 -1
- package/core/src/middles/nodes/arbitrarygraph.js +11 -9
- package/core/src/middles/nodes/formselect.d.ts +2 -0
- package/core/src/middles/nodes/formselect.js +73 -0
- package/core/src/middles/nodes/iframe.js +21 -4
- package/core/src/middles/nodes/index.d.ts +1 -0
- package/core/src/middles/nodes/index.js +1 -0
- package/core/src/models/node.d.ts +4 -0
- package/core/src/models/node.js +24 -22
- package/core/src/models/pen.js +1 -2
- package/core/src/models/rect.js +2 -2
- package/core/src/options.d.ts +1 -0
- package/core/src/preview.js +45 -31
- package/core/src/renderLayer.d.ts +10 -6
- package/core/src/renderLayer.js +36 -43
- package/core/src/store/data.d.ts +16 -17
- package/core/src/store/data.js +36 -14
- package/core/src/utils/assignment.d.ts +6 -3
- package/core/src/utils/assignment.js +84 -15
- package/core/src/utils/construction.d.ts +9 -3
- package/core/src/utils/construction.js +6 -1
- package/core/src/utils/conversion.d.ts +3 -0
- package/core/src/utils/conversion.js +67 -0
- package/core/src/utils/index.d.ts +1 -1
- package/core/src/utils/index.js +1 -1
- package/core/src/utils/math.d.ts +1 -0
- package/core/src/utils/math.js +3 -0
- package/core/src/utils/onmousevent.d.ts +3 -0
- package/core/src/utils/onmousevent.js +28 -7
- package/core/src/utils/params.d.ts +7 -0
- package/core/src/utils/params.js +125 -0
- package/package.json +1 -1
- package/static/echartsDefaultData.js +27 -107
- package/static/element.js +14 -0
- package/static/form.js +11 -0
- package/static/index.js +2 -1
- package/store/actions.js +17 -0
- package/store/clear.js +72 -0
- package/store/index.js +2 -0
- package/style/common.css +18 -0
- package/style/editor.css +13 -0
- package/style/index.css +3 -12
- package/style/select.css +143 -0
- package/core/src/utils/dom.d.ts +0 -9
- package/core/src/utils/dom.js +0 -103
- package/core/src/utils/dom.js.map +0 -1
- package/static/echartsStore.js +0 -14
package/core/src/common.js
CHANGED
@@ -4,14 +4,19 @@ import {AnimateLayer} from './animateLayer';
|
|
4
4
|
import {RenderLayer} from './renderLayer';
|
5
5
|
import {Offscreen} from './offscreen';
|
6
6
|
import {Line, Node, Point} from './models';
|
7
|
-
import {
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
7
|
+
import {
|
8
|
+
s8,
|
9
|
+
formatPadding,
|
10
|
+
getRect,
|
11
|
+
setInitNodeDataValidat,
|
12
|
+
setDefaultNodeValidat,
|
13
|
+
initSwitchTabData,
|
14
|
+
setInitConfData,
|
15
|
+
} from './utils';
|
16
|
+
import { useStore, clearStore } from './store'
|
12
17
|
import * as mqtt from './mqtt.min';
|
13
|
-
import {
|
14
|
-
|
18
|
+
import { switchTabDataPool } from "../../store";
|
19
|
+
import {setElementSwitchTabState} from './element';
|
15
20
|
var MoveInType;
|
16
21
|
(function (MoveInType) {
|
17
22
|
MoveInType[MoveInType["None"] = 0] = "None";
|
@@ -29,7 +34,6 @@ var Common = /** @class */ (function () {
|
|
29
34
|
function Common(parent, options) {
|
30
35
|
var _this = this;
|
31
36
|
_this.moveInType = MoveInType;
|
32
|
-
this.mqttDataSouse = axios.CancelToken.source();
|
33
37
|
this.mouseDown = null;
|
34
38
|
this.renderTimer = 0;
|
35
39
|
this.lastRender = 0;
|
@@ -85,7 +89,6 @@ var Common = /** @class */ (function () {
|
|
85
89
|
_this.offscreen.render();
|
86
90
|
break;
|
87
91
|
}
|
88
|
-
_this.divLayer.playNext(e.data.nextAnimate);
|
89
92
|
_this.dispatch('animateEnd', e);
|
90
93
|
});
|
91
94
|
this.subcribeTableData = Store.subscribe('SYNC:tableData', function (data) {
|
@@ -113,7 +116,6 @@ var Common = /** @class */ (function () {
|
|
113
116
|
}
|
114
117
|
};
|
115
118
|
this.openCount = 0;
|
116
|
-
this.timmerByTopology = null;
|
117
119
|
this.lastTranlated = {x: 0, y: 0};
|
118
120
|
this.moveIn = {
|
119
121
|
type: 'None',
|
@@ -126,17 +128,6 @@ var Common = /** @class */ (function () {
|
|
126
128
|
lineControlPoint: null,
|
127
129
|
eventNode: null
|
128
130
|
};
|
129
|
-
this.initType = ''; // 初始化类型
|
130
|
-
this.pathRewrite = '';
|
131
|
-
this.initData = null; // 初始化数据
|
132
|
-
this.tagParams = {}; // 数据属性的集合,对应不同的事件类型
|
133
|
-
this.assetPoperties = {}; // 固定的资产详情的集合
|
134
|
-
this.isExistAssetKey = false; // 是否存在固定的资产详情
|
135
|
-
this.pollTime = { // 轮询的方式的定时器
|
136
|
-
Poll: null,
|
137
|
-
Poll1: null,
|
138
|
-
Poll2: null,
|
139
|
-
};
|
140
131
|
this.tip = '';
|
141
132
|
this.rendering = false;
|
142
133
|
this.isFullScreen = false;
|
@@ -177,33 +168,30 @@ var Common = /** @class */ (function () {
|
|
177
168
|
window.topology = this;
|
178
169
|
}
|
179
170
|
|
180
|
-
Common.prototype.conversionData = function (obj
|
171
|
+
Common.prototype.conversionData = function (obj) {
|
181
172
|
this.clear();
|
182
|
-
|
183
|
-
|
184
|
-
data = {pens: []};
|
173
|
+
if (!obj) {
|
174
|
+
obj = {pens: []};
|
185
175
|
}
|
176
|
+
let data = JSON.parse(JSON.stringify(obj));
|
186
177
|
Object.assign(this.store.data, data);
|
187
178
|
this.store.data.pens = [];
|
188
179
|
this.openCount = 0
|
180
|
+
const type = this.store.options.type;
|
189
181
|
// for old data.
|
190
182
|
if (data.nodes) {
|
191
183
|
for (var _i = 0, _a = data.nodes; _i < _a.length; _i++) {
|
192
|
-
setInitNodeDataValidat(_a[_i], this.id);
|
184
|
+
setInitNodeDataValidat(_a[_i], this.id, type, _i);
|
193
185
|
const item = new Node(_a[_i]);
|
194
186
|
this.store.data.pens.push(item);
|
195
|
-
this.store.pens[item.id] = item;
|
196
|
-
|
197
|
-
// 初始化图表数据
|
198
|
-
if (item.name === 'echarts' && item.data && type !== 'mqtt') {
|
199
|
-
item.data.echarts.option = setStatisticalData(item, 'def');
|
200
|
-
}
|
187
|
+
///this.store.pens[item.id] = item;
|
188
|
+
initSwitchTabData(item);
|
201
189
|
}
|
202
190
|
for (var _b = 0, _c = data.lines; _b < _c.length; _b++) {
|
203
191
|
_c[_b].TID = this.id;
|
204
192
|
const item = new Line(_c[_b]);
|
205
193
|
this.store.data.pens.push(item);
|
206
|
-
this.store.pens[item.id] = item;
|
194
|
+
//this.store.pens[item.id] = item;
|
207
195
|
}
|
208
196
|
}
|
209
197
|
// end.
|
@@ -211,19 +199,15 @@ var Common = /** @class */ (function () {
|
|
211
199
|
for (var _d = 0, _e = data.pens; _d < _e.length; _d++) {
|
212
200
|
const item = _e[_d];
|
213
201
|
if (!item.from) {
|
214
|
-
setInitNodeDataValidat(item, this.id);
|
202
|
+
setInitNodeDataValidat(item, this.id, type, _d);
|
215
203
|
const node = new Node(item);
|
216
204
|
this.store.data.pens.push(node);
|
217
|
-
this.store.pens[item.id] = node;
|
218
|
-
|
219
|
-
// 初始化图表数据
|
220
|
-
if (node.name === 'echarts' && node.data && type !== 'mqtt') {
|
221
|
-
node.data.echarts.option = setStatisticalData(node, 'def');
|
222
|
-
}
|
205
|
+
//this.store.pens[item.id] = node;
|
206
|
+
initSwitchTabData(node);
|
223
207
|
} else {
|
224
208
|
const linNode = new Line(item);
|
225
209
|
this.store.data.pens.push(linNode);
|
226
|
-
this.store.pens[item.id] = linNode;
|
210
|
+
//this.store.pens[item.id] = linNode;
|
227
211
|
}
|
228
212
|
}
|
229
213
|
}
|
@@ -235,37 +219,6 @@ var Common = /** @class */ (function () {
|
|
235
219
|
this.store.parentElem.scrollLeft = 0;
|
236
220
|
this.store.parentElem.scrollTop = 0;
|
237
221
|
};
|
238
|
-
Common.prototype.setSwitchTabData = function (node, index, type) {
|
239
|
-
if (type) {
|
240
|
-
let topologyChangeData = Store.get('TCD:topologyChangeData');
|
241
|
-
if (topologyChangeData) {
|
242
|
-
const switchTabData = node.tags.find((t) => {
|
243
|
-
return t.includes('switchTabType');
|
244
|
-
});
|
245
|
-
const switchTabTypeData = topologyChangeData[`${switchTabData}Data`];
|
246
|
-
if (switchTabTypeData) {
|
247
|
-
delete switchTabTypeData[node.id];
|
248
|
-
for (let switchNode of Object.values(switchTabTypeData)) {
|
249
|
-
if (switchNode.tagOrder > index) switchNode.tagOrder--;
|
250
|
-
}
|
251
|
-
}
|
252
|
-
}
|
253
|
-
return;
|
254
|
-
}
|
255
|
-
if (node.tags && node.tags.length > 0) {
|
256
|
-
const tagTypeData = node.tags.find((t) => {
|
257
|
-
return t === 'statisticType' || t.includes('switchTabType');
|
258
|
-
});
|
259
|
-
if (tagTypeData) {
|
260
|
-
node.tagOrder = index;
|
261
|
-
let topologyChangeData = Store.get('TCD:topologyChangeData');
|
262
|
-
if (!topologyChangeData) topologyChangeData = {};
|
263
|
-
if (!topologyChangeData[`${tagTypeData}Data`]) topologyChangeData[`${tagTypeData}Data`] = {};
|
264
|
-
topologyChangeData[`${tagTypeData}Data`][node.id] = node;
|
265
|
-
Store.set('TCD:topologyChangeData', topologyChangeData);
|
266
|
-
}
|
267
|
-
}
|
268
|
-
};
|
269
222
|
Common.prototype.canvasResize = function (size) {
|
270
223
|
try {
|
271
224
|
this.canvas.resize(size);
|
@@ -417,117 +370,70 @@ var Common = /** @class */ (function () {
|
|
417
370
|
};
|
418
371
|
// 获取表格分页数据
|
419
372
|
Common.prototype.getSyncTableDataFromServer = async function (data, node) {
|
420
|
-
const path = this.pathRewrite ?
|
421
|
-
const ret = await axios.post(path, data);
|
422
|
-
//console.log('ret.data==========', ret, ret.data)
|
423
|
-
const tableData = {};
|
424
|
-
tableData[node.id] = {loading: true};
|
425
|
-
Store.set('SYNC:tableData', tableData);
|
426
|
-
if (ret.data && ret.data.data) {
|
427
|
-
|
428
|
-
|
429
|
-
|
430
|
-
|
431
|
-
|
432
|
-
|
433
|
-
|
434
|
-
|
435
|
-
}
|
436
|
-
if (ret.error) {
|
437
|
-
|
438
|
-
} else {
|
439
|
-
|
440
|
-
}
|
441
|
-
|
373
|
+
// const path = this.pathRewrite ? mqttEchartApi.replace('/topo-api', this.pathRewrite): mqttEchartApi;
|
374
|
+
// const ret = await axios.post(path, data);
|
375
|
+
// //console.log('ret.data==========', ret, ret.data)
|
376
|
+
// const tableData = {};
|
377
|
+
// tableData[node.id] = {loading: true};
|
378
|
+
// Store.set('SYNC:tableData', tableData);
|
379
|
+
// if (ret.data && ret.data.data) {
|
380
|
+
// console.log(ret.data.data)
|
381
|
+
// tableData[node.id] = {
|
382
|
+
// loading: false,
|
383
|
+
// tableBody: ret.data.data.rows,
|
384
|
+
// total: ret.data.data.total
|
385
|
+
// }
|
386
|
+
// Store.set('SYNC:tableData', tableData);
|
387
|
+
// this.render();
|
388
|
+
// }
|
389
|
+
// if (ret.error) {
|
390
|
+
// console.log('获取数据失败==================')
|
391
|
+
// } else {
|
392
|
+
// console.log('获取数据成功==================')
|
393
|
+
// }
|
442
394
|
};
|
443
395
|
Common.prototype.switchStaticsCheckType = function (node, staticTypeNode) {
|
396
|
+
const staticType = staticTypeNode.dcimStaticForType;
|
397
|
+
if(!staticType || staticType === 'NONE') return;
|
444
398
|
// 点击切换统计图统计类别
|
445
399
|
const switchTabData = node.tags.find((t) => {
|
446
400
|
return t.includes('switchTabType');
|
447
401
|
}); // 获取按钮组类型
|
448
402
|
if(!switchTabData) return;
|
449
|
-
const topologyChangeData =
|
403
|
+
const topologyChangeData = switchTabDataPool; // 获取所有按钮组和按类型统计图组数据
|
450
404
|
const changeNode = topologyChangeData[`${switchTabData}Data`]; // 分别获取按钮组数据
|
405
|
+
if(!changeNode[node.id]) return;
|
451
406
|
// 如果存在按钮组节点数据
|
452
|
-
|
453
|
-
|
454
|
-
|
455
|
-
|
407
|
+
const tabAreaData = topologyChangeData[`${switchTabData}AreaData`];
|
408
|
+
for (let switchNode of Object.values(changeNode)) {
|
409
|
+
const penNode = this.store.data.pens[switchNode.order];
|
410
|
+
if(!penNode) return;
|
411
|
+
penNode.activeImgeIndex = switchNode.id !== node.id;
|
412
|
+
if(staticType === 'SH'){
|
413
|
+
// 对显示隐藏的功能进行交互处理
|
414
|
+
const areaNode = tabAreaData[switchNode.bindStaticId];
|
415
|
+
if(areaNode && this.store.data.pens[areaNode.order]) {
|
416
|
+
const tagNode = this.store.data.pens[areaNode.order];
|
417
|
+
tagNode.visible = !(switchNode.id !== node.id);
|
418
|
+
setElementSwitchTabState(tagNode);
|
456
419
|
}
|
457
420
|
}
|
458
421
|
}
|
459
|
-
|
460
|
-
|
461
|
-
|
462
|
-
const findCurentEchart = statisticTypeData[node.bindStaticId]; // 获取当前点中的节点绑定的统计图表数据
|
422
|
+
// 对绑定的图表进行数据处理
|
423
|
+
if (node.bindStaticId && ['DAY', 'WEEK', 'MONTH', 'YEAR'].includes(staticType)) {
|
424
|
+
const findCurentEchart = tabAreaData[node.bindStaticId]; // 获取当前点中的节点绑定的统计图表数据
|
463
425
|
if (findCurentEchart && findCurentEchart.data.params) {
|
464
|
-
|
465
|
-
|
466
|
-
|
426
|
+
const cn = this.store.data.pens[findCurentEchart.order];
|
427
|
+
cn.data.params['staticForType'] = staticType; // 统计类型赋值
|
428
|
+
cn.elementRendered = false;
|
467
429
|
}
|
468
430
|
}
|
431
|
+
this.store.data.dataResize = 1;
|
469
432
|
this.render();
|
470
433
|
};
|
471
434
|
Common.prototype.s8 = function () {
|
472
435
|
return s8()
|
473
436
|
};
|
474
|
-
// Common.prototype.openSocket = function (url) {
|
475
|
-
// this.closeSocket();
|
476
|
-
// if (url || this.store.data.websocket) {
|
477
|
-
// this.socket = new Socket(url || this.store.data.websocket, this.store.data);
|
478
|
-
// }
|
479
|
-
// };
|
480
|
-
// Common.prototype.closeSocket = function () {
|
481
|
-
// if (this.socket) {
|
482
|
-
// this.socket.close();
|
483
|
-
// }
|
484
|
-
// };
|
485
|
-
Common.prototype.openMqtt = function (url, options) {
|
486
|
-
this.closeMqtt();
|
487
|
-
if (url || this.store.data.mqttUrl) {
|
488
|
-
url = url || this.store.data.mqttUrl;
|
489
|
-
const mqttTopics = this.initData && this.initData.mqttTopics ? this.initData.mqttTopics : this.store.data.mqttTopics;
|
490
|
-
options = options || this.store.data.mqttOptions
|
491
|
-
let topics = mqttTopics
|
492
|
-
this.isEnd = false;
|
493
|
-
// let num = 0; // 记录推送的次数,用于判单丢失情况
|
494
|
-
//console.log('mqtt.connect======', url)
|
495
|
-
this.mqttClient = mqtt.connect(url, options);
|
496
|
-
var _this = this;
|
497
|
-
this.mqttClient.on('message', function (topic, message) {
|
498
|
-
//console.log('openMqtt11===================', topic, message)
|
499
|
-
if (!_this.store.data.pens.length || !topic || topic != _this.store.data.mqttTopics) {
|
500
|
-
return;
|
501
|
-
}
|
502
|
-
if (!this.isEnd) {
|
503
|
-
_this.doMqttDrow(message.toString())
|
504
|
-
}
|
505
|
-
});
|
506
|
-
if (topics) {
|
507
|
-
this.mqttClient.subscribe(topics.split(','));
|
508
|
-
}
|
509
|
-
}
|
510
|
-
};
|
511
|
-
Common.prototype.openPoll = function (message, val) {
|
512
|
-
if (message) {
|
513
|
-
this.poll = new POLL(this.store.data, message, val);
|
514
|
-
}
|
515
|
-
};
|
516
|
-
Common.prototype.clearInterValAll = function () {
|
517
|
-
clearTimeout(this.timmerByTopology);
|
518
|
-
this.timmerByTopology = null;
|
519
|
-
};
|
520
|
-
Common.prototype.closeMqtt = function () {
|
521
|
-
if (this.mqttClient) {
|
522
|
-
this.isEnd = true
|
523
|
-
this.mqttClient.end();
|
524
|
-
}
|
525
|
-
};
|
526
|
-
Common.prototype.closePoll = function () {
|
527
|
-
for (let key in this.pollTime) {
|
528
|
-
clearInterval(this.pollTime[key])
|
529
|
-
}
|
530
|
-
};
|
531
437
|
Common.prototype.setNodeText = function () {
|
532
438
|
this.inputObj.text = this.input.value;
|
533
439
|
this.input.style.zIndex = '-1';
|
@@ -719,254 +625,72 @@ var Common = /** @class */ (function () {
|
|
719
625
|
if (this.store.options.on) {
|
720
626
|
this.store.options.on(event, data);
|
721
627
|
}
|
722
|
-
|
723
|
-
|
724
|
-
|
725
|
-
|
726
|
-
|
727
|
-
|
728
|
-
|
729
|
-
|
730
|
-
|
731
|
-
|
732
|
-
|
733
|
-
};
|
734
|
-
Common.prototype.onContent = async function (resetDCIM, data, type) {
|
735
|
-
//this.shareComponentData = data.shareComponent // 共享组件数据
|
736
|
-
if (resetDCIM) {
|
737
|
-
if (resetDCIM.pathRewrite != '') {
|
738
|
-
this.pathRewrite = resetDCIM.pathRewrite // 路径重写
|
739
|
-
}
|
740
|
-
if (resetDCIM.mqttUrl) {
|
741
|
-
data.mqttUrl = resetDCIM.mqttUrl
|
742
|
-
data.mqttOptions.username = resetDCIM.mqttUsername
|
743
|
-
data.mqttOptions.password = resetDCIM.mqttPassword
|
744
|
-
}
|
745
|
-
}
|
746
|
-
this.initType = type
|
747
|
-
this.initData = data
|
748
|
-
const canvasData = data ? data : this.store.data
|
749
|
-
//this.topologyDetailData = initData
|
750
|
-
const url = canvasData.mqttUrl
|
751
|
-
// if(url && url.indexOf('://') > -1){
|
752
|
-
this.onContentForEventType('Mqtt')
|
628
|
+
// 先注释掉
|
629
|
+
// if (event === 'node' && data.name == 'tablePagination' && this.store.options.type !== 'topology') {
|
630
|
+
// const tableNodes = Store.get('FORM:tableData').data.tableNodes[data.paginationData.bindFromTableId];
|
631
|
+
// const pageSize = data.paginationData.pageSize;
|
632
|
+
// const offset = (parseInt(data.paginationData.pageNumber) - 1) * pageSize;
|
633
|
+
// const params = {
|
634
|
+
// id: tableNodes.id, // 表格ID
|
635
|
+
// limit: data.paginationData.pageSize,
|
636
|
+
// offset: offset
|
637
|
+
// };
|
638
|
+
// this.getSyncTableDataFromServer(params, tableNodes);
|
753
639
|
// }
|
754
|
-
if (canvasData.pollUrl) {
|
755
|
-
this.onContentForEventType('Poll')
|
756
|
-
}
|
757
|
-
if (canvasData.pollUrl1) {
|
758
|
-
this.onContentForEventType('Poll1')
|
759
|
-
}
|
760
|
-
if (canvasData.pollUrl2) {
|
761
|
-
this.onContentForEventType('Poll2')
|
762
|
-
}
|
763
|
-
};
|
764
|
-
Common.prototype.onContentForEventType = async function (eventType) {
|
765
|
-
// 获取属性中数据的集合
|
766
|
-
if (!this.initType) await this.initTagParams(eventType);
|
767
|
-
let tagParams = this.tagParams[eventType]
|
768
|
-
if (eventType === 'Mqtt') {
|
769
|
-
// 连接测试,MQTT
|
770
|
-
this.onMqttContent(tagParams)
|
771
|
-
} else if (eventType.indexOf('Poll') > -1) {
|
772
|
-
// 连接测试,轮询地址
|
773
|
-
this.onPollContent(tagParams, eventType)
|
774
|
-
}
|
775
|
-
};
|
776
|
-
Common.prototype.clearTagParams = function (eventType) {
|
777
|
-
this.tagParams[eventType] = {};
|
778
|
-
this.tagParams[eventType].tagIds = [];
|
779
|
-
this.tagParams[eventType].kpiAddrs = [];
|
780
|
-
this.tagParams[eventType].tagEcharts = [];
|
781
|
-
this.tagParams[eventType].assetIds = [];
|
782
|
-
this.tagParams[eventType].areaIds = [];
|
783
|
-
// this.tagParams[eventType].cockpitLayoutData = [];//统计图表组件类型ID
|
784
|
-
this.tagParams[eventType].echartData = [];//统计图表组件类型ID
|
785
640
|
};
|
786
|
-
Common.prototype.
|
787
|
-
this.
|
788
|
-
|
789
|
-
|
790
|
-
|
791
|
-
|
792
|
-
|
793
|
-
|
794
|
-
|
795
|
-
|
796
|
-
|
797
|
-
|
798
|
-
|
799
|
-
if (this.assetPoperties) {
|
800
|
-
// 更新画布上固定的资产详情对应的值
|
801
|
-
//const canvasPens = this.pathRewrite ? canvasData.pens : this.canvas.data.pens
|
802
|
-
this.renderForAssetPoperties(pensData);
|
803
|
-
}
|
641
|
+
Common.prototype.onContent = function (resetDCIM, data) {
|
642
|
+
if(!data) data = this.store.data;
|
643
|
+
let connectParams = {
|
644
|
+
mqttUrl: data.mqttUrl,
|
645
|
+
username: data.mqttOptions.username,
|
646
|
+
password: data.mqttOptions.password,
|
647
|
+
mqttTopics: data.mqttTopics,
|
648
|
+
clientId: s8()
|
649
|
+
};
|
650
|
+
if (resetDCIM && resetDCIM.mqttUrl) {
|
651
|
+
connectParams.mqttUrl = resetDCIM.mqttUrl;
|
652
|
+
connectParams.username = resetDCIM.mqttUsername;
|
653
|
+
connectParams.password = resetDCIM.mqttPassword;
|
804
654
|
}
|
655
|
+
// 连接测试,MQTT
|
656
|
+
this.openMqtt(connectParams);
|
805
657
|
};
|
806
|
-
Common.prototype.
|
658
|
+
Common.prototype.openMqtt = function (connectParams) {
|
807
659
|
const _this = this;
|
808
|
-
|
809
|
-
|
810
|
-
|
811
|
-
|
812
|
-
|
813
|
-
|
814
|
-
|
815
|
-
|
816
|
-
|
817
|
-
|
818
|
-
|
819
|
-
|
820
|
-
|
821
|
-
let areaIds = []
|
822
|
-
let tagEcharts = []
|
823
|
-
// let cockpitLayoutData = []
|
824
|
-
let echartData = []
|
825
|
-
let isEventType = false;
|
826
|
-
for (var _b = 0, _c = pen.events; _b < _c.length; _b++) {
|
827
|
-
var event_1 = _c[_b];
|
828
|
-
if ((event_1.type === 3 && eventType === 'Mqtt') || (event_1.type === 4 && eventType === 'Poll')
|
829
|
-
|| (event_1.type === 5 && eventType === 'Poll1') || (event_1.type === 6 && eventType === 'Poll2')) {
|
830
|
-
isEventType = true;
|
831
|
-
}
|
660
|
+
_this.closeMqtt();
|
661
|
+
if(!connectParams.mqttUrl) return;
|
662
|
+
_this.isEnd = false;
|
663
|
+
const url = connectParams.mqttUrl.replace('ip', location.hostname);
|
664
|
+
_this.mqttClient = mqtt.connect(url, connectParams);
|
665
|
+
_this.mqttClient.on('message', function (topic, message) {
|
666
|
+
//console.log('openMqtt11===================', topic, message)
|
667
|
+
if (!topic || topic != connectParams.mqttTopics) return;
|
668
|
+
if (!this.isEnd) _this.doMqttDrow(message.toString());
|
669
|
+
});
|
670
|
+
const topics = connectParams.mqttTopics;
|
671
|
+
if (topics) {
|
672
|
+
this.mqttClient.subscribe(topics.split(','));
|
832
673
|
}
|
833
|
-
|
834
|
-
|
835
|
-
|
836
|
-
|
837
|
-
|
838
|
-
}
|
839
|
-
if (item.key === 'kpiAddr') {
|
840
|
-
kpiAddrs.push(item.value)
|
841
|
-
}
|
842
|
-
if (item.key === 'assetKey') {
|
843
|
-
this.isExistAssetKey = true
|
844
|
-
}
|
845
|
-
if (item.key === 'assetId') {
|
846
|
-
assetIds.push(item.value)
|
847
|
-
}
|
848
|
-
if (item.key === 'areaId') {
|
849
|
-
areaIds.push(item.value)
|
850
|
-
}
|
851
|
-
})
|
852
|
-
}
|
853
|
-
// else if(pen.data != undefined && this.checkType(pen.data) === 'Object' && pen.tags != undefined && this.checkType(pen.tags) === 'Array' && pen.tags.length>0){
|
854
|
-
// pen.tags.forEach((item)=>{
|
855
|
-
// if( item.indexOf('echart') > -1){
|
856
|
-
// tagEcharts.push(item)
|
857
|
-
// }
|
858
|
-
// })
|
859
|
-
// }
|
860
|
-
else if (pen.data != undefined && this.checkType(pen.data) === 'Object' && this.checkType(pen.data.params) === 'Object') {
|
861
|
-
|
862
|
-
// pen.data.echarts && pen.data.echarts.option.series.length > 1 ? echartData.push(pen.data.params.id) : cockpitLayoutData.push(pen.data.params.id)
|
863
|
-
echartData.push(pen.data.params.id)
|
864
|
-
|
865
|
-
}
|
866
|
-
this.tagParams[eventType].tagIds = [...new Set(this.tagParams[eventType].tagIds.concat(tagIds))]
|
867
|
-
this.tagParams[eventType].kpiAddrs = [...new Set(this.tagParams[eventType].kpiAddrs.concat(kpiAddrs))]
|
868
|
-
this.tagParams[eventType].assetIds = [...new Set(this.tagParams[eventType].assetIds.concat(assetIds))]
|
869
|
-
this.tagParams[eventType].areaIds = [...new Set(this.tagParams[eventType].areaIds.concat(areaIds))]
|
870
|
-
this.tagParams[eventType].tagEcharts = [...new Set(this.tagParams[eventType].tagEcharts.concat(tagEcharts))]
|
871
|
-
// this.tagParams[eventType].cockpitLayoutData = [...new Set(this.tagParams[eventType].cockpitLayoutData.concat(cockpitLayoutData))]
|
872
|
-
this.tagParams[eventType].echartData = [...new Set(this.tagParams[eventType].echartData.concat(echartData))]
|
674
|
+
};
|
675
|
+
Common.prototype.closeMqtt = function () {
|
676
|
+
if (this.mqttClient) {
|
677
|
+
this.isEnd = true
|
678
|
+
this.mqttClient.end();
|
873
679
|
}
|
874
680
|
};
|
875
|
-
Common.prototype.
|
876
|
-
let ret = null;
|
877
|
-
let data = {};
|
878
|
-
let path = '';
|
879
|
-
let assetData = null;
|
880
|
-
let pathRewrite = this.pathRewrite;
|
681
|
+
Common.prototype.doMqttDrow = function (ret) {
|
881
682
|
let canvasData = this.store.data;
|
882
|
-
|
883
|
-
|
884
|
-
|
885
|
-
Store.set('TIMEOUT:currentPage', `locationPath${this.s8()}`);
|
886
|
-
if (panelData) {
|
887
|
-
this.store.data.mqttTopics = mqttTopics
|
888
|
-
pathRewrite = panelData.pathRewrite;
|
889
|
-
canvasData = JSON.parse(JSON.stringify(panelData.data));
|
890
|
-
mqttTopics = panelData.mqttTopics;
|
891
|
-
if (panelData.assetId) {
|
892
|
-
const detailData = await this.getTagParamsForKpiAddrs(panelData.assetId, tagParams, pathRewrite);
|
893
|
-
if (detailData.data) {
|
894
|
-
tagParamsData.tagIds = detailData.tagIds;
|
895
|
-
assetData = detailData.data.asset;
|
896
|
-
detailJson = detailData.data;
|
897
|
-
tagParamsData.echartAssemblyData = detailJson.echartAssemblyData;
|
898
|
-
}
|
899
|
-
}
|
900
|
-
}
|
901
|
-
tagParamsData.locationPath = Store.get('TIMEOUT:currentPage');
|
902
|
-
if (!tagParams) {
|
903
|
-
data = this.theData
|
904
|
-
path = this.thePath
|
905
|
-
} else {
|
906
|
-
data = {
|
907
|
-
tagIds: tagParamsData.tagIds.join(","),
|
908
|
-
assetIds: tagParamsData.assetIds.join(","),
|
909
|
-
areaIds: tagParamsData.areaIds.join(","),
|
910
|
-
routingkey: mqttTopics,
|
911
|
-
echart: tagParamsData.tagEcharts.join(","),
|
912
|
-
echartData: tagParamsData.echartData
|
913
|
-
}
|
914
|
-
if (tagParamsData.echartAssemblyData) {
|
915
|
-
data.echartAssemblyData = tagParamsData.echartAssemblyData;
|
916
|
-
}
|
917
|
-
//const pathRewrite = panelData ? panelData.pathRewrite : this.pathRewrite
|
918
|
-
path = pathRewrite ? pathRewrite + '/user/cockpit/mqtt-data' : '/user/cockpit/mqtt-data'
|
919
|
-
this.thePath = path
|
920
|
-
this.theData = data
|
921
|
-
}
|
922
|
-
let drawedData = null
|
923
|
-
data.cancelToken = this.mqttDataSouse.token;
|
924
|
-
ret = await axios.post(path, data).catch(function(th) {
|
925
|
-
if(axios.isCancel(th)) {
|
926
|
-
console.log('请求取消了----', th.message);
|
927
|
-
} else {
|
928
|
-
console.log('请求失败----')
|
929
|
-
}
|
930
|
-
});
|
931
|
-
if (ret.data && ret.data.data) {
|
932
|
-
if (assetData) ret.data.data.asset = assetData;
|
933
|
-
drawedData = ret.data.data;
|
934
|
-
if(panelData) {
|
935
|
-
syncMqttData.data = drawedData; // 初始化调用
|
936
|
-
Store.set('mqtt:responseData', drawedData);
|
937
|
-
}else {
|
938
|
-
syncMqttData.data = null;
|
939
|
-
this.mqttDataDrawing(canvasData, drawedData);
|
940
|
-
}
|
941
|
-
}
|
942
|
-
this.clearInterValAll();
|
943
|
-
this.timmerByTopology = setTimeout(() => {
|
944
|
-
const locationPath = Store.get('TIMEOUT:currentPage');
|
945
|
-
if (locationPath === tagParamsData.locationPath) {
|
946
|
-
this.getMqttData(tagParamsData);
|
947
|
-
}
|
948
|
-
}, 180000); // 每3分钟定时请求,超过3分钟未收到MQTT将停止推送数据 180000
|
949
|
-
if (ret.error) {
|
950
|
-
return null;
|
951
|
-
} else {
|
952
|
-
return {
|
953
|
-
mqttData: drawedData,
|
954
|
-
// detailData: detailJson
|
955
|
-
}
|
956
|
-
}
|
683
|
+
ret = JSON.parse(ret);
|
684
|
+
//console.log('处理消息', ret)
|
685
|
+
this.mqttDataDrawing(canvasData.pens, ret)
|
957
686
|
};
|
958
|
-
Common.prototype.mqttDataDrawing = function (data, retData
|
959
|
-
const syncData = retData
|
960
|
-
//const detailData = detailJson ? detailJson.data : [];
|
687
|
+
Common.prototype.mqttDataDrawing = function (data, retData) {
|
961
688
|
// console.log('收到消息', syncData)
|
962
|
-
|
963
|
-
|
689
|
+
data.map((item) => {
|
690
|
+
if(this.store.options.type === 'topology') setInitConfData(item);
|
691
|
+
setDefaultNodeValidat(item, retData);
|
964
692
|
if (item.children && item.children.length) {
|
965
|
-
item.children
|
966
|
-
setDefaultNodeValidat(_item, syncData);
|
967
|
-
})
|
968
|
-
} else {
|
969
|
-
setDefaultNodeValidat(item, syncData);
|
693
|
+
this.mqttDataDrawing(item.children, retData);
|
970
694
|
}
|
971
695
|
})
|
972
696
|
//console.log('执行完毕-----', this.store.data.pens)
|
@@ -974,141 +698,6 @@ var Common = /** @class */ (function () {
|
|
974
698
|
this.animate(true);
|
975
699
|
return data
|
976
700
|
};
|
977
|
-
Common.prototype.getTagParamsForKpiAddrs = async function (assetId, tagParams, apiStr) {
|
978
|
-
let params = {
|
979
|
-
assetId: assetId,
|
980
|
-
tagIds: tagParams.tagIds.join(","),
|
981
|
-
kpiAddrs: tagParams.kpiAddrs.join(","),
|
982
|
-
echartAssemblyIds: tagParams.echartData,
|
983
|
-
}
|
984
|
-
let pathRewrite = apiStr ? apiStr : this.pathRewrite
|
985
|
-
const path = pathRewrite ? pathRewrite + '/place/place_monitor/getPlaceAssetDetail' : '/place/place_monitor/getPlaceAssetDetail'
|
986
|
-
let ret = await axios.post(path, params);
|
987
|
-
// 遍历得到属性中绑定指标数据的集合
|
988
|
-
const tagIds = this.getTagIdsForKpiAddrs(ret.data);
|
989
|
-
// 详情页面,固定的资产详情的数据集合
|
990
|
-
this.assetPoperties = ret.asset
|
991
|
-
|
992
|
-
return {
|
993
|
-
data: ret.data,
|
994
|
-
echartAssemblyData: ret.echartAssemblyData,
|
995
|
-
tagIds: tagIds
|
996
|
-
}
|
997
|
-
};
|
998
|
-
Common.prototype.getTagIdsForKpiAddrs = function (data) {
|
999
|
-
let tagIds = [];
|
1000
|
-
const delData = this.pathRewrite ? data : data.data;
|
1001
|
-
if (delData && delData.length > 0) {
|
1002
|
-
delData.forEach((item) => {
|
1003
|
-
tagIds.push(item.tagId);
|
1004
|
-
})
|
1005
|
-
this.tagParams.detailAssetData = data;
|
1006
|
-
this.tagParams.Mqtt.tagIds = tagIds;
|
1007
|
-
}
|
1008
|
-
return tagIds
|
1009
|
-
};
|
1010
|
-
Common.prototype.renderForAssetPoperties = function (pens) {
|
1011
|
-
const _this = this;
|
1012
|
-
pens.forEach((pen) => {
|
1013
|
-
if (pen.children != undefined) {
|
1014
|
-
_this.renderForAssetPoperties(pen.children)
|
1015
|
-
} else {
|
1016
|
-
_this.renderForAssetPopertiesChildren(pen)
|
1017
|
-
}
|
1018
|
-
})
|
1019
|
-
};
|
1020
|
-
Common.prototype.renderForAssetPopertiesChildren = function (pen) {
|
1021
|
-
if (pen.data != undefined && pen.data != '' && typeof pen.data === 'object' && Array.isArray(pen.data) && pen.data.length > 0) {
|
1022
|
-
pen.data.forEach((item) => {
|
1023
|
-
Object.keys(this.assetPoperties).forEach(key => {
|
1024
|
-
if (item.key === 'assetKey') {
|
1025
|
-
if (item.value === key) {
|
1026
|
-
if (key === 'imgUrl' || key === 'principleImg') {
|
1027
|
-
pen.text = ''
|
1028
|
-
pen.image = this.pathRewrite ? this.pathRewrite + this.assetPoperties[key] : this.assetPoperties[key]
|
1029
|
-
} else {
|
1030
|
-
pen.text = this.assetPoperties[key]
|
1031
|
-
}
|
1032
|
-
}
|
1033
|
-
}
|
1034
|
-
})
|
1035
|
-
})
|
1036
|
-
}
|
1037
|
-
};
|
1038
|
-
Common.prototype.onMqttContent = async function (tagParams) {
|
1039
|
-
if (!this.initType) this.store.data.mqttTopics = 'mqtt-' + s8();
|
1040
|
-
// 告知MQTT属性中数据的集合
|
1041
|
-
const ret = !this.initType ? await this.getMqttData(tagParams) : this.initType;
|
1042
|
-
if (ret) {
|
1043
|
-
let mqttUrlStr = this.store.data.mqttUrl, mqttOption = this.store.data.mqttOptions
|
1044
|
-
if (this.initData) {
|
1045
|
-
const {mqttUrl, mqttOptions} = this.initData
|
1046
|
-
mqttUrlStr = mqttUrl
|
1047
|
-
mqttOption = mqttOptions
|
1048
|
-
}
|
1049
|
-
mqttOption.clientId = s8()
|
1050
|
-
this.openMqtt(mqttUrlStr, mqttOption);
|
1051
|
-
} else {
|
1052
|
-
console.log('请求出错')
|
1053
|
-
}
|
1054
|
-
};
|
1055
|
-
Common.prototype.onPollContent = function (tagParams, eventType) {
|
1056
|
-
const index = eventType[4] ? eventType[4] : ''
|
1057
|
-
// const url = 'pollUrl'+index;
|
1058
|
-
// const second = 'pollSecond'+index;
|
1059
|
-
const pollUrl = this.store.data['pollUrl' + index]
|
1060
|
-
const pollSecond = this.store.data['pollSecond' + index]
|
1061
|
-
this.onpollStop(eventType);
|
1062
|
-
if (pollUrl && pollSecond) {
|
1063
|
-
this.renderForPoll(tagParams, pollUrl, eventType);
|
1064
|
-
if (pollSecond != 0) { // 轮询
|
1065
|
-
let millisecond = parseInt(pollSecond * 1000)
|
1066
|
-
this.pollTime[eventType] = setInterval(() => {
|
1067
|
-
this.renderForPoll(tagParams, pollUrl, eventType);
|
1068
|
-
}, millisecond);
|
1069
|
-
}
|
1070
|
-
}
|
1071
|
-
};
|
1072
|
-
Common.prototype.onpollStop = function (eventType) {
|
1073
|
-
if (this.pollTime[eventType]) {
|
1074
|
-
clearInterval(this.pollTime[eventType])
|
1075
|
-
}
|
1076
|
-
};
|
1077
|
-
Common.prototype.renderForPoll = async function (tagParams, pollUrl, eventType) {
|
1078
|
-
let data = {
|
1079
|
-
tagIds: tagParams.tagIds.join(","),
|
1080
|
-
// assetIds: tagParams.assetIds.join(","),
|
1081
|
-
// echart: tagParams.tagEcharts.join(",")
|
1082
|
-
}
|
1083
|
-
const _this = this
|
1084
|
-
axios.post(pollUrl, data)
|
1085
|
-
.then((res) => {
|
1086
|
-
_this.openPoll(res, eventType);
|
1087
|
-
})
|
1088
|
-
.catch((error) => {
|
1089
|
-
console.log('轮询地址,连接失败', error)
|
1090
|
-
_this.onpollStop(eventType);
|
1091
|
-
});
|
1092
|
-
};
|
1093
|
-
Common.prototype.getUrlParams = function (name) {
|
1094
|
-
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
|
1095
|
-
var r = window.location.search.substr(1).match(reg)
|
1096
|
-
if (r != null) return unescape(r[2])
|
1097
|
-
return null
|
1098
|
-
};
|
1099
|
-
Common.prototype.checkType = function (data) {
|
1100
|
-
return Object.prototype.toString.call(data).slice(8, -1)
|
1101
|
-
};
|
1102
|
-
Common.prototype.mqttLostMessage = function () {
|
1103
|
-
// console.log('发送请求mqtt-data')
|
1104
|
-
this.getMqttData(this.tagParams.Mqtt);
|
1105
|
-
};
|
1106
|
-
Common.prototype.doMqttDrow = function (ret) {
|
1107
|
-
let canvasData = this.store.data;
|
1108
|
-
ret = JSON.parse(ret);
|
1109
|
-
//console.log('处理消息', ret)
|
1110
|
-
this.mqttDataDrawing(canvasData, ret)
|
1111
|
-
};
|
1112
701
|
Common.prototype.hidePenByTag = function (pens, val) {
|
1113
702
|
const _this = this;
|
1114
703
|
pens.forEach((pen) => {
|
@@ -1163,15 +752,11 @@ var Common = /** @class */ (function () {
|
|
1163
752
|
}
|
1164
753
|
}
|
1165
754
|
}
|
1166
|
-
this.render();
|
1167
755
|
};
|
1168
756
|
Common.prototype.destroyStatic = function () {
|
1169
|
-
this.mqttDataSouse.cancel();
|
1170
757
|
this.clear('destroy');
|
1171
|
-
this.clearInterValAll();
|
1172
758
|
//this.closeSocket();
|
1173
759
|
this.closeMqtt();
|
1174
|
-
this.closePoll();
|
1175
760
|
cancelAnimationFrame(this.renderTimer);
|
1176
761
|
this.subcribe.unsubscribe();
|
1177
762
|
this.subcribeRender.unsubscribe();
|
@@ -1187,9 +772,7 @@ var Common = /** @class */ (function () {
|
|
1187
772
|
this.offscreen.destroy();
|
1188
773
|
this.offscreen = null;
|
1189
774
|
this.store.parentElem = null;
|
1190
|
-
destroyEcharts();
|
1191
775
|
Store.set('form:tableData', null);
|
1192
|
-
Store.set('TIMEOUT:currentPage', `empty${this.s8()}`);
|
1193
776
|
Store.set('FORM:tableData', {
|
1194
777
|
data: {
|
1195
778
|
tableNodes: {},
|