dcim-topology2d 1.1.6 → 2.0.5

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

@@ -28,29 +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
-    ratioCord: {
-        ratio?: number;
-        scaleX?: number;
-        scaleY?: number;
-    },
+    monitorAlarm?:boolean; // 全局报警标记，代表正在访问的这个topology文件中是否有告警发生
     parentElem: HTMLElement
 }
-export interface mqttData {
-    data: null
-}
-export const syncMqttData: mqttData;
 // @ts-ignore
 export const createStore = () => {
     return {
@@ -68,17 +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,
-        ratioCord: {
-            ratio: 1,
-            scaleX: 1,
-            scaleY: 1
-        },
+        monitorAlarm: false,
         parentElem: null
     } as visualization2DStore;
 };
@@ -91,9 +130,9 @@ export const useStore = (id = 'default'): visualization2DStore => {
     }
     return commonStore[id];
 };
-
+export declare function clearElementDataPool(data: {}): void;
 // @ts-ignore
-export const clearStore = (store: visualization2DStore) => {
+export const clearStore = (store: visualization2DStore, del: string) => {
     store.data = {
         bkColor: '',
         bkImage: '',
@@ -115,15 +154,26 @@ export const clearStore = (store: visualization2DStore) => {
         },
         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.ratioCord = {
-        ratio: 1,
-        scaleX: 1,
-        scaleY: 1
-    }
+    store.monitorAlarm = false;
 };

package/core/src/store/data.js

@@ -13,10 +13,8 @@ import { default as mitt } from 'mitt';
 import { Lock } from '../models';
 import {DefalutOptions} from '../options';
 import {s8} from '../utils';
-import { commonStore } from './common'
-export const syncMqttData = {
-    data: null
-}
+import {commonStore} from './common'
+import {removeAllElement} from '../../../store';
 export var createStore = function () {
     return {
         id: '',
@@ -34,17 +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,
-        ratioCord: {
-            ratio: 1,
-            scaleX: 1,
-            scaleY: 1
-        },
+        monitorAlarm: false,// 全局报警标记，代表正在访问的这个topology文件中是否有告警发生
         parentElem: null
     };
 };
@@ -56,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 = {
@@ -72,15 +124,39 @@ export var clearStore = function (store, del) {
         },
         dataConstruct: {}
     };
-    store.pens = {};
+    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;
-    store.ratioCord = {
-        ratio: 1,
-        scaleX: 1,
-        scaleY: 1
-    };
-    syncMqttData.data = null;
-    if(del) delete commonStore[store.id];
+    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) {
+        delete commonStore[store.id];
+        removeAllElement();
+    }
 };

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

@@ -1,3 +1,6 @@
-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;
+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 setConnectionTagForConf(node: Node): void;

package/core/src/utils/assignment.js

@@ -1,38 +1,87 @@
 // 变量赋值操作
-import {syncMqttData} from '../store';
+import {commonStore} from '../store';
 import { setConfItemNode } from '../healps';
 import { EventAction } from '../models';
