dcim-topology2d 2.0.2 → 2.0.6

package/core/src/middles/nodes/formselect.js

@@ -5,43 +5,65 @@ import {
 import {
     setEventListener,
     s8} from '../../utils';
-import {echartsDataPool, selectDataPool, selectRealDataPool} from '../../../../store';
 import {selectDefaultData} from '../../../../static';
+import {commonStore} from "../../store";
 
 export function formSelect(ctx, node) {
     // 绘制一个底图，类似于占位符。
     rectangle(ctx, node);
-    if (!selectDataPool[node.id]) {
+    if (!commonStore[node.TID].selectDataPool[node.id]) {
+        const currentStore = commonStore[node.TID];
         node.elementId = s8();
         node.dash = 4;
-        selectDataPool[node.id] = {
+        currentStore.selectDataPool[node.id] = {
             slideState: node.selectDropdown,
             node: {
                 id: node.id,
                 color: node.font.color,
                 fontSize: node.font.fontSize,
-                selected: null
+                selected: node.formData.selected || null
             },
             dom: {}
         };
-        const bindBlockId = node.formData && node.formData.bindBlockId;
-        let selectRealData = bindBlockId && selectRealDataPool[bindBlockId];
+        let bindBlockId = '';
+        if(node.formData.bindBlockId) {
+            // 去空格重新赋值
+            bindBlockId = node.formData.bindBlockId.trim();
+            node.formData.bindBlockId = bindBlockId;
+        }
+        if(node.formData.bindBlockTag) {
+            // 去空格重新赋值
+            node.formData.bindBlockTag = node.formData.bindBlockTag.trim();
+        }
+        let selectRealData = bindBlockId && currentStore.selectRealDataPool[bindBlockId];
         if(bindBlockId && selectRealData) {
             // select与echarts互相关联
-            selectDataPool[node.id].data = selectRealData;
-            const echartsData = echartsDataPool[bindBlockId];
-            if(echartsData){
-                echartsData.bindId = node.id;
-            }else {
-                echartsDataPool[bindBlockId] = {
-                    bindId: node.id
+            currentStore.selectDataPool[node.id].data = selectRealData;
+            const echartsData = currentStore.echartsDataPool[bindBlockId];
+            echartsData ? echartsData.bindId = node.id : currentStore.echartsDataPool[bindBlockId] = {
+                bindId: node.id
+            };
+            // select与Tab关联
+            const bindBlockTagData = currentStore.switchTabDataPool[`${node.formData.bindBlockTag}Data`];
+            if(bindBlockTagData) currentStore.echartsDataPool[bindBlockId].tabCorrelationType = 'select';
+        }else {
+            if(node.formData.ids) {
+                const optionIds = node.formData.ids.split(',');
+                const optionNames = node.formData.names.split(',');
+                const optionsData = [];
+                for (let i = 0; i < optionIds.length; i++) {
+                    optionsData.push({
+                        id: optionIds[i],
+                        name: optionNames[i]
+                    });
                 }
+                currentStore.selectDataPool[node.id].data = optionsData;
+            }else {
+                currentStore.selectDataPool[node.id].data = JSON.parse(JSON.stringify(selectDefaultData));
             }
-        }else {
-            selectDataPool[node.id].data = JSON.parse(JSON.stringify(selectDefaultData));
         }
         const select = createSelectElement(node);
-        selectDataPool[node.id].dom.selectEle = select;
+        currentStore.selectDataPool[node.id].dom.selectEle = select;
         document.body.appendChild(select);
         let selectDropdownEle = document.querySelector('.topology-select-dropdown');
         if(!selectDropdownEle) {
@@ -50,13 +72,13 @@ export function formSelect(ctx, node) {
             parentEle.appendChild(selectDropdownEle);
             // 鼠标按下
             selectDropdownEle.addEventListener('mousedown', (e) => {
-                setEventListener(e);
+                setEventListener(e, node.TID);
             });
         }
         // 添加当前节点到div层
         node.addToDiv();
     }else {
-        const selectNode = selectDataPool[node.id];
+        const selectNode = commonStore[node.TID].selectDataPool[node.id];
         if(selectNode.node.color === node.font.color && selectNode.node.fontSize === node.font.fontSize) return;
         const selectDom = selectNode.dom;
         if(!selectDom.selectInput) selectDom.selectInput = selectDom.selectEle.querySelector('.topology-select-input');

package/core/src/middles/nodes/iframe.js

@@ -1,28 +1,28 @@
 import {rectangle} from './rectangle';
-import {iframeDataPool} from '../../../../store';
 import {s8} from "../../utils";
 import {createIframeElement} from "../../element";
+import {commonStore} from "../../store";
 
 export function iframePrimeval(ctx, node) {
     //console.log('iframePrimeval############', node)
     // 绘制一个底图，类似于占位符。
     rectangle(ctx, node);
-    if (!iframeDataPool[node.id]) {
+    if (!commonStore[node.TID].iframeDataPool[node.id]) {
         node.elementId = s8();
-        iframeDataPool[node.id] = {
+        commonStore[node.TID].iframeDataPool[node.id] = {
             node: {
                 id: node.id,
                 src: node.iframe
             }
         };
         const iframe = createIframeElement(node);
-        iframeDataPool[node.id].iframe = iframe;
+        commonStore[node.TID].iframeDataPool[node.id].iframe = iframe;
         const parentEle = window.location.pathname.includes('workspace') ? document.getElementById('topology-canvas') : document.body;
         parentEle.appendChild(iframe);
         // 添加当前节点到div层
         node.addToDiv();
     }else {
-        const iframeNode = iframeDataPool[node.id];
+        const iframeNode = commonStore[node.TID].iframeDataPool[node.id];
         if(iframeNode.node.src === node.iframe) return;
         iframeNode.iframe.src = node.iframe;
     }

package/core/src/middles/nodes/index.d.ts

@@ -44,4 +44,5 @@ export * from './tablePagination';
 export * from './text';
 export * from './triangle';
 export * from './triangle.anchor';
-export * from './triangle.rect';
+export * from './triangle.rect';
+export * from './formoverflow';

package/core/src/middles/nodes/index.js

@@ -45,4 +45,5 @@ export * from './text';
 export * from './triangle';
 export * from './triangle.anchor';
 export * from './triangle.rect';
+export * from './formoverflow';
 //# sourceMappingURL=index.js.map

package/core/src/models/node.js

@@ -48,6 +48,13 @@ var Node = /** @class */ (function (_super) {
         _this.iconSize = +json.iconSize;
         _this.iconColor = json.iconColor;
         _this.image = json.image;
+        _this.tabData = json.tabData || {
+            state: false,
+            name: '℃',
+            min: 0,
+            max: 60,
+            interval: 20
+        };
         _this.floorImageIndex = json.floorImageIndex || false;
         _this.formData = json.formData || null;
         _this.formStyle = json.formStyle || null;

package/core/src/models/pen.js

@@ -3,7 +3,6 @@ import { s8 } from '../utils/uuid';
 import { Rect } from './rect';
 import { pointInRect } from '../utils/canvas';
 import { EventType, EventAction } from './event';
-import { setConfItemNode } from '../healps/changeData';
 export var PenType;
 (function (PenType) {
     PenType[PenType["Node"] = 0] = "Node";
@@ -108,6 +107,7 @@ var Pen = /** @class */ (function () {
             this.tipId = json.tipId;
             this.title = json.title;
             this.visible = json.visible !== false;
+            this.visibleSwitch = !!json.visibleSwitch; // 元件显示隐藏的开关量
             this.defaultFillStyle = json.defaultFillStyle || '';
             this.defaultFontColor = json.defaultFontColor || '';
             this.defaultStrokeStyle = json.defaultStrokeStyle || '';
@@ -131,7 +131,7 @@ var Pen = /** @class */ (function () {
         }
     }
     Pen.prototype.render = function (ctx) {
-        if (!this.visible && !window.location.pathname.includes('workspace')){
+        if (!this.visible && !this.visibleSwitch){
             return;
         }
         if (this.from && !this.to) {
@@ -248,54 +248,6 @@ var Pen = /** @class */ (function () {
             this[this.eventFns[item.action]] && this[this.eventFns[item.action]](item.value, item.params);
         }
     };
-    Pen.prototype.doSocketMqtt = function (item, msg, client) {
-        if (item.action < EventAction.Function) {
-            this[this.eventFns[item.action]](msg.value || msg || item.value, msg.params || item.params, client);
-        }
-        else if (item.action < EventAction.SetProps) {
-            if (item.action === EventAction.Function && item.value) return this[this.eventFns[item.action]](item.value, msg || item.params, client);
-            let jsonNode = msg;
-            if (typeof msg === 'string') {
-                try {
-                    jsonNode = JSON.parse(msg);
-                }catch (error) { }
-            }
-            console.log('doSocketMqtt-------------', jsonNode)
-            //const { areaData, assetData, data } = jsonNode
-            if (!this.data && this.data.length <= 0 && typeof this.data !== 'object') return
-            // const subscribeObj = {
-            //     areaData, assetData, data,
-            //     asset: ''
-            // }
-            jsonNode.asset = ''
-            Object.assign(this, setConfItemNode(this, jsonNode))
-        }
-        else if (item.action === EventAction.SetProps) {
-            var props = [];
-            var data = msg;
-            if (typeof msg === 'string') {
-                try {
-                    data = JSON.parse(msg);
-                }
-                catch (error) { }
-            }
-            if (Array.isArray(data)) {
-                props = data;
-            }
-            for (var _i = 0, props_1 = props; _i < props_1.length; _i++) {
-                var prop = props_1[_i];
-                if (prop.key) {
-                    if (typeof prop.value === 'object') {
-                        this[prop.key] = Object.assign(this[prop.key], prop.value);
-                    }
-                    else {
-                        this[prop.key] = prop.value;
-                    }
-                }
-            }
-            Store.set(this.generateStoreKey('LT:render'), true);
-        }
-    };
     Pen.prototype.show = function () {
         this.visible = true;
         return this;

package/core/src/options.d.ts

@@ -45,7 +45,7 @@ export interface Options {
     alwaysAnchor?: boolean;
     disableEmptyLine?: boolean;
     disableRepeatLine?: boolean;
-    disableScale?: boolean;
+    disableScale?: boolean; // 禁止缩放
     disableMoveOutParent?: boolean;
     disableDockLine?: boolean;
     playIcon?: string;
@@ -60,6 +60,7 @@ export interface Options {
     keydown?: KeydownType;
     viewPadding?: Padding;
     on?: (event: string, data: any) => void;
+    storeSubscribe?: boolean
 }
 export declare const DefalutOptions: Options;
 

package/core/src/options.js

@@ -38,6 +38,7 @@ export var DefalutOptions = {
     autoExpandDistance: 200,
     keydown: KeydownType.Document,
     viewPadding: 0,
-    interval: 50
+    interval: 50,
+    storeSubscribe: false
 };
 //# sourceMappingURL=options.js.map

package/core/src/preview.js

@@ -239,7 +239,12 @@ var Preview = (function (_super) {
             return;
         // 1. 重置画布尺寸为容器尺寸
         var parentElem = this.store.parentElem;
-        var width = parentElem.offsetWidth, height = parentElem.offsetHeight;
+        var width = parentElem.offsetWidth,
+            height = parentElem.offsetHeight;
+        if(this.store.options.storeSubscribe) {
+            width = this.store.options.width;
+            height = this.store.options.height;
+        }
         this.canvasResize({
             width: width,
             height: height,

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

@@ -28,38 +28,49 @@ export interface visualization2DData {
     data?: any;
     bkImageRect?: any;
 }
+export interface paramsData {
+    doorIds?: [],
+    tagIds?: [],
+    kpiAddrs?: [],
+    tagEcharts?: [],
+    assetIds?: [],
+    areaIds?: [],
+    varVaule?: [],
+    echartData?: [],
+    echartAssemblyData?: [],
+    routingkey?: string,
+    pathRewrite?: string
+}
 // 2D可视化使用到的数据仓库
 export interface visualization2DStore {
     id: string;
     data: visualization2DData;
+    mqttData?: null; // mqtt实时数据
+    initConfNode: {}; // 初始化元件节点数据
+    mqttParams: paramsData; // mqtt参数
     pens: { [key: string]: Pen };
     options: Options;
     cacheDatas?: {
         data: visualization2DData;
     }[];
+    elementInteractivePoor: {}; // element 交互过渡数据
+    echartsDataPool: {}; // echarts Dom节点数据
+    echartsOptionsPool: {}; // echarts options节点数据
+    echartsRealDataPool: {}; // echarts 实时数据
+    switchTabDataPool: {}; // tabs
+    tableDataPool: {}; // form table
+    selectDataPool: {}; // form select
+    selectRealDataPool: {}; // form select
+    selectTabDataPool: {}; // form select
+    iframeDataPool: {}; // iframe
+    formoverDataPool: {}; // 滚动组件 Dom节点数据
+    formoverCanvasDataPool: {}; // 滚动组件 画布节点数据
     emitter: Emitter;
     dpiRatio?: number;
     lastScale?: number; //记录上次模版的scale
+    monitorAlarm?:boolean; // 全局报警标记，代表正在访问的这个topology文件中是否有告警发生
     parentElem: HTMLElement
 }
-export interface mqttData {
-    data: null,
-    initData: {},
-    params: {
-        tagIds?: [],
-        kpiAddrs?: [],
-        tagEcharts?: [],
-        assetIds?: [],
-        areaIds?: [],
-        varVaule?: [],
-        echartData?: [],
-        echartAssemblyData?: [],
-        routingkey?: string,
-        pathRewrite?: string
-    }
-}
-export const syncMqttData: mqttData;
-export declare function clearMqttParams(): void;
 // @ts-ignore
 export const createStore = () => {
     return {
@@ -77,12 +88,40 @@ export const createStore = () => {
             },
             dataConstruct: {}
         },
+        mqttData: null,
+        initConfNode: {},
+        mqttParams: {
+            doorIds: [],
+            tagIds: [],
+            kpiAddrs: [],
+            tagEcharts: [],
+            assetIds: [],
+            areaIds: [],
+            varVaule: [],
+            echartData: [],
+            echartAssemblyData: [],
+            routingkey: '',
+            pathRewrite: ''
+        },
         pens: {},
         options: { ...DefalutOptions },
+        elementInteractivePoor: {}, // element 交互过渡数据
+        echartsDataPool: {}, // echarts Dom节点数据
+        echartsOptionsPool: {}, // echarts options节点数据
+        echartsRealDataPool: {}, // echarts 实时数据
+        switchTabDataPool: {}, // tabs
+        tableDataPool: {}, // form table
+        selectDataPool: {}, // form select
+        selectRealDataPool: {}, // form select
+        selectTabDataPool: {}, // form select
+        iframeDataPool: {}, // iframe
+        formoverDataPool: {}, // 滚动组件 Dom节点数据
+        formoverCanvasDataPool: {}, // 滚动组件 画布节点数据
         emitter: mitt(),
         cacheDatas: [],
         dpiRatio: 1,
         lastScale: 1,
+        monitorAlarm: false,
         parentElem: null
     } as visualization2DStore;
 };
@@ -95,7 +134,7 @@ export const useStore = (id = 'default'): visualization2DStore => {
     }
     return commonStore[id];
 };
-
+export declare function clearElementDataPool(data: {}): void;
 // @ts-ignore
 export const clearStore = (store: visualization2DStore, del: string) => {
     store.data = {
@@ -119,10 +158,26 @@ export const clearStore = (store: visualization2DStore, del: string) => {
         },
         dataConstruct: {}
     };
+    store.mqttData = null;
+    store.initConfNode = {};
+    store.mqttParams = {
+        doorIds: [],
+        tagIds: [],
+        kpiAddrs: [],
+        tagEcharts: [],
+        assetIds: [],
+        areaIds: [],
+        varVaule: [],
+        echartData: [],
+        echartAssemblyData: [],
+        routingkey: '',
+        pathRewrite: ''
+    };
     store.lastScale = store.data.scale;
     store.pens = {};
     store.options = {};
     store.cacheDatas = [];
     store.dpiRatio = 1;
     store.lastScale = 1;
+    store.monitorAlarm = false;
 };

package/core/src/store/data.js

@@ -13,36 +13,8 @@ import { default as mitt } from 'mitt';
 import { Lock } from '../models';
 import {DefalutOptions} from '../options';
 import {s8} from '../utils';
-import { commonStore } from './common'
-import { clearDataPool, removeAllElement } from '../../../store';
-export const syncMqttData = {
-    data: null, // 实时值
-    initData: {}, // 初始值
-    params: {
-        tagIds: [],
-        kpiAddrs: [],
-        tagEcharts: [],
-        assetIds: [],
-        areaIds: [],
-        varVaule: [],
-        echartData: [],
-        echartAssemblyData: [],
-        routingkey: '',
-        pathRewrite: ''
-    }
-}
-export const clearMqttParams = function () {
-    syncMqttData.params.tagIds = [];
-    syncMqttData.params.kpiAddrs = [];
-    syncMqttData.params.tagEcharts = [];
-    syncMqttData.params.assetIds = [];
-    syncMqttData.params.areaIds = [];
-    syncMqttData.params.varVaule = [];
-    syncMqttData.params.echartData = [];//统计图表组件类型ID
-    syncMqttData.params.echartAssemblyData = [];//统计图表组件类型ID
-    syncMqttData.params.routingkey = '';
-    syncMqttData.params.pathRewrite = '';
-}
+import {commonStore} from './common'
+import {removeAllElement} from '../../../store';
 export var createStore = function () {
     return {
         id: '',
@@ -60,12 +32,40 @@ export var createStore = function () {
             },
             dataConstruct: {}
         },
+        mqttData: null,
+        initConfNode: {},
+        mqttParams: {
+            doorIds: [],
+            tagIds: [],
+            kpiAddrs: [],
+            tagEcharts: [],
+            assetIds: [],
+            areaIds: [],
+            varVaule: [],
+            echartData: [],
+            echartAssemblyData: [],
+            routingkey: '',
+            pathRewrite: ''
+        },
         pens: {},
         options: { ...DefalutOptions },
+        elementInteractivePoor: {}, // element 交互过渡数据
+        echartsDataPool: {}, // echarts Dom节点数据
+        echartsOptionsPool: {}, // echarts options节点数据
+        echartsRealDataPool: {}, // echarts 实时数据
+        switchTabDataPool: {}, // tabs
+        tableDataPool: {}, // form table
+        selectDataPool: {}, // form select
+        selectRealDataPool: {}, // form select
+        selectTabDataPool: {}, // form select
+        iframeDataPool: {}, // iframe
+        formoverDataPool: {}, // 滚动组件 Dom节点数据
+        formoverCanvasDataPool: {}, // 滚动组件 画布节点数据
         emitter: mitt(),
         cacheDatas: [],
         dpiRatio: 1,
         lastScale: 1,
+        monitorAlarm: false,// 全局报警标记，代表正在访问的这个topology文件中是否有告警发生
         parentElem: null
     };
 };
@@ -77,6 +77,49 @@ export var useStore = function (id) {
     }
     return commonStore[id];
 };
+export function clearElementDataPool(data) {
+    const { echartsDataPool, selectDataPool, iframeDataPool, formoverDataPool, formoverCanvasDataPool} = data;
+    for (let [key, node] of Object.entries(echartsDataPool)) {
+        if(node) {
+            clearInterval(node.timeTicket);
+            if(node.chart) {
+                node.chart.off('mouseover');
+                node.chart.off('mouseout');
+                node.chart.dispose();
+            }
+            if(node.div && node.div.parentNode) node.div.parentNode.removeChild(node.div);
+        }
+        delete data.echartsDataPool[key];
+    }
+    if(Object.keys(selectDataPool).length) {
+        let dropdownEle = null,
+                dropdownListEle = null;
+        for (let [key, node] of Object.entries(selectDataPool)) {
+            if(!dropdownEle) {
+                dropdownEle = node.dom.selectDropdown;
+                dropdownListEle = node.dom.selectDropdownUl;
+            }
+            if(node.dom.selectEle && node.dom.selectEle.parentNode) node.dom.selectEle.parentNode.removeChild(node.dom.selectEle);
+            delete data.selectDataPool[key];
+        }
+        if(dropdownEle) dropdownEle.style.display = 'none';
+        if(dropdownListEle) dropdownListEle.innerHTML = '';
+    }
+    for (let [key, node] of Object.entries(iframeDataPool)) {
+        node.iframe.parentNode.removeChild(node.iframe);
+        delete data.iframeDataPool[key];
+    }
+    for (let key of Object.keys(formoverDataPool)) {
+        delete formoverDataPool[key];
+    }
+    for (let key of Object.keys(formoverCanvasDataPool)) {
+        const elementNode = document.getElementById(key);
+        if(elementNode) {
+            elementNode.parentNode.removeChild(elementNode);   
+        }
+        delete formoverCanvasDataPool[key];
+    }
+}
 export var clearStore = function (store, del) {
     store.lastScale = store.data.scale;
     store.data = {
@@ -93,15 +136,40 @@ export var clearStore = function (store, del) {
         },
         dataConstruct: {}
     };
+    store.initConfNode = {};
+    store.mqttParams = {
+        doorIds: [],
+        tagIds: [],
+        kpiAddrs: [],
+        tagEcharts: [],
+        assetIds: [],
+        areaIds: [],
+        varVaule: [],
+        echartData: [],
+        echartAssemblyData: [],
+        routingkey: '',
+        pathRewrite: ''
+    };
     store.pens = {}; // 先保留，后期优化提取变量用
     store.cacheDatas = [];
     store.dpiRatio = 1;
     store.lastScale = 1;
-    clearDataPool();
+    store.monitorAlarm = false;
+    store.elementInteractivePoor = {};
+    store.echartsOptionsPool = {};
+    store.echartsRealDataPool = {};
+    store.switchTabDataPool = {};
+    store.tableDataPool = {};
+    store.selectRealDataPool = {};
+    store.selectTabDataPool = {};
+    clearElementDataPool({
+        echartsDataPool: store.echartsDataPool,
+        selectDataPool: store.selectDataPool,
+        iframeDataPool: store.iframeDataPool,
+        formoverDataPool: store.formoverDataPool,
+        formoverCanvasDataPool: store.formoverCanvasDataPool,
+    });
     if(del) {
-        syncMqttData.data = null;
-        syncMqttData.initData = {};
-        clearMqttParams();
         delete commonStore[store.id];
         removeAllElement();
     }

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

@@ -3,4 +3,4 @@ import {Node} from '../models';
 export declare function setInitNodeDataValidat(node: any, TID: string, type: string, order: number): void;
 export declare function initDefaultValidat(node: any, retData: any): void;
 export declare function setDefaultNodeValidat(node: any, retData: any): any;
-export declare function initSwitchTabData(node: Node): void;
+export declare function setConnectionTagForConf(node: Node): void;