dcim-topology2d 2.0.2 → 2.0.5

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

@@ -28,38 +28,47 @@ 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
     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 +86,38 @@ 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
         emitter: mitt(),
         cacheDatas: [],
         dpiRatio: 1,
         lastScale: 1,
+        monitorAlarm: false,
         parentElem: null
     } as visualization2DStore;
 };
@@ -95,7 +130,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 +154,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,38 @@ 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
         emitter: mitt(),
         cacheDatas: [],
         dpiRatio: 1,
         lastScale: 1,
+        monitorAlarm: false,// 全局报警标记，代表正在访问的这个topology文件中是否有告警发生
         parentElem: null
     };
 };
@@ -77,6 +75,39 @@ export var useStore = function (id) {
     }
     return commonStore[id];
 };
+export function clearElementDataPool(data) {
+    const { echartsDataPool, selectDataPool, iframeDataPool} = 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];
+    }
+}
 export var clearStore = function (store, del) {
     store.lastScale = store.data.scale;
     store.data = {
@@ -93,15 +124,38 @@ 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,
+    });
     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;

package/core/src/utils/assignment.js

@@ -1,8 +1,7 @@
 // 变量赋值操作
-import {syncMqttData} from '../store';
+import {commonStore} from '../store';
 import { setConfItemNode } from '../healps';
 import { EventAction } from '../models';