-export function setInitNodeDataValidat(node, TID) {
-    const syncData = syncMqttData.data;
+
+/**
+ * 在节点注册前初始化node数据
+ * @param node 节点数据
+ * @param TID 数据键
+ * @param type topology类型
+ * @param order 节点序列
+ */
+export function setInitNodeDataValidat(node, TID, type, order) {
+
+    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;
+
+    initDefaultValidat(node, syncData);
+
+    setDefaultNodeValidat(node, syncData);
+
     if (node.children && node.children.length) {
+
         node.children.map((_item) => {
-            node.TID = TID;
-            setDefaultColorValidat(node);
-            setDefaultNodeValidat(node, syncData);
+
+            setInitNodeDataValidat(_item, TID, type);
+
         })
-    }else {
-        node.TID = TID;
-        setDefaultColorValidat(node);
-        setDefaultNodeValidat(node, syncData);
+
     }
 }
-export function setDefaultColorValidat(node) {
+// 初始化默认节点值
+export function initDefaultValidat(node, retData) {
     node.defaultFillStyle = node.fillStyle;
     node.defaultFontColor = node.font.color;
     if (node.name === 'line') {
-        node.defaultStrokeStyle = node.font.color;
+        node.defaultStrokeStyle = node.strokeStyle;
+    }
+    // 变量类型数据展示，不需要实时更新
+    if(Array.isArray(node.data) && retData && retData.varData) {
+        let typeName = '';
+        let imgs = '';
+        const varData = retData.varData;
+        node.data.map((vd) => {
+            if(vd.key.includes('varValue') && varData[vd.value]){
+                const varNode = varData[vd.value];
+                const showType = varNode.showType ? parseInt(varNode.showType) : 1;
+                if(showType === 1 && varNode.value) typeName += typeName ? `,${varNode.value}` : varNode.value;
+                if(showType === 2 && varNode.value) console.log('显示图标>>>');
+                if(showType === 3 && varNode.value) imgs = `/dcim-api${varNode.value}`; //imgs += imgs ? `,${varData.value}` : varData.value;
+            }
+        });
+        if(typeName) node.text = typeName;
+        if(imgs) {
+            node.text = '';
+            node.image = imgs;
+            node.paddingBottom = 0;
+            node.paddingBottomNum = 0;
+            node.paddingLeft = 0;
+            node.paddingLeftNum = 0;
+            node.paddingRight = 0;
+            node.paddingRightNum = 0;
+            node.paddingTop = 0;
+            node.paddingTopNum = 0;
+        }
     }
 }
+// 初始化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;
@@ -49,14 +98,23 @@ export function setDefaultNodeValidat(node, retData) {
         })
         // console.log('定制函数=====')
         try {
-            const func = new Function('pen', 'params', dataValue.value)
-            func(node, JSON.stringify(retData))
+            const func = new Function('pen', 'params', dataValue.value);
+            const funcData = func(node, JSON.stringify(retData));
+            /**
+             * 此方式在九所的 服务器状态监测功能中用到
+             * 全局报警标记，代表正在访问的这个topology文件中是否有告警发生
+             * 需要注意：自定义函数中要通过 return {monitorAlarm: boolean}的格式将元件告警状态返回
+             */
+            if(funcData && funcData.monitorAlarm) commonStore[node.TID].monitorAlarm = true;
         }catch (e) {
-            console.log(`自定义函数 ${node.id} 出错>>>`, e);
+            console.log(`自定义函数出错>>>`,);
+            console.log(`目标元件：${node.id}>>>`,);
+            console.log(`目标元件方位：X->${node.rect.x}，Y->${node.rect.y}>>>`,);
         }
     } 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++) {
@@ -66,4 +124,45 @@ export function setDefaultNodeValidat(node, retData) {
         }
     }
     //return node;
