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.
Files changed (76) hide show
  1. package/chart-diagram/src/echarts/index.js +88 -96
  2. package/chart-diagram/src/register.js +3 -3
  3. package/chart-diagram/src/utils/changeOptions.d.ts +4 -4
  4. package/chart-diagram/src/utils/changeOptions.js +172 -144
  5. package/chart-diagram/src/utils/conversion.d.ts +12 -12
  6. package/chart-diagram/src/utils/conversion.js +278 -137
  7. package/chart-diagram/src/utils/render.d.ts +5 -0
  8. package/chart-diagram/src/utils/render.js +107 -0
  9. package/core/index.d.ts +1 -0
  10. package/core/index.js +1 -0
  11. package/core/src/activeLayer.js +0 -6
  12. package/core/src/canvas.js +1 -0
  13. package/core/src/common.d.ts +1 -2
  14. package/core/src/common.js +123 -540
  15. package/core/src/core.js +61 -46
  16. package/core/src/divLayer.d.ts +0 -3
  17. package/core/src/divLayer.js +13 -34
  18. package/core/src/element/common.d.ts +5 -0
  19. package/core/src/element/common.js +52 -0
  20. package/core/src/element/iframe.d.ts +3 -0
  21. package/core/src/element/iframe.js +12 -0
  22. package/core/src/element/index.d.ts +4 -0
  23. package/core/src/element/index.js +4 -0
  24. package/core/src/element/select.d.ts +11 -0
  25. package/core/src/element/select.js +199 -0
  26. package/core/src/element/tab.d.ts +1 -0
  27. package/core/src/element/tab.js +22 -0
  28. package/core/src/healps/changeData.d.ts +1 -2
  29. package/core/src/healps/changeData.js +16 -122
  30. package/core/src/middles/default.js +3 -1
  31. package/core/src/middles/nodes/arbitrarygraph.js +11 -9
  32. package/core/src/middles/nodes/formselect.d.ts +2 -0
  33. package/core/src/middles/nodes/formselect.js +73 -0
  34. package/core/src/middles/nodes/iframe.js +21 -4
  35. package/core/src/middles/nodes/index.d.ts +1 -0
  36. package/core/src/middles/nodes/index.js +1 -0
  37. package/core/src/models/node.d.ts +4 -0
  38. package/core/src/models/node.js +24 -22
  39. package/core/src/models/pen.js +1 -2
  40. package/core/src/models/rect.js +2 -2
  41. package/core/src/options.d.ts +1 -0
  42. package/core/src/preview.js +45 -31
  43. package/core/src/renderLayer.d.ts +10 -6
  44. package/core/src/renderLayer.js +36 -43
  45. package/core/src/store/data.d.ts +16 -17
  46. package/core/src/store/data.js +36 -14
  47. package/core/src/utils/assignment.d.ts +6 -3
  48. package/core/src/utils/assignment.js +84 -15
  49. package/core/src/utils/construction.d.ts +9 -3
  50. package/core/src/utils/construction.js +6 -1
  51. package/core/src/utils/conversion.d.ts +3 -0
  52. package/core/src/utils/conversion.js +67 -0
  53. package/core/src/utils/index.d.ts +1 -1
  54. package/core/src/utils/index.js +1 -1
  55. package/core/src/utils/math.d.ts +1 -0
  56. package/core/src/utils/math.js +3 -0
  57. package/core/src/utils/onmousevent.d.ts +3 -0
  58. package/core/src/utils/onmousevent.js +28 -7
  59. package/core/src/utils/params.d.ts +7 -0
  60. package/core/src/utils/params.js +125 -0
  61. package/package.json +1 -1
  62. package/static/echartsDefaultData.js +27 -107
  63. package/static/element.js +14 -0
  64. package/static/form.js +11 -0
  65. package/static/index.js +2 -1
  66. package/store/actions.js +17 -0
  67. package/store/clear.js +72 -0
  68. package/store/index.js +2 -0
  69. package/style/common.css +18 -0
  70. package/style/editor.css +13 -0
  71. package/style/index.css +3 -12
  72. package/style/select.css +143 -0
  73. package/core/src/utils/dom.d.ts +0 -9
  74. package/core/src/utils/dom.js +0 -103
  75. package/core/src/utils/dom.js.map +0 -1
  76. package/static/echartsStore.js +0 -14
