dcim-topology2d 2.2.0 → 2.2.3
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/index.d.ts +1 -1
- package/chart-diagram/index.js +1 -1
- package/chart-diagram/src/echarts/index.js +112 -112
- package/chart-diagram/src/utils/changeOptions.d.ts +8 -8
- package/chart-diagram/src/utils/changeOptions.js +8 -2
- package/chart-diagram/src/utils/conversion.d.ts +19 -19
- package/chart-diagram/src/utils/conversion.js +601 -560
- package/chart-diagram/src/utils/drawGraphic.d.ts +3 -3
- package/chart-diagram/src/utils/drawGraphic.js +97 -97
- package/chart-diagram/src/utils/index.d.ts +5 -5
- package/chart-diagram/src/utils/index.js +5 -5
- package/chart-diagram/src/utils/render.js +4 -0
- package/core/index.js +1 -19
- package/core/src/activeLayer.js +23 -23
- package/core/src/calling.js +32 -33
- package/core/src/common.d.ts +1 -0
- package/core/src/common.js +106 -75
- package/core/src/element/common.js +0 -1
- package/core/src/healps/changeData.js +3 -0
- package/core/src/middles/default.js +3 -1
- package/core/src/middles/index.d.ts +1 -2
- package/core/src/middles/index.js +3 -2
- package/core/src/middles/nodes/formDatePicker.js +1 -0
- package/core/src/middles/nodes/formoverflow.js +17 -16
- package/core/src/middles/nodes/formselect.js +1 -1
- package/core/src/middles/nodes/index.d.ts +2 -1
- package/core/src/middles/nodes/index.js +1 -0
- package/core/src/middles/nodes/progress.d.ts +2 -0
- package/core/src/middles/nodes/progress.js +63 -0
- package/core/src/middles/nodes/progress.js.map +1 -0
- package/core/src/middles/nodes/rectangle.js +54 -15
- package/core/src/models/node.js +7 -0
- package/core/src/models/pen.js +10 -1
- package/core/src/preview.js +63 -37
- package/core/src/store/data.d.ts +9 -0
- package/core/src/store/data.js +5 -0
- package/core/src/utils/assignment.d.ts +1 -1
- package/core/src/utils/assignment.js +18 -5
- package/package.json +1 -1
- package/static/echartsDefaultData.js +178 -178
- package/store/actions.js +2 -1
- package/store/clear.js +4 -0
- /package/myShape-diagram/{index.ts → index.d.ts} +0 -0
package/core/src/common.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import {Store} from 'le5le-store';
|
|
2
|
-
import {DivLayer} from './divLayer';
|
|
3
|
-
import {AnimateLayer} from './animateLayer';
|
|
4
|
-
import {RenderLayer} from './renderLayer';
|
|
5
|
-
import {Offscreen} from './offscreen';
|
|
6
|
-
import {Line, Node, Point} from './models';
|
|
1
|
+
import { Store } from 'le5le-store';
|
|
2
|
+
import { DivLayer } from './divLayer';
|
|
3
|
+
import { AnimateLayer } from './animateLayer';
|
|
4
|
+
import { RenderLayer } from './renderLayer';
|
|
5
|
+
import { Offscreen } from './offscreen';
|
|
6
|
+
import { Line, Node, Point } from './models';
|
|
7
7
|
import {
|
|
8
8
|
s8,
|
|
9
9
|
formatPadding,
|
|
@@ -16,8 +16,9 @@ import {
|
|
|
16
16
|
tabHideShowOperation,
|
|
17
17
|
tabStaticOperation, pageZoom
|
|
18
18
|
} from './utils';
|
|
19
|
-
import {useStore, clearStore, commonStore} from './store'
|
|
19
|
+
import { useStore, clearStore, commonStore } from './store'
|
|
20
20
|
import * as mqtt from './mqtt.min';
|
|
21
|
+
import { tabsPageContentData } from "../../store";
|
|
21
22
|
var MoveInType;
|
|
22
23
|
(function (MoveInType) {
|
|
23
24
|
MoveInType[MoveInType["None"] = 0] = "None";
|
|
@@ -35,6 +36,7 @@ var Common = /** @class */ (function () {
|
|
|
35
36
|
function Common(parent, options) {
|
|
36
37
|
var _this = this;
|
|
37
38
|
_this.moveInType = MoveInType;
|
|
39
|
+
this.tabsContentOptions = {};
|
|
38
40
|
this.mouseDown = null;
|
|
39
41
|
this.renderTimer = 0;
|
|
40
42
|
this.lastRender = 0;
|
|
@@ -102,24 +104,24 @@ var Common = /** @class */ (function () {
|
|
|
102
104
|
if (_this.moveIn.hoverNode) {
|
|
103
105
|
_this.dispatch('dblclick', _this.moveIn.hoverNode);
|
|
104
106
|
if (_this.moveIn.hoverNode
|
|
105
|
-
|
|
106
|
-
|
|
107
|
+
.getTextRect()
|
|
108
|
+
.hit(new Point(e.x - canvasPos.x, e.y - canvasPos.y))) {
|
|
107
109
|
_this.showInput(_this.moveIn.hoverNode);
|
|
108
110
|
}
|
|
109
111
|
_this.moveIn.hoverNode.dblclick();
|
|
110
112
|
} else if (_this.moveIn.hoverLine) {
|
|
111
113
|
_this.dispatch('dblclick', _this.moveIn.hoverLine);
|
|
112
114
|
if (!_this.moveIn.hoverLine.text ||
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
115
|
+
_this.moveIn.hoverLine
|
|
116
|
+
.getTextRect()
|
|
117
|
+
.hit(new Point(e.x - canvasPos.x, e.y - canvasPos.y))) {
|
|
116
118
|
_this.showInput(_this.moveIn.hoverLine);
|
|
117
119
|
}
|
|
118
120
|
_this.moveIn.hoverLine.dblclick();
|
|
119
121
|
}
|
|
120
122
|
};
|
|
121
123
|
this.openCount = 0;
|
|
122
|
-
this.lastTranlated = {x: 0, y: 0};
|
|
124
|
+
this.lastTranlated = { x: 0, y: 0 };
|
|
123
125
|
this.moveIn = {
|
|
124
126
|
type: 'None',
|
|
125
127
|
order: 0,
|
|
@@ -170,10 +172,10 @@ var Common = /** @class */ (function () {
|
|
|
170
172
|
this.createMarkdownTip();
|
|
171
173
|
window.topology = this;
|
|
172
174
|
}
|
|
173
|
-
Common.prototype.categoryDataParams = function (data){
|
|
175
|
+
Common.prototype.categoryDataParams = function (data) {
|
|
174
176
|
getParams(this.id, data);
|
|
175
177
|
};
|
|
176
|
-
Common.prototype.getParams = function (assetId){
|
|
178
|
+
Common.prototype.getParams = function (assetId) {
|
|
177
179
|
const params = {
|
|
178
180
|
doorIds: this.store.mqttParams.doorIds,
|
|
179
181
|
tagIds: this.store.mqttParams.tagIds.join(","),
|
|
@@ -185,28 +187,28 @@ var Common = /** @class */ (function () {
|
|
|
185
187
|
dataConfig: this.store.mqttParams.dataConfig.data
|
|
186
188
|
}
|
|
187
189
|
if (this.store.mqttParams.echartAssemblyData.length) params.echartAssemblyData = [...this.store.mqttParams.echartAssemblyData];
|
|
188
|
-
if(assetId) {
|
|
190
|
+
if (assetId) {
|
|
189
191
|
params.varValueIds = this.store.mqttParams.varVaule.join(",");
|
|
190
192
|
params.branchAddrs = this.store.mqttParams.branchValue.join(",");
|
|
191
|
-
}else {
|
|
192
|
-
if(this.store.mqttParams.assetIds.length && this.store.mqttParams.varVaule.length) {
|
|
193
|
-
const assetId = this.store.mqttParams.assetIds[this.store.mqttParams.assetIds.length -1];
|
|
194
|
-
for(let va = 0; va < this.store.mqttParams.varVaule.length; va++) {
|
|
193
|
+
} else {
|
|
194
|
+
if (this.store.mqttParams.assetIds.length && this.store.mqttParams.varVaule.length) {
|
|
195
|
+
const assetId = this.store.mqttParams.assetIds[this.store.mqttParams.assetIds.length - 1];
|
|
196
|
+
for (let va = 0; va < this.store.mqttParams.varVaule.length; va++) {
|
|
195
197
|
this.store.mqttParams.varVaule[va] = `${assetId}_${this.store.mqttParams.varVaule[va]}`;
|
|
196
198
|
}
|
|
197
199
|
params.varValueIds = this.store.mqttParams.varVaule.join(",");
|
|
198
|
-
}else {
|
|
200
|
+
} else {
|
|
199
201
|
params.varVaule = this.store.mqttParams.varVaule.join(",");
|
|
200
202
|
}
|
|
201
203
|
}
|
|
202
204
|
return params;
|
|
203
205
|
};
|
|
204
206
|
// 根据图表id数据获取测点数据
|
|
205
|
-
Common.prototype.getTagIdsForEchartsIds = function (data){
|
|
207
|
+
Common.prototype.getTagIdsForEchartsIds = function (data) {
|
|
206
208
|
this.store.mqttParams.echartAssemblyData = data;
|
|
207
209
|
};
|
|
208
210
|
// 根据指标地址数据获取测点数据
|
|
209
|
-
Common.prototype.getTagIdsForKpiAddrs = function (data){
|
|
211
|
+
Common.prototype.getTagIdsForKpiAddrs = function (data) {
|
|
210
212
|
let tagIds = [];
|
|
211
213
|
data.map((item) => {
|
|
212
214
|
tagIds.push(item.tagId);
|
|
@@ -214,23 +216,23 @@ var Common = /** @class */ (function () {
|
|
|
214
216
|
this.store.mqttParams.tagIds = tagIds;
|
|
215
217
|
};
|
|
216
218
|
// 获取绑定值类型参数
|
|
217
|
-
Common.prototype.getVarValueIdsForVarData = function (data){
|
|
219
|
+
Common.prototype.getVarValueIdsForVarData = function (data) {
|
|
218
220
|
const ids = [];
|
|
219
221
|
data.map((item) => {
|
|
220
|
-
if(item.varVal) ids.push(item.assetVarIds);
|
|
222
|
+
if (item.varVal) ids.push(item.assetVarIds);
|
|
221
223
|
})
|
|
222
224
|
this.store.mqttParams.varVaule = ids;
|
|
223
225
|
};
|
|
224
|
-
Common.prototype.getBranchValueIdsForBranchsData = function (data){
|
|
226
|
+
Common.prototype.getBranchValueIdsForBranchsData = function (data) {
|
|
225
227
|
const ids = [];
|
|
226
228
|
data.map((item) => {
|
|
227
|
-
if(item.branchAddr) ids.push(`${item.assetId}_${item.branchAddr}`);
|
|
229
|
+
if (item.branchAddr) ids.push(`${item.assetId}_${item.branchAddr}`);
|
|
228
230
|
})
|
|
229
231
|
this.store.mqttParams.branchValue = ids;
|
|
230
232
|
};
|
|
231
233
|
// 固定资产详情数据赋值
|
|
232
|
-
Common.prototype.renderForAssetPoperties = function (asset, data){
|
|
233
|
-
if(!Object.keys(asset).length) return;
|
|
234
|
+
Common.prototype.renderForAssetPoperties = function (asset, data) {
|
|
235
|
+
if (!Object.keys(asset).length) return;
|
|
234
236
|
data.map((node) => {
|
|
235
237
|
if (node.data && Array.isArray(node.data) && node.data.length) {
|
|
236
238
|
node.data.map((item) => {
|
|
@@ -253,15 +255,15 @@ var Common = /** @class */ (function () {
|
|
|
253
255
|
Common.prototype.conversionData = function (obj) {
|
|
254
256
|
this.clear();
|
|
255
257
|
if (!obj) {
|
|
256
|
-
obj = {pens: []};
|
|
258
|
+
obj = { pens: [] };
|
|
257
259
|
}
|
|
258
260
|
let data = JSON.parse(JSON.stringify(obj));
|
|
259
261
|
Object.assign(this.store.data, data);
|
|
260
262
|
// topology编辑器下跳出程序
|
|
261
|
-
if(this.store.options.type !== 'topology') {
|
|
263
|
+
if (this.store.options.type !== 'topology') {
|
|
262
264
|
const zoom = pageZoom();
|
|
263
265
|
this.store.data.pageZoom = zoom;
|
|
264
|
-
this.store.parentElem.style.transform = `scale(${1/zoom})`;
|
|
266
|
+
this.store.parentElem.style.transform = `scale(${1 / zoom})`;
|
|
265
267
|
this.store.parentElem.style.transformOrigin = '0 0';
|
|
266
268
|
this.store.parentElem.parentElement.style.overflow = 'hidden';
|
|
267
269
|
Store.set('PAGE:zoom', zoom);
|
|
@@ -270,27 +272,28 @@ var Common = /** @class */ (function () {
|
|
|
270
272
|
this.openCount = 0
|
|
271
273
|
const type = this.store.options.type;
|
|
272
274
|
// for old data.
|
|
273
|
-
if (data.nodes) {
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
}
|
|
275
|
+
// if (data.nodes) {
|
|
276
|
+
// for (var _i = 0, _a = data.nodes; _i < _a.length; _i++) {
|
|
277
|
+
// setInitNodeDataValidat(_a[_i], this.id, type, _i);
|
|
278
|
+
// const item = new Node(_a[_i]);
|
|
279
|
+
// this.store.data.pens.push(item);
|
|
280
|
+
// ///this.store.pens[item.id] = item;
|
|
281
|
+
// setConnectionTagForConf(item);
|
|
282
|
+
// }
|
|
283
|
+
// for (var _b = 0, _c = data.lines; _b < _c.length; _b++) {
|
|
284
|
+
// _c[_b].TID = this.id;
|
|
285
|
+
// const item = new Line(_c[_b]);
|
|
286
|
+
// this.store.data.pens.push(item);
|
|
287
|
+
// //this.store.pens[item.id] = item;
|
|
288
|
+
// }
|
|
289
|
+
// }
|
|
290
|
+
this.conversionTabsPageData();
|
|
288
291
|
// end.
|
|
289
292
|
if (data.pens) {
|
|
290
293
|
for (var _d = 0, _e = data.pens; _d < _e.length; _d++) {
|
|
291
294
|
const item = _e[_d];
|
|
292
295
|
if (!item.from) {
|
|
293
|
-
setInitNodeDataValidat(item, this.id, type, _d);
|
|
296
|
+
setInitNodeDataValidat(item, this.id, type, _d, this.tabsContentOptions);
|
|
294
297
|
const node = new Node(item);
|
|
295
298
|
this.store.data.pens.push(node);
|
|
296
299
|
//this.store.pens[item.id] = node;
|
|
@@ -303,7 +306,28 @@ var Common = /** @class */ (function () {
|
|
|
303
306
|
}
|
|
304
307
|
}
|
|
305
308
|
};
|
|
306
|
-
|
|
309
|
+
//
|
|
310
|
+
Common.prototype.conversionTabsPageData = function () {
|
|
311
|
+
// tabs页面切换,页面数据更新
|
|
312
|
+
const pageId = this.tabsContentOptions.pageId;
|
|
313
|
+
if (!pageId) return;
|
|
314
|
+
const tabsPageMasterData = this.store.tabsPageMasterData.get('main');
|
|
315
|
+
for (let i = 0; i < tabsPageMasterData.length; i++) {
|
|
316
|
+
const node = tabsPageMasterData[i];
|
|
317
|
+
const eventNode = node.events[0];
|
|
318
|
+
if (eventNode && eventNode.dcimDetailPage) node.activeImgeIndex = eventNode.dcimDetailPage !== pageId;
|
|
319
|
+
this.store.data.pens.push(new Node(node));
|
|
320
|
+
}
|
|
321
|
+
};
|
|
322
|
+
Common.prototype.clearTabsPageData = function () {
|
|
323
|
+
if (!this.store.tabsPageMasterData.size) return;
|
|
324
|
+
this.store.tabsPageMasterData.clear();
|
|
325
|
+
this.tabsContentOptions = {};
|
|
326
|
+
for (let key of Object.keys(tabsPageContentData)) {
|
|
327
|
+
delete tabsPageContentData[key];
|
|
328
|
+
}
|
|
329
|
+
};
|
|
330
|
+
Common.prototype.clear = function (del) {
|
|
307
331
|
clearStore(this.store, del);
|
|
308
332
|
this.canvas.clearBkImg();
|
|
309
333
|
this.divLayer.clear();
|
|
@@ -316,7 +340,7 @@ var Common = /** @class */ (function () {
|
|
|
316
340
|
//this.canvas.bkImgRectResize(size);
|
|
317
341
|
this.offscreen.resize(size);
|
|
318
342
|
this.divLayer.resize(size);
|
|
319
|
-
}catch (err) {
|
|
343
|
+
} catch (err) {
|
|
320
344
|
//console.log('resize-----', err)
|
|
321
345
|
}
|
|
322
346
|
};
|
|
@@ -342,7 +366,7 @@ var Common = /** @class */ (function () {
|
|
|
342
366
|
this.offscreen.render();
|
|
343
367
|
this.canvas.render();
|
|
344
368
|
this.rendering = false;
|
|
345
|
-
}catch (e) {
|
|
369
|
+
} catch (e) {
|
|
346
370
|
//console.log(e)
|
|
347
371
|
}
|
|
348
372
|
};
|
|
@@ -370,7 +394,7 @@ var Common = /** @class */ (function () {
|
|
|
370
394
|
};
|
|
371
395
|
// 监听表格数据变化
|
|
372
396
|
Common.prototype.subcribeSyncTableData = function (data) {
|
|
373
|
-
const {tableNodes, paginationNodes} = Store.get('FORM:tableData').data;
|
|
397
|
+
const { tableNodes, paginationNodes } = Store.get('FORM:tableData').data;
|
|
374
398
|
if (data && Object.keys(tableNodes).length > 0) {
|
|
375
399
|
const updateNodes = [];
|
|
376
400
|
for (let key of Object.keys(data)) {
|
|
@@ -485,15 +509,16 @@ var Common = /** @class */ (function () {
|
|
|
485
509
|
};
|
|
486
510
|
Common.prototype.switchStaticsCheckType = function (node, staticTypeNode) {
|
|
487
511
|
const staticType = staticTypeNode.dcimStaticForType;
|
|
488
|
-
if(
|
|
512
|
+
if (staticType === 'PAGE') return this.dispatch('change', node, { id: staticTypeNode.dcimDetailPage, type: 'tabs:page' });
|
|
513
|
+
if (!staticType || staticType === 'NONE') return;
|
|
489
514
|
// 点击切换统计图统计类别
|
|
490
515
|
const switchTabData = node.tags.find((t) => {
|
|
491
516
|
return t.includes('switchTabType');
|
|
492
517
|
}); // 获取按钮组类型
|
|
493
|
-
if(!switchTabData) return;
|
|
518
|
+
if (!switchTabData) return;
|
|
494
519
|
const topologyChangeData = commonStore[node.TID].switchTabDataPool; // 获取所有按钮组和按类型统计图组数据
|
|
495
520
|
const changeNode = topologyChangeData[`${switchTabData}Data`]; // 分别获取按钮组数据
|
|
496
|
-
if(!changeNode || !changeNode[node.id]) return;
|
|
521
|
+
if (!changeNode || !changeNode[node.id]) return;
|
|
497
522
|
// 如果存在按钮组节点数据
|
|
498
523
|
const tabAreaData = topologyChangeData[`${switchTabData}AreaData`];
|
|
499
524
|
let tabIndex = 0;
|
|
@@ -502,15 +527,15 @@ var Common = /** @class */ (function () {
|
|
|
502
527
|
};
|
|
503
528
|
for (let switchNode of Object.values(changeNode)) {
|
|
504
529
|
const penNode = this.store.data.pens[switchNode.order];
|
|
505
|
-
if(!penNode) return;
|
|
530
|
+
if (!penNode) return;
|
|
506
531
|
const isActive = switchNode.id !== node.id;
|
|
507
|
-
if(!isActive) {
|
|
532
|
+
if (!isActive) {
|
|
508
533
|
visitParams.order = tabIndex;
|
|
509
534
|
visitParams.data = switchNode.tabData;
|
|
510
535
|
}
|
|
511
536
|
penNode.activeImgeIndex = isActive;
|
|
512
537
|
tabIndex++;
|
|
513
|
-
if(staticType === 'SH') tabHideShowOperation(switchNode, tabAreaData, isActive); // 对显示隐藏的功能进行交互处理
|
|
538
|
+
if (staticType === 'SH') tabHideShowOperation(switchNode, tabAreaData, isActive); // 对显示隐藏的功能进行交互处理
|
|
514
539
|
}
|
|
515
540
|
// 对绑定的图表进行数据处理
|
|
516
541
|
tabStaticOperation(staticType, node, tabAreaData, visitParams);
|
|
@@ -531,9 +556,9 @@ var Common = /** @class */ (function () {
|
|
|
531
556
|
};
|
|
532
557
|
Common.prototype.showInput = function (item) {
|
|
533
558
|
if (this.store.data.locked ||
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
559
|
+
item.locked ||
|
|
560
|
+
item.hideInput ||
|
|
561
|
+
this.store.options.hideInput) {
|
|
537
562
|
return;
|
|
538
563
|
}
|
|
539
564
|
this.inputObj = item;
|
|
@@ -626,12 +651,13 @@ var Common = /** @class */ (function () {
|
|
|
626
651
|
this.tipMarkdown.style.borderRadius = '6px';
|
|
627
652
|
this.tipMarkdown.style.whiteSpace = 'nowrap';
|
|
628
653
|
this.tipMarkdown.id = 'tipMarkdownBytopo'
|
|
654
|
+
this.tipMarkdown.className = 'tipMarkdownBytopo'
|
|
629
655
|
document.body.appendChild(this.tipMarkdown);
|
|
630
656
|
};
|
|
631
657
|
Common.prototype.showTip = function (data, pos) {
|
|
632
658
|
if (!data ||
|
|
633
|
-
|
|
634
|
-
|
|
659
|
+
(!data.markdown && !data.tipId && !data.title) || !data.title ||
|
|
660
|
+
data.id === this.tip) {
|
|
635
661
|
return;
|
|
636
662
|
}
|
|
637
663
|
data.markdown = data.title
|
|
@@ -707,7 +733,7 @@ var Common = /** @class */ (function () {
|
|
|
707
733
|
this.tip = '';
|
|
708
734
|
};
|
|
709
735
|
Common.prototype.dispatch = function (event, node, data) {
|
|
710
|
-
if(!this.store || !this.store.options) return;
|
|
736
|
+
if (!this.store || !this.store.options) return;
|
|
711
737
|
if (this.store.options.on) {
|
|
712
738
|
this.store.options.on(event, node, data);
|
|
713
739
|
}
|
|
@@ -725,8 +751,8 @@ var Common = /** @class */ (function () {
|
|
|
725
751
|
// }
|
|
726
752
|
};
|
|
727
753
|
Common.prototype.onContent = function (resetDCIM, data) {
|
|
728
|
-
if(!data) data = this.store.data;
|
|
729
|
-
let connectParams =
|
|
754
|
+
if (!data) data = this.store.data;
|
|
755
|
+
let connectParams = {
|
|
730
756
|
mqttUrl: data.mqttUrl,
|
|
731
757
|
username: data.mqttOptions.username,
|
|
732
758
|
password: data.mqttOptions.password,
|
|
@@ -744,12 +770,12 @@ var Common = /** @class */ (function () {
|
|
|
744
770
|
Common.prototype.openMqtt = function (connectParams, debug) {
|
|
745
771
|
const _this = this;
|
|
746
772
|
_this.closeMqtt();
|
|
747
|
-
if(!connectParams.mqttUrl) return;
|
|
773
|
+
if (!connectParams.mqttUrl) return;
|
|
748
774
|
_this.isEnd = false;
|
|
749
775
|
const url = connectParams.mqttUrl.replace('ip', location.hostname);
|
|
750
776
|
_this.mqttClient = mqtt.connect(url, connectParams);
|
|
751
777
|
_this.mqttClient.on('message', function (topic, message) {
|
|
752
|
-
if(debug) console.
|
|
778
|
+
if (debug) console.info('mqttClientTopic>>>', topic, connectParams.mqttTopics)
|
|
753
779
|
if (!topic || topic != connectParams.mqttTopics) return;
|
|
754
780
|
if (!this.isEnd) _this.doMqttDrow(message.toString(), debug);
|
|
755
781
|
});
|
|
@@ -767,15 +793,14 @@ var Common = /** @class */ (function () {
|
|
|
767
793
|
Common.prototype.doMqttDrow = function (ret, debug) {
|
|
768
794
|
let canvasData = this.store.data;
|
|
769
795
|
ret = JSON.parse(ret);
|
|
770
|
-
if(debug) console.
|
|
796
|
+
if (debug) console.info('mqttClientMessage>>>', ret)
|
|
771
797
|
//console.log('处理消息', ret)
|
|
772
798
|
this.mqttDataDrawing(canvasData.pens, ret)
|
|
773
799
|
};
|
|
774
800
|
Common.prototype.mqttDataDrawing = function (data, retData) {
|
|
775
|
-
// console.log('收到消息', syncData)
|
|
776
801
|
this.store.monitorAlarm = false;
|
|
777
802
|
data.map((item) => {
|
|
778
|
-
if(this.store.options.type === 'topology') setInitConfData(this.id, item);
|
|
803
|
+
if (this.store.options.type === 'topology') setInitConfData(this.id, item);
|
|
779
804
|
setDefaultNodeValidat(item, retData);
|
|
780
805
|
if (item.children && item.children.length) {
|
|
781
806
|
this.mqttDataDrawing(item.children, retData);
|
|
@@ -788,7 +813,7 @@ var Common = /** @class */ (function () {
|
|
|
788
813
|
this.render();
|
|
789
814
|
this.animate(true);
|
|
790
815
|
// 九所的 服务器状态监测功能中用到
|
|
791
|
-
if(this.store.options.storeSubscribe) Store.set(this.generateStoreKey('M:monitor'), this.store.monitorAlarm);
|
|
816
|
+
if (this.store.options.storeSubscribe) Store.set(this.generateStoreKey('M:monitor'), this.store.monitorAlarm);
|
|
792
817
|
return data
|
|
793
818
|
};
|
|
794
819
|
Common.prototype.hidePenByTag = function (pens, val) {
|
|
@@ -848,7 +873,7 @@ var Common = /** @class */ (function () {
|
|
|
848
873
|
};
|
|
849
874
|
Common.prototype.formOverflowConversionData = function (obj) {
|
|
850
875
|
if (!obj) {
|
|
851
|
-
obj = {pens: []};
|
|
876
|
+
obj = { pens: [] };
|
|
852
877
|
}
|
|
853
878
|
let data = JSON.parse(JSON.stringify(obj));
|
|
854
879
|
Object.assign(this.store.data, data);
|
|
@@ -859,6 +884,8 @@ var Common = /** @class */ (function () {
|
|
|
859
884
|
for (var _d = 0, _e = data.pens; _d < _e.length; _d++) {
|
|
860
885
|
const item = _e[_d];
|
|
861
886
|
if (!item.from) {
|
|
887
|
+
// 初次绘制画布时this.id替换item.TID
|
|
888
|
+
setInitNodeDataValidat(item, this.id, type, _d, item.PTID);
|
|
862
889
|
const node = new Node(item);
|
|
863
890
|
this.store.data.pens.push(node);
|
|
864
891
|
} else {
|
|
@@ -867,6 +894,7 @@ var Common = /** @class */ (function () {
|
|
|
867
894
|
}
|
|
868
895
|
}
|
|
869
896
|
}
|
|
897
|
+
Store.set(this.generateStoreKey('LT:conversionDataOverflow'), data);
|
|
870
898
|
};
|
|
871
899
|
Common.prototype.destroyStatic = function () {
|
|
872
900
|
this.clear('destroy');
|
|
@@ -895,7 +923,10 @@ var Common = /** @class */ (function () {
|
|
|
895
923
|
pageRelevTableNodes: {}
|
|
896
924
|
}
|
|
897
925
|
});
|
|
898
|
-
document.
|
|
926
|
+
let tipMarkdown = document.querySelectorAll(".tipMarkdownBytopo");
|
|
927
|
+
tipMarkdown.forEach(item => {
|
|
928
|
+
document.body.removeChild(item);
|
|
929
|
+
})
|
|
899
930
|
if (this.paginationPageListBox) this.paginationPageListBox.removeEventListener('click', this.paginationPageListNode);
|
|
900
931
|
if (this.pagenationPageInput) this.pagenationPageInput.removeEventListener('click', this.pagenationPageInputNode);
|
|
901
932
|
//优化
|
|
@@ -919,4 +950,4 @@ var Common = /** @class */ (function () {
|
|
|
919
950
|
// Render or redraw
|
|
920
951
|
return Common;
|
|
921
952
|
}());
|
|
922
|
-
export {Common};
|
|
953
|
+
export { Common };
|
|
@@ -49,7 +49,6 @@ export function loadJS(url) {
|
|
|
49
49
|
loaderScript.type = 'text/javascript';
|
|
50
50
|
loaderScript.src = url;
|
|
51
51
|
document.body.appendChild(loaderScript);
|
|
52
|
-
window.datePickerRegister = true;
|
|
53
52
|
return new Promise((resolve, reject) => {
|
|
54
53
|
loaderScript.onload = function () {
|
|
55
54
|
resolve(true);
|
|
@@ -111,6 +111,9 @@ export function setConfItemNode(pen, syn_synata) {
|
|
|
111
111
|
pen.isOpen = _syn.v == openValue;
|
|
112
112
|
pen.fillStyle = pen.isOpen ? pen.visitStrokeStyle : pen.strokeStyle;
|
|
113
113
|
pen.text = '';
|
|
114
|
+
} else if (name === 'progress') {
|
|
115
|
+
pen.value = _syn.v;
|
|
116
|
+
pen.text = '';
|
|
114
117
|
}
|
|
115
118
|
else {
|
|
116
119
|
pen.fillStyle = color
|
|
@@ -17,7 +17,7 @@ import {
|
|
|
17
17
|
imageIconRect, imageTextRect,
|
|
18
18
|
cube, cubeAnchors, cubeIconRect, cubeTextRect,
|
|
19
19
|
people, peopleIconRect, peopleTextRect,
|
|
20
|
-
arbitraryGraph, arbitraryGraphAnchors, time, switchs
|
|
20
|
+
arbitraryGraph, arbitraryGraphAnchors, time, switchs, progress
|
|
21
21
|
} from './nodes';
|
|
22
22
|
import {
|
|
23
23
|
line,
|
|
@@ -209,6 +209,8 @@ function init() {
|
|
|
209
209
|
drawNodeFns.switchs = switchs;
|
|
210
210
|
iconRectFns.switchs = rectangleIconRect;
|
|
211
211
|
textRectFns.switchs = rectangleTextRect;
|
|
212
|
+
// 进度条
|
|
213
|
+
drawNodeFns.progress = progress;
|
|
212
214
|
}
|
|
213
215
|
init();
|
|
214
216
|
// registerNode: Register a custom node.
|
|
@@ -11,6 +11,7 @@ export async function fromDatePicker(ctx, node) {
|
|
|
11
11
|
|
|
12
12
|
if (!window.datePickerRegister) {
|
|
13
13
|
//未注册datePicker插件
|
|
14
|
+
window.datePickerRegister = true;
|
|
14
15
|
const datePickerRegisterData = await loadJS(`${window.location.origin}/libary/laydate/laydate.js`).catch((e) => {
|
|
15
16
|
console.error('datePicker插件加载失败>>>', e);
|
|
16
17
|
});
|
|
@@ -1,11 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
import {rectangle, createDiv, s8, Topology} from '../../../../core';
|
|
1
|
+
import {rectangle, createDiv, s8, Preview} from '../../../../core';
|
|
3
2
|
import {commonStore} from "../../store";
|
|
4
3
|
|
|
5
4
|
export async function formOverflow(ctx, node) {
|
|
6
5
|
// 绘制一个底图,类似于占位符。
|
|
7
6
|
rectangle(ctx, node)
|
|
8
|
-
console.log('绘制滚动组件--')
|
|
9
7
|
// 添加当前节点到div层
|
|
10
8
|
if (!node.elementId) {
|
|
11
9
|
node.elementId = s8()
|
|
@@ -17,7 +15,6 @@ export async function formOverflow(ctx, node) {
|
|
|
17
15
|
const scrollbarColor = color + ' ' + colorBg
|
|
18
16
|
|
|
19
17
|
if (!node.elementLoaded && !formoverData) {
|
|
20
|
-
console.log('是否存在--formoverData--0-',formoverData)
|
|
21
18
|
if(!formoverData) {
|
|
22
19
|
formoverData = {
|
|
23
20
|
div: createDiv(node)
|
|
@@ -33,29 +30,33 @@ export async function formOverflow(ctx, node) {
|
|
|
33
30
|
document.body.appendChild(formoverData.div)
|
|
34
31
|
// 添加当前节点到div层
|
|
35
32
|
node.addToDiv()
|
|
33
|
+
node.createOverflow()
|
|
36
34
|
commonStore[node.TID].formoverDataPool[node.id] = formoverData;
|
|
37
35
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
36
|
+
// 兼容topology项目中渲染
|
|
37
|
+
if (window.location.pathname.includes('workspace') || window.location.pathname.includes('Preview')) {
|
|
38
|
+
let canvas = new Preview(node.id, {
|
|
39
|
+
rotateCursor: '/img/rotate.cur',
|
|
40
|
+
})
|
|
41
|
+
canvas.formOverflowOpen(node.formData.detailPageData)
|
|
42
|
+
commonStore[node.TID].formoverCanvasDataPool[node.id] = canvas
|
|
43
|
+
}
|
|
44
|
+
setTimeout(() => {
|
|
45
|
+
// 可优化,图片元件加载不出图片的方案
|
|
46
|
+
formOverflowChange(node);
|
|
47
|
+
}, 200);
|
|
45
48
|
}else if(formoverData && id){
|
|
46
|
-
console.log('是否存在--formoverData--1-',formoverData)
|
|
47
49
|
formoverData.div.style.setProperty('scrollbar-color', scrollbarColor);
|
|
48
|
-
formOverflowChange(node)
|
|
49
50
|
}
|
|
51
|
+
formOverflowChange(node)
|
|
50
52
|
}
|
|
51
53
|
|
|
52
54
|
// 更新滚动组件中子页面
|
|
53
55
|
export function formOverflowChange(node) {
|
|
54
|
-
|
|
55
|
-
console.log('更新滚动组件中子页面-',node)
|
|
56
|
+
// 绘制画布
|
|
57
|
+
// console.log('更新滚动组件中子页面-',node)
|
|
56
58
|
let canvas = commonStore[node.TID].formoverCanvasDataPool[node.id]
|
|
57
59
|
let data = node.formData.detailPageData
|
|
58
|
-
console.log('改变滚动组件中子页面-',data)
|
|
59
60
|
canvas.formOverflowOpen(data)
|
|
60
61
|
}
|
|
61
62
|
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
export function progress(ctx, node) {
|
|
2
|
+
|
|
3
|
+
var wr = node.borderRadius;
|
|
4
|
+
var hr = node.borderRadius;
|
|
5
|
+
if (node.borderRadius < 1) {
|
|
6
|
+
wr = node.rect.width * node.borderRadius;
|
|
7
|
+
hr = node.rect.height * node.borderRadius;
|
|
8
|
+
}
|
|
9
|
+
var r = wr < hr ? wr : hr;
|
|
10
|
+
if (node.rect.width < 2 * r) {
|
|
11
|
+
r = node.rect.width / 2;
|
|
12
|
+
}
|
|
13
|
+
if (node.rect.height < 2 * r) {
|
|
14
|
+
r = node.rect.height / 2;
|
|
15
|
+
}
|
|
16
|
+
//进度条背景
|
|
17
|
+
ctx.beginPath();
|
|
18
|
+
ctx.moveTo(node.rect.x + r, node.rect.y);
|
|
19
|
+
ctx.arcTo(node.rect.x + node.rect.width, node.rect.y, node.rect.x + node.rect.width, node.rect.y + node.rect.height, r);
|
|
20
|
+
ctx.arcTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height, node.rect.x, node.rect.y + node.rect.height, r);
|
|
21
|
+
ctx.arcTo(node.rect.x, node.rect.y + node.rect.height, node.rect.x, node.rect.y, r);
|
|
22
|
+
ctx.arcTo(node.rect.x, node.rect.y, node.rect.x + node.rect.width, node.rect.y, r);
|
|
23
|
+
ctx.closePath();
|
|
24
|
+
ctx.fillStyle = node.fillStyle;
|
|
25
|
+
node.fillStyle && ctx.fill();
|
|
26
|
+
ctx.stroke();
|
|
27
|
+
ctx.restore();
|
|
28
|
+
//绘制进度条
|
|
29
|
+
let maxValue = node.maxValue || 100;
|
|
30
|
+
let percent = node.value / maxValue > 1 ? 1 : node.value / maxValue;
|
|
31
|
+
let gradient = ctx.createLinearGradient(node.rect.x, node.rect.y, node.rect.x + node.rect.width * percent, node.rect.y);
|
|
32
|
+
gradient.addColorStop(0, node.strokeStyle || 'red'); // 开始色
|
|
33
|
+
gradient.addColorStop(1, node.visitStrokeStyle || 'blue'); // 结束色
|
|
34
|
+
|
|
35
|
+
ctx.beginPath();
|
|
36
|
+
ctx.moveTo(node.rect.x + r, node.rect.y);
|
|
37
|
+
ctx.arcTo(node.rect.x + node.rect.width * percent, node.rect.y, node.rect.x + node.rect.width * percent, node.rect.y + node.rect.height, r);
|
|
38
|
+
ctx.arcTo(node.rect.x + node.rect.width * percent, node.rect.y + node.rect.height, node.rect.x, node.rect.y + node.rect.height, r);
|
|
39
|
+
ctx.arcTo(node.rect.x, node.rect.y + node.rect.height, node.rect.x, node.rect.y, r);
|
|
40
|
+
ctx.arcTo(node.rect.x, node.rect.y, node.rect.x + node.rect.width * percent, node.rect.y, r);
|
|
41
|
+
ctx.closePath();
|
|
42
|
+
ctx.fillStyle = gradient;
|
|
43
|
+
node.strokeStyle && ctx.fill();
|
|
44
|
+
|
|
45
|
+
//绘制数值
|
|
46
|
+
ctx.font = '' + node.font.fontSize + "px " + node.font.fontFamily;
|
|
47
|
+
ctx.textBaseline = 'middle';
|
|
48
|
+
//计算文字的长度 如果超出了100% 那么从右侧开始写 防止溢出 样式错乱
|
|
49
|
+
ctx.fillStyle = node.font.color;
|
|
50
|
+
//保留小数位数
|
|
51
|
+
let text = parseFloat((percent * 100).toFixed(node.retationDecimalPlaces || 0)) + (node.isShowPercent ? '%' : '');
|
|
52
|
+
let tWidth = ctx.measureText(text).width;
|
|
53
|
+
if ((tWidth + node.rect.width * percent + 5) > node.rect.width) { //如果溢出
|
|
54
|
+
ctx.fillText(text, node.rect.x + node.rect.width - tWidth - 5, node.rect.y + node.rect.height / 2);
|
|
55
|
+
|
|
56
|
+
} else {
|
|
57
|
+
ctx.fillText(text, node.rect.x + node.rect.width * percent + 5, node.rect.y + node.rect.height / 2);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
ctx.fillStyle = "#fff"
|
|
62
|
+
}
|
|
63
|
+
//# sourceMappingURL=progress.js.map
|