-} 
+}
+
+/**
+ * 配置与元件关联的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

@@ -12,20 +12,18 @@ export interface MoveDataType {
     HoverAnchors?: string | number;
     Rotate?: string | number;
 }
-export const moveDataType: MoveDataType;
 export interface DownDataType {
     Window?: string | number;
     Target?: string | number;
     Showhide?: string | number;
     Tabswitch?: string | number;
+    Formselect?: string | number;
 }
-export const downDataType: DownDataType;
 export interface PreviewType {
     Dcim?: string;
     Topology?: string;
     Logo?: string;
 }
-export const previewType: PreviewType;
 export interface AnimateType {
   LeftFlow?: string;
   RightFlow?: string;
@@ -38,4 +36,13 @@ export interface AnimateType {
   Show?: string;
   Rotate?: string;
 }
+export interface SelectStaticType {
+    static?:number;
+    dataShow?:number;
+    visible?:number;
+}
+export const moveDataType: MoveDataType;
+export const downDataType: DownDataType;
+export const previewType: PreviewType;
 export const animateType: AnimateType;
+export const selectStaticType: SelectStaticType;

package/core/src/utils/construction.js

@@ -15,7 +15,8 @@ export const downDataType = {
     Window: 'window',
     Target: 'target',
     Showhide: 'showhide',
-    Tabswitch: 'Tabswitch'
+    Tabswitch: 'Tabswitch',
+    Formselect: 'Formselect'
 };
 export const previewType = {
     Dcim: 'dcim',
@@ -33,4 +34,9 @@ export const animateType = {
   Error: 'error',
   Show: 'show',
   Rotate: 'rotate'
+};
+export const selectStaticType = {
+    static: 1,
+    dataShow: 2,
+    visible: 3
 };

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

@@ -1,7 +1,10 @@
 import {Node} from "../models";
 
+export declare function getEchartsRealData(node: {}, data: []): 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): [];
 export declare function setAreaIdData(data: any): [];
+export declare function setVarValueData(data: any): [];
 export declare function setThreeCategoryIdData(pen: Node, data: any): [];

package/core/src/utils/conversion.js

@@ -1,3 +1,52 @@
+import {commonStore} from '../store';
+/**
+ * 获取echarts和select实时数据
+ * @param node 节点
+ * @param data 实时数据
+ */
+export function getEchartsRealData(node, data){
+    const currentStore = commonStore[node.TID];
+    if(!currentStore.selectRealDataPool[node.id]) {
+        const selectData = [];
+        let currentData = null;
+        data.map((item, index) => {
+            if(index === 0) currentData = item;
+            selectData.push({
+                id: item.id,
+                name: item.aliasName
+            });
+            currentStore.echartsRealDataPool[item.id] = item;
+        });
+        currentStore.echartsRealDataPool[node.id] = currentData;
+        currentStore.selectRealDataPool[node.id] = selectData;
+    }else {
+        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) {
+            // 如有选中的数据
+            currentStore.echartsRealDataPool[node.id] = currentStore.echartsRealDataPool[selected.id];
+        }else {
+            currentStore.echartsRealDataPool[node.id] = data[0];
+        }
+    }
+}
+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 = {
+        text: data.text,
+        font: data.font,
+        strokeStyle: data.strokeStyle,
+        fillStyle: data.fillStyle,
+        image: data.image,
+        leakageEnd: data.leakageEnd,
+        leakageFillStyle: data.leakageFillStyle,
+        leakageStart: data.leakageStart
+    }
+    if(data.name === 'echarts') initNode.data = data.data;
+    commonStore[id].initConfNode[data.id] = initNode;
+}
 export function setTagIdData(data) {
     return [{
         "key": "tagId",
@@ -41,10 +90,22 @@ export function setAreaIdData(data) {
         "value": data.name
     }];
 }
+export function setVarValueData(data) {
+    return [{
+        "key": "varId",
+        "value": data.id
+    },{
+        "key": "varValue",
+        "value": data.value
+    }, {
+        "key": "变量类型名称",
+        "value": data.name
+    }];
+}
 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/index.d.ts

@@ -1,5 +1,4 @@
 export * from './canvas';
-export * from './dom';
 export * from './math';
 export * from './rect';
 export * from './uuid';
@@ -8,3 +7,4 @@ export * from './construction';
 export * from './onmousevent';
 export * from './conversion';
 export * from './assignment';
+export * from './params';

package/core/src/utils/index.js

@@ -1,5 +1,4 @@
 export * from './canvas';
-export * from './dom';
 export * from './math';
 export * from './rect';
 export * from './uuid';
@@ -8,4 +7,5 @@ export * from './construction';
 export * from './onmousevent';
 export * from './conversion';
 export * from './assignment';
+export * from './params';
 //# sourceMappingURL=index.js.map

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

@@ -1,3 +1,4 @@
 export declare function pSBC(p: any, c0: any, c1?: any, l?: any): string;
 export declare function abs(num: number, percent: number | string): number;
 export declare function ptInPolyXY(pt: any, poly: []): boolean;
+export declare function jsonLength(obj: {}): number;

package/core/src/utils/math.js

@@ -115,4 +115,7 @@ export function ptInPolyXY(pt, poly) {
     }
     return c;
 }
+export function jsonLength(obj) {
+    return Object.keys(obj).length;
+}
 //# sourceMappingURL=math.js.map

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

@@ -1,3 +1,6 @@
+import {Node} from '../models';
+
+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;