@@ -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 {setConfItemNode, setStatisticalData} from './healps';
8
- import {s8, formatPadding, getRect, setInitNodeDataValidat, setDefaultNodeValidat} from './utils';
9
- import { useStore, clearStore, syncMqttData } from './store'
10
- import {POLL} from './poll';
11
- import axios from 'axios';
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 { destroyEcharts } from "../../static";
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, type) {
171
+ Common.prototype.conversionData = function (obj) {
181
172
  this.clear();
182
- let data = JSON.parse(JSON.stringify(obj));
183
- if (!data) {
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
- this.setSwitchTabData(item, _i);
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
- this.setSwitchTabData(node, _d);
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 ? this.pathRewrite + '/user/cockpit/mqtt-echart' : '/user/cockpit/mqtt-echart';
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
- console.log(ret.data.data)
428
- tableData[node.id] = {
429
- loading: false,
430
- tableBody: ret.data.data.rows,
431
- total: ret.data.data.total
432
- }
433
- Store.set('SYNC:tableData', tableData);
434
- this.render();
435
- }
436
- if (ret.error) {
437
- console.log('获取数据失败==================')
438
- } else {
439
- console.log('获取数据成功==================')
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 = Store.get('TCD:topologyChangeData'); // 获取所有按钮组和按类型统计图组数据
403
+ const topologyChangeData = switchTabDataPool; // 获取所有按钮组和按类型统计图组数据
450
404
  const changeNode = topologyChangeData[`${switchTabData}Data`]; // 分别获取按钮组数据
405
+ if(!changeNode[node.id]) return;
451
406
  // 如果存在按钮组节点数据
452
- if (changeNode[node.id]) {
453
- for (let switchNode of Object.values(changeNode)) {
454
- if (this.store.data.pens[switchNode.tagOrder]) {
455
- this.store.data.pens[switchNode.tagOrder].activeImgeIndex = switchNode.id !== node.id;
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
- if (node.bindStaticId) {
460
- const statisticTypeData = topologyChangeData.statisticTypeData;
461
- if(!statisticTypeData) return;
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
- findCurentEchart.data.params['staticForType'] = staticTypeNode.dcimStaticForType; // 统计类型赋值
465
- const mqttSyncData = Store.get('mqtt:responseData');
466
- if (mqttSyncData) setConfItemNode(findCurentEchart, mqttSyncData);
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
- if (event === 'node' && data.name == 'tablePagination' && this.store.options.type !== 'topology') {
723
- const tableNodes = Store.get('FORM:tableData').data.tableNodes[data.paginationData.bindFromTableId];
724
- const pageSize = data.paginationData.pageSize;
725
- const offset = (parseInt(data.paginationData.pageNumber) - 1) * pageSize;
726
- const params = {
727
- id: tableNodes.id, // 表格ID
728
- limit: data.paginationData.pageSize,
729
- offset: offset
730
- };
731
- this.getSyncTableDataFromServer(params, tableNodes);
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.initTagParams = async function (eventType) {
787
- this.clearTagParams(eventType)
788
- const pensData = this.store.data.pens
789
- let tagParams = this.getTagParams(pensData, eventType);
790
- // 详情页面,即URL配置了资产id的页面
791
- let assetId = this.getUrlParams('assetId')
792
- // console.log('详情页面,即URL配置了资产id的页面',assetId,eventType, tagParams)
793
- if (assetId && eventType === 'Mqtt') {
794
- //if(assetId){
795
- // 获取属性中绑定指标数据的集合
796
- await this.getTagParamsForKpiAddrs(assetId, tagParams)
797
- // 存在固定的资产详情,更新页面数据
798
- // if(this.assetPoperties && this.isExistAssetKey === true){
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.getTagParams = function (pens, eventType) {
658
+ Common.prototype.openMqtt = function (connectParams) {
807
659
  const _this = this;
808
- pens.forEach((pen) => {
809
- if (pen.children != undefined && pen.children.length > 0) {
810
- _this.getTagParams(pen.children, eventType)
811
- } else {
812
- _this.getTagParamsChildren(pen, eventType)
813
- }
814
- })
815
- return this.tagParams[eventType]
816
- };
817
- Common.prototype.getTagParamsChildren = function (pen, eventType) {
818
- let tagIds = []
819
- let kpiAddrs = []
820
- let assetIds = []
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
- if (isEventType === true) {
834
- if (pen.data != undefined && this.checkType(pen.data) === 'Array' && pen.data.length > 0) {
835
- pen.data.forEach((item) => {
836
- if (item.key === 'tagId') {
837
- tagIds.push(item.value)
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.getMqttData = async function (tagParams, panelData) {
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
- let mqttTopics = this.store.data.mqttTopics;
883
- let tagParamsData = tagParams;
884
- let detailJson = null;
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, detailJson) {
959
- const syncData = retData
960
- //const detailData = detailJson ? detailJson.data : [];
687
+ Common.prototype.mqttDataDrawing = function (data, retData) {
961
688
  // console.log('收到消息', syncData)
962
- Store.set('mqtt:responseData', syncData);
963
- data.pens.map((item) => {
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.map((_item) => {
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: {},