dcim-topology2d 1.1.4 → 1.1.6

package/chart-diagram/src/register.js

@@ -1,13 +1,13 @@
-import { registerNode, loadJS } from '../../core';
+import { registerNode } from '../../core';
 import { echarts } from './echarts';
 import { echartsDataStore } from '../../static';
-import './echarts/echarts.min.js';
+// import './echarts/echarts.min.js';
 export function register(_echarts) {
   echartsDataStore.echarts = _echarts;
-    if (process.browser && !echartsDataStore.echarts && !window.echarts) {
-        //loadJS('https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js', null, true);
-        loadJS(`${location.origin}/libary/echarts.min.js`, null, true);
-    }
+    // if (process.browser && !echartsDataStore.echarts && !window.echarts) {
+    //     //loadJS('https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js', null, true);
+    //     loadJS(`${location.origin}/libary/echarts.min.js`, null, true);
+    // }
     registerNode('echarts', echarts, null, null, null);
 }
 //# sourceMappingURL=register.js.map

package/core/src/calling.js

@@ -71,12 +71,14 @@ var Calling = (function () {
         if (data.nodes) {
             for (var _i = 0, _a = data.nodes; _i < _a.length; _i++) {
                 var item = _a[_i];
+                item.TID = this.id;
                 item.rect.x = 0;
                 item.rect.y = 0;
                 this.store.data.pens.push(new Node(item));
             }
             for (var _b = 0, _c = data.lines; _b < _c.length; _b++) {
                 var item = _c[_b];
+                item.TID = this.id;
                 this.store.data.pens.push(new Line(item));
             }
         }
@@ -84,6 +86,7 @@ var Calling = (function () {
         if (data.pens) {
             for (var _d = 0, _e = data.pens; _d < _e.length; _d++) {
                 var item = _e[_d];
+                item.TID = this.id;
                 if (!item.from) {
                     this.store.data.pens.push(new Node(item));
                 } else {

package/core/src/common.js

@@ -3,10 +3,10 @@ import {DivLayer} from './divLayer';
 import {AnimateLayer} from './animateLayer';
 import {RenderLayer} from './renderLayer';
 import {Offscreen} from './offscreen';
-import {Line, Node, Point, EventAction} from './models';
+import {Line, Node, Point} from './models';
 import {setConfItemNode, setStatisticalData} from './healps';
-import {s8, formatPadding, getRect} from './utils';
-import { useStore, clearStore } from './store'
+import {s8, formatPadding, getRect, setInitNodeDataValidat, setDefaultNodeValidat} from './utils';
+import { useStore, clearStore, syncMqttData } from './store'
 import {POLL} from './poll';
 import axios from 'axios';
 import * as mqtt from './mqtt.min';
@@ -189,7 +189,7 @@ var Common = /** @class */ (function () {
         // for old data.
         if (data.nodes) {
             for (var _i = 0, _a = data.nodes; _i < _a.length; _i++) {
-                _a[_i].TID = this.id;
+                setInitNodeDataValidat(_a[_i], this.id);
                 const item = new Node(_a[_i]);
                 this.store.data.pens.push(item);
                 this.store.pens[item.id] = item;
@@ -210,8 +210,8 @@ var Common = /** @class */ (function () {
         if (data.pens) {
             for (var _d = 0, _e = data.pens; _d < _e.length; _d++) {
                 const item = _e[_d];
-                item.TID = this.id;
                 if (!item.from) {
+                    setInitNodeDataValidat(item, this.id);
                     const node = new Node(item);
                     this.store.data.pens.push(node);
                     this.store.pens[item.id] = node;
@@ -491,6 +491,7 @@ var Common = /** @class */ (function () {
             let topics = mqttTopics
             this.isEnd = false;
             // let num = 0; // 记录推送的次数，用于判单丢失情况
+            //console.log('mqtt.connect======', url)
             this.mqttClient = mqtt.connect(url, options);
             var _this = this;
             this.mqttClient.on('message', function (topic, message) {
@@ -928,8 +929,15 @@ var Common = /** @class */ (function () {
             }
         });
         if (ret.data && ret.data.data) {
-            if (assetData) ret.data.data.asset = assetData
-            drawedData = this.mqttDataDrawing(canvasData, ret.data.data, detailJson)
+            if (assetData) ret.data.data.asset = assetData;
+            drawedData = ret.data.data;
+            if(panelData) {
+                syncMqttData.data = drawedData; // 初始化调用
+                Store.set('mqtt:responseData', drawedData);
+            }else {
+                syncMqttData.data = null;
+                this.mqttDataDrawing(canvasData, drawedData);
+            }
         }
         this.clearInterValAll();
         this.timmerByTopology = setTimeout(() => {
@@ -943,109 +951,29 @@ var Common = /** @class */ (function () {
         } else {
             return {
                 mqttData: drawedData,
-                detailData: detailJson
+                // detailData: detailJson
             }
         }
     };
     Common.prototype.mqttDataDrawing = function (data, retData, detailJson) {
         const syncData = retData
-        const detailData = detailJson ? detailJson.data : [];
+        //const detailData = detailJson ? detailJson.data : [];
         // console.log('收到消息', syncData)
         Store.set('mqtt:responseData', syncData);
         data.pens.map((item) => {
-            item.TID = this.id;
             if (item.children && item.children.length) {
                 item.children.map((_item) => {
-                    item.defaultFillStyle = item.fillStyle;
-                    item.defaultFontColor = item.font.color;
-                    if (item.name === 'line') item.defaultLineColor = item.strokeStyle;
-                    if (!_item.data) return
-                    //const node = detailData.length > 0 ? detailData : syncData
-                    const functionData = _item.events.filter((ev) => {
-                        return ev.action === EventAction.Function
-                    })
-                    const dataValue = functionData[0]
-                    if (functionData.length > 0 && dataValue.value && retData) {
-                        _item.data.map((d) => {
-                            const {kpiData, tagData} = retData;
-                            const key = d.key;
-                            const value = d.value;
-                            const _syncItem = key === 'tagId' ? tagData[value] : kpiData[value];
-                            if ((key === 'tagId' || key === 'kpiAddr') && _syncItem) {
-                                const isControl = parseInt(_syncItem.isControlDis); // 是否可控，0可控，1不可控
-                                if (!isControl) {
-                                    d.tagVal = value
-                                    d.controlParams = _syncItem
-                                    // delete _syncItem[value]
-                                    // Object.assign(d, _syncItem)
-                                }
-                            }
-                        })
-                        //console.log('定制函数=====')
-                        try {
-                            const func = new Function('pen', 'params', dataValue.value)
-                            func(_item, JSON.stringify(retData))
-                        }catch (e) {
-                            console.log(`自定义函数 ${item.id} 出错>>>`, e);
-                        }
-                    } else {
-                        // console.log('默认函数')
-                        setConfItemNode(_item, syncData);
-                    }
-                    this.machAnimateReset(item);
+                    setDefaultNodeValidat(_item, syncData);
                 })
             } else {
-                item.defaultFillStyle = item.fillStyle;
-                item.defaultFontColor = item.font.color;
-                if (item.name === 'line') item.defaultLineColor = item.strokeStyle;
-                if (!item.data) return
-                //const node = detailData.length > 0 ? detailData : syncData
-                const functionData = item.events.filter((ev) => {
-                    return ev.action === EventAction.Function
-                })
-                const dataValue = functionData[0]
-                if (functionData.length > 0 && dataValue.value && retData) {
-                    item.data.map((d) => {
-                        const {kpiData, tagData} = retData;
-                        const key = d.key;
-                        const value = d.value;
-                        const _syncItem = key === 'tagId' ? tagData[value] : kpiData[value];
-                        if ((key === 'tagId' || key === 'kpiAddr') && _syncItem) {
-                            const isControl = parseInt(_syncItem.isControlDis); // 是否可控，0可控，1不可控
-                            if (!isControl) {
-                                d.tagVal = value;
-                                d.controlParams = _syncItem;
-                                // delete _syncItem[value]
-                                // Object.assign(d, _syncItem)
-                            }
-                        }
-                    });
-                    try {
-                        const func = new Function('pen', 'params', dataValue.value);
-                        func(item, JSON.stringify(retData));
-                    }catch (e) {
-                        console.log(`自定义函数 ${item.id} 出错>>>`, e);
-                    }
-                } else {
-                    // console.log('默认函数')
-                    setConfItemNode(item, syncData);
-                }
-                this.machAnimateReset(item);
+                setDefaultNodeValidat(item, syncData);
             }
         })
-        // console.log('执行完毕')
+        //console.log('执行完毕-----', this.store.data.pens)
         this.render();
         this.animate(true);
         return data
     };
-    Common.prototype.machAnimateReset = function (pen) {
-        if (!pen.animateFrames || pen.animateFrames.length <= 0) return;
-        for (var _a = 0, _af = pen.animateFrames; _a < _af.length; _a++) {
-            var ani = _af[_a];
-            ani.state.strokeStyle = pen.strokeStyle;
-            ani.state.fillStyle = pen.fillStyle;
-        }
-    };
     Common.prototype.getTagParamsForKpiAddrs = async function (assetId, tagParams, apiStr) {
         let params = {
             assetId: assetId,
@@ -1178,8 +1106,7 @@ var Common = /** @class */ (function () {
     Common.prototype.doMqttDrow = function (ret) {
         let canvasData = this.store.data;
         ret = JSON.parse(ret);
-        // console.log('处理消息')
-        // console.log('this.canvas.data',this.canvas.data)
+        //console.log('处理消息', ret)
         this.mqttDataDrawing(canvasData, ret)
     };
     Common.prototype.hidePenByTag = function (pens, val) {

package/core/src/core.js

@@ -47,7 +47,6 @@ var Topology = (function (_super) {
             close: false, //闭合
         };
         _this.onMouseMove = function (e) {
-            _this.store.data.dataResize = 0;
             if (Store.get('addingArbitraryGraph')) {
                 return
             }
@@ -179,12 +178,13 @@ var Topology = (function (_super) {
                 if ((moveLeft || moveTop)) {
                     _this.scroll(moveLeft ? -100 : 0, moveTop ? -100 : 0);
                 }
-                // console.log('_this.moveIn.type----', _this.moveIn.type)
+                //console.log('_this.moveIn.type----', _this.moveIn.type)
                 switch (_this.moveIn.type) {
                     case _this.moveInType.None:
                         _this.hoverLayer.dragRect = new Rect(_this.mouseDown.x, _this.mouseDown.y, pos.x - _this.mouseDown.x, pos.y - _this.mouseDown.y);
                         break;
                     case _this.moveInType.Nodes:
+                        _this.store.data.dataResize = 0;
                         if (_this.activeLayer.locked()) {
                             break;
                         }
@@ -197,6 +197,7 @@ var Topology = (function (_super) {
                         }
                         break;
                     case _this.moveInType.ResizeCP:
+                        _this.store.data.dataResize = 1;
                         var p1 = new Point(_this.mouseDown.x, _this.mouseDown.y);
                         var p2 = new Point(pos.x, pos.y);
                         var offsetX = p2.x - p1.x;
@@ -562,7 +563,7 @@ var Topology = (function (_super) {
             _this.needCache = false;
         };
         _this.onkeydown = function (key) {
-            if (_this.store.data.locked ||
+            if (_this.store && _this.store.data.locked ||
                     key.target.tagName === 'INPUT' ||
                     key.target.tagName === 'TEXTAREA') {
                 return;
@@ -677,23 +678,40 @@ var Topology = (function (_super) {
                     return;
                 var obj = JSON.parse(json);
                 event.preventDefault();
-                if (obj.name && obj.name == 'arbitraryGraph') {
-                    Store.set('addingArbitraryGraph', true);
-                    _this.addingArbitraryGraph = true;
-                    _this.dispatch('addingArbitraryGraph', true);
-                    return
+                if(obj.type && obj.type === 'temp') {
+                    obj.locked = 0;
+                    // 模板
+                    _this.animateLayer.stop();
+                    _this.closeMqtt();
+                    _this.open(obj);
+                    const tempData = {
+                        name: obj.name,
+                        component: obj.component,
+                        image: obj.image,
+                        useType: obj.useType,
+                        data: JSON.parse(json)
+                    };
+                    delete tempData.data['pens'];
+                    _this.dispatch('template', tempData);
+                }else {
+                    if (obj.name && obj.name == 'arbitraryGraph') {
+                        Store.set('addingArbitraryGraph', true);
+                        _this.addingArbitraryGraph = true;
+                        _this.dispatch('addingArbitraryGraph', true);
+                        return
+                    }
+                    _this.addingArbitraryGraph = false;
+                    Store.set('addingArbitraryGraph', false);
+                    _this.arbitrarygGraphData = {
+                        points: [],
+                        circles: [],
+                        indexCircle: 0, //当前点击的圆圈
+                        oZindex: -1, //是否达到起点
+                        isDragging: false, //是否在抓取
+                        close: false, //闭合
+                    };
+                    _this.dropNodes(Array.isArray(obj) ? obj : [obj], event.offsetX, event.offsetY);
                 }
-                _this.addingArbitraryGraph = false;
-                Store.set('addingArbitraryGraph', false);
-                _this.arbitrarygGraphData = {
-                    points: [],
-                    circles: [],
-                    indexCircle: 0, //当前点击的圆圈
-                    oZindex: -1, //是否达到起点
-                    isDragging: false, //是否在抓取
-                    close: false, //闭合
-                };
-                _this.dropNodes(Array.isArray(obj) ? obj : [obj], event.offsetX, event.offsetY);
             } catch (_a) {
             }
         };

package/core/src/divLayer.js

@@ -85,9 +85,12 @@ var DivLayer = /** @class */ (function (_super) {
         return _this;
     }
     DivLayer.prototype.addIframe = function (node) {
-        const iframe = createIframeElement(node);
-        this.iframes[node.id] = iframe;
-        commonStore[node.TID].parentElem.appendChild(iframe);
+        let iframe = document.getElementById(`iframe${node.id}`);
+        if (!iframe){
+            iframe = createIframeElement(node);
+            this.iframes[node.id] = iframe;
+            commonStore[node.TID].parentElem.appendChild(iframe);
+        }
         return iframe;
     };
     DivLayer.prototype.addGif = function (node) {

package/core/src/models/node.js

@@ -239,12 +239,13 @@ var Node = /** @class */ (function (_super) {
         if (this.iframe ||
                 this.elementId ||
                 this.hasGif()) {
-            if(type || this.iframe) {
-                // 复合Echarts初始化
-                createChildrenDivByElementId(this);
-            }else {
-                Store.set(this.generateStoreKey('LT:addDiv'), this);
-            }
+            Store.set(this.generateStoreKey('LT:addDiv'), this);
+            // if(type || this.iframe) {
+            //     // 复合Echarts初始化
+            //     createChildrenDivByElementId(this);
+            // }else {
+            //     Store.set(this.generateStoreKey('LT:addDiv'), this);
+            // }
         }
     };
     Node.prototype.hasGif = function () {

package/core/src/models/pen.js

@@ -21,9 +21,6 @@ var Pen = /** @class */ (function () {
         this.strokeStyle = '';
         this.visitStrokeStyle = '';
         this.fillStyle = '';
-        this.defaultFillStyle = '';
-        this.defaultFontColor = '#fff';
-        this.defaultStrokeStyle = '';
         this.font = {
             color: '',
             fontFamily: '"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial',
@@ -48,6 +45,9 @@ var Pen = /** @class */ (function () {
         this.events = [];
         this.eventFns = ['link', 'doAnimate', 'doFn', 'doWindowFn'];
         this.floorImageIndex = false;
+        this.defaultFillStyle = '';
+        this.defaultFontColor = '';
+        this.defaultStrokeStyle = '';
         if (json) {
             this.id = json.id || s8();
             this.name = json.name || '';
@@ -76,9 +76,6 @@ var Pen = /** @class */ (function () {
             this.visitStrokeStyle = json.visitStrokeStyle || '';
             this.strokeStyle = json.strokeStyle || '';
             this.fillStyle = json.fillStyle || '';
-            this.defaultFillStyle = json.defaultFillStyle || '';
-            this.defaultFontColor = json.defaultFontColor || '#fff';
-            this.defaultStrokeStyle = json.defaultStrokeStyle || '';
             this.lineCap = json.lineCap;
             this.globalAlpha = (json.globalAlpha || json.globalAlpha === 0) ? json.globalAlpha : 1
             this.rotate = json.rotate || 0;
@@ -111,6 +108,9 @@ var Pen = /** @class */ (function () {
             this.tipId = json.tipId;
             this.title = json.title;
             this.visible = json.visible !== false;
+            this.defaultFillStyle = json.defaultFillStyle || '';
+            this.defaultFontColor = json.defaultFontColor || '';
+            this.defaultStrokeStyle = json.defaultStrokeStyle || '';
             if (json.rectInParent) {
                 this.rectInParent = json.rectInParent;
             }

package/core/src/store/data.d.ts

@@ -47,7 +47,10 @@ export interface visualization2DStore {
     },
     parentElem: HTMLElement
 }
-
+export interface mqttData {
+    data: null
+}
+export const syncMqttData: mqttData;
 // @ts-ignore
 export const createStore = () => {
     return {

package/core/src/store/data.js

@@ -14,6 +14,9 @@ import { Lock } from '../models';
 import {DefalutOptions} from '../options';
 import {s8} from '../utils';
 import { commonStore } from './common'
+export const syncMqttData = {
+    data: null
+}
 export var createStore = function () {
     return {
         id: '',
@@ -78,5 +81,6 @@ export var clearStore = function (store, del) {
         scaleX: 1,
         scaleY: 1
     };
+    syncMqttData.data = null;
     if(del) delete commonStore[store.id];
 };

package/core/src/utils/assignment.d.ts

@@ -0,0 +1,3 @@
+export declare function setInitNodeDataValidat(node: any): void;
+export declare function setDefaultColorValidat(node: any, TID: string): void;
+export declare function setDefaultNodeValidat(node: any, retData: any): any;

package/core/src/utils/assignment.js

@@ -0,0 +1,69 @@
+// 变量赋值操作
+import {syncMqttData} from '../store';
+import { setConfItemNode } from '../healps';
+import { EventAction } from '../models';
+export function setInitNodeDataValidat(node, TID) {
+    const syncData = syncMqttData.data;
+    if (node.children && node.children.length) {
+        node.children.map((_item) => {
+            node.TID = TID;
+            setDefaultColorValidat(node);
+            setDefaultNodeValidat(node, syncData);
+        })
+    }else {
+        node.TID = TID;
+        setDefaultColorValidat(node);
+        setDefaultNodeValidat(node, syncData);
+    }
+}
+export function setDefaultColorValidat(node) {
+    node.defaultFillStyle = node.fillStyle;
+    node.defaultFontColor = node.font.color;
+    if (node.name === 'line') {
+        node.defaultStrokeStyle = node.font.color;
+    }
+}
+export function setDefaultNodeValidat(node, retData) {
+    //const item = JSON.parse(JSON.stringify(node));
+    if (!node.data || !retData) return;
+    //const node = detailData.length > 0 ? detailData : syncData
+    const functionData = node.events.filter((ev) => {
+        return ev.action === EventAction.Function
+    })
+    const dataValue = functionData[0]
+    if (functionData.length > 0 && dataValue.value && retData) {
+        node.data.map((d) => {
+            const {kpiData, tagData} = retData;
+            const key = d.key;
+            const value = d.value;
+            const _syncItem = key === 'tagId' ? tagData[value] : kpiData[value];
+            if ((key === 'tagId' || key === 'kpiAddr') && _syncItem) {
+                const isControl = parseInt(_syncItem.isControlDis); // 是否可控，0可控，1不可控
+                if (!isControl) {
+                    d.tagVal = value
+                    d.controlParams = _syncItem
+                    // delete _syncItem[value]
+                    // Object.assign(d, _syncItem)
+                }
+            }
+        })
+        // console.log('定制函数=====')
+        try {
+            const func = new Function('pen', 'params', dataValue.value)
+            func(node, JSON.stringify(retData))
+        }catch (e) {
+            console.log(`自定义函数 ${node.id} 出错>>>`, e);
+        }
+    } else {
+        // console.log('默认函数')
+        setConfItemNode(node, retData);
+    }
+    if (node.animateFrames && node.animateFrames.length) {
+        for (var _a = 0, _af = node.animateFrames; _a < _af.length; _a++) {
+            var ani = _af[_a];
+            ani.state.strokeStyle = node.strokeStyle;
+            ani.state.fillStyle = node.fillStyle;
+        }
+    }
+    //return node;
+} 

package/core/src/utils/dom.js

@@ -84,20 +84,20 @@ export function createDiv(node) {
     return div;
 }
 
-export function loadJS(url, callback, render) {
-    var loaderScript = document.createElement('script');
-    loaderScript.type = 'text/javascript';
-    loaderScript.src = url;
-    loaderScript.addEventListener('load', function () {
-        if (callback) {
-            callback();
-        }
-        // how to do
-        if (render) {
-            Store.set('LT:render', true);
-        }
-    });
-    document.body.appendChild(loaderScript);
-}
+// export function loadJS(url, callback, render) {
+//     var loaderScript = document.createElement('script');
+//     loaderScript.type = 'text/javascript';
+//     loaderScript.src = url;
+//     loaderScript.addEventListener('load', function () {
+//         if (callback) {
+//             callback();
+//         }
+//         // how to do
+//         if (render) {
+//             Store.set('LT:render', true);
+//         }
+//     });
+//     document.body.appendChild(loaderScript);
+// }
 
 //# sourceMappingURL=dom.js.map

package/core/src/utils/index.d.ts

@@ -7,3 +7,4 @@ export * from './padding'
 export * from './construction';
 export * from './onmousevent';
 export * from './conversion';
+export * from './assignment';

package/core/src/utils/index.js

@@ -7,4 +7,5 @@ export * from './padding'
 export * from './construction';
 export * from './onmousevent';
 export * from './conversion';
+export * from './assignment';
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dcim-topology2d",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "",
   "main": "-",
   "scripts": {