-import {switchTabDataPool} from "../../../store";
 
 /**
  * 在节点注册前初始化node数据
@@ -13,10 +12,12 @@ import {switchTabDataPool} from "../../../store";
  */
 export function setInitNodeDataValidat(node, TID, type, order) {
 
-    const syncData = syncMqttData.data;
+    const syncData = commonStore[TID].mqttData;
 
     node.TID = TID;
 
+    node.visibleSwitch = type === 'topology' && node.visibleSwitch;
+
     if(typeof order === "number") node.order = order;
     if(type !== 'topology') node.selectDropdown = false;
 
@@ -73,14 +74,14 @@ export function initDefaultValidat(node, retData) {
 // 初始化mqtt实时值
 export function setDefaultNodeValidat(node, retData) {
     //const item = JSON.parse(JSON.stringify(node));
-    if (!node.data || !retData) return;
+    if (!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) => {
+    if (functionData.length && dataValue.value && retData) {
+        if(node.data && node.data.length) node.data.map((d) => {
             const {kpiData, tagData} = retData;
             const key = d.key;
             const value = d.value;
@@ -98,7 +99,13 @@ export function setDefaultNodeValidat(node, retData) {
         // console.log('定制函数=====')
         try {
             const func = new Function('pen', 'params', dataValue.value);
-            func(node, JSON.stringify(retData));
+            const funcData = func(node, JSON.stringify(retData));
+            /**
+             * 此方式在九所的 服务器状态监测功能中用到
+             * 全局报警标记，代表正在访问的这个topology文件中是否有告警发生
+             * 需要注意：自定义函数中要通过 return {monitorAlarm: boolean}的格式将元件告警状态返回
+             */
+            if(funcData && funcData.monitorAlarm) commonStore[node.TID].monitorAlarm = true;
         }catch (e) {
             console.log(`自定义函数出错>>>`,);
             console.log(`目标元件：${node.id}>>>`,);
@@ -106,7 +113,8 @@ export function setDefaultNodeValidat(node, retData) {
         }
     } else {
         // console.log('默认函数')
-        setConfItemNode(node, retData);
+        const newData = setConfItemNode(node, retData);
+        if(newData && newData.monitorAlarm) commonStore[node.TID].monitorAlarm = true;
     }
     if (node.animateFrames && node.animateFrames.length) {
         for (var _a = 0, _af = node.animateFrames; _a < _af.length; _a++) {
@@ -117,22 +125,44 @@ export function setDefaultNodeValidat(node, retData) {
     }
     //return node;
 }
-// 初始化tab节点数据
-export function initSwitchTabData(node) {
-    if (node.tags && node.tags.length > 0) {
-        const tagTypeData = node.tags.find((t) => {
-            return t === 'statisticType' || t.includes('switchTabType');
-        });
-        if (tagTypeData) {
-            let topologyChangeData = switchTabDataPool;
-            let keyName = node.bindStaticId ? `${tagTypeData}Data` : `${tagTypeData}AreaData`;
-            if (!topologyChangeData[keyName]) topologyChangeData[keyName] = {};
-            topologyChangeData[keyName][node.id] = node;
-        }else {
-            const isTabs = node.events && node.events.find((ev) => ev.action === 8);
-            if(isTabs) {
-                console.log('>>>未能找到绑定的标签数据，请检查绑定的Tabs标签是否包含switchTabType前缀>>>')
+
+/**
+ * 配置与元件关联的tag数据
+ * @param node 元件节点数据
+ */
+export function setConnectionTagForConf(node) {
+    if(!node.tags || node.tags && !node.tags.length) return;
+    let setType = '';
+    node.tags.map((t) => {
+        if(t === 'statisticType' || t.includes('switchTabType')) setType = 'tab';
+        if(t.includes('selectOption')) setType = 'selectShow';
+    });
+    const isTabs = node.events && node.events.find((ev) => ev.action === 8);
+    if(!setType && isTabs) console.log('>>>未能找到绑定的标签数据，请检查绑定的Tabs标签是否包含switchTabType前缀>>>');
+    if(setType === 'tab'){
+        // tab切换
+        const tagData = node.tags[0];
+        let topologyChangeData = commonStore[node.TID].switchTabDataPool;
+        let keyName = node.bindStaticId ? `${tagData}Data` : `${tagData}AreaData`;
+        if (!topologyChangeData[keyName]) topologyChangeData[keyName] = {};
+        topologyChangeData[keyName][node.id] = node;
+    }
+    if(setType === 'selectShow'){
+        // 下拉显示隐藏
+        const tagData = node.tags[0].split('-');
+        const parentId = tagData[1] && tagData[1].trim();
+        if(!parentId) return console.log('>>>请检查select节点ID是否设置正确【selectOption+其他任意字符-下拉元件ID】>>>');
+        if(parentId) {
+            const params = {
+                TID: node.TID,
+                id: node.id,
+                name: node.name,
+                order: node.order,
+                visible: node.visible,
+                tag: node.tags[0].trim()
             }
+            if(!commonStore[node.TID].selectTabDataPool[parentId]) commonStore[node.TID].selectTabDataPool[parentId] = new Map();
+            commonStore[node.TID].selectTabDataPool[parentId].set(node.id, params);
         }
     }
 }

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

@@ -38,7 +38,8 @@ export interface AnimateType {
 }
 export interface SelectStaticType {
     static?:number;
-    show?:number;
+    dataShow?:number;
+    visible?:number;
 }
 export const moveDataType: MoveDataType;
 export const downDataType: DownDataType;

package/core/src/utils/construction.js

@@ -37,5 +37,6 @@ export const animateType = {
 };
 export const selectStaticType = {
     static: 1,
-    show: 2
+    dataShow: 2,
+    visible: 3
 };

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

@@ -1,7 +1,7 @@
 import {Node} from "../models";
 
 export declare function getEchartsRealData(node: {}, data: []): void;
-export declare function setInitConfData(data: object): void;
+export declare function setInitConfData(id: string, data: object): void;
 export declare function setTagIdData(data: any): [];
 export declare function setKpiAddrData(data: any): [];
 export declare function setAssetIdData(data: any): [];

package/core/src/utils/conversion.js

@@ -1,18 +1,12 @@
-import {syncMqttData} from '../store';
-import {
-    echartsRealDataPool,
-    selectRealDataPool,
-    echartsDataPool,
-    selectDataPool
-} from "../../../store";
-
+import {commonStore} from '../store';
 /**
  * 获取echarts和select实时数据
  * @param node 节点
  * @param data 实时数据
  */
 export function getEchartsRealData(node, data){
-    if(!selectRealDataPool[node.id]) {
+    const currentStore = commonStore[node.TID];
+    if(!currentStore.selectRealDataPool[node.id]) {
         const selectData = [];
         let currentData = null;
         data.map((item, index) => {
@@ -21,23 +15,23 @@ export function getEchartsRealData(node, data){
                 id: item.id,
                 name: item.aliasName
             });
-            echartsRealDataPool[item.id] = item;
+            currentStore.echartsRealDataPool[item.id] = item;
         });
-        echartsRealDataPool[node.id] = currentData;
-        selectRealDataPool[node.id] = selectData;
+        currentStore.echartsRealDataPool[node.id] = currentData;
+        currentStore.selectRealDataPool[node.id] = selectData;
     }else {
-        const selectId = echartsDataPool[node.id] && echartsDataPool[node.id].bindId;
-        const selected = selectId && selectDataPool[selectId] && selectDataPool[selectId].node.selected;
+        const selectId = currentStore.echartsDataPool[node.id] && currentStore.echartsDataPool[node.id].bindId;
+        const selected = selectId && currentStore.selectDataPool[selectId] && currentStore.selectDataPool[selectId].node.selected;
         if(selected && selected.id) {
             // 如有选中的数据
-            echartsRealDataPool[node.id] = echartsRealDataPool[selected.id];
+            currentStore.echartsRealDataPool[node.id] = currentStore.echartsRealDataPool[selected.id];
         }else {
-            echartsRealDataPool[node.id] = data[0];
+            currentStore.echartsRealDataPool[node.id] = data[0];
         }
     }
 }
-export function setInitConfData(data){
-    if(syncMqttData.initData[data.id]) return;
+export function setInitConfData(id, data){
+    if(commonStore[id].initConfNode[data.id]) return;
     const bindMqttNode = data.events.find((ev) => {return ev.type === 3});
     if(!bindMqttNode) return;
     const initNode = {
@@ -51,7 +45,7 @@ export function setInitConfData(data){
         leakageStart: data.leakageStart
     }
     if(data.name === 'echarts') initNode.data = data.data;
-    syncMqttData.initData[data.id] = initNode;
+    commonStore[id].initConfNode[data.id] = initNode;
 }
 export function setTagIdData(data) {
     return [{
@@ -111,7 +105,7 @@ export function setVarValueData(data) {
 export function setThreeCategoryIdData(pen, data) {
     let params = [];
     const hasThreeCategoryId = pen.data.find((tc) => {
-        return tc.key === 'threeCategoryId' && tc.value.includes(data.threeCategoryId);
+        return tc.key === 'threeCategoryId' && tc.value === data.threeCategoryId;
     });
     if(!hasThreeCategoryId) params = [{
         "key": "threeCategoryId",

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

@@ -1,6 +1,6 @@
 import {Node} from '../models';
 
-export declare function setEventListener(e: Event, node: Node): any;
+export declare function setEventListener(e: Event, TID: string, node: Node): any;
 export declare function mousMoveFun(type: string, data: any): object;
 export declare function mousDownFun(type: string, eventNode: object): object;
 export declare function omouseEventPrototDoWindowFn(eventNode: object, node: object): string;

package/core/src/utils/onmousevent.js

@@ -1,20 +1,19 @@
 import { ptInPolyXY } from './math';
 import { moveDataType, downDataType } from './construction';
 import { Node } from '../models';
-import {elementInteractivePoor} from '../../../store';
 import {elementType} from "../../../static";
 import {getSelectedData} from '../element';
+import {commonStore} from "../store";
 // 配置鼠标事件监听 监听样式 documentDefine
 // 凡是类名为documentDefine的Dom元素都自动注册下面的监听
-export function setEventListener(e) {
+export function setEventListener(e, TID) {
     e.preventDefault();
     const documentDefine = document.querySelector('.documentDefine');
     if(!documentDefine) return;
-    const currentNode = elementInteractivePoor.node; // 当前点击的元件节点数据
+    const currentNode = commonStore[TID].elementInteractivePoor.node; // 当前点击的元件节点数据
     if(currentNode && currentNode.name === elementType.select) {
         // select 下拉 option选中操作
         getSelectedData(e, currentNode);
-        //Store.set(`${currentNode.TID}-LT:render`, true);
     }
 }
 // 执行window函数
@@ -75,7 +74,7 @@ export function mousDownFun(type, eventNode) {
         params.eventType = downDataType.Tabswitch; // Tab切换
     }else if(action === 11) {
         params.eventType = downDataType.Formselect; // select下拉切换
-        params.staticType = eventNode.dcimStaticForType; // 1: 数据统计；2：数据展示
+        params.staticType = eventNode.dcimStaticForType; // 1: 数据统计；2：数据展示；3：显示隐藏
     }else {
         // action === 5 远程控制比较特殊，无论是否绑定远程控制事件，只要数据中有远程控制属性且值为0都会认定为远程控制
         params.eventType = downDataType.Target; // 链接跳转

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

@@ -1,7 +1,2 @@
-export declare function categoryDataParams(data: []): void;
-export declare function setParams(assetId: string): object;
-export declare function getParams(data: []): void;
-export declare function filterParams(node: any): void;
-export declare function getTagIdsForKpiAddrs(data: []): void;
-export declare function getVarValueIdsForVarData(data: []): void;
-export declare function renderForAssetPoperties(asset: any, data: []): void;
+export declare function getParams(id: string, data: []): void;
+export declare function filterParams(node: any